/* Gold & Gris - styl podstron poradnika (/poradnik/, /guide/, /guia/)
   Wspoldzielony przez 12 plikow artykulow. Kanon tokenow = :root w index.html.
   UWAGA: edycja tego pliku = bump ?v=N we WSZYSTKICH plikach ktore go ladują.
   Licz grepem: grep -rl "article.css?v=" clients/gold-gris/deploy/ */

:root{
  --gold:#C5A55A; --gold-l:#DEC07A; --gold-pale:#F0E4C4;
  --gold-dim:rgba(197,165,90,0.25);
  --gray-pale:#F2F3F5; --white:#FFFFFF; --off:#FAFAF8;
  --dark:#1C1C1E; --text:#2E2E2E; --mid:#5A5A5A; --light:#8A8A8A;
  --border:rgba(197,165,90,0.2); --bgray:rgba(142,145,153,0.17);
}
/* ── FALLBACKI METRYCZNE (anty-CLS przy doladowaniu fontow) ──
   Bez tego akapit lamie sie na 2 linie w foncie systemowym i na 3 w Montserracie
   (zmierzone: 83,3 px kontra 111 px), wiec cala strona skacze w dol po swapie.
   size-adjust wyrownuje szerokosc glifow, zeby lamanie bylo identyczne przed i po.
   Wspolczynniki policzone pomiarem canvas measureText na realnym akapicie, nie na oko. */
@font-face{
  font-family:'Montserrat fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Arimo');
  size-adjust:110.8%;
  font-display:swap;
}
@font-face{
  font-family:'Cormorant fallback';
  src:local('Times New Roman'),local('Liberation Serif'),local('Tinos'),local('Times');
  size-adjust:95.4%;
  font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{background:var(--white);color:var(--text);font-family:'Montserrat','Montserrat fallback',sans-serif;font-weight:300;overflow-x:hidden;}
/* Kanon paska ze strony glownej. UWAGA: `width` rzadzi paskiem PIONOWYM, poziomy bierze `height` -
   bez tej drugiej wartosci przewijana tabela dostaje systemowy, gruby pasek. */
/* PULAPKA: `scrollbar-width` to wlasciwosc standardowa i w Chromium BIJE `::-webkit-scrollbar`,
   wymuszajac wlasny rozmiar (ok. 12px zamiast naszych 3px). Dlatego trafia wylacznie tam,
   gdzie pseudoelementu webkit nie ma, czyli do Firefoksa. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--gold) var(--gray-pale);}
}
::-webkit-scrollbar{width:3px;height:3px;}::-webkit-scrollbar-track{background:var(--gray-pale);}::-webkit-scrollbar-thumb{background:var(--gold);}
img{max-width:100%;height:auto;}

/* ziarno - ten sam klimat co strona glowna */
.grain-overlay{position:fixed;inset:0;pointer-events:none;z-index:500;opacity:.15;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:170px 170px;}
@media (max-width:600px){.grain-overlay{background-size:200px 200px;}}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;justify-content:space-between;padding:0 52px;height:68px;background:rgba(255,255,255,0.97);border-bottom:1px solid var(--border);backdrop-filter:blur(14px);transition:box-shadow .3s;}
#nav.sh{box-shadow:0 4px 28px rgba(0,0,0,.08);}
.logo{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:20px;font-weight:600;letter-spacing:3px;line-height:1.05;white-space:nowrap;flex-shrink:0;text-decoration:none;text-transform:uppercase;color:var(--text);transition:letter-spacing .4s ease;}
.logo:hover{letter-spacing:5px;}
.logo em{font-style:normal;color:var(--gold);}
.npills{display:flex;gap:7px;list-style:none;align-items:center;}
.npills a{display:inline-flex;align-items:center;justify-content:center;padding:0 16px;height:32px;border-radius:100px;font-size:10px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--mid);border:1px solid transparent;transition:all .25s;white-space:nowrap;line-height:1;}
.npills>li>a:not(.ncta):hover{color:var(--gold);letter-spacing:2.6px;}
.ncta{padding:0 22px!important;background:var(--gold)!important;color:var(--white)!important;border:2px solid var(--gold-l)!important;font-weight:600;letter-spacing:3px!important;box-shadow:0 0 0 3px rgba(197,165,90,.20),0 6px 18px rgba(197,165,90,.34);}
.ncta:hover{background:var(--gold-l)!important;border-color:var(--white)!important;}
.lang-sw{display:flex;gap:2px;align-items:center;margin-left:10px;}
.lang-sw a{font-size:9px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;padding:4px 8px;border-radius:100px;color:var(--mid);border:1px solid transparent;transition:all .2s;line-height:1;}
.lang-sw a:hover{color:var(--gold);}
.lang-sw a.active{color:var(--gold);border-color:var(--gold-dim);background:rgba(197,165,90,.08);font-weight:500;}
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;}
.ham span{display:block;width:24px;height:2px;background:var(--text);transition:all .3s;border-radius:2px;}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.ham.open span:nth-child(2){opacity:0;}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.mob-menu{display:none;position:fixed;top:68px;left:0;right:0;background:rgba(255,255,255,.98);border-bottom:1px solid var(--border);padding:20px 24px;z-index:299;flex-direction:column;gap:4px;}
.mob-menu a{display:block;padding:12px 16px;font-size:11px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--text);border-bottom:1px solid var(--bgray);transition:color .2s;}
.mob-menu a:hover{color:var(--gold);}
.mob-menu .mob-cta{background:var(--gold);color:var(--white)!important;border-radius:100px;border:none;text-align:center;margin-top:8px;}
.mob-lang{display:flex;gap:8px;padding:14px 16px 2px;border-bottom:none!important;}
.mob-lang a{font-size:10px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--mid);padding:0;border-bottom:none!important;}
.mob-lang a.active{color:var(--gold);font-weight:500;}
.mob-lang span{color:var(--bgray);}

