/* ============================================================
   Duma Pomorza — broadsheet football-news design system
   Palette: navy (granat) + claret (bordo) + brass + paper
   Type: Oswald (display, condensed) + Mulish (body)
   Archetype: matchday broadsheet (NOT hero + 3-card-grid)
   ============================================================ */

/* ---- self-hosted fonts (variable; latin + latin-ext for Polish glyphs) ---- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/oswald-latinext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/mulish-latinext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/mulish-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Mulish';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/mulish-italic-latinext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Mulish';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/mulish-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* Palette PRESERVED from the live site: cyan #00B5C0 accent on white/light, dark text. */
  --navy:#0C1923;        /* dark slate — headings / dark surfaces (from live palette) */
  --navy-2:#0A141D;
  --claret:#00B5C0;      /* CYAN accent — links, kickers, active states (the site identity) */
  --claret-2:#00939C;
  --brass:#00B5C0;       /* accent ticks/bars — same cyan for a unified identity */
  --brass-2:#00939C;
  --paper:#FFFFFF;       /* white page background */
  --paper-2:#F2F4F5;     /* light gray surface */
  --ink:#1B1B1B;
  --ink-soft:#5C6469;
  --line:#E2E6E8;
  --sea:#7FD6DC;         /* light cyan for dark footer links */
  --maxw:74rem;
  --gap:clamp(1.1rem,2.4vw,2rem);
  --ff-display:'Oswald',Impact,'Arial Narrow',sans-serif;
  --ff-body:'Mulish','Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:1.0625rem;line-height:1.7;
  font-weight:400;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--claret);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}

/* ---- display type ---- */
h1,h2,h3,h4,.kicker,.brand-word{font-family:var(--ff-display);font-weight:600;line-height:1.08;letter-spacing:.01em}
h1{font-size:clamp(1.9rem,4.6vw,3.05rem);margin:.2em 0 .35em;color:var(--navy)}
h2{font-size:clamp(1.45rem,3vw,2rem);margin:1.6em 0 .5em;color:var(--navy)}
h3{font-size:1.3rem;margin:1.4em 0 .4em;color:var(--navy)}
p{margin:0 0 1.05em}

/* section kicker — claret label with a brass tick (site-specific, not a tinted callout) */
.kicker{display:inline-flex;align-items:center;gap:.5ch;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.14em;color:var(--claret);font-weight:600}
.kicker::before{content:"";width:1.6ch;height:3px;background:var(--brass);display:inline-block}

/* ============================================================ MASTHEAD */
.matchstrip{background:var(--claret);color:#fff;font-family:var(--ff-display);
  text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.matchstrip .wrap{display:flex;gap:1.5rem;align-items:center;justify-content:space-between;padding-block:.4rem;overflow:hidden}
.matchstrip a{color:#fff}
.matchstrip .ms-tick{color:var(--navy);font-weight:700}

.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:1rem;padding-block:1rem}
.brand{display:flex;align-items:center;gap:.85rem;flex:1;min-width:0}
.brand-logo{height:40px;width:auto;flex:none}
.brand-tag{font-family:var(--ff-body);font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;
  padding-left:.85rem;border-left:2px solid var(--claret)}

/* primary nav — light, cyan accents (matches the live cyan-on-white identity) */
.mainnav{background:var(--paper);border-bottom:2px solid var(--line)}
.mainnav .wrap{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.mainnav .navlinks{display:flex;flex-wrap:wrap;align-items:stretch}
.mainnav a{color:var(--ink);font-family:var(--ff-display);text-transform:uppercase;
  font-size:.95rem;letter-spacing:.06em;padding:.7rem 1.05rem;display:block;border-bottom:3px solid transparent}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--claret-2);background:var(--paper-2);border-bottom-color:var(--claret);text-decoration:none}
.nav-toggle{display:none}
.nav-burger{display:none}

/* ============================================================ LAYOUT */
main{padding-block:clamp(1.4rem,3vw,2.4rem) clamp(2.5rem,5vw,4rem)}
.grid-broadsheet{display:grid;grid-template-columns:2fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.col-rule{border-left:1px solid var(--line);padding-left:clamp(1.2rem,2.4vw,2rem);
  position:sticky;top:1.2rem;align-self:start}

/* ---- lead story (splash, not a card) ---- */
.lead{position:relative;margin-bottom:1.8rem}
.lead .lead-media{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--navy)}
.lead .lead-media img{width:100%;height:100%;object-fit:cover}
.lead .lead-body{padding-top:.9rem}
.lead h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.15em 0 .3em}
.lead .dek{font-size:1.12rem;color:var(--ink-soft)}

/* ---- broadsheet index: ruled rows, no rounded cards ---- */
.newslist{list-style:none;margin:0;padding:0}
.newslist li{padding:1.05rem 0;border-top:1px solid var(--line);display:grid;
  grid-template-columns:96px 1fr;gap:1rem;align-items:start}
