/* ═══════════════════════════════════════════════════════════════════════
 *   GRJ.lt — pagrindinis stilius
 *
 *   Krauna KIEKVIENAS puslapis. Iki šio failo kiekvienas įrankis atsinešdavo
 *   savo stilių ir kartu su juo persirašydavo antraštę, poraštę ir ikonas
 *   (246 deklaracijos kartojosi trijuose ir daugiau failų). Dėl to
 *   `/streso-valdymas` piešė reklamos blokus be `.ad-slot` stiliaus, o `.block`
 *   buvo nestilizuotas penkiose puslapių šeimose iš šešių.
 *
 *   Sluoksniai, šia tvarka:
 *     1. Žetonai          6. Poraštė
 *     2. Atstata          7. Turinio blokai
 *     3. Tipografija      8. Skelbimų ir paslapčių kortelės
 *     4. Maketas          9. Įrankių komponentai
 *     5. Antraštė        10. Pagalbinės klasės
 *   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Žetonai ───────────────────────────────────────────────────────── */

:root {
    /* Veiksmo spalva. Iki šiol konkuravo du mėlyni: #3352e0 (mygtukai) ir
     *       #33a8e0 (navigacija, nuorodos, šūkis). Liko vienas — tas, kuris jau yra
     *       `--primary` skelbimų pusėje, kad abu hostai atrodytų kaip vienas
     *       produktas. Antrasis pasitraukė iš veiksmų; dabar puslapyje sotus
     *       mėlynas reiškia tik viena: „čia paspausk“. */
    --veiksmas:        #3352e0;
    --veiksmas-tamsus: #2440b5;
    --veiksmas-fonas:  #eef1fe;
    --veiksmas-rubas:  #c9d3fb;

    /* Neutralai — viena skalė vietoje penkių beveik vienodų pilkų rėmelių
     *       ir trijų beveik vienodų balkšvų fonų. */
    --pilka-950: #0e1f29;
    --pilka-900: #16303d;
    --pilka-700: #35525f;
    --pilka-500: #5d7684;
    --pilka-400: #8296a1;
    --pilka-300: #b6c4cb;
    --pilka-200: #dce4e8;
    --pilka-100: #eaf0f2;
    --pilka-50:  #f3f6f8;
    --balta:     #fff;

    --sekme:        #11804a;
    --sekme-fonas:  #e7f6ed;
    --pavojus:      #b3122c;
    --demesys:      #8a5a06;
    --demesys-fonas:#fdf4e3;

    /* Reikšminės. Puslapiai naudoja TIK šias, ne skalę tiesiogiai. */
    --fonas:          var(--pilka-50);
    --fonas-kortele:  var(--balta);
    --fonas-svelnus:  var(--pilka-100);
    --tekstas:        var(--pilka-900);
    --tekstas-silpnas:var(--pilka-500);
    --antrastes:      var(--pilka-950);
    --rubas:          var(--pilka-200);
    --nuoroda:        var(--veiksmas);

    /* Tipografija. Inter — savas hostingas, nes CSP leidžia tik
     *       `font-src 'self' data:`, o svetimo hosto užklausos šriftui nereikia. */
    --sriftas: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Šeši dydžiai vietoje 61. Dideli — slankūs, maži — fiksuoti: 13 px
     *       telefone ir 13 px darbalaukyje turi būti tas pats 13 px. */
    --t-xs:   .8125rem;
    --t-sm:   .875rem;
    --t-base: 1rem;
    --t-lg:   clamp(1.0625rem, 1.01rem + .25vw, 1.1875rem);
    --t-xl:   clamp(1.1875rem, 1.09rem + .45vw, 1.4375rem);
    --t-2xl:  clamp(1.375rem, 1.17rem + .95vw, 1.875rem);
    --t-3xl:  clamp(1.75rem, 1.35rem + 1.85vw, 2.625rem);

    /* Tarpai: 4 px bazė. */
    --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
    --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

    --r-s:    8px;
    --r-m:    14px;
    --r-l:    22px;
    --r-pill: 999px;

    --sesely-1: 0 1px 2px rgb(14 31 41 / .06);
    --sesely-2: 0 2px 4px rgb(14 31 41 / .05), 0 8px 20px rgb(14 31 41 / .06);
    --sesely-3: 0 4px 8px rgb(14 31 41 / .06), 0 16px 40px rgb(14 31 41 / .10);

    --plotis:  1160px;
    --plotis-siauras: 46rem;   /* skaitomo teksto eilutė */

    --greitis: .18s;
}

/* Lūžio taškai: 40rem / 60rem / 80rem. Trys vietoje aštuonių. */

/* ── 2. Atstata ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    /* `scroll-padding-top` — kad lipni antraštė neužstotų #nuorodos tikslo. */
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--fonas);
    color: var(--tekstas);
    font-family: var(--sriftas);
    font-size: var(--t-base);
    line-height: 1.65;
    font-optical-sizing: auto;
    /* Be šito Inter Lietuvos diakritikai atrodo per plonai ant šviesaus fono. */
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--nuoroda); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--veiksmas-tamsus); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--veiksmas);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Šriftas. `swap` — tekstas matomas iš karto sisteminiu šriftu.
 *   `latin-ext` PRIVALOMAS: ą č ę ė į š ų ū ž gyvena U+0100–017F. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/stilius/sriftai/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/stilius/sriftai/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 3. Tipografija ───────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    color: var(--antrastes);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.011em;
    text-wrap: balance;
}

h1 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.022em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5, h6 { font-size: var(--t-base); }

p, ul, ol, dl, table { margin-bottom: var(--s-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

p { text-wrap: pretty; }

/* Skyriaus antraštė bloko viduje. Viršuje – didesnis tarpas nei tarp
 *   pastraipų, apačioje – mažas: antraštė priklauso tekstui PO ja, ne tam,
 *   kas virš jos. Kaimyninės paraštės susilieja, tad 32 px gaunasi nepriklausomai
 *   nuo to, kas stovi prieš antraštę – pastraipa, sąrašas ar kvietimo blokas. */
.block > h2 { margin-bottom: var(--s-2); }
.block > h2:not(:first-child) { margin-top: var(--s-6); }

/* Skaitomo teksto eilutė. Be ribos pastraipa 1160 px plotyje tampa
 *   neskaitoma — akis nebepagauna kitos eilutės pradžios. */
.block > p,
.block > ul,
.block > ol { max-width: var(--plotis-siauras); }

.lead {
    font-size: var(--t-lg);
    color: var(--pilka-700);
    margin-bottom: var(--s-4);
}

strong, b { font-weight: 700; color: var(--antrastes); }

ul, ol { padding-left: 1.35em; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--rubas); margin: var(--s-6) 0; }

code, kbd, samp {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--fonas-svelnus);
    padding: .1em .35em;
    border-radius: 4px;
}

/* ── 4. Maketas ───────────────────────────────────────────────────────── */

/* PASTABA. Anksčiau čia buvo `main { display:flex }` su
 *   `main > :nth-child(1) { flex: 0 0 30% }` — šoninės juostos maketo likutis.
 *   Pasekmė: PIRMOJI sekcija kiekviename puslapyje (visada H1 + įvadas +
 *   pagrindiniai mygtukai) atsidurdavo siauriausiame stulpelyje, o šalia likdavo
 *   tuščia. Svarbiausias turinys gaudavo mažiausiai vietos. Taisyklė pašalinta;
 *   plotį dabar valdo patys blokai, ne jų eilės numeris. */

/* Visiems <main>: užima likusią aukščio dalį, kad poraštė liktų apačioje
 *   net trumpame puslapyje (body yra flex column). */
main {
    flex: 1;
    width: 100%;
}

/* Bendrasis maketas – TIK puslapiams be savo <main> klasės.
 *   `:not([class])` vietoje paprasto `main` todėl, kad blogas, kabinimo frazės,
 *   streso valdymas, asmeninės ribos ir asmenybės testas atsineša savo
 *   `.blog-main`, `.frazes-main`, `.stresas-main`… su savo pločiu ir tarpais.
 *   Perrašius juos bendromis taisyklėmis, jų maketas subyrėtų – o `!important`
 *   karas dėl pločio yra tiksliai tas, nuo ko šis failas turėjo atsikratyti. */