/* ── NAGLOWEK ARTYKULU ── */
.ahead{padding:132px 60px 0;max-width:1180px;margin:0 auto;}
.crumbs{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--light);margin-bottom:26px;}
.crumbs a{color:var(--gold);text-decoration:none;transition:color .25s;}
.crumbs a:hover{color:var(--gold-l);}
.crumbs span{margin:0 9px;opacity:.5;}
.ahead h1{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:clamp(38px,5.4vw,82px);font-weight:300;line-height:1.03;letter-spacing:-.015em;max-width:16ch;}
.ahead h1 em{font-style:italic;color:var(--gold);}
.ameta{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin-top:30px;padding-top:22px;border-top:1px solid var(--border);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--light);}
.ameta strong{color:var(--mid);font-weight:400;}
.ameta i{font-style:normal;opacity:.45;}

/* ── UKLAD: tresc + boczny spis ── */
.awrap{max-width:1180px;margin:0 auto;padding:56px 60px 0;display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:72px;align-items:start;}
.abody{min-width:0;}

/* spis tresci */
.toc{position:sticky;top:100px;border-top:2px solid var(--gold);padding-top:20px;}
.toc .toc-lbl{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-family:'Montserrat','Montserrat fallback',sans-serif;font-weight:500;margin-bottom:16px;}
.toc ol{list-style:none;counter-reset:t;}
.toc li{counter-increment:t;border-bottom:1px solid var(--bgray);}
.toc li:last-child{border-bottom:none;}
.toc a{display:flex;gap:11px;padding:10px 0;font-size:12px;line-height:1.45;color:var(--mid);text-decoration:none;transition:color .25s;}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:13px;color:var(--gold);opacity:.7;flex:none;}
.toc a:hover,.toc a.on{color:var(--gold);}

/* ── TYPOGRAFIA TRESCI ── */
.abody p{font-size:16px;line-height:1.85;color:var(--mid);margin-bottom:22px;}
.abody .lead{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:clamp(20px,2.1vw,27px);font-weight:400;font-style:italic;line-height:1.55;color:var(--text);margin-bottom:34px;padding-left:24px;border-left:2px solid var(--gold);}
.abody h2{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:clamp(28px,3.3vw,44px);font-weight:300;line-height:1.14;color:var(--text);margin:58px 0 20px;letter-spacing:-.008em;}
.abody h2:first-of-type{margin-top:44px;}
.abody h3{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:clamp(21px,2.1vw,27px);font-weight:400;color:var(--text);margin:36px 0 14px;}
.abody h2+p,.abody h3+p{margin-top:0;}
.abody strong{color:var(--text);font-weight:500;}
.abody em{font-style:italic;}
.abody a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(197,165,90,.45);transition:color .25s,border-color .25s;}
.abody a:hover{color:var(--gold-l);border-color:var(--gold-l);}
.abody ul,.abody ol{margin:0 0 24px 0;padding-left:0;list-style:none;}
.abody ul li{position:relative;padding:6px 0 6px 22px;font-size:15px;line-height:1.7;color:var(--mid);}
.abody ul li::before{content:'–';position:absolute;left:0;color:var(--gold);}
.abody ol{counter-reset:o;}
.abody ol li{counter-increment:o;position:relative;padding:6px 0 6px 30px;font-size:15px;line-height:1.7;color:var(--mid);}
.abody ol li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;font-family:'Cormorant Garamond','Cormorant fallback',serif;color:var(--gold);font-size:14px;}

