/* Szablon devpage „Gazeta” – układ serwisu informacyjnego w stylu PressPulse. Własny kod, czcionki systemowe (bez Google Fonts – RODO).
   Przebudowa pod inną domenę: w polu „własny CSS” domeny wystarczy nadpisać tokeny, np. <style>:root{--accent:#0a66c2}</style>. */
:root {
  --accent: #ce490a;      /* pomarańcz wzoru; biały tekst na nim 4,6:1, jako tekst na bieli też 4,6:1 */
  --ink: #232323;         /* tekst i ciemne pasma – jak wzór */
  --dark: #191c20;        /* tło ciemnej sekcji */
  --muted: #666;          /* meta; #777 wzoru daje 4,48:1 – minimalnie poniżej progu, więc przyciemnione */
  --line: #e5e5e5;
  --soft: #f6f6f6;
  --bg: #fff;
  --wrap: 1432px;         /* 1400 px treści jak we wzorze + marginesy */
  --sec-pad: 32px;
  --gap: 24px;
  --side: 320px;
  --head: "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --body: "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--head); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.gz-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.gz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gz-cat { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--body); color: var(--ink); }
.gz-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.gz-meta { display: block; font: 400 12px/1.4 var(--body); color: var(--muted); margin-top: 6px; }
.gz-img { display: block; overflow: hidden; background: var(--soft); }
.gz-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
a:hover .gz-img img, .gz-img:hover img { transform: scale(1.04); }