.newslist li:first-child{border-top:0}
.newslist .thumb{aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.newslist .thumb img{width:100%;height:100%;object-fit:cover}
.newslist h3{margin:.1em 0 .25em;font-size:1.18rem;line-height:1.12}
.newslist h3 a{color:var(--navy)}
.newslist .meta{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}

/* sidebar blocks */
.side-block{margin-bottom:1.9rem}
.side-block h2{font-size:1.15rem;margin:.2em 0 .7em;padding-bottom:.4rem;border-bottom:2px solid var(--navy)}
.side-list{list-style:none;margin:0;padding:0;counter-reset:rank}
.side-list li{counter-increment:rank;display:grid;grid-template-columns:1.8rem 1fr;gap:.6rem;
  padding:.55rem 0;border-top:1px dotted var(--line);align-items:baseline}
.side-list li:first-child{border-top:0}
.side-list li::before{content:counter(rank);font-family:var(--ff-display);color:var(--brass-2);font-size:1.2rem;font-weight:700}
.side-list a{color:var(--navy);font-weight:600;font-size:.96rem;line-height:1.25}

/* ============================================================ ARTICLE */
.article{max-width:46rem;margin-inline:auto}
.article-head{margin-bottom:1.3rem}
.article-head .meta{font-size:.82rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-top:.6rem}
.article-head .meta b{color:var(--claret)}
.figure{margin:0 0 1.4rem}
.figure figcaption{font-size:.8rem;color:var(--ink-soft);padding-top:.4rem;border-bottom:1px solid var(--line);padding-bottom:.7rem}
.prose{font-size:1.09rem}
.prose p:first-of-type::first-letter{font-family:var(--ff-display);float:left;font-size:3.4rem;line-height:.8;
  padding:.05em .12em 0 0;color:var(--claret)}
.prose h2{border-bottom:1px solid var(--line);padding-bottom:.25em}
.prose a{font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--brass)}
.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.3em}
.prose li{margin:.3em 0}
.prose blockquote{margin:1.4em 0;padding:.4em 0 .4em 1.2em;border-left:3px solid var(--claret);
  font-style:italic;color:var(--navy);font-size:1.12rem}

/* custom note panel — NOT the stock tint+border-l-4+bold-label idiom */
.note{position:relative;background:var(--navy);color:var(--paper);padding:1.15rem 1.3rem 1.2rem;margin:1.6rem 0;
  border-top:4px double var(--brass)}
.note .note-k{display:flex;align-items:center;gap:.5ch;font-family:var(--ff-display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.85rem;color:var(--brass);margin-bottom:.35rem}
.note .note-k svg{width:14px;height:14px;flex:none}
.note p:last-child{margin-bottom:0}
.note a{color:var(--sea)}

/* ============================================================ FAQ accordion (smooth) */
.faq{margin:1.8rem 0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:.95rem 2rem .95rem 0;position:relative;
  font-family:var(--ff-display);font-size:1.12rem;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.25rem;width:.7rem;height:.7rem;
  border-right:2px solid var(--claret);border-bottom:2px solid var(--claret);transform:rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-body{overflow:hidden}
.faq .faq-body p{margin:0 0 1rem}
/* smooth open: grid-rows animation with fade (feedback_faq_smooth_open) */
.faq details::details-content{transition:height .28s ease,content-visibility .28s allow-discrete;height:0;overflow:hidden}
.faq details[open]::details-content{height:auto}
@supports not (interpolate-size:allow-keywords){
  .faq .faq-body{animation:faqfade .28s ease}
}
@keyframes faqfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html{interpolate-size:allow-keywords}

/* ============================================================ FOOTER */
.site-foot{background:var(--navy);color:var(--paper-2);margin-top:3rem;border-top:4px solid var(--brass)}
.site-foot .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem;padding-block:2.4rem}
.site-foot h4{color:var(--paper);text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;margin:0 0 .8rem}
.site-foot a{color:var(--sea)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{padding:.22rem 0;font-size:.95rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12)}
.foot-bottom .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1rem;font-size:.82rem;color:var(--sea)}

/* breadcrumb */
.crumbs{font-size:.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.8rem}
.crumbs a{color:var(--ink-soft)}

/* tags */
.tagrow{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0}
.tagrow a{font-family:var(--ff-display);text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;
  background:var(--paper-2);color:var(--navy);padding:.25rem .7rem;border:1px solid var(--line)}
.tagrow a:hover{background:var(--navy);color:var(--paper);text-decoration:none}

/* related ("Czytaj także") — centered under the article, not a floating column */
.related{max-width:46rem;margin:2.4rem auto 0;padding-top:1.4rem;border-top:2px solid var(--navy)}
.related .kicker{margin-bottom:.6rem}
.related-list{list-style:none;margin:.4rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.6rem}
.related-list li{border-top:1px solid var(--line)}
.related-list li a{display:block;padding:.7rem 0;color:var(--navy);font-family:var(--ff-display);font-size:1.05rem;line-height:1.15}
.related-list li a:hover{color:var(--claret-2);text-decoration:none}
.related-list .rl-cat{display:block;font-family:var(--ff-body);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--claret);font-weight:700;margin-bottom:.15rem}
@media(max-width:640px){.related-list{grid-template-columns:1fr}}

/* ============================================================ RESPONSIVE */
@media(max-width:860px){
  .grid-broadsheet{grid-template-columns:1fr}
  .col-rule{border-left:0;border-top:2px solid var(--navy);padding-left:0;padding-top:1.4rem;margin-top:.6rem}
  .nav-burger{display:flex;align-items:center;gap:.5ch;margin-left:auto;background:none;border:0;color:var(--ink);
    font-family:var(--ff-display);text-transform:uppercase;font-size:.95rem;letter-spacing:.06em;cursor:pointer;padding:.7rem 1.05rem}
  .nav-burger svg{width:20px;height:20px}
  .mainnav .navlinks{display:none;flex-direction:column;width:100%}
  .nav-toggle:checked ~ .navlinks{display:flex}
  .mainnav a{border-bottom:1px solid var(--line)}
}
@media(max-width:520px){
  .newslist li{grid-template-columns:72px 1fr}
  .prose p:first-of-type::first-letter{font-size:2.8rem}
}