/* == tryx == */
/* tryx.pl: kanon polskiego portalu newsowego, zagrany wprost (decyzja wlasciciela 2026-09-09).
   Arkusz samodzielny - nie dziedziczy po base. Bez web fontow, bez JS, bez cieni i gradientow:
   PageSpeed to 8 z 9 punktow oceny technicznej WhitePress, a portal ma sie ladowac jak lista.
   Wszystkie kolory, fonty i szerokosci pochodza z tokenow (theme.json -> tokens.css);
   jedyne wartosci literalne to szesc barw dzialow. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--c-text);background:var(--c-bg);font-kerning:normal;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
::selection{background:var(--c-accent);color:var(--c-accent-ink)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--r-s)}
a{color:var(--c-accent);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4,h5,h6{font-family:var(--f-heading);line-height:var(--lh-heading);color:var(--c-text);text-wrap:balance}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--c-accent);color:var(--c-accent-ink);padding:.5rem 1rem;z-index:30;border-radius:0 0 var(--r-m) 0}
.skip-link:focus{left:0}

/* ---- barwy dzialow: zblizona jasnosc, zeby czytaly sie jak rodzina ---- */
:root{
    --sec-dom-i-wnetrza:#9a6b1f;
    --sec-motoryzacja:#2e6f8e;
    --sec-zdrowie-i-uroda:#2f7a63;
    --sec-biznes-i-finanse:#4a4e9c;
    --sec-styl-zycia:#8a3a62;
    --sec-sport-i-gory:#55636f;
    --sec:var(--c-accent);
}
.sec-dom-i-wnetrza{--sec:var(--sec-dom-i-wnetrza)}
.sec-motoryzacja{--sec:var(--sec-motoryzacja)}
.sec-zdrowie-i-uroda{--sec:var(--sec-zdrowie-i-uroda)}
.sec-biznes-i-finanse{--sec:var(--sec-biznes-i-finanse)}
.sec-styl-zycia{--sec:var(--sec-styl-zycia)}
.sec-sport-i-gory{--sec:var(--sec-sport-i-gory)}

/* ---- szkielet ---- */
.wrap{max-width:var(--w-wide);margin-inline:auto;padding-inline:1.25rem}
main{padding-block:1.5rem 3rem}

/* naglowek: wordmark i pasek dzialow, jak w portalu */
.site-header{background:var(--c-bg);border-bottom:1px solid var(--c-border)}
.site-header .wrap{display:flex;align-items:center;gap:2.25rem;min-height:3.75rem}
.brand{display:inline-flex;align-items:center;color:var(--c-text);text-decoration:none;flex:none}
.brand:hover{color:var(--c-accent)}
.brand-mark{display:block;height:1.9rem;width:auto}
.site-nav{display:flex;gap:1.6rem;align-self:stretch}
.site-nav a{display:flex;align-items:center;color:var(--c-text);text-decoration:none;font-weight:600;font-size:.9375rem;box-shadow:inset 0 -3px 0 transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--sec);text-decoration:none}
@media (min-width:64rem){.site-header{position:sticky;top:0;z-index:20}}
@media (max-width:47.99rem){
    .site-header .wrap{flex-wrap:wrap;gap:0;padding-inline:0;min-height:0}
    .brand{padding:.75rem 1.25rem}
    /* pasek dzialow jedzie w poziomie; nastepny dzial wystaje zza krawedzi
       i to jest jedyny sygnal, ze lista jedzie dalej */
    .site-nav{flex:1 0 100%;gap:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--c-border);padding-inline:.5rem}
    .site-nav::-webkit-scrollbar{display:none}
    .site-nav a{padding:.7rem .75rem;white-space:nowrap;font-size:.9375rem}
}

/* ---- karty ---- */
.card{position:relative}
.card-pic{display:block;margin:0 0 .65rem}
.card-pic img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-m);background:var(--c-surface)}
.card-title{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.25;letter-spacing:-.005em}
.card-title a{color:var(--c-text);text-decoration:none}
.card-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.card-dek{margin:.65rem 0 0;color:var(--c-muted);font-size:1.0625rem;line-height:1.5;text-wrap:pretty}
.card-meta{display:flex;flex-wrap:wrap;align-items:baseline;margin:.5rem 0 0;font-size:.8125rem;line-height:1.4;color:var(--c-muted)}
.card-meta>*+*{margin-left:.55rem;padding-left:.55rem;border-left:1px solid var(--c-border-strong)}
.card-meta time{font-variant-numeric:tabular-nums}
.card-sec{color:var(--sec);font-weight:600;text-decoration:none}
.card-sec:hover{text-decoration:underline}

