/* ---------------------------------------------------------------
   Silver TV – centrum prasowe (/prasa/)
   Styl zgodny z index.html: te same zmienne marki, Open Sans,
   te same przyciski i proporcje. Osobny plik, bo nie ruszamy
   krytycznego CSS strony głównej (45 KB inline).
   --------------------------------------------------------------- */

:root{
  --navy:#023850;
  --navy-2:#012A3D;
  --navy-3:#01465F;
  --amber:#F9A00B;
  --amber-d:#E08E00;
  --ink:#023850;
  --paper:#FFFFFF;
  --mist:#EDF0F2;
  --muted:#5E7078;
  --muted-2:#A9BCC4;
  --line:#DCE0E3;
  --line-d:rgba(255,255,255,.14);
  --maxw:1180px;
  --ring:0 0 0 3px rgba(249,160,11,.55);
  --shadow-card:0 1px 2px rgba(2,56,80,.06), 0 12px 30px -22px rgba(2,56,80,.5);
  --shadow-hi:0 30px 60px -30px rgba(2,56,80,.55);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:106.25%;-webkit-text-size-adjust:100%}
/* height:auto jest konieczne: atrybuty width/height w HTML rezerwuja miejsce
   (brak przeskoku przy ladowaniu), ale bez tego max-width zwezalo obraz
   przy zachowanej wysokosci z atrybutu, czyli deformowalo go */
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}

body{
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}

.inset{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(22px,5vw,64px)}
.bleed{width:100%}
.up{text-transform:uppercase}
.display{font-weight:800;letter-spacing:-.018em;line-height:1.06;text-wrap:balance}
.eyebrow{font-size:clamp(.74rem,1vw,.84rem);letter-spacing:.26em;font-weight:700;text-transform:uppercase;line-height:1.3}

a.inline{color:var(--amber-d);text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:2px}
a.inline:hover{color:var(--navy)}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--amber);color:var(--navy);
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:12px 20px;border-radius:8px;transition:top .2s}
.skip:focus{top:16px}