main:not([class]) {
    max-width: var(--plotis);
    margin-inline: auto;
    padding: var(--s-5) var(--s-4) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

section { width: 100%; }

/* Reklamos blokas plotį pasiima pats – nepriklausomai nuo to, ar tėvas yra
 *   flex, grid, ar paprastas blokas.
 *
 *   Tai nėra kosmetika: kai <main> buvo flex konteineris, `.ad-slot` tapdavo
 *   flex elementu, o jo `margin-inline: auto` panaikindavo `stretch`. Blokas
 *   susitraukdavo iki turinio pločio, ir AdSense mesdavo
 *   `No slot size for availableWidth=59` – trys reklamos vietos puslapyje
 *   neuždirbdavo nieko. */
.ad-slot { width: 100%; }

.block {
    background: var(--fonas-kortele);
    border: 1px solid var(--rubas);
    border-radius: var(--r-m);
    box-shadow: var(--sesely-1);
    padding: var(--s-5);
}

@media (min-width: 60rem) {
    .block { padding: var(--s-6); }
}

/* Antraštė su ikona. */
.heading {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.heading .icon {
    flex-shrink: 0;
    color: var(--veiksmas);
}

.heading h1, .heading h2, .heading h3, .heading h4 { margin: 0; }

/* Ikonos. Dabar tai inline SVG su `currentColor` — spalvą paveldi iš teksto,
 *   todėl `opacity: .55`, kuris visas ikonas visur darė blyškiai pilkas,
 *   nebereikalingas. */
.icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    vertical-align: middle;
}
.icon-sm { width: 20px; height: 20px; }
.icon-lg { width: 36px; height: 36px; }
.icon-xl { width: 56px; height: 56px; }

.icon-female { color: #d6336c; }
.icon-male   { color: #1c7ed6; }

/* ── 5. Antraštė ir navigacija ────────────────────────────────────────── */

/* Buvo: tamsi juosta + penki sodrūs mėlyni ženkliukai su skliaustais, kurie
 *   telefone suvalgydavo visą pirmą ekraną, o pagrindinio veiksmo
 *   („Patalpinti skelbimą“) juostoje nebuvo VISAI.
 *
 *   Dabar: šviesi juosta, kurioje sodrus mėlynas yra vienintelis — ant
 *   veiksmo mygtuko. Jis matomas kiekviename puslapyje ir kiekviename plotyje. */

.antraste {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #172d36;
    backdrop-filter: saturate(1.6) blur(10px);
    border: 1px solid rgba(0, 0, 0, .1);
    border-bottom-width: 4px;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* ── Antraštė ir AdSense prieraišo blokas ─────────────────────────────────
 *   Išmatuota gyvoje svetainėje 2026-09-26 (telefonas 375x812): Auto ads
 *   kabina prieraišo juostą `position:fixed; top:0` su `z-index:2147483647`.
 *   Aukštis priklauso nuo kūrinio: 64 px `/blogas`, 119 px straipsnyje,
 *   318 px tituliniame. O `.antraste` yra `sticky; top:0; z-index:50` ir
 *   telefone 179 px aukščio.
 *
 *   T. y. slenkant puslapį navigacija guli PO reklama: tituliniame uždengta
 *   visa, straipsnyje kyšo apatiniai ~60 px, o viršutinės nuorodos lieka po
 *   reklamos rėmeliu. Tai ir naudojimo defektas (svetainė slenkant neturi
 *   navigacijos), ir tiesioginė AdSense išdėstymo politikos rizika: nuorodos
 *   po pat reklama veda į atsitiktinius paspaudimus.
 *
 *   Antra to pusė – vieta. 179 px antraštė + iki 318 px prieraišas atima iki
 *   61 % ekrano. Turinio reklamoms lieka trečdalis lango, ir jos fiziškai
 *   nespėja surinkti tos sekundės su 50 proc. pikselių, kurią AdSense
 *   užskaito kaip „žiūrima“.
 *
 *   Todėl telefone, KOL viršuje kabo prieraišas, antraštė nustoja būti lipni:
 *   viršų pasiima reklama, o turinys atgauna 179 px kiekviename ekrane.
 *   Navigacija lieka ten, kur žmogus jos ir ieško – puslapio pradžioje.
 *   `data-prierasas` uždeda `reklamos_prierasas_js()`; jo nėra nei nešvariose
 *   zonose, nei kai lankytojas prieraišą uždaro – tada antraštė lipni kaip
 *   anksčiau. */
@media (max-width: 60rem) {
    body[data-prierasas="virsus"] .antraste { position: static; }
}

.antraste__vidus {
    max-width: var(--plotis);
    margin-inline: auto;
    padding: var(--s-3) var(--s-4);
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.zenklas {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    margin-right: auto;
    min-width: 0;
}

.zenklas:hover {
    color: #fff;
}

.zenklas__vardas {
    font-size: var(--t-lg);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.zenklas__vardas b { color: var(--veiksmas); font-weight: 800; }

.zenklas__poastraste {
    font-size: var(--t-xs);
    color: #33a8e0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagr-nav {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.pagr-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-s);
    color: #33a8e0;
    font-weight: 600;
    font-size: var(--t-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--greitis), color var(--greitis);
    text-shadow: 1px 2px 0 rgb(0, 0, 0, .1);
}

.pagr-nav a .icon {width: 18px;height: 18px;color: var(--pilka-300);}

.pagr-nav a:hover { background: var(--fonas-svelnus); color: var(--antrastes); }
.pagr-nav a:hover .icon { color: var(--veiksmas); }

.pagr-nav a[aria-current="page"] {
    background: var(--veiksmas-fonas);
    color: var(--veiksmas-tamsus);
}
.pagr-nav a[aria-current="page"] .icon { color: var(--veiksmas); }

/* Pagrindinis veiksmas antraštėje. */
.antraste .veiksmas { flex-shrink: 0; }

/* Telefonas: navigacija persikelia po logotipu ir laužoma į kelias eilutes,
 *  o veiksmo mygtukas lieka pirmoje eilėje šalia logotipo.
 *
 *  ── KODĖL NEBE HORIZONTALUS SLINKIMAS (2026-09-24) ─────────────────────
 *  Buvo viena eilutė su `overflow-x: auto` ir dešinįjį kraštą pritemdančia
 *  kauke. 375 px pločio telefone juostos turinys yra platesnis už ekraną,
 *  tad matydavosi trys skiltys iš penkių, o paskutinė („Mano skelbimai“
 *  skelbimų pusėje) gulėdavo 255 px už krašto. Kaukė yra užuomina, ne
 *  mygtukas: žmogus, ieškantis, kur valdyti savo skelbimą, jos nepastebi ir
 *  padaro išvadą, kad tokio kelio nėra. Paslėptas veiksmas, kurio reikia
 *  būtent skelbimą patalpinusiam žmogui, yra brangiausias iš paslėptų.
 *
 *  Dabar `flex-wrap`: juosta paauga viena eilute (antraštė 149 → 182 px),
 *  bet nė viena skiltis nebereikalauja gesto. Vertikalus antraštės vidinis
 *  tarpas sumažintas iki `--s-2`, kad ta eilutė bent iš dalies atsipirktų. */
@media (max-width: 60rem) {
    .antraste__vidus {
        flex-wrap: wrap;
        gap: var(--s-2) var(--s-3);
        padding-block: var(--s-2);
    }

    .pagr-nav {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
    }
    .pagr-nav a { padding-inline: var(--s-2); }

    .zenklas__poastraste { display: none; }
}

@media (max-width: 30rem) {
    .zenklas__vardas { font-size: var(--t-base); }
    .antraste .veiksmas { padding-inline: var(--s-3); font-size: var(--t-sm); }

    /* 320 px pločio telefone skiltys prašosi TREČIOS eilutės, o tada
       antraštė suėda trečdalį ekrano. Siaurinami tarpai, o ne ikonos ar
       šriftas: tarpai yra vienintelis dalykas, kurio praradimo nematyti. */
    .pagr-nav a { gap: var(--s-1); padding-inline: var(--s-1); }
}

/* Antrinė juosta: lyčių deriniai ir kiti pjūviai. Rodoma tik ten, kur
 *   prasminga — tai filtras, o ne svetainės navigacija. */
.pjuviai {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
}

/* `.pjuviai` ir `.breadcrumbs` daugumoje puslapių stovi TARP antraštės ir
 *   <main> – t. y. yra tiesioginiai <body> vaikai, o ne <main> turinys. main'o
 *   padding jiems negalioja, tad be savo konteinerio jų tekstas limpa prie pat
 *   naršyklės lango krašto (patikrinta: 0px nuo krašto, kai <main> įtrauktas
 *   53px). Vieninteliai puslapiai, kur pjūvių juosta yra main VIDUJE (dėl
 *   mobilaus išdėstymo), yra tituliniai/kategorijų – ten main.padding jai
 *   jau pakanka, tad `body > ` selektorius tą atvejį sąmoningai aplenkia.
 *
 *   `width: 100%` ČIA BŪTINAS, ne kosmetika: `body` yra flex konteineris
 *   (žr. §2), tad šie elementai yra flex vaikai. Be aiškaus pločio flex vaikas
 *   susitraukia iki turinio dydžio DAR PRIEŠ centruojant – `margin:auto`
 *   tuomet centruoja siaurą, prie turinio prigludusią dėžę, o ne pilną
 *   stulpelį. Patikrinta: be `width:100%` breadcrumbs atsidurdavo 538px nuo
 *   krašto vietoje 53px, kaip main. */
body > .pjuviai,
body > .breadcrumbs {
    width: 100%;
    max-width: var(--plotis);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--s-4);
    padding-right: var(--s-4);
    box-sizing: border-box;
}

body > .pjuviai { margin-top: var(--s-4); }
body > .breadcrumbs { margin-top: var(--s-3); }

.pjuviai a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--fonas-kortele);
    border: 1px solid var(--rubas);
    border-radius: var(--r-pill);
    color: var(--pilka-700);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--greitis), color var(--greitis), background var(--greitis);
    text-shadow: 1px 2px 0 rgb(0, 0, 0, .1);
}

.pjuviai a .icon { width: 16px; height: 16px; }

.pjuviai a:hover {
    border-color: var(--veiksmas);
    color: var(--veiksmas-tamsus);
}

.pjuviai a[aria-current="page"] {
    background: var(--veiksmas);
    border-color: var(--veiksmas);
    color: var(--balta);
}

/* Telefone juosta laužoma į tris eilutes po dvi piliules.
 *
 *   ── KODĖL NEBE HORIZONTALUS SLINKIMAS (2026-09-24) ─────────────────────
 *   Ankstesnis sprendimas rėmėsi skaičiumi: laužydamasi juosta užima 237 px.
 *   Tai teisinga TIK prie pilno piliulės dydžio, kai eilutėje telpa viena ir
 *   eilučių yra penkios. Slinkimas savo kainą tiesiog slepia: 375 px ekrane
 *   juostos turinys yra 1 132 px, tad matosi nepilnos dvi piliulės iš
 *   penkių, o likusios trys pasiekiamos tik tam, kas atspėja, kad juostą
 *   galima stumti pirštu. Kaukė ties dešiniuoju kraštu yra užuomina, ne
 *   mygtukas – o filtras, kurio trijų ketvirtadalių nesimato, nefiltruoja.
 *
 *   Sumažinus šriftą iki `--t-xs` ir tarpus bei paslėpus antrąją lyties
 *   ikoną, piliulės telpa po dvi eilutėje: trys eilutės, 134 px. Tai 91 px
 *   brangiau už slenkančią eilutę ir 103 px pigiau, nei kainavo argumentas,
 *   dėl kurio laužymo buvo atsisakyta.
 *
 *   `flex-wrap: wrap` čia neberašomas – jis yra bazinėje `.pjuviai`
 *   taisyklėje ir iki šiol buvo tik perrašomas atgal į `nowrap`. */
@media (max-width: 48rem) {
    .pjuviai a {
        padding-inline: var(--s-3);
        font-size: var(--t-xs);
        gap: var(--s-1);
    }

    /* Piliulė yra [ikona] tekstas [ikona]: pirmoji ikona – kas rašo, antroji
       – ko ieško. Krenta antroji, nes ji vienintelė yra tik tekste jau
       pasakyto dalyko kartojimas („…ieško vyro“ ir taip parašyta žodžiu).
       „Bendravimas“ turi vieną ikoną ir tekstą po jos, tad `:last-child`
       jos neliečia. */
    .pjuviai a .icon:last-child { display: none; }
}

/* Siauriausi telefonai. Abu žingsniai perka tą patį – TRIS eilutes vietoje
 *   penkių – ir abu yra tik tiek, kiek plotis priverčia: 384 px ir siauriau
 *   nukrenta piliulės vidinis tarpas, 352 px ir siauriau – ir likusi ikona.
 *   Etiketės neliečiamos: „Moteris ieško vyro“ yra ir raktinis žodis, ir
 *   vidinės nuorodos tekstas, tad trumpinti ją yra brangiau nei ikoną. */
@media (max-width: 24rem) {
    .pjuviai a { padding-inline: var(--s-2); }
}

@media (max-width: 22rem) {
    .pjuviai a .icon { display: none; }
}

/* Navigacijos kelias. */
.breadcrumbs {
    font-size: var(--t-sm);
    color: var(--tekstas-silpnas);
}

.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Inline srautas, o ne flex. Nuorodos tekstas glūdi `<a>` viduje, o esamo
 * puslapio žymė yra plikas teksto mazgas – flex'e naršyklė jį apvynioja
 * anoniminiu elementu, ir dvi skirtingos dėžės nebeturi bendros bazinės
 * linijos (žymė nukrisdavo 3 px). Inline sraute abi pusės yra tos pačios
 * eilutės dėžės turinys, tad lygiuojasi savaime; ilgas pavadinimas tada dar
 * ir laužosi per žodžius, o ne šoka į atskirą eilutę. */
.breadcrumbs__item { display: inline; margin: 0; }

/* `gap` bloko sraute neveikia, tad tarpas – skirtuko paraštėse. 6 px atkartoja
 * ankstesnį optinį tarpą; `--s-2` būtų per plačiai, `--s-1` – per siaurai. */
.breadcrumbs__item:not(:last-child)::after {
    content: "/";
    margin: 0 .375rem;
    color: var(--pilka-300);
}

.breadcrumbs a { color: var(--pilka-700); text-decoration: none; }
.breadcrumbs a:hover { color: var(--veiksmas); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--tekstas-silpnas); }

/* ── Mygtukai ─────────────────────────────────────────────────────────── */

/* Buvo: `inset` šešėlis, `text-shadow` ir kaukė-rodyklė kiekviename mygtuke —
 *   2012 m. apdaila. Dabar hierarchija kuriama svoriu, ne efektais: sodrus =
 *   pirminis, rėmelis = antrinis, tekstas = tretinis. */

.btn, .veiksmas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    background: var(--veiksmas);
    color: var(--balta);
    font-weight: 700;
    font-size: var(--t-base);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--greitis), transform var(--greitis), box-shadow var(--greitis);
    text-shadow: 1px 2px 0 rgb(0, 0, 0, .1);
}