/* Nagłówek */
.gz-top { background: #111; color: #ddd; font: 400 12px/1 var(--body); }
.gz-top .gz-wrap { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 16px; }
.gz-top ul { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.gz-top a { color: #ddd; }
.gz-top a:hover { color: #fff; }
.gz-head { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.gz-head .gz-wrap { display: flex; align-items: center; gap: 28px; min-height: 60px; }
.gz-logo img { max-height: 44px; width: auto; }
.gz-nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gz-nav li a { display: block; padding: 7px 11px; border-radius: 3px; font: 500 15px/22px var(--body); white-space: nowrap; }
.gz-nav li:first-child a { background: #efefef; }  /* jak „Home” we wzorze */
.gz-nav li a:hover { color: var(--ink); background: #efefef; }
.gz-burger { display: none; }
.gz-burger-btn { display: none; cursor: pointer; font: 600 14px/1 var(--body); padding: 14px 0; min-height: 44px; margin-left: auto; }
/* Pasek działów pod menu – drobne linki z kreską między nimi */
.gz-sub { border-bottom: 1px solid var(--line); }
.gz-sub .gz-wrap { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.gz-sub .gz-wrap::before { content: "↗"; font-size: 14px; color: #555; }
.gz-sub ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.gz-sub li a { display: block; padding: 0 14px; font: 400 13px/18px var(--body); color: #333; }
.gz-sub li + li a { border-left: 1px solid var(--line); }
.gz-sub li:has(> a[href="/"]) { display: none; }  /* „Start” jest już w menu głównym */
.gz-sub li:has(> a[href="/"]) + li a { border-left: 0; }
.gz-sub li a:hover { color: var(--accent); }
.gz-sub:not(:has(a)) { display: none; }
.gz-banner { max-width: var(--wrap); margin: 16px auto; padding: 0 16px; text-align: center; }
.gz-banner:empty, .gz-banner:not(:has(*)) { display: none; }
.gz-banner img { margin: 0 auto; }

/* Strona główna: czołówka */
.gz-hero { max-width: var(--wrap); margin: 20px auto 0; padding: 0 16px 28px; display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 40px; border-bottom: 1px solid var(--line); }
.gz-hero a:hover { color: inherit; }
.gz-hero a:hover h2, .gz-hero a:hover h3, .gz-hero a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gz-hero__main { display: grid; grid-template-columns: minmax(0, .66fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.gz-hero__main .gz-img { order: 2; aspect-ratio: 57 / 40; }
.gz-hero__main .gz-hero__body { order: 1; }
.gz-hero__main .gz-cat { font-size: 15px; font-weight: 500; gap: 8px; }
.gz-hero__main .gz-cat::before { width: 13px; height: 13px; }
.gz-hero__main h2 { font-size: clamp(30px, 2.5vw, 38px); line-height: 1.18; margin: 14px 0 16px; }  /* polskie tytuły są 2× dłuższe niż we wzorze */
.gz-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.6; color: #555; }
.gz-desc:empty { display: none; }
.gz-hero__main .gz-meta { margin-top: 18px; font-size: 13px; }
/* Rząd 4 wpisów pod czołówką (Na czasie): strzałka, pogrubiony tytuł, autor i data */
.gz-trend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.gz-trend:not(:has(a)) { display: none; }
.gz-tr:nth-of-type(n+5) { display: none; }  /* renderer daje do 10 pozycji – wzór pokazuje 4 */
.gz-tr b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 700 15px/1.4 var(--head); }
.gz-tr b::before { content: "↗ "; }
.gz-hero__side { display: grid; gap: 0; align-content: start; }
.gz-hs { display: grid; grid-template-columns: minmax(0, 1fr) 125px; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.gz-hs:first-child { padding-top: 0; }
.gz-hs:last-child { border-bottom: 0; }
.gz-hs h3 { font-size: 15px; line-height: 1.35; margin-top: 4px; }
.gz-hs .gz-img { aspect-ratio: 4 / 3; }
.gz-cat--plain { font-weight: 400; }
.gz-cat--plain::before { display: none; }

/* Układ treść + panel boczny */
.gz-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 40px; margin-top: var(--sec-pad); margin-bottom: var(--sec-pad); }
.gz-main > main { min-width: 0; }
.gz-aside { min-width: 0; display: flex; flex-direction: column; gap: var(--sec-pad); }
/* Na głównej, jak we wzorze, sekcje idą na pełną szerokość, a panel boczny schodzi pod nie jako rząd widżetów */
body:has(.gz-hero) .gz-main { display: block; }
body:has(.gz-hero) .gz-aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--sec-pad); padding-top: var(--sec-pad); border-top: 1px solid var(--line); }

/* Sekcje kategorii */
.gz-sec + .gz-sec { margin-top: var(--sec-pad); padding-top: var(--sec-pad); border-top: 1px solid var(--line); }
.gz-sec__title { font: 700 22px/1.2 var(--head); margin: 0 0 16px; }
.gz-sec__title a::after { content: " ›"; color: var(--accent); }
.gz-sec__grid { display: grid; gap: var(--gap); align-items: start; }
.gz-sec__grid:has(> .gz-card) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gz-sec__grid:has(> .gz-ov) { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.gz-sec__grid:has(> .gz-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 0; }

/* Karta (siatka 4 kolumn) */
.gz-card .gz-img { aspect-ratio: 5 / 3; margin-bottom: 10px; }
.gz-card h3 { font-size: 16px; line-height: 1.35; margin-top: 4px; }

/* Kafel z tytułem na zdjęciu (sekcje „własne”) */
.gz-ov { position: relative; display: block; min-height: 340px; overflow: hidden; background: var(--dark); color: #fff; }
.gz-ov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gz-ov:hover img { transform: scale(1.04); }
.gz-ov::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%); }
.gz-ov__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; z-index: 1; }
.gz-ov .gz-cat, .gz-ov .gz-meta { color: #fff; }
.gz-ov h3 { font-size: 19px; line-height: 1.25; margin-top: 6px; }
.gz-ov p { display: none; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #eee; }
.gz-ov:first-child h3 { font-size: 30px; }
.gz-ov:first-child p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gz-ov:hover { color: #fff; }

/* Ciemne pasmo (sekcje „suwak”) */
.gz-sec:has(.gz-dark) { background: var(--dark); color: #fff; padding: 24px; border-top: 0; }
.gz-sec:has(.gz-dark) + .gz-sec { border-top: 0; }
.gz-sec:has(.gz-dark) .gz-sec__title a:hover { color: #fff; }
.gz-dark { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.gz-tile .gz-img { aspect-ratio: 5 / 3; margin-bottom: 10px; }
.gz-tile h3 { font-size: 16px; line-height: 1.35; margin-top: 4px; }
.gz-tile .gz-cat, .gz-tile .gz-meta { color: #ccc; }
.gz-tile:hover { color: #fff; }
.gz-tile:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Lista: tekst z lewej, miniatura z prawej (sekcje „pionowe”) */
.gz-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.gz-row h3 { font-size: 17px; line-height: 1.35; margin-top: 4px; }
.gz-row p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gz-row .gz-img { aspect-ratio: 4 / 3; grid-column: 2; grid-row: 1; }

/* Panel boczny */
.gz-widget__title { font: 700 18px/1.2 var(--head); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.gz-widget ul { list-style: none; margin: 0; padding: 0; }
.gz-widget li + li { margin-top: 14px; }
.gz-witem { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.gz-witem img { width: 96px; height: 72px; object-fit: cover; }
.gz-witem b, .gz-wnum b { font: 700 14px/1.35 var(--head); }
.gz-widget ul:has(.gz-wnum) { counter-reset: gz; }
.gz-wnum { counter-increment: gz; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.gz-wnum::before { content: counter(gz); font: 700 24px/1 var(--head); color: var(--accent); }
.gz-wbig { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: #fff; }
.gz-wbig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gz-wbig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.1) 70%); }
.gz-wbig b { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; font: 700 16px/1.3 var(--head); }
.gz-wbig:hover { color: #fff; }

/* Artykuł */
.gz-ahead { margin: 0 0 28px; }
.gz-article .gz-banner { padding: 0; }
.gz-ahead h1 { font-size: 40px; line-height: 1.18; margin: 10px 0 12px; }
.gz-ahead .gz-meta { font-size: 13px; }
.gz-ahead .gz-img { margin-top: 20px; aspect-ratio: 16 / 10; }
body:has(.gz-ahead) .gz-main { margin-top: 24px; }
.gz-content { font-size: 17px; line-height: 1.75; }
.gz-content > p:first-of-type::first-letter { float: left; font: 700 58px/.9 var(--head); margin: 6px 10px 0 0; color: var(--ink); }
.gz-content h2 { font-size: 26px; line-height: 1.25; margin: 32px 0 12px; }
.gz-content h3 { font-size: 21px; line-height: 1.3; margin: 26px 0 10px; }
.gz-content p { margin: 0 0 18px; }
.gz-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* Zdjęcia w treści: obok tekstu (opływane z prawej), jak w magazynie; na telefonie pod tekstem na pełną szerokość */
/* !important: stare wpisy mają rozmiar wpisany w style="" obrazka */
.gz-content img { float: right; width: 40% !important; max-width: 380px; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; margin: 6px 0 16px 28px; }
.gz-content :is(h1, h2, h3, h4) img { float: none; display: block; margin: 0 0 12px; }
/* Oznaczenie wpisu sponsorowanego („Reklama”): devpage wstawia je jako obrazek bezpośrednio w treści, zawsze na końcu */
.gz-content > img { float: none; clear: both; display: block; width: auto !important; height: auto !important; max-height: 30px; max-width: 120px; aspect-ratio: auto; object-fit: contain; margin: 24px 0 0; }
.gz-content::after { content: ""; display: block; clear: both; }
.gz-content ul, .gz-content ol { padding-left: 22px; margin: 0 0 18px; }
.gz-content li + li { margin-top: 6px; }
.gz-content blockquote { margin: 28px 0; padding: 0 0 0 0; text-align: center; font: 700 22px/1.45 var(--head); }
.gz-content blockquote::before { content: "“"; display: block; font: 700 64px/.6 Georgia, serif; color: var(--accent); margin-bottom: 8px; }
.gz-content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; display: block; overflow-x: auto; }
.gz-content th, .gz-content td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.gz-content th { background: var(--soft); }
.gz-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 32px 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gz-pn a { display: block; font: 700 15px/1.35 var(--head); }
.gz-pn span { display: block; font: 400 12px/1.4 var(--body); color: var(--muted); margin-bottom: 4px; }
.gz-pn__next { text-align: right; grid-column: 2; }
.gz-related .gz-sec__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Stopka */
.gz-foot { border-top: 1px solid var(--line); margin-top: 16px; background: var(--bg); }
.gz-foot > .gz-wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-top: 40px; padding-bottom: 32px; }
.gz-flogo img { max-height: 44px; width: auto; margin-bottom: 14px; }
.gz-foot p { margin: 0; font-size: 14px; line-height: 1.6; color: #444; }
.gz-ftitle { font: 700 16px/1.2 var(--head) !important; color: var(--ink) !important; margin: 0 0 14px !important; }
.gz-foot ul { list-style: none; margin: 0; padding: 0; }
.gz-foot li + li { margin-top: 12px; }
.gz-fitem { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; }
.gz-fitem img { width: 64px; height: 50px; object-fit: cover; }
.gz-fitem b { display: block; font: 600 13px/1.35 var(--head); }
.gz-fitem small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.gz-fcats { display: flex; flex-wrap: wrap; gap: 8px; }
.gz-fcats li + li { margin-top: 0; }
.gz-fcats a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; font-size: 13px; }
.gz-fcats a:hover { border-color: var(--accent); }
.gz-copy { border-top: 1px solid var(--line); padding: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; font-size: 12px; color: var(--muted); }
.gz-copy ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.gz-copy a:hover { color: var(--accent); }

@media (max-width: 1100px) {
  .gz-hero { grid-template-columns: 1fr; }
  .gz-hero__side { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .gz-hs:first-child { padding-top: 12px; }
  .gz-hs:last-child { border-bottom: 1px solid var(--line); }
  .gz-trend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gz-sec__grid:has(> .gz-card), .gz-dark { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gz-sec__grid:has(> .gz-ov) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gz-ov:first-child { grid-column: 1 / -1; }
  .gz-foot > .gz-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  .gz-main { grid-template-columns: 1fr; }
  body:has(.gz-hero) .gz-aside { grid-template-columns: 1fr 1fr; }
  .gz-burger-btn { display: block; }
  .gz-head .gz-wrap { flex-wrap: wrap; gap: 0 16px; }
  .gz-nav { order: 3; width: 100%; display: none; }
  .gz-head:has(.gz-burger:checked) .gz-nav { display: block; }
  .gz-nav ul { flex-direction: column; padding-bottom: 8px; }
  .gz-nav li a { padding: 12px 0; border-top: 1px solid var(--line); }
  .gz-sub .gz-wrap { overflow-x: auto; scrollbar-width: none; }
  .gz-sub ul { flex-wrap: nowrap; white-space: nowrap; }
  .gz-nav li a { padding: 12px 0; border-radius: 0; background: none !important; }
}
@media (max-width: 767px) {
  :root { --sec-pad: 24px; }
  .gz-hero__main { grid-template-columns: 1fr; }
  .gz-hero__main .gz-img { order: 0; }
  .gz-hero__main h2, .gz-ahead h1 { font-size: 27px; }
  .gz-hero__side, .gz-sec__grid:has(> .gz-row), body:has(.gz-hero) .gz-aside, .gz-related .gz-sec__grid { grid-template-columns: 1fr; }
  .gz-sec__grid:has(> .gz-card), .gz-dark { grid-template-columns: 1fr 1fr; gap: 16px; }
  .gz-sec__grid:has(> .gz-ov) { grid-template-columns: 1fr; }
  .gz-ov { min-height: 260px; }
  .gz-ov:first-child h3 { font-size: 23px; }
  .gz-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .gz-content { font-size: 16px; }
  .gz-content img { float: none; width: 100% !important; max-width: none; margin: 16px 0; }
  .gz-content > img { width: auto !important; max-width: 120px; margin: 24px 0 0; }
  .gz-foot > .gz-wrap { grid-template-columns: 1fr; }
  .gz-top { display: none; }
}
@media (max-width: 479px) {
  .gz-sec__grid:has(> .gz-card), .gz-dark { grid-template-columns: 1fr; }
  .gz-pn { grid-template-columns: 1fr; }
  .gz-pn__next { grid-column: 1; text-align: left; }
}