/* ---------- przyciski (1:1 z index.html) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:17px 34px;border-radius:8px;font-size:clamp(.88rem,1.05vw,1.02rem);min-height:56px;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),background .2s,color .2s,box-shadow .2s,border-color .2s}
.btn-amber{background:var(--amber);color:var(--navy);box-shadow:0 14px 30px -16px rgba(249,160,11,.9)}
.btn-amber:hover{background:var(--amber-d);transform:translateY(-2px);color:var(--navy)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 14px 30px -18px rgba(2,56,80,.9)}
.btn-navy:hover{background:var(--navy-2);color:#fff;transform:translateY(-2px)}
.btn-outline{border:2px solid var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
a.btn:focus-visible,button:focus-visible{box-shadow:0 0 0 3px var(--navy),0 0 0 6px var(--amber)}

/* ---------- header ---------- */
.hdr{background:rgba(2,56,80,.94);backdrop-filter:saturate(140%) blur(10px);color:#fff;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line-d)}
.hdr .inset{display:flex;align-items:center;gap:24px;min-height:84px;flex-wrap:wrap}
/* flex:none + max-width:none: bez tego wąski ekran zgniatał logo do kilkunastu
   pikseli szerokości przy zachowanej wysokości, czyli deformował je */
.hdr .logo{display:flex;align-items:center;gap:12px;flex:none}
.hdr .logo img{height:40px;width:auto;max-width:none;flex:none}
.hdr nav{display:flex;gap:clamp(14px,1.7vw,28px);margin-left:auto;align-items:center;flex-wrap:wrap}
.hdr nav a{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;color:#dfe8ec;
  padding:8px 2px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.hdr nav a:hover,.hdr nav a[aria-current="page"]{color:#fff;border-color:var(--amber)}

/* ---------- nagłówek strony (granatowy) ---------- */
.phead{background:
    radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.6px) 0 0/30px 30px,
    radial-gradient(120% 120% at 88% -12%,rgba(249,160,11,.14),transparent 46%),
    radial-gradient(120% 120% at 85% -10%,#02455f,var(--navy) 62%);
  color:#fff}
.phead .inset{padding-block:clamp(48px,5.4vw,92px)}
.phead .eyebrow{color:var(--amber)}
.phead h1{font-size:clamp(2.1rem,4.8vw,3.9rem);margin:18px 0 20px;letter-spacing:-.022em}
.phead .lead{font-size:clamp(1.02rem,1.4vw,1.24rem);color:#e7eef1;max-width:62ch;font-weight:500}
.phead .meta{display:flex;gap:12px 26px;flex-wrap:wrap;align-items:center;margin-top:26px;font-size:.86rem;color:var(--muted-2)}
.phead .meta time{font-weight:700;color:#fff}

/* ---------- ścieżka powrotu ---------- */
.crumb{background:var(--navy-2);color:var(--muted-2);border-bottom:1px solid var(--line-d)}
.crumb .inset{padding-block:14px;font-size:.84rem;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumb a{color:#cde0e7;font-weight:600}
.crumb a:hover{color:var(--amber)}
.crumb span[aria-hidden]{opacity:.5}

/* ---------- sekcje ---------- */
.sec{padding-block:clamp(48px,5vw,86px)}
.sec-mist{background:var(--mist);border-top:1px solid #e3e7ea;border-bottom:1px solid #e3e7ea}
.sec-navy{background:
    radial-gradient(rgba(255,255,255,.038) 1.2px,transparent 1.6px) 0 0/32px 32px,
    var(--navy);
  color:#fff}
.sec-head{margin-bottom:clamp(26px,3vw,44px)}
.sec-head .eyebrow{color:var(--amber-d);display:block;margin-bottom:14px}
.sec-navy .sec-head .eyebrow{color:var(--amber)}
.sec h2{font-size:clamp(1.5rem,3.1vw,2.4rem);letter-spacing:-.018em}

/* ---------- treść wpisu ----------
   Kolumna tekstu zostaje wąska (74ch to komfort czytania), ale zdjęcia
   dostają pełną szerokość sekcji: w kolumnie tekstu były duszone do ~719 px. */
.body{max-width:none}
/* 880 px na życzenie właściciela, żeby kolumna tekstu nie odstawała
   od grafik na 1052 px (decyzja z 2026-08-04) */
.body>p,.body>h2,.body>h3,.body>ul,.body>.note,.body>.corp{max-width:880px}
.body p{margin-bottom:1.15em}
.body p:last-child{margin-bottom:0}
.body h2{font-size:clamp(1.22rem,2.1vw,1.6rem);font-weight:800;letter-spacing:-.012em;
  margin:2em 0 .6em;line-height:1.25}
.body h2:first-child{margin-top:0}
.body ul{margin:0 0 1.15em;padding-left:1.35em}
.body li{margin-bottom:.5em}
.body strong{font-weight:700}
.body figure{margin:2.2em 0;width:100%}
.body figure img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-card)}
.body figcaption{margin-top:12px;font-size:.86rem;color:var(--muted);max-width:880px}
.body .note{border-left:4px solid var(--line);padding:2px 0 2px 20px;color:var(--muted);font-size:.94rem}

/* ---------- blok „do wykorzystania w publikacji” ---------- */
.presskit{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow-card)}
.presskit .kicker{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.presskit .kicker .eyebrow{color:var(--amber-d)}
.presskit .quote{font-size:1.02rem;line-height:1.68;color:var(--ink)}
.presskit .quote p{margin-bottom:.9em}
.presskit .quote p:last-child{margin-bottom:0}
.copybtn{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--navy);background:#fff;color:var(--navy);
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;padding:12px 20px;border-radius:8px;
  transition:background .2s,color .2s,transform .18s}
.copybtn:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.copybtn[data-done="1"]{background:var(--amber);border-color:var(--amber);color:var(--navy)}
.copyhint{margin-top:14px;font-size:.82rem;color:var(--muted)}

/* ---------- materiały do pobrania ---------- */
.dl{display:flex;flex-wrap:wrap;gap:12px}
.dl a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:16px 22px;
  font-weight:700;color:var(--navy);background:#fff;box-shadow:var(--shadow-card);
  transition:border-color .2s,transform .18s,box-shadow .2s}
.dl a:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:var(--shadow-hi)}
.dl a .sz{font-weight:600;color:var(--muted);font-size:.84rem}
.rights{margin-top:20px;font-size:.86rem;color:var(--muted);max-width:70ch}

/* górna granica 460 px: pliki miniatur mają 800 px, przy szerszej karcie
   byłyby skalowane w górę i traciły ostrość */
.assetgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,460px));gap:22px;margin-bottom:26px;
  justify-content:start;align-items:start}
.assetgrid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)}
.assetgrid img{aspect-ratio:16/9;object-fit:cover;width:100%}
.assetgrid figcaption{padding:14px 18px;font-size:.86rem;color:var(--muted)}

/* ---------- lista wpisów ---------- */
.postlist{display:grid;gap:26px}
/* Kolumna miniatury szeroka na 440 px i kadr wymuszony na 16:9, czyli
   dokładnie proporcje plików (1600x900). Wcześniej wąska kolumna dawała
   albo ucięte logo (cover), albo 45% pustego tła (contain). */