.btn:hover, .veiksmas:hover {
    background: var(--veiksmas-tamsus);
    color: var(--balta);
    transform: translateY(-1px);
    box-shadow: var(--sesely-2);
}

.btn:active, .veiksmas:active { transform: translateY(0); }

.btn .icon, .veiksmas .icon { width: 20px; height: 20px; }

/* Antrinis: tas pats dydis, bet nekonkuruoja su pirminiu. */
.btn--antrinis {
    background: var(--balta);
    color: var(--veiksmas-tamsus);
    border-color: var(--veiksmas-rubas);
}
.btn--antrinis:hover {
    background: var(--veiksmas-fonas);
    color: var(--veiksmas-tamsus);
    border-color: var(--veiksmas);
}

/* Tretinis: nuoroda su rodykle, be dėmesio svorio. */
.btn--tylus {
    background: none;
    color: var(--veiksmas);
    padding-inline: 0;
    font-weight: 600;
}
.btn--tylus:hover {
    background: none;
    color: var(--veiksmas-tamsus);
    box-shadow: none;
    text-decoration: underline;
}

.btn--didelis { padding: var(--s-4) var(--s-6); font-size: var(--t-lg); }

.btn-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin: var(--s-4) 0;
}

@media (max-width: 30rem) {
    .btn-list { flex-direction: column; align-items: stretch; }
    .btn-list .btn { width: 100%; }
}

/* ── 6. Poraštė ───────────────────────────────────────────────────────── */