/* material glowny */
.card--lead .card-pic{margin-bottom:.9rem}
.card--lead .card-pic img{aspect-ratio:16/9}
.card--lead .card-title{font-size:2rem;line-height:1.15;letter-spacing:-.015em}
.card--lead .card-meta{margin-top:.7rem;font-size:.875rem}

/* pozycja listy: mala miniatura z lewej */
.card--row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.85rem;align-items:start}
.card--row .card-pic{margin:0}
.card--row .card-title{font-size:.9375rem;line-height:1.3}
.card--row .card-meta{margin-top:.35rem;font-size:.75rem}
/* w waskich kontekstach dzial idzie w osobnym wierszu, zeby kreska separatora
   nie ladowala na poczatku linii po zawinieciu */
/* .card-meta jest flexboksem, wiec display:block na dziecku nic nie lamie - lamie flex-basis */
.card--row .card-sec{flex-basis:100%}
.card--row .card-meta>*+*{margin-left:0;padding-left:0;border-left:0}

/* ---- strona glowna: strefa glowna ---- */
.front{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2.5rem;align-items:start;padding-bottom:2.25rem;border-bottom:1px solid var(--c-border)}
/* pod materialem glownym dwa kolejne obok siebie: kolumna glowna rosnie razem z lista po prawej */
.front-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--c-border)}
.front-duo .card-title{font-size:1.125rem}
.rail-title{font-size:1.0625rem;font-weight:700;margin:1.75rem 0 .85rem;padding-bottom:.45rem;border-bottom:2px solid var(--c-text)}
.front-side .rail-title{margin-top:0}
.rail-list{list-style:none;margin:0;padding:0}
.rail-list li+li{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--c-border)}
@media (max-width:63.99rem){
    .front{grid-template-columns:1fr;gap:1.75rem}
}

/* ---- bloki dzialow ---- */
.sec-block{padding-top:2.25rem}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;position:relative;margin:0 0 1.1rem;padding-bottom:.55rem;border-bottom:1px solid var(--c-border)}
.sec-head::after{content:"";position:absolute;left:0;bottom:-1px;width:4.5rem;height:3px;background:var(--sec)}
.sec-head h2{margin:0;font-size:1.375rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.sec-head h2 a{color:var(--c-text);text-decoration:none}
.sec-head h2 a:hover{color:var(--sec)}
.sec-more{font-size:.875rem;font-weight:600;color:var(--sec);text-decoration:none;white-space:nowrap}
.sec-more:hover{text-decoration:underline}
.sec-grid{display:grid;gap:1.6rem 1.25rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:63.99rem){.sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){
    .sec-grid{gap:1.25rem .85rem}
    .sec-grid .card-title{font-size:.9375rem}
    .sec-more{font-size:.8125rem}
    .card--grid .card-sec{flex-basis:100%}
    .card--grid .card-meta>*+*{margin-left:0;padding-left:0;border-left:0}
}
.empty-note{grid-column:1/-1;color:var(--c-muted);padding:2.5rem 1rem;text-align:center;border:1px dashed var(--c-border-strong);border-radius:var(--r-m)}

/* ---- archiwa ---- */
.archive-header{position:relative;margin:0 0 1.6rem;padding-bottom:.9rem;border-bottom:1px solid var(--c-border)}
.archive-header::after{content:"";position:absolute;left:0;bottom:-1px;width:4.5rem;height:3px;background:var(--sec)}
.archive-title{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.015em}
.archive-intro{margin:.5rem 0 0;max-width:var(--w-content);color:var(--c-muted);font-size:1.0625rem;line-height:1.5;text-wrap:pretty}
.archive-header--author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start}
.archive-header--author .archive-intro{font-size:1.0625rem}

/* inicjaly autora: persony bez zdjec, wiec litera w kolku w barwie dzialu */
.initials{display:inline-grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--sec);color:var(--c-accent-ink);font-weight:700;font-size:.8125rem;letter-spacing:.02em}
.initials--big{width:3.5rem;height:3.5rem;font-size:1.125rem}