.post{display:grid;grid-template-columns:440px 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s,border-color .2s;align-items:stretch}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-hi);border-color:var(--amber)}
/* tło kolumny na pełną wysokość karty (inaczej pod miniaturą zostaje biały
   pasek, bo o wysokości karty decyduje tekst), obraz w proporcji z pliku */
.post .thumb{background:var(--navy);align-self:stretch;width:100%}
.post .thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post .thumb--plain{display:grid;place-items:center;padding:24px;background:
    radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.6px) 0 0/26px 26px,var(--navy)}
.post .thumb--plain img{width:min(200px,74%);height:auto;object-fit:contain}
.post .txt{padding:clamp(22px,2.4vw,32px)}
.post .date{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.post .date time{font-weight:700;font-size:.86rem;color:var(--muted)}
.post .tag{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  background:var(--mist);color:var(--navy);padding:5px 11px;border-radius:999px}
.post .tag--statement{background:var(--navy);color:#fff}
.post h2{font-size:clamp(1.18rem,2.1vw,1.62rem);font-weight:800;letter-spacing:-.014em;line-height:1.24;margin-bottom:10px}
.post p{color:var(--muted);max-width:70ch}
.post .more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:.8rem;color:var(--amber-d)}
.post:hover .more{color:var(--navy)}

/* ---------- kontakt ---------- */
.cinfo{background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:16px;padding:8px 24px;max-width:760px}
.cinfo .row{display:flex;justify-content:space-between;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-d)}
.cinfo .row:last-child{border-bottom:0}
.cinfo .row b{text-transform:uppercase;letter-spacing:.04em;font-size:.86rem}
.cinfo .row span{color:var(--muted-2);text-align:right}
.cinfo .row a{color:var(--amber);font-weight:700}
.cinfo .row a:hover{color:#fff}

/* ---------- nawigacja między wpisami ---------- */
.postnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px}
.postnav a{border:1px solid var(--line);border-radius:14px;padding:20px 24px;background:#fff;
  box-shadow:var(--shadow-card);transition:border-color .2s,transform .18s}
.postnav a:hover{border-color:var(--amber);transform:translateY(-3px)}
.postnav .eyebrow{color:var(--muted);display:block;margin-bottom:8px}
.postnav b{font-weight:800;color:var(--navy);line-height:1.3;display:block}

/* ---------- stopka ---------- */
.ftr{background:var(--navy);color:var(--muted-2)}
.ftr .inset{padding-block:clamp(38px,3.6vw,58px);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.ftr nav{display:flex;gap:clamp(14px,1.6vw,28px);flex-wrap:wrap}
.ftr nav a{text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.85rem;color:#cde0e7;
  padding:4px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.ftr nav a:hover{color:var(--amber);border-color:var(--amber)}
.ftr .brand{flex:none}
.ftr .brand img{height:34px;width:auto;max-width:none;flex:none}
.ftr .copy{width:100%;border-top:1px solid var(--line-d);padding-top:20px;margin-top:4px;font-size:.82rem;
  color:#8fa6b0;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;align-items:center}
.ftr .foot-legal{display:inline-flex;gap:18px;flex-wrap:wrap}
.ftr .foot-legal a{color:#cde0e7;font-weight:600}
.ftr .foot-legal a:hover{color:var(--amber)}

/* ---------- dane spółki pod oświadczeniem ---------- */
.corp{font-size:.84rem;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:34px;max-width:74ch}

/* ---------- responsywność ---------- */
@media (max-width:1080px){
  /* przy węższym ekranie kolumna 440 px zabierałaby zbyt wiele miejsca tekstowi */
  .post{grid-template-columns:minmax(200px,38%) 1fr}
}
@media (max-width:900px){
  /* jedna kolumna: miniatura nad tekstem, nadal w proporcji 16:9 z pliku */
  .post{grid-template-columns:1fr}
  .hdr nav a{font-size:.82rem}
}
@media (max-width:620px){
  /* logo w pierwszym rzędzie, nawigacja pod nim: przy czterech pozycjach
     w jednym rzędzie brakowało miejsca i header rozjeżdżał się w pionie */
  .hdr .inset{min-height:0;gap:10px;padding-block:12px}
  .hdr .logo{width:100%}
  .hdr .logo img{height:32px}
  .hdr nav{margin-left:0;gap:16px;row-gap:6px}
  .hdr nav a{font-size:.74rem;letter-spacing:.04em;padding:4px 0}
  .cinfo .row{flex-direction:column;gap:4px}
  .cinfo .row span{text-align:left}
  .ftr .copy{flex-direction:column;align-items:flex-start}
}

@media print{
  .hdr,.crumb,.ftr,.presskit .copybtn,.postnav,.dl{display:none}
  .phead{background:none;color:#000}
  .phead .lead,.phead .meta{color:#000}
  body{font-size:11pt}
}