/* Buvo: trys eilės ženkliukų DIDŽIOSIOMIS raidėmis, kuriose teisiniai
 *   puslapiai, įrankiai ir tinklo svetainės buvo vieno svorio. Dabar —
 *   įvardytos skiltys. */

.porast {
    background: var(--pilka-900);
    color: var(--pilka-300);
    padding: var(--s-7) var(--s-4) var(--s-5);
    margin-top: var(--s-8);
}

.porast__vidus {
    max-width: var(--plotis);
    margin-inline: auto;
}

.porast__tinklelis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}

.porast h2 {
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    /* Buvo `--pilka-400`: ant `--pilka-900` fono tai 4,48:1, t. y. vos po
       WCAG AA riba (4,5:1) mažam 13 px tekstui. `--pilka-300` – 8,1:1. */
    color: var(--pilka-300);
    margin-bottom: var(--s-3);
}

.porast ul { list-style: none; margin: 0; padding: 0; }
.porast li { margin-bottom: var(--s-2); }

.porast a {
    color: var(--pilka-200);
    text-decoration: none;
    font-size: var(--t-sm);
}

.porast a:hover { color: var(--balta); text-decoration: underline; }

.porast__apacia {
    border-top: 1px solid rgb(255 255 255 / .12);
    padding-top: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    align-items: center;
    justify-content: space-between;
    font-size: var(--t-xs);
    color: var(--pilka-300);
}

.porast__apacia a { font-size: var(--t-xs); }

/* ── 7. Turinio blokai ────────────────────────────────────────────────── */

/* Reklamos blokai. Vieta rezervuojama iš anksto, kad įsikrovusi reklama
 *   nestumtų turinio žemyn (CLS → Core Web Vitals).
 *   Rėmelis ir užrašas privalomi: AdSense reikalauja, kad reklama būtų aiškiai
 *   atskirta nuo turinio. Iki šio failo `/streso-valdymas` jų neturėjo.
 *
 *   ── KODĖL REZERVACIJA ATĖJO IŠ INLINE `min-height` Į KINTAMUOSIUS ──────
 *   Iki 2026-09-18 `reklama()` rašė `style="min-height:280px"` – VIENĄ
 *   skaičių abiem ekranams. Išmatavus gyvą svetainę pasirodė, kad tas pats
 *   display blokas telefone užima 375–397 px, o darbalaukyje 302 px, o
 *   multiplex – atitinkamai 1619 px ir 460 px. T. y. rezervacija telefone
 *   buvo per maža ~100 px kiekvienam blokui (ir 1300 px multiplexui), o
 *   darbalaukyje – maždaug teisinga. Vienu skaičiumi to neišspręsi, todėl
 *   `reklama()` dabar atiduoda du: `--ad-min` ir `--ad-min-pc`. */
.ad-slot {
    margin: var(--s-5) auto;
    max-width: 100%;
    min-height: var(--ad-min, 280px);
    overflow: hidden;
    text-align: center;
}

@media (min-width: 60rem) {
    .ad-slot { min-height: var(--ad-min-pc, var(--ad-min, 280px)); }
}

.ad-slot__label {
    display: block;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pilka-400);
    margin-bottom: var(--s-1);
}

.ad-slot .adsbygoogle { margin: 0 auto; }

/* ── Telefonas: reklama išsitraukia iš kortelės paraščių ──────────────────
 *   Išmatuota gyvoje svetainėje 2026-09-26 (375 px langas): `.block` savo
 *   24 px paraštėmis reklamai palikdavo 293 px. Tai mažiau nei 300 px, tad
 *   prisitaikantis blokas nepataikydavo nė į vieną standartinį dydį – nei
 *   300x250, nei 336x280 – ir gaudavo tik lankstų kūrinį.
 *
 *   Atėmus paraštes lieka 341 px ir atsiveria 336x280: didžiausias mobilus
 *   turinio formatas, kuriam reklamuotojai moka daugiau nei už 300x250.
 *   `width:auto` ir `max-width:none` čia būtini – be jų `.ad-slot { width:100% }`
 *   ir `max-width:100%` plotį skaičiuotų nuo TĖVO (293 px) ir neigiamos
 *   paraštės bloką tiesiog pastumtų į kairę.
 *
 *   Liečia tik `reklamos_sekcija()` blokus. `stresas-main`, `frazes-main` ir
 *   `blog-article` reklamai jau atiduoda 343-345 px, tad jų neliečiame. */
@media (max-width: 47.99rem) {
    .block > .ad-slot {
        margin-inline: calc(-1 * var(--s-5));
        width: auto;
        max-width: none;
    }
}

/* Neužpildytas blokas (AdSense uždeda `data-ad-status="unfilled"`).
 *   Rezervuotas aukštis tada atlaisvinamas: 340 px tuščio rėmelio su užrašu
 *   „Reklama“ atima ekraną iš turinio ir nustumia žemyn kitą bloką, t. y.
 *   kenkia būtent tam matomumui, dėl kurio rezervacija ir daroma.
 *   Susitraukimas įvyksta maždaug ekranu anksčiau, nei vieta pasiekiama
 *   (žr. `reklamos_kroviklis()`), tad skaitytojui jis nematomas. */
.ad-slot[data-tuscia] {
    margin-block: 0;
    min-height: 0;
}

.ad-slot[data-tuscia] .ad-slot__label { display: none; }

/* Ir pats `<ins>`. `!important` čia nėra atsargumas – jis būtinas: `reklama()`
   rašo `style="display:block"` TIESIAI ant elemento, o įterptinio stiliaus
   joks selektorius neįveikia. Be to, žemiau esanti bendroji taisyklė duoda
   `.adsbygoogle` dar ir `min-height:50px`, tad neužpildytas blokas paliktų
   50 px juostą su niekuo. */
.ad-slot[data-tuscia] .adsbygoogle {
    display: none !important;
    min-height: 0;
}

/* ── Auto ads: Google pačios įterpti blokai ───────────────────────────────
 *   `reklama()` valdo tik RANKINIUS blokus. Greta jų Auto ads įterpia savus
 *   `<div class="google-auto-placed">` – tituliniame telefone jų 2026-09-26
 *   išmatuota dešimt, t. y. daugiau nei rankinių. Jiems irgi reikia stiliaus,
 *   nes Google renkasi vietą pagal DOM, o ne pagal tai, kiek toje vietoje
 *   telpa.
 *
 *   Bendra taisyklė visoms trims žemiau: `width:auto !important`. Google
 *   kiekvienam savo apvalkalui užrašo ĮTERPTINĮ `width:100%`, o įterptinio
 *   stiliaus paprastas selektorius neįveikia – be `!important` neigiamos
 *   paraštės bloką tik pastumtų į kairę, o ne praplėstų. */

/* 1. Apvalkalas kortelės viduje. Tas pats 293 px, dėl kurio `.block > .ad-slot`
      atsisako paraščių: 293 px netelpa nė vienas standartinis dydis, tad
      AdSense atiduoda tik lankstų kūrinį. Atėmus paraštes lieka 341 px ir
      atsiveria 336x280. Išmatuota tituliniame 2026-09-26: vienas toks blokas
      stovėjo 293 px pločio. */
@media (max-width: 47.99rem) {
    .block > .google-auto-placed {
        margin-inline: calc(-1 * var(--s-5));
        width: auto !important;
        max-width: none;
    }
}

/* ── Rankinis in-feed blokas tinklelyje ───────────────────────────────────
 *   `vitrina_tinklelis()` deda `sarasas_tarp` tarp kortelių, o tinklelio
 *   vaikas be šios taisyklės gauna VIENOS KORTELĖS plotį – telefone tai
 *   apie 165 px. Tiek pločio neturintis blokas nepataiko nė į vieną
 *   standartinį dydį; kaimynas `google-auto-placed` tą patį jau buvo
 *   išmokęs (žr. 2 punktą žemiau), tik ten blokas 143 px grįžo
 *   `unfill-optimized`, t. y. Google pati nutarė, kad tokiam plotui padoraus
 *   kūrinio nėra.
 *
 *   `grid-column: 1 / -1` paverčia jį per visą eilę einančia juosta, o
 *   neigiamos paraštės telefone atiduoda tuos pačius 341 px, dėl kurių
 *   `.block > .ad-slot` atsisako kortelės paraščių – iš jų atsiveria 336x280,
 *   pats pelningiausias mobilus formatas.
 *
 *   `margin-block` iš `--s-5` sumažintas iki `--s-3`: tinklelio tarpas tarp
 *   kortelių yra `--s-2`/`--s-3`, tad pilna bloko paraštė čia padarytų įspūdį,
 *   kad reklama yra atskira sekcija, o ne eilutė sąraše. */