/* wyrozniony blok - odpowiedz gotowa do zacytowania */
.akey{background:var(--off);border-left:2px solid var(--gold);padding:26px 30px;margin:32px 0;}
.akey p:last-child{margin-bottom:0;}
.akey p{font-size:15px;}

/* przypis o zrodle danych */
.abody .anote,.anote{font-size:12px;line-height:1.65;color:var(--light);margin:14px 0 32px;padding-left:16px;border-left:1px solid var(--bgray);}
.anote a{color:var(--light);border-bottom-color:var(--bgray);}
.anote a:hover{color:var(--gold);}

/* ── TABELA (kanon: zawsze w owijce z overflow) ── */
.atable-wrap{overflow-x:auto;margin:30px 0;border:1px solid var(--border);-webkit-overflow-scrolling:touch;}
.atable{width:100%;min-width:620px;border-collapse:collapse;font-size:13px;}
.atable caption{caption-side:top;text-align:left;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);padding:16px 18px 12px;background:var(--off);}
.atable th,.atable td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--bgray);}
.atable thead th{background:var(--off);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mid);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--border);}
.atable tbody th{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:17px;font-weight:400;color:var(--text);white-space:nowrap;}
.atable td{color:var(--mid);white-space:nowrap;}
.atable tbody tr:last-child th,.atable tbody tr:last-child td{border-bottom:none;}
.atable tbody tr:hover{background:var(--off);}
.atable .hi{color:var(--gold);font-weight:500;}

/* ── FAQ ── */
.afaq{margin-top:16px;border-top:1px solid var(--border);}
.afaq-item{border-bottom:1px solid var(--border);}
.afaq-q{width:100%;background:none;border:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:26px;padding:24px 2px;font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:clamp(19px,2.2vw,26px);font-weight:400;line-height:1.24;color:var(--text);text-align:left;transition:color .3s ease;}
.afaq-q:hover{color:var(--gold);}
.afaq-ic{position:relative;flex-shrink:0;width:20px;height:20px;transition:transform .4s cubic-bezier(.22,.31,0,1);}
.afaq-ic::before,.afaq-ic::after{content:'';position:absolute;background:var(--gold);}
.afaq-ic::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);}
.afaq-ic::after{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);}
.afaq-item.open .afaq-ic{transform:rotate(135deg);}
.afaq-item.open .afaq-q{color:var(--gold);}
.afaq-a{overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.22,.31,0,1);}
.afaq-ai{padding:0 2px 26px;max-width:70ch;}
.afaq-ai p{font-size:15px;margin-bottom:0;}

/* ── CTA ──
   UWAGA: blok siedzi wewnatrz .abody, wiec regula `.abody a` (zloty tekst + podkreslenie)
   bije selektory jednoklasowe. Wszystko ponizej MUSI byc scope'owane przez `.acta`,
   inaczej przycisk dostaje zloty tekst na zlotym tle i znika. */
.acta{margin:72px 0 0;padding:clamp(34px,4.6vw,58px);background:var(--off);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border);}
.acta::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.10;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:170px 170px;}
.acta::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);}
.acta>*{position:relative;z-index:1;}
.acta .lbl{display:block;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
/* naglowek CTA celowo NIE jest <h2> - outline dokumentu ma zostac czysto pytaniowy pod ekstrakcje AEO */
.acta .acta-t{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:clamp(26px,3.2vw,42px);font-weight:300;color:var(--text);line-height:1.14;margin:0 0 16px;max-width:18ch;}
.acta .acta-t em{font-style:italic;color:var(--gold);}
.acta p{font-size:15px;line-height:1.8;color:var(--mid);max-width:56ch;margin-bottom:28px;}
.acta-row{display:flex;flex-wrap:wrap;gap:10px;}
.acta .cta-pill{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 32px;border-radius:100px;font-family:'Montserrat','Montserrat fallback',sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;background:var(--gold);color:var(--white);border:1px solid var(--gold);border-bottom:1px solid var(--gold);font-weight:600;transition:background .25s,border-color .25s,color .25s;}
.acta .cta-pill:hover{background:var(--gold-l);border-color:var(--gold-l);color:var(--white);}
.acta .cta-ghost{background:transparent;color:var(--text);border:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim);font-weight:500;}
.acta .cta-ghost:hover{background:rgba(197,165,90,.08);border-color:var(--gold);color:var(--gold);}