/* ---- artykul: kolumna czytelnicza plus szpalta boczna ---- */
.article-page{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:3.5rem;align-items:start}
.article-page--solo{grid-template-columns:minmax(0,1fr)}
.single{max-width:var(--w-content)}
/* archiwum obok szpalty: trzy kolumny kart zamiast czterech */
.article-page--archive .sec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.article-page--solo.article-page--archive .sec-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* po regulach archiwum, bo maja te sama lub wyzsza specyficznosc niz ogolna regula mobilna siatki */
@media (max-width:63.99rem){
    .article-page--archive .sec-grid,.article-page--solo.article-page--archive .sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.rail{position:sticky;top:4.75rem}
.rail .rail-title{margin-top:0}
@media (max-width:63.99rem){
    .article-page{grid-template-columns:1fr;gap:2.5rem}
    .rail{position:static}
}
.post-header{margin-bottom:1.5rem}
.breadcrumbs{font-size:.8125rem;color:var(--c-muted);margin-bottom:1rem}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.breadcrumbs li+li::before{content:"/";margin-right:.35rem;color:var(--c-border-strong)}
.breadcrumbs a{color:var(--c-muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--sec);text-decoration:underline}
.post-title{margin:0 0 .8rem;font-size:2.375rem;line-height:1.12;font-weight:800;letter-spacing:-.02em}
.post-lead{margin:0 0 1.25rem;font-size:1.25rem;line-height:1.5;color:var(--c-muted);text-wrap:pretty}
.byline{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin:0;font-size:.9375rem;color:var(--c-muted)}
.byline-name{color:var(--c-text);font-weight:600;text-decoration:none}
a.byline-name:hover{text-decoration:underline}
.byline .byline-name+time{margin-left:-.1rem;padding-left:.6rem;border-left:1px solid var(--c-border-strong)}
.byline time{font-variant-numeric:tabular-nums}
.post-hero{margin:0 0 1.75rem}
.post-hero img{display:block;width:100%;height:auto;border-radius:var(--r-m);background:var(--c-surface)}
.page .post-title{font-size:2rem}

/* spis tresci */
.toc{margin:0 0 1.75rem;padding:1rem 1.25rem;background:var(--c-surface);border-radius:var(--r-m);font-size:.9375rem}
.toc-title{margin:0 0 .5rem;font-size:.9375rem;font-weight:700}
.toc-list,.toc-sublist{margin:0;padding-left:1.25rem}
.toc-sublist{margin-top:.3rem}
.toc-item+.toc-item{margin-top:.3rem}
.toc a{color:var(--c-text)}
.toc a:hover{color:var(--sec)}

/* tresc z blokow Gutenberga */
.flow>*{margin-block:0}
.flow>*+*{margin-block-start:var(--flow)}
.flow>h2+*,.flow>h3+*,.flow>h4+*{margin-block-start:.6rem}
.post-content{font-size:1.0625rem}
.post-content h2{font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;margin-block-start:2.2rem}
.post-content h3{font-size:1.25rem;margin-block-start:1.8rem}
.post-content h4{font-size:1.0625rem}
.post-content p{text-wrap:pretty}
.post-content img{border-radius:var(--r-m)}
.post-content figure{margin:0}
.post-content figcaption{margin-top:.5rem;color:var(--c-muted);font-size:.875rem}
.post-content ul,.post-content ol{padding-left:1.35rem}
.post-content li+li{margin-top:.35rem}
.post-content hr{border:0;border-top:1px solid var(--c-border);margin-block:calc(var(--flow)*1.4)}
.post-content blockquote{margin:0;padding:.25rem 0 .25rem 1.25rem;border-left:1px solid var(--c-border-strong);color:var(--c-muted)}
.post-content blockquote cite{font-size:.875rem}
.post-content code{background:var(--c-surface);padding:.12em .35em;border-radius:var(--r-s);font-size:.9375em}
.post-content pre{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-m);padding:1rem;overflow-x:auto}
.post-content pre code{background:none;padding:0}
.post-content table{border-collapse:collapse;width:100%;font-size:.9375em;font-variant-numeric:tabular-nums}
.post-content th{font-weight:600;text-align:left;border-bottom:2px solid var(--c-text);padding:.5rem .6rem}
.post-content td{border-bottom:1px solid var(--c-border);padding:.5rem .6rem;vertical-align:top}
.post-content .wp-block-table{overflow-x:auto}

/* FAQ (blok cms/faq) */
.cms-faq details{border-top:1px solid var(--c-border);padding:.85rem .25rem}
.cms-faq details:last-child{border-bottom:1px solid var(--c-border)}
.cms-faq summary{font-weight:700;font-size:1.0625rem;cursor:pointer;list-style-position:outside}
.cms-faq summary::marker{color:var(--sec)}
.cms-faq details[open] summary{margin-bottom:.5rem}