.sk-tinklelis > .ad-slot {
    grid-column: 1 / -1;
    margin-block: var(--s-3);
}

@media (max-width: 47.99rem) {
    .sk-tinklelis > .ad-slot {
        margin-inline: calc(-1 * var(--s-5));
        width: auto;
        max-width: none;
    }
}

/* 2. Skelbimų tinklelis. Auto ads įdeda apvalkalą kaip TINKLELIO NARVELĮ, ir
      tas gauna vienos kortelės plotį – išmatuota 143 px, o blokas jame grįžo
      `unfill-optimized`, t. y. Google pati nutarė, kad tokiam plotui
      padoraus kūrinio nėra. `grid-column: 1 / -1` paverčia jį per visą eilę
      einančia juosta. */
@media (max-width: 47.99rem) {
    .sk-tinklelis > .google-auto-placed {
        grid-column: 1 / -1;
        margin-inline: calc(-1 * var(--s-5));
        width: auto !important;
        max-width: none;
    }
}

/* 3. Savybių eilutė (ikona + tekstas). Blogiausias iš trijų atvejų: Auto ads
      deda bloką į `.feature-text`, t. y. į teksto stulpelį ŠALIA ikonos, ir
      jis gauna 237 px. Tituliniame tokių buvo trys, vienas jų
      `unfill-optimized`. Tokia reklama dar ir atrodo kaip savybės dalis –
      būtent to AdSense politika neleidžia.
      `:has()` liečia tik tą eilutę, į kurią blokas realiai pateko: ikona
      persikelia virš teksto, tekstas gauna visą kortelės plotį, o reklama –
      341 px. Eilutės be reklamos lieka nepaliestos. */
@media (max-width: 47.99rem) {
    .feature-row:has(> .feature-text > .google-auto-placed) { display: block; }

    .feature-row:has(> .feature-text > .google-auto-placed) .feature-icon {
        margin-bottom: var(--s-3);
    }

    .feature-text > .google-auto-placed {
        margin-inline: calc(-1 * var(--s-5));
        width: auto !important;
        max-width: none;
    }
}

/* 4. Neužpildytas Auto ads blokas. `reklama()` savo vietoms tą sprendžia
      `data-tuscia` atributu, bet Google įterptų apvalkalų mūsų kroviklis
      nemato. Be šios taisyklės neužpildytas blokas palieka 50 px juostą
      (žr. bendrą `.adsbygoogle { min-height:50px }` taisyklę žemiau) arba
      visą apvalkalo aukštį su niekuo.

      Paslėpti neužpildytą bloką leidžia pati AdSense dokumentacija – ten
      pavyzdys su `ins.adsbygoogle[data-ad-status="unfilled"]`. Prirašoma ir
      `unfill-optimized`: išmatuota, kad Google grąžina ir tokią reikšmę. */
/* Dvi taisyklės, o ne viena su kableliu: `:has()` nemokanti naršyklė laiko
   tokį selektorių klaidingu ir IŠMETA VISĄ taisyklę – kartu ir paprastuosius
   selektorius, kurie jai puikiai suprantami. Atskyrus jie išlieka, o
   apvalkalo susitraukimo tokia naršyklė tiesiog negaus. */
ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle[data-ad-status="unfill-optimized"] {
    display: none !important;
    min-height: 0 !important;
}

.google-auto-placed:has(> ins.adsbygoogle[data-ad-status]:not([data-ad-status="filled"])) {
    display: none !important;
    min-height: 0 !important;
}

/* ── Lipni šoninė reklamos juosta ─────────────────────────────────────────
 *   Straipsnio stulpelis yra 760 px. 1440 px lange abiejose pusėse lieka po
 *   ~340 px tuščios vietos, o skaitytojas praslenka ~10 ekranų – visą tą
 *   laiką ekrane nėra NĖ VIENOS reklamos, nes visos keturios yra tekste ir
 *   praslenka kartu su juo. Lipnus blokas šone yra vienintelė vieta, kuri
 *   lieka matoma visą skaitymo laiką.
 *
 *   Juosta atsiranda tik nuo 1180 px (760 + 32 tarpas + 300 blokas + oras)
 *   ir tik tada, kai `sonine_lipni` slot ID užpildytas – kitaip
 *   `reklamos_sonine_juosta()` negrąžina nieko, šablonas nededa
 *   `.turinys-su-juosta` klasės, ir maketas lieka vienstulpis. */
@media (min-width: 73.75rem) {
    .turinys-su-juosta {
        display: grid;
        grid-template-columns: minmax(0, 790px) 300px;
        gap: var(--s-6);
        align-items: start;
        justify-content: center;
        max-width: 1140px;
        margin-inline: auto;
    }

    .sonine-juosta {
        position: sticky;
        /* Antraštė lipni ir darbalaukyje išmatuota 76 px – blokas negali
           pakišti po ja, kitaip viršutinė jo dalis lieka nematoma (o tai
           reikštų matomumą, kurio realiai nėra). */
        top: calc(76px + var(--s-4));
        width: 300px;
    }

    /* Šoniniame stulpelyje blokas yra fiksuoto pločio, tad `100%` čia
       reikštų 300 px – kaip ir turi būti. */
    .sonine-juosta .ad-slot { margin-block: 0; }
}

/* Iki 1180 px juostos nėra: 300 px blokas po turiniu būtų tik dar vienas
   apatinis blokas, o jų puslapio gale jau yra. */
@media (max-width: 73.74rem) {
    .sonine-juosta { display: none; }
}

/* ── Juosta bendrajame makete (titulinis, kategorijos) ────────────────────
 *   Blogo straipsnis savo stulpelį turi siaurą (790 px), tad jam juosta telpa
 *   nuo 1180 px. Bendrasis maketas platesnis – `main:not([class])` yra
 *   `--plotis` = 1160 px, – ir į jį 300 px juostos tiesiog nėra kur įdėti
 *   nesusiaurinus turinio.
 *
 *   Siaurinti nereikia. Vietoj to juosta čia atsiranda tik nuo 1360 px, o
 *   `main` tada praplečiamas iki 1160 + 24 + 300 = 1484 px. Rezultatas:
 *   TIES KIEKVIENU pločiu, kuriame maketas veikė iki šiol, jis lieka
 *   nepakitęs – turinys kaip stovėjo 1160 px, taip ir stovi. Juosta ateina
 *   tik ten, kur šalia jos realiai yra laisvos vietos.
 *
 *   Kodėl verta: `sonine_lipni` yra 300x600 ir lieka ekrane visą skaitymo
 *   laiką, o titulinis telefone yra 22 ekranų, kategorija – 17. Iki šiol šis
 *   blokas buvo kviečiamas TIK blogo straipsnyje, kuris per savaitę surenka
 *   6 peržiūras (GA4 09-24–09-30), o titulinis ir keturios kategorijos –
 *   6 208, t. y. 35 % viso srauto.
 *
 *   Juostos NEMATANT blokas ir nepaprašomas: `reklama()` jį atiduoda
 *   `<template>` viduje, o `reklamos_kroviklis()` tikrina `getClientRects()`,
 *   kuris paslėptam elementui tuščias. Tai tas pats saugiklis, dėl kurio
 *   2026-09-26 nustota prašyti reklamos 0 px pločio konteineryje. */

/* Srautas lieka flex stulpeliu VISUOSE pločiuose: įdėjus sekcijas į
   apvalkalą, jos nustoja būti tiesioginiais `main` vaikais ir prarastų jo
   `gap`. Be šios eilutės visi puslapio blokai suliptų. */