/* ── DALEJ W PORADNIKU ── */
.amore{max-width:1180px;margin:0 auto;padding:82px 60px 0;}
.amore .lbl{display:block;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.amore h2{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:clamp(26px,3vw,40px);font-weight:300;margin-bottom:32px;}
.amore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.amore-card{position:relative;aspect-ratio:4/3;overflow:hidden;text-decoration:none;display:block;box-shadow:inset 0 0 0 1px rgba(197,165,90,.20);transition:box-shadow .4s;}
.amore-card:hover{box-shadow:inset 0 0 0 1px rgba(197,165,90,.55);}
.amore-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72);transition:filter .5s,transform .5s;}
.amore-card:hover img{filter:brightness(.88);transform:scale(1.04);}
.abody .afig{margin:36px 0 32px;}
.abody .afig img{width:100%;height:auto;display:block;}
.abody .afig figcaption{margin-top:11px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--light);}
.amore-ph{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 0%,rgba(197,165,90,.20),transparent 60%),linear-gradient(160deg,#3A3B3F 0%,#25262A 55%,#161719 100%);}
.amore-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,10,14,.58) 0%,rgba(8,10,14,.14) 46%,rgba(8,10,14,.52) 100%);}
.amore-grain{position:absolute;inset:0;pointer-events:none;opacity:.34;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:170px 170px;}
.amore-in{position:absolute;inset:0;padding:26px;display:flex;flex-direction:column;justify-content:space-between;}
.amore-t{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:clamp(20px,1.9vw,27px);font-weight:300;line-height:1.1;color:var(--white);max-width:13ch;text-shadow:0 1px 3px rgba(0,0,0,.42);}
.amore-t em{font-style:italic;color:var(--gold-l);}
.amore-k{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-pale);opacity:.9;}

/* ── FOOTER ── */
footer{margin-top:96px;border-top:1px solid rgba(197,165,90,.30);background:var(--dark);padding:52px 60px 28px;}
.fwrap{max-width:1180px;margin:0 auto;}
.ftop{display:grid;grid-template-columns:1fr auto;align-items:center;gap:36px;}
.fl{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:18px;font-weight:600;letter-spacing:3px;color:#fff;text-transform:uppercase;text-decoration:none;}
.fl em{font-style:normal;color:var(--gold-l);}
.fnav{display:flex;flex-wrap:wrap;gap:22px;}
.fnav a{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7);text-decoration:none;transition:color .3s;}
.fnav a:hover{color:var(--gold-l);}
.fbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);}
.fbot span,.fbot a{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;}
.fbot a:hover{color:var(--gold-l);}

/* ── REVEAL ── */
.rev{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.rev.in{opacity:1;transform:translateY(0);}

/* ── RESPONSIVE ── */
@media(max-width:1200px){
  .npills{gap:4px;}
  .npills a{padding:0 11px;letter-spacing:1.4px;}
}
@media(max-width:1024px){
  #nav{padding:0 24px;}
  .npills{display:none;}
  .ham{display:flex;}
  .ahead{padding:112px 24px 0;}
  .awrap{grid-template-columns:1fr;gap:0;padding:40px 24px 0;}
  .toc{position:static;margin-bottom:40px;}
  .amore{padding:64px 24px 0;}
  .amore-grid{grid-template-columns:1fr 1fr;}
  .amore-card:last-child{display:none;}
  footer{padding:44px 24px 24px;}
  .ftop{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .ameta{gap:4px 14px;}
  .ameta i{display:none;}
  .abody p{font-size:15px;}
  .abody .lead{padding-left:18px;}
  .atable{min-width:560px;}
  .amore-grid{grid-template-columns:1fr;}
  .amore-card:last-child{display:block;}
  .amore-card{aspect-ratio:16/10;}
  .acta-row{flex-direction:column;}
  .acta .cta-pill{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none;}
  .afaq-ic,.afaq-a,.amore-card img{transition:none;}
  html{scroll-behavior:auto;}
}