/* galeria, kolumny, przyciski (bloki core) */
.wp-block-gallery,figure.wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem}
.wp-block-gallery figure{margin:0}
.wp-block-gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-m)}
.wp-block-columns{display:flex;gap:1.5rem;flex-wrap:wrap}
.wp-block-column{flex:1 1 16rem;min-width:0}
.wp-block-button__link{display:inline-block;background:var(--c-accent);color:var(--c-accent-ink);padding:.6rem 1.2rem;border-radius:var(--r-m);text-decoration:none;font-weight:600}
.wp-block-button__link:hover{filter:brightness(1.12);text-decoration:none}

/* blok cms/post-list */
.block-post-list-heading{margin-top:0}
.post-links{list-style:none;padding:0;margin:0}
.post-links li{padding:.5rem 0;border-bottom:1px solid var(--c-border)}
.post-links time{color:var(--c-muted);font-size:.875rem;margin-left:.4rem;font-variant-numeric:tabular-nums}
.post-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.pcard,.post-slider .slide{border:1px solid var(--c-border);border-radius:var(--r-m);padding:1rem;background:var(--c-bg)}
.pcard-title,.slide-title{margin:0 0 .25rem;font-size:1.125rem}
.pcard-title a,.slide-title a{color:var(--c-text);text-decoration:none}
.pcard-title a:hover,.slide-title a:hover{text-decoration:underline}
.pcard-excerpt,.slide-excerpt{margin:.4rem 0 0;font-size:.9375rem;color:var(--c-muted)}
.post-slider{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.75rem;scrollbar-color:var(--c-accent) var(--c-surface)}
.post-slider .slide{flex:0 0 min(78%,20rem);scroll-snap-align:start}

/* tagi, autor, stopka artykulu */
.post-footer{margin-top:2rem}
.post-terms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.post-terms a{display:inline-block;background:var(--c-surface);color:var(--c-text);padding:.3rem .8rem;border-radius:999px;font-size:.8125rem;font-weight:600;text-decoration:none}
.post-terms a:hover{background:var(--c-border)}
.author-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;margin-top:2.5rem;padding:1.25rem;background:var(--c-surface);border-radius:var(--r-m)}
.author-box .initials{width:3rem;height:3rem;font-size:1.0625rem}
.author-box-name{margin:0;font-size:1.0625rem;font-weight:700}
.author-box-name a{color:var(--c-text);text-decoration:none}
.author-box-name a:hover{text-decoration:underline}
.author-box-bio{margin:.35rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--c-muted);text-wrap:pretty}
.author-box-more{display:inline-block;margin-top:.65rem;font-size:.875rem;font-weight:600;color:var(--sec)}

/* ---- stronicowanie, 404 ---- */
.pagination{display:flex;justify-content:space-between;margin-top:2.25rem;padding-top:1rem;border-top:1px solid var(--c-border);font-weight:600}
.not-found{max-width:var(--w-content);padding:3rem 0}
.not-found h1{font-size:2rem}

/* ---- stopka: marka, dzialy, informacje ---- */
.site-footer{margin-top:3rem;background:var(--c-surface);border-top:1px solid var(--c-border);color:var(--c-muted);font-size:.9375rem}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:2rem;padding-block:2.25rem 1.5rem}
.footer-brand .brand-mark{height:1.6rem}
.footer-tagline{margin:.75rem 0 0;max-width:24rem;text-wrap:pretty}
.footer-col h2{margin:0 0 .6rem;font-size:.9375rem;color:var(--c-text)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li+li{margin-top:.4rem}
.footer-col a{color:var(--c-muted);text-decoration:none}
.footer-col a:hover{color:var(--c-text);text-decoration:underline}
.footer-bottom{grid-column:1/-1;margin:0;padding-top:1rem;border-top:1px solid var(--c-border);font-size:.8125rem}
@media (max-width:47.99rem){.site-footer .wrap{grid-template-columns:1fr;gap:1.5rem}}

/* ---- telefon: tytuly i marginesy ---- */
@media (max-width:40rem){
    main{padding-block:1rem 2.5rem}
    .card--lead .card-title{font-size:1.5rem}
    .front-duo{gap:.85rem}
    .front-duo .card-title{font-size:.9375rem}
    .post-title{font-size:2rem}
    .post-lead{font-size:1.125rem}
    .archive-title{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}