.su-juosta__srautas {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

@media (min-width: 85rem) {
    main:not([class]):has(> .su-juosta) { max-width: 1484px; }

    .su-juosta {
        display: grid;
        grid-template-columns: minmax(0, 1160px) 300px;
        column-gap: var(--s-6);
        align-items: start;
        justify-content: center;
    }

    .su-juosta > .sonine-juosta {
        position: sticky;
        /* Antraštė lipni ir darbalaukyje išmatuota 76 px – blokas negali
           pakišti po ja, kitaip viršutinė jo dalis lieka nematoma. */
        top: calc(76px + var(--s-4));
        width: 300px;
    }
}

/* Iki 1360 px juostos šiame makete nėra. Taisyklė atskira nuo 73.74rem
   aukščiau: ten ribą nustato blogo stulpelio plotis, čia – bendrojo. */
@media (max-width: 84.99rem) {
    .su-juosta > .sonine-juosta { display: none; }
}

.ad-wrapper, .adsbygoogle, iframe[src*="adsense"] {
    max-width: 100% !important;
    min-height: 50px;
    display: block;
}

/* Savybių eilutė: ikona + tekstas. */
.feature-row {
    display: flex;
    gap: var(--s-4);
    align-items: flex-start;
    padding: var(--s-4) 0;
    border-top: 1px solid var(--rubas);
}

.feature-row:first-of-type { border-top: 0; padding-top: 0; }

.feature-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-m);
    background: var(--veiksmas-fonas);
    color: var(--veiksmas);
}

.feature-icon .icon { width: 28px; height: 28px; }

.feature-text h3, .feature-text h4 { margin: 0 0 var(--s-2); }
.feature-text p { max-width: var(--plotis-siauras); }

@media (max-width: 40rem) {
    .feature-row { gap: var(--s-3); }
    .feature-icon { width: 44px; height: 44px; }
    .feature-icon .icon { width: 22px; height: 22px; }
}

/* Vertės kortelės. */
.values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--s-4);
    margin: var(--s-4) 0;
}

.value-card {
    background: var(--fonas-kortele);
    border: 1px solid var(--rubas);
    border-radius: var(--r-m);
    padding: var(--s-5);
}

.value-card .icon { color: var(--veiksmas); margin-bottom: var(--s-3); }
.value-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.value-card p { font-size: var(--t-sm); color: var(--pilka-700); }

/* Nuorodų debesis (miestai, kategorijos, straipsniai). */
.cities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: var(--s-3) 0 0;
}

.cities a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--fonas-svelnus);
    color: var(--pilka-700);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--greitis), color var(--greitis), border-color var(--greitis);
}

.cities a .icon { width: 16px; height: 16px; color: var(--pilka-400); }

.cities a:hover {
    background: var(--veiksmas-fonas);
    border-color: var(--veiksmas-rubas);
    color: var(--veiksmas-tamsus);
}
.cities a:hover .icon { color: var(--veiksmas); }

/* D.U.K. */
.faq { display: grid; gap: var(--s-3); margin-top: var(--s-4); }

.faq-item {
    background: var(--fonas-svelnus);
    border: 1px solid var(--rubas);
    border-radius: var(--r-m);
    padding: var(--s-4) var(--s-5);
}

.faq-item h3 {
    font-size: var(--t-base);
    font-weight: 700;
    margin-bottom: var(--s-2);
}

.faq-item p { color: var(--pilka-700); font-size: var(--t-sm); margin: 0; }

/* Pasitikėjimo sąrašas. */
/* Apatinis tarpas – kaip visų sąrašų (`ul { margin-bottom }`). Iki 2026-09-22
 *   buvo 0, ir antraštė po sąrašu prilipdavo prie paskutinio punkto
 *   (`/pazinciu-pradzia`: „Valdyk savo turinį“, „Pirmasis susitikimas“).
 *   Bloko gale `ul:last-child` tarpą vis tiek nunulina. */
.trust-list { list-style: none; margin: var(--s-3) 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }

.trust-list li {
    position: relative;
    padding: var(--s-3) var(--s-4) var(--s-3) var(--s-7);
    border-radius: var(--r-s);
    background: var(--fonas-svelnus);
    margin: 0;
}

.trust-list li::before {
    content: "";
    position: absolute;
    left: var(--s-4);
    top: 1.15em;
    width: 1.1em;
    height: 1.1em;
    transform: translateY(-50%);
    background: var(--sekme);
    border-radius: 50%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9 -9'/%3E%3C/svg%3E") center / 72% no-repeat;
}

.legal { font-size: var(--t-xs); color: var(--tekstas-silpnas); }
.legal strong { color: var(--pilka-500); }

.text-highlight {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--sekme);
    background: var(--sekme-fonas);
    font-weight: 600;
    font-size: var(--t-sm);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
}

/* Atsiliepimai (liko dėl senų puslapių). */
.testimonials {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s-3);
}

.testimonial {
    flex: 0 0 280px;
    background: var(--fonas-kortele);
    border: 1px solid var(--rubas);
    border-radius: var(--r-m);
    padding: var(--s-4);
    scroll-snap-align: start;
    position: relative;
}

.testimonial-quote { position: absolute; top: 12px; right: 14px; opacity: .1; width: 28px; height: 28px; }
.testimonial-name { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-weight: 700; font-size: var(--t-sm); }
.testimonial-name .icon { width: 20px; height: 20px; color: var(--pilka-400); }
.testimonial p { font-size: var(--t-sm); color: var(--pilka-700); font-style: italic; }

/* ── 8. Skelbimų ir paslapčių kortelės ────────────────────────────────── */

/* Vizualiai SĄMONINGAI nepanašios į reklamos blokus: kitas fonas, aiški
 *   veiksmo eilutė ir kairysis rėmelis. AdSense reikalauja, kad turinys ir
 *   reklama nesusilietų.
 *
 *   Kortelėse nėra ir negali būti vartotojo teksto — tik sisteminiai
 *   parametrai iš uždaro žodyno (žr. karkasas/funkcijos/vitrina.php). */

.sk-tinklelis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: var(--s-3);
    margin: var(--s-4) 0 0;
}

.sk-kortele {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-4);
    background: var(--fonas-kortele);
    border: 1px solid var(--rubas);
    border-left: 3px solid var(--veiksmas);
    border-radius: var(--r-s);
    text-decoration: none;
    color: var(--tekstas);
    transition: border-color var(--greitis), box-shadow var(--greitis), transform var(--greitis);
}

.sk-kortele:hover {
    border-color: var(--veiksmas);
    box-shadow: var(--sesely-2);
    transform: translateY(-2px);
    color: var(--tekstas);
}

.sk-kortele__kas { font-size: var(--t-base); font-weight: 700; color: var(--antrastes); }
.sk-kortele__vieta,
.sk-kortele__iesko { font-size: var(--t-sm); color: var(--tekstas-silpnas); }

.sk-kortele__veiksmas {
    margin-top: var(--s-3);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--veiksmas);
}

.sk-kortele:hover .sk-kortele__veiksmas { text-decoration: underline; }

.sk-zymos { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }

.sk-zyma {
    font-size: var(--t-xs);
    line-height: 1.5;
    padding: 1px var(--s-2);
    border-radius: var(--r-pill);
    background: var(--fonas-svelnus);
    color: var(--pilka-500);
}

.sk-zyma--ok  { background: var(--sekme-fonas);   color: var(--sekme); }
.sk-zyma--top { background: var(--demesys-fonas); color: var(--demesys); }

.sk-pastaba, .ps-pastaba {
    font-size: var(--t-xs);
    color: var(--tekstas-silpnas);
    margin: var(--s-3) 0 0;
}

.sk-santrauka {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-2);
}

.sk-santrauka li {
    margin: 0;
    padding: var(--s-2) var(--s-4);
    background: var(--fonas-svelnus);
    border-radius: var(--r-s);
    font-size: var(--t-sm);
}

.sk-santrauka a { font-weight: 600; text-decoration: none; }
.sk-santrauka a:hover { text-decoration: underline; }

.sk-amzius { font-size: var(--t-sm); color: var(--tekstas-silpnas); }

@media (max-width: 30rem) {
    .sk-tinklelis { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
    .sk-kortele { padding: var(--s-3); }
    .sk-kortele__kas { font-size: var(--t-sm); }
}

/* Paslaptys: kita spalva, nes pagrindinis elementas yra TEKSTAS. */
.ps-tinklelis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-3);
    margin: var(--s-4) 0 0;
}

.ps-kortele {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    background: var(--fonas-kortele);
    border: 1px solid var(--rubas);
    border-left: 3px solid #7a4fb0;
    border-radius: var(--r-s);
    text-decoration: none;
    color: var(--tekstas);
    transition: border-color var(--greitis), box-shadow var(--greitis), transform var(--greitis);
}

.ps-kortele:hover { border-color: #7a4fb0; box-shadow: var(--sesely-2); transform: translateY(-2px); color: var(--tekstas); }

.ps-kortele__tema { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7a4fb0; }
.ps-kortele__tekstas { font-size: var(--t-sm); line-height: 1.6; color: var(--pilka-700); }
.ps-kortele__veiksmas { margin-top: var(--s-1); font-size: var(--t-xs); font-weight: 700; color: #7a4fb0; }
.ps-kortele:hover .ps-kortele__veiksmas { text-decoration: underline; }

/* ── 9. Įrankių komponentai (/skelbimo-tekstas) ───────────────────────── */

.st-forma { display: grid; gap: var(--s-4); margin: var(--s-4) 0; }
.st-eile { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .st-eile { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .st-eile { grid-template-columns: repeat(4, 1fr); } }

.st-laukas { display: flex; flex-direction: column; gap: var(--s-1); font-weight: 600; }
.st-laukas > span { font-size: var(--t-sm); }

.st-laukas select, .st-laukas input {
    padding: var(--s-3);
    border-radius: var(--r-s);
    border: 1px solid var(--pilka-300);
    background: var(--balta);
    font-weight: 400;
    width: 100%;
}

.st-laukas select:focus, .st-laukas input:focus { border-color: var(--veiksmas); }
.st-laukas--platus { max-width: 100%; }

.st-pomegiai { border: 0; padding: 0; margin: 0; }
.st-pomegiai legend { font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-2); padding: 0; }
.st-uzuomina { font-weight: 400; color: var(--tekstas-silpnas); font-size: var(--t-sm); }

.st-zymos { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.st-zyma {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-pill);
    background: var(--fonas-svelnus);
    border: 1px solid var(--rubas);
    cursor: pointer;
    font-size: var(--t-sm);
}

.st-zyma:hover { background: var(--veiksmas-fonas); border-color: var(--veiksmas-rubas); }

.st-rezultatai { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.st-rezultatai__antraste { margin: 0; }

.st-kortele {
    padding: var(--s-4);
    border-radius: var(--r-m);
    background: var(--fonas-svelnus);
    border: 1px solid var(--rubas);
}

.st-kortele h3 { margin-bottom: var(--s-2); }
.st-kortele__tekstas { margin-bottom: var(--s-3); }
.st-kortele__meta { margin-bottom: var(--s-3); font-size: var(--t-sm); color: var(--tekstas-silpnas); }
.st-kopijuoti { cursor: pointer; }

.st-pavyzdys {
    padding: var(--s-4);
    border-radius: var(--r-m);
    background: var(--fonas-svelnus);
    border: 1px solid var(--rubas);
    margin-bottom: var(--s-4);
}

.st-pavyzdys--po { background: var(--sekme-fonas); border-color: rgb(17 128 74 / .2); }
.st-pavyzdys__etikete { margin-bottom: var(--s-1); font-weight: 700; text-transform: uppercase; font-size: var(--t-xs); letter-spacing: .06em; color: var(--tekstas-silpnas); }
.st-pavyzdys__tekstas { margin-bottom: var(--s-2); }
.st-pavyzdys__komentaras { margin: 0; font-size: var(--t-sm); color: var(--pilka-700); }

/* ── 9b. Puslapio pradžia, kvietimas, įrankiai, atradimas ─────────────── */

/* Puslapio pradžia. Buvo: H1 ir pagrindiniai mygtukai suspausti į 30 %
 *   stulpelį, o šalia tuščia. Dabar tai plačiausias puslapio blokas, ir
 *   veiksmų hierarchija jame matoma iš karto. */

.pradzia .block {
    background: linear-gradient(180deg, var(--veiksmas-fonas) 0%, var(--balta) 60%);
    border-color: var(--veiksmas-rubas);
}

.pradzia__zyma {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--balta);
    border: 1px solid var(--veiksmas-rubas);
    color: var(--veiksmas-tamsus);
    font-size: var(--t-sm);
    font-weight: 600;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    margin-bottom: var(--s-4);
}

@media (max-width: 30rem) {
    .pradzia__zyma { font-size: var(--t-xs); margin-bottom: var(--s-3); }
    .pradzia .block { padding: var(--s-4); }
}

.pradzia h1 { max-width: 18ch; margin-bottom: var(--s-4); }

@media (min-width: 60rem) {
    .pradzia h1 { max-width: 22ch; }
}

.pradzia .lead { max-width: 60ch; }

.pradzia__veiksmai {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin: var(--s-5) 0 var(--s-3);
}

.pradzia__smulkmenos {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    color: var(--tekstas-silpnas);
    margin: 0;
}

.pradzia__smulkmenos .icon { color: var(--pilka-400); }

.pradzia__tretinis {
    margin: var(--s-4) 0 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--rubas);
    font-size: var(--t-sm);
    color: var(--tekstas-silpnas);
}

@media (max-width: 30rem) {
    .pradzia__veiksmai { flex-direction: column; align-items: stretch; }
    .pradzia__veiksmai .btn { width: 100%; }
}

/* Kvietimas į saugios-pazintys.grj.lt (`kvietimas_saugus_numeris()`).
 *   Sąmoningai ANTRINIO svorio: šviesus fonas ir rėmelio mygtukas. Pagrindinis
 *   svetainės veiksmas lieka talpinimas – šis blokas tik atsako į klausimą
 *   „o jei nenoriu rodyti savo numerio?“, jo neiškeldamas. */
.saugus-numeris {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4) var(--s-5);
    padding: var(--s-5);
    background: var(--veiksmas-fonas);
    border: 1px solid var(--veiksmas-rubas);
    border-radius: var(--r-m);
}

.saugus-numeris__ikona {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-s);
    background: var(--balta);
    color: var(--veiksmas);
}

.saugus-numeris__tekstas { flex: 1 1 20rem; }
.saugus-numeris__tekstas p { margin: 0; color: var(--tekstas); max-width: 60ch; }
.saugus-numeris__tekstas p + p { margin-top: var(--s-1); }
.saugus-numeris__antraste { font-weight: 700; font-size: var(--t-lg); color: var(--antrastes) !important; }
.saugus-numeris__veiksmas { flex-shrink: 0; }

/* Teksto sraute (bloko viduje) – su tarpais; tiesiai <main> – tarpus duoda `gap`. */
.block .saugus-numeris { margin-block: var(--s-5); }

@media (max-width: 40rem) {
    .saugus-numeris__veiksmas { width: 100%; }
}

/* Kvietimas patalpinti. Vienodas visuose sąrašo puslapiuose – pagrindinis
 *   veiksmas negali atrodyti devyniais skirtingais būdais. */
.kvietimas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5);
    background: var(--pilka-900);
    border-color: var(--pilka-900);
    color: var(--pilka-200);
}

.kvietimas__tekstas { flex: 1 1 22rem; }
.kvietimas h2 { color: var(--balta); margin-bottom: var(--s-2); }
.kvietimas p { color: var(--pilka-300); max-width: 52ch; }
.kvietimas strong { color: var(--balta); }

.kvietimas__pagalba { font-size: var(--t-sm); margin-top: var(--s-3); margin-bottom: 0; }
.kvietimas__pagalba a { color: var(--balta); text-decoration: underline; }

.kvietimas__veiksmas {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
}

.kvietimas__salyga {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-xs);
    color: var(--pilka-400);
}

@media (max-width: 40rem) {
    .kvietimas__veiksmas { width: 100%; }
    .kvietimas__veiksmas .btn { width: 100%; }
    .kvietimas__salyga { justify-content: center; width: 100%; }
}

/* Įrankių tinklelis. */
.irankiai {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-4);
}

.irankis {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5);
    background: var(--fonas-kortele);
    border: 1px solid var(--rubas);
    border-radius: var(--r-m);
    text-decoration: none;
    color: var(--tekstas);
    transition: border-color var(--greitis), box-shadow var(--greitis), transform var(--greitis);
}

.irankis:hover {
    border-color: var(--veiksmas);
    box-shadow: var(--sesely-2);
    transform: translateY(-2px);
    color: var(--tekstas);
}

.irankis__ikona {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-s);
    background: var(--veiksmas-fonas);
    color: var(--veiksmas);
    margin-bottom: var(--s-1);
}

.irankis__vardas { font-weight: 700; font-size: var(--t-lg); color: var(--antrastes); }
.irankis__anonsas { font-size: var(--t-sm); color: var(--pilka-700); }

.irankis__kam {
    font-size: var(--t-xs);
    color: var(--tekstas-silpnas);
    margin-top: auto;
    padding-top: var(--s-3);
}

/* Atradimo juosta: kur eiti toliau. Trys kryptys, skirtingos kiekviename
 *   puslapyje – imamos iš to puslapio `giminingi` sąrašo. */
.atradimas__tinklelis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-4);
}

.atradimas__kortele {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-4);
    background: var(--fonas-svelnus);
    border: 1px solid transparent;
    border-radius: var(--r-m);
    text-decoration: none;
    color: var(--tekstas);
    transition: background var(--greitis), border-color var(--greitis);
}

.atradimas__kortele:hover {
    background: var(--veiksmas-fonas);
    border-color: var(--veiksmas-rubas);
    color: var(--tekstas);
}

.atradimas__ikona {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-s);
    background: var(--balta);
    color: var(--veiksmas);
}

.atradimas__tekstas { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atradimas__tekstas strong { font-size: var(--t-base); }
.atradimas__tekstas span { font-size: var(--t-sm); color: var(--tekstas-silpnas); line-height: 1.5; }

.porast__tinklas { margin: 0; }
.porast__apacia p { margin: 0; }

/* Įrankių puslapių kvietimas (`.frazes-cta`). Iki 2026-09-16 tas pats blokas
 *   buvo įrašytas TRIJUOSE stiliuose – frazes.css, ribos.css ir stresas.css –
 *   nes nė vienas iš jų nekraudavo bendro pamato. Dabar jis vienas. */
.frazes-cta {
    margin: var(--s-6) 0;
    padding: var(--s-6);
    border-radius: var(--r-m);
    background: var(--pilka-900);
    color: var(--pilka-200);
    text-align: center;
}

.frazes-cta__antraste { margin: 0 0 var(--s-2); font-size: var(--t-xl); color: var(--balta); }

.frazes-cta__tekstas { margin: 0 0 var(--s-4); color: var(--pilka-300); }

.frazes-cta__nuorodos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
}

.frazes-cta__mygtukas {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
    background: var(--veiksmas);
    color: var(--balta);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--greitis);
}

.frazes-cta__mygtukas:hover { background: var(--veiksmas-tamsus); color: var(--balta); }

.frazes-cta__mygtukas--antrinis {
    background: rgb(255 255 255 / .1);
    border-color: rgb(255 255 255 / .28);
}

.frazes-cta__mygtukas--antrinis:hover { background: rgb(255 255 255 / .18); }

.frazes-cta__smulkiai { margin: var(--s-4) 0 0; font-size: var(--t-sm); color: var(--pilka-400); }

/* ── 9c. Paieškos vediklis (/filtras) ─────────────────────────────────────
 *
 *   Perkelta iš skelbimų pusės 2026-09-19. Ten pasirinkimai buvo pilkos
 *   kortelės ant pilko fono, o kiek liko žingsnių, nesimatė iš viso.
 *
 *   Du dalykai, kurie čia nėra kosmetika:
 *     • `min-height` parinkčiai – kad trijų ir keturių parinkčių eilutės
 *       nešokinėtų aukščiu, kai prie dalies jų yra kiekio užrašas, o prie
 *       dalies (trans deriniams) jo nėra;
 *     • eigos juosta yra <ol> su nuorodomis, ne dekoratyviniai skrituliai:
 *       atliktą žingsnį galima paspausti ir pakeisti atsakymą. */

.vediklis .block { padding-bottom: var(--s-5); }

.vediklis-klausimas {
    font-size: var(--t-2xl);
    margin: var(--s-4) 0 var(--s-2);
}

.vediklis-pagalba {
    color: var(--tekstas-silpnas);
    margin: 0 0 var(--s-5);
    max-width: var(--plotis-siauras);
}

/* Eiga */

.vediklis-eiga ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--t-sm);
}

.vediklis-eiga li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    /* `--pilka-400` ant balto yra 3,08:1 – po WCAG AA riba. Dar neatlikti
       žingsniai nėra „neaktyvūs valdikliai“, tai paprastas tekstas, todėl
       riba jiems galioja. */
    color: var(--pilka-700);
}

.vediklis-eiga li + li::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--rubas);
    margin-right: var(--s-1);
}

.vediklis-eiga__nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--fonas-svelnus);
    color: var(--pilka-700);
    font-size: var(--t-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.vediklis-eiga .atlikta { color: var(--pilka-700); font-weight: 600; }
.vediklis-eiga .atlikta .vediklis-eiga__nr { background: var(--veiksmas-fonas); color: var(--veiksmas-tamsus); }
.vediklis-eiga .atlikta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vediklis-eiga .atlikta a:hover { color: var(--veiksmas); }

.vediklis-eiga .dabar { color: var(--antrastes); font-weight: 700; }
.vediklis-eiga .dabar .vediklis-eiga__nr { background: var(--veiksmas); color: var(--balta); }

/* Pasirinkimai */

.vediklis-pasirinkimai {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--s-3);
    margin: 0 0 var(--s-5);
}

.vediklis-parinktis {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    min-height: 7.5rem;
    padding: var(--s-4);
    background: var(--fonas-kortele);
    border: 1px solid var(--rubas);
    border-radius: var(--r-m);
    text-decoration: none;
    color: var(--antrastes);
    box-shadow: var(--sesely-1);
    transition: border-color var(--greitis), box-shadow var(--greitis), transform var(--greitis);
}

.vediklis-parinktis:hover,
.vediklis-parinktis:focus-visible {
    border-color: var(--veiksmas);
    box-shadow: var(--sesely-2);
    transform: translateY(-2px);
}

.vediklis-parinktis__ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-s);
    background: var(--veiksmas-fonas);
    color: var(--veiksmas);
}

.vediklis-parinktis__vardas {
    font-weight: 700;
    font-size: var(--t-lg);
    line-height: 1.25;
}

.vediklis-parinktis__priedas {
    font-size: var(--t-sm);
    color: var(--tekstas-silpnas);
    margin-top: auto;
}

/* Smulkmenos */

.vediklis-pastaba {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: var(--t-sm);
    color: var(--tekstas-silpnas);
    max-width: var(--plotis-siauras);
    margin: var(--s-4) 0 0;
}

.vediklis-pastaba .icon { flex-shrink: 0; margin-top: .15rem; color: var(--pilka-400); }

.vediklis-pastaba code,
.vediklis-parinktis code {
    font-size: .9em;
    background: var(--fonas-svelnus);
    /* Be aiškios spalvos `code` paveldi `--tekstas-silpnas` iš pastabos,
       o ant `--fonas-svelnus` tai 4,16:1 – po riba. */
    color: var(--pilka-700);
    padding: .1em .35em;
    border-radius: 4px;
}

.vediklis-atgal {
    font-size: var(--t-sm);
    color: var(--tekstas-silpnas);
    margin: var(--s-4) 0 0;
}

.vediklis-atgal a { color: var(--tekstas-silpnas); text-decoration: underline; text-underline-offset: 2px; }
.vediklis-atgal a:hover { color: var(--veiksmas); }

@media (max-width: 40rem) {
    .vediklis-pasirinkimai { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
    .vediklis-parinktis { min-height: 6.5rem; padding: var(--s-3); }
    .vediklis-parinktis__vardas { font-size: var(--t-base); }
    .vediklis-eiga li + li::before { display: none; }
}

/* ── 10. Pagalbinės klasės ────────────────────────────────────────────── */

.t-c { text-align: center; }
.t-c .btn-list { justify-content: center; }
.t-c .heading { justify-content: center; }
.t-c > p, .t-c > ul { margin-inline: auto; }

.row img { opacity: .3; }

/* Tik ekrano skaitytuvui. */
.tik-skaitytuvui {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Praleisti iki turinio — pirmas Tab antraštėje. */
.praleisti {
    position: absolute;
    left: var(--s-3);
    top: -100%;
    z-index: 100;
    background: var(--veiksmas);
    color: var(--balta);
    padding: var(--s-3) var(--s-4);
    border-radius: 0 0 var(--r-s) var(--r-s);
    font-weight: 700;
    text-decoration: none;
}

.praleisti:focus { top: 0; color: var(--balta); }