/* ============================================================================
   main.css — AUTOGENERUOTA PowerShell build skriptu (build-css.ps1).
   NEREDAGUOTI RANKINIU BUDU. Keisk atitinkama komponenta (css/ arba
   css/components/) ir paleisk: pwsh -File build-css.ps1
   ============================================================================ */

/* ===== variables.css ===== */

:root {
  --blue: #264B87;
  --blue-light: #E3E9F2;
  --blue-btn-hover: #1d3c6e;
  --border: #E5E7EB;
  --border-input: #000;
  --text-ph: #ABABB6;
  --text-dark: #111;
  --text-muted: #6B6B72;
  --bg: #F1F4F9;
  --white: #FFF;

  /* Gestų video proporcija — VIENAS šaltinis (DRY). Komentarų/sakinių video NEnaudoja (atskiras ratio). */
  --video-aspect: 1.20;
  --r-card: 16px;
  --r-panel: 10px;
  --r-input: 6px;
  --r-thumb: 8px;
  --fs-card-title: 20px;
  --fs-section-title: 24px;
  --fs-info-title: 32px;

  /* MOBILE font-size'ai (≤640px) — centralinė tipografija inner.html'ui. */
  --fs-h1-mobile: 30px;
  --fs-h2-mobile: 22px;
  --fs-h3-mobile: 18px;
  --fs-body-mobile: 16px;
  --fs-small-mobile: 16px;
  --fs-meta-mobile: 12px;
  --lh-mobile: 1.5;

  /* TABLET font-size'ai (641-1024px) — tarp desktop ir mobile inner.html'ui. */
  --fs-h1-tablet: 38px;
  --fs-h2-tablet: 26px;
  --fs-h3-tablet: 20px;
  --fs-body-tablet: 20px;
  --fs-small-tablet: 18px;
  --lh-tablet: 1.5;

  /*
   * Spacing scale — inner.html
   * --gap-2xs (9):  glaudžios mobile flow grupės (.meaning gap, .example-content gap)
   * --gap-xs  (8):  smulkūs grid tarpai (related items)
   * --gap-sm  (16): vidiniai komponentai mobile / tablet kompresija
   * --gap-md  (24): bazinis dizaino tarpas tarp grupių (desktop default)
   * --gap-lg  (32): didelės sekcijos (video ↔ variantai desktop)
   *
   * Default pattern mobile/tablet kompresijai:
   *   Desktop:  --gap-md  →  Tablet: --gap-sm  →  Mobile: --gap-2xs
   * Šis pattern'as taikomas tik elementams, kur breakpoint kompresija logiška.
   * Kiti elementai naudoja vieną variable visuose viewport'uose.
   */
  --gap-2xs: 9px;
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 32px;

  /* Inner.html separator linijos (tabs, examples, meaning, usage-examples) —
     visi naudoja tą pačią spalvą + 1px storis. */
  --separator-color: #ABABB6;
  --container-max: 1634px;
}

/* ===== reset.css ===== */

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

html {
  scrollbar-gutter: stable;
  -webkit-tap-highlight-color: transparent;

  /* Smooth scroll anchor nuorodoms (pvz. „Apie žodyną ir LGK" → #apie-zodyna).
     prefers-reduced-motion atveju — instant (žr. media query žemiau). */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: Raleway, sans-serif;
  background: var(--bg);

  /* STICKY FOOTER (visi šablonai): flex column + min-height:100vh → kai turinio mažai,
     footeris nukrenta į lango apačią (ne kabo vidury su tuščia erdve žemiau); kai daug —
     natūraliai po turiniu (scroll). NE position:fixed. Elementą prieš footer augina layout.css
     (main / paskutinė .glosos-section); footer nesitraukia. Body overlay'ai/modalai —
     position:fixed/absolute, tad NEtampa flex item'ais (lieka iš flow). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button, input, select, textarea { font-family: inherit; }

/* ===== utilities.css ===== */

/* A11Y UTILITIES */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  /* stylelint-disable-next-line property-no-deprecated */
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px; left: 16px;
  z-index: 2000;
  padding: 10px 16px;
  background: var(--blue);
  color: var(--white);
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: top .2s;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

/* Global focus ring — keyboard only */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
*:focus:not(:focus-visible) { outline: none; }

/* ===== layout.css ===== */

/* HEADER frame — TIK puslapio lygmens header'iui (kuris yra tiesioginis
   <body> vaikas). Įdėtieji <header> elementai komponentų viduje
   (.comments-header, .gesto-forma-drawer__header) NEgauna šito stiliaus.
   2026-05-27 v4: padding 0; logo + nav margins valdo spacing per
   clamp(20, (100vw-1634)/2, 110) — žr. nav.css. */
body > header {
  background: var(--blue);
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  gap: 16px;
}

/* MAIN. width:100% PRIVALOMAS: <body> yra flex column (sticky footer) → <main> yra flex item.
   Flex item su min-width:auto + auto cross-margins NEsistretchina iki max-width — shrink-wrap'inasi
   prie turinio. Pasekmės be width: (1) mobile rodo desktop layout'ą, kai turinio max-content >
   viewport (inner.html gesto gridas su 600px kolona); (2) plačiame ekrane main siauresnis nei
   full-bleed .glosos-section (titulinis paieška nesusilygiuoja su karuselėmis ~128px).
   width:100% + max-width + margin:auto = užpildo iki 1634 ir centruoja desktop.
   Galioja VISIEMS main puslapiams (titulinis + .inner-page); buvęs `.page-inner main,
   main.inner-page { width:100% }` nebereikalingas — ši bazinė taisyklė jį dengia ta pačia reikšme.
   lgk-zodynas main.css nelinkuoja — nepaveiktas. */
main {
  width: 100%;
  max-width: var(--container-max);
  margin: 48px auto;
  padding: 0 clamp(16px, 2vw, 32px);
}

.main-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex; flex-direction: column; gap: 24px;
}

/* CAROUSEL SECTION WRAPPER.
   width:100% PRIVALOMAS: body yra flex column (sticky footer), o auto cross-marginai flex'e
   PANAIKINA stretch → be definite pločio sekcija dydinasi pagal karuselės max-content (cap'inasi
   tik max-width 1634) ir <1634px ekranuose persipildo už viewport (rodyklės nukerpamos).
   Su width:100%: min(100%, 1634), margin:auto centruoja — kaip block elgesys. (Tas pats
   mechanizmas kaip main width:100% fix'as aukščiau.) */
.glosos-section {
  width: 100%;
  max-width: var(--container-max);
  margin: 48px auto;
  padding: 0 clamp(16px, 2vw, 32px);
}
.glosos-section + .glosos-section { margin-top: 0; } /* keep 48px between consecutive sections */

/* Sticky footer body flex IŠJUNGIA margin collapsing → main margin-bottom 48 + sekcijos
   margin-top 48 nebesusilietų (= 96px). Atkuriam 48px (kaip prieš flex) zeruodami sekcijos
   margin-top (main margin-bottom 48 lieka tarpu). Taikoma TIK titulinis/lgk-zodynas (main+section
   gretimi); paprastuose puslapiuose (main+footer) — nepaliečia. */
main + .glosos-section { margin-top: 0; }

/* FOOTER */
footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  margin-top: 15px;
  padding: 54px 0;
  flex-shrink: 0; /* sticky footer: nesitraukia, kai turinys augina viršų (žr. body flex reset.css) */
}

/* Content → footer tarpas = 15px visuose puslapiuose (etalonas = inner-page). Footer
   margin-top 15 + elemento TIESIAI prieš footer margin-bottom 0 → jokio margin collapse
   iki 48. Tik elementas prieš footer (ne tarpsekcinis .glosos-section tarpas).
   STICKY FOOTER: tas pats elementas (main paprastuose puslapiuose; paskutinė .glosos-section
   titulinyje/lgk-zodyne) auga (flex: 1 0 auto) ir išstumia footerį į lango apačią, kai turinio
   mažai. Daug turinio → laisvos vietos 0 → flex-grow be efekto (footer natūraliai po turiniu).
   Auginam BŪTENT elementą prieš footer (ne visus main) — kad multi-section puslapiuose
   neatsirastų tarpo tarp main ir .glosos-section. */
:is(main, .glosos-section):has(+ footer) {
  margin-bottom: 0;
  flex: 1 0 auto;
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 2vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Footer LGKŽ logo — inverted spalvos (mėlyni kvadratai, baltos raidės).
   Bazinė .logo-svg / .logo-letter — nav.css. */
.footer-brand .logo-svg { color: var(--blue); }
.footer-brand .logo-letter { fill: var(--white); }

.footer-title {
  font-weight: 700;
  font-size: var(--fs-section-title); line-height: 1.5; letter-spacing: -0.019em;
  color: var(--blue); white-space: nowrap;
}

.footer-col {
  display: flex; flex-direction: column; gap: 12px;
  font-family: Outfit, sans-serif; font-weight: 400;
  font-size: 14px; line-height: 1.5; color: #555;
  flex-shrink: 0;
}
.footer-col--address { width: 313px; }
.footer-col--contact { width: 174px; }
address.footer-col { font-style: normal; }

.footer-col .phone {
  font-weight: 500;
}

.footer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .15s;
}
.footer-link:hover { color: var(--blue); }

.footer-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
  color: var(--blue);
}

/* Responsive */
@media (width <= 900px) {
  footer { padding: 40px 0; margin-top: 32px; }
  .footer-inner { gap: 32px; }
  .footer-col--address, .footer-col--contact { width: auto; }
}

@media (width <= 640px) {
  main { margin: 24px auto; }
  .main-card { padding: 16px; gap: 20px; }
  .glosos-section { padding: 0 12px; }
  footer { padding: 32px 0; }
  .footer-brand { flex-shrink: 1; min-width: 0; }
  .footer-title { font-size: 18px; white-space: normal; min-width: 0; }
}

/* ===== components/breadcrumb.css ===== */

/* ============================================================================
   BREADCRUMB (.breadcrumb) — naršymo kelias. Komponentas (2026-06).
   Rodomas TIK DESKTOP (≥1025px): inner.html, klauskite.html, redaguoti-paskyra.html,
   straipsnis.html. titulinis.html — BE breadcrumb. Tablet + mobile (≤1024px) — paslėpta
   (display:none); ankstesnė mobile „‹ atgal" logika PAŠALINTA (nebereikalinga).

   WCAG 2.2: <nav aria-label="Naršymo kelias"> > <ol> > <li>; Pradžia = <a>,
   current = <span aria-current="page">. Skirtukas › — dekoratyvus CSS ::before
   (SR neskaitomas). Mirror'inta į main.css (§27 sinchronizacija).

   margin-top VIENODAS visuose puslapiuose per komponentą (var(--gap-sm) = 16px). inner.html:
   breadcrumb seka po .search-card (block flow) → margin-top = gap nuo paieškos. .inner-page
   puslapiuose (klauskite/redaguoti/straipsnis) breadcrumb yra pirmas FLEX vaikas, tad jo
   margin-top pridėtų prie .inner-page 48px → 64px. Todėl .inner-page viršaus margin'as
   desktop'e zeruojamas (žemiau), kad gap'ą duotų TIK breadcrumb margin → vienoda 16px visur. */
.breadcrumb {
  margin: var(--gap-sm) 0;
}

.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

/* Skirtukas › prieš kiekvieną item'ą (išskyrus pirmą) — dekoratyvus (CSS content,
   SR neskaitomas). */
.breadcrumb__item:not(:first-child)::before {
  content: "›";
  margin: 0 8px;
  color: var(--text-ph);
}

.breadcrumb__link {
  color: var(--blue);
  text-decoration: none;
}

.breadcrumb__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumb__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Current (paskutinis) — NE nuoroda; juodas (#000, kontrastas ~21:1). */
.breadcrumb__current {
  color: #000;
}

/* Tablet + mobile (≤1024px) — breadcrumb nerodom visai (tik desktop navigacija). */
@media (width <= 1024px) {
  .breadcrumb {
    display: none;
  }
}

/* Desktop (≥1025px) — .inner-page (klauskite/redaguoti/straipsnis) viršaus margin'as
   zeruojamas, kad breadcrumb (pirmas flex vaikas) gap'ą duotų TIK savo margin-top
   (var(--gap-sm)) — vienodai kaip inner.html. Tablet/mobile .inner-page margin NEPALIESTAS
   (breadcrumb hidden, kortelė lieka savo įprastame tarpe). inner.html (#mainContent)
   nepaliestas — ten breadcrumb seka po .search-card. */
@media (width >= 1025px) {
  /* main.inner-page (0,1,1) — didesnė specifika nei bazinis .inner-page (0,1,0), kad
     įveiktų vėliau main.css'e einantį `margin: 48px auto 0` (source order). */
  main.inner-page {
    margin-top: 0;
  }
}

/* ===== components/account.css ===== */

/* ACCOUNT — „Redaguoti paskyrą" puslapio (redaguoti-paskyra.html) specifiniai
   stiliai. Prototipas (be backend'o).

   PERPANAUDOJAMOS klasės (NEdubliuojama):
   - .inner-page / .inner-page__card / .inner-page__content / .inner-page__section
     — bendras vidinių puslapių template (contact.css)
   - .contact-title (h1) + .contact-success (žydras success box) — contact.css
   - .form-field / .form-label / .form-required / .form-input / .form-hint — comments.css
   - .auth-error (raudonas klaidos tekstas) — auth.css
   - .btn-primary (submit) — comments.css
   - .modal-overlay / .modal / .modal-hdr / .modal-close / .modal-ftr /
     .btn-cancel — modal infrastruktūra (main.css)
   - .visually-hidden — utilities

   NAUJOS klasės (tik to, ko projekte nebuvo):
   - .account-subtitle (h2 sekcijos antraštė)
   - .account-input--readonly (neredaguojamo el. pašto lauko fonas)
   - .pw-checklist + .pw-checklist__item/__icon/__label (live slaptažodžio
     reikalavimų sąrašas su ✓/✗ ir spalva)
   - .pw-match (live „sutampa / nesutampa" pranešimas)
   - .account-danger-text (įspėjamasis tekstas prie ištrynimo)
   - .btn-danger (destruktyvus raudonas mygtukas)
   - .modal--confirm (kompaktiškas patvirtinimo dialogo plotis)
   2026-05-28 įvedimas. */

/* Sticky footer + ~15px footer tarpas — bendras vidinių puslapių template'e
   (contact.css: body.page-klauskite, body.page-redaguoti). Čia nedubliuojama. */

/* H2 sekcijos antraštė (pvz. „Paskyros ištrynimas"). Mažesnė nei h1
   .contact-title (32px) — hierarchija h1 → h2. */
.account-subtitle {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: var(--fs-section-title); /* 24px */
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0;
}

/* Neredaguojamas el. pašto laukas — pilkesnis fonas, kad vizualiai aišku,
   jog readonly. readonly (ne disabled): reikšmė kopijuojama, fokusuojama. */
.account-input--readonly {
  background: var(--bg);
  color: var(--text-muted);
  cursor: default;
}

/* Sąlyginio lauko (Pakartoti slaptažodį) slėpimas per `hidden` atributą.
   Scope'inta .account-form, kad perdengtų .form-field { display: flex }
   (0,2,1 > 0,1,0) be globalaus poveikio. */
.account-form .form-field[hidden] {
  display: none;
}

/* === LIVE SLAPTAŽODŽIO REIKALAVIMŲ SĄRAŠAS === */
.pw-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pw-checklist__item {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-family: Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  /* Default (neįvykdyta) — raudona. Kontrastas #B91C1C ant balto ≥4.5:1. */
  color: #B91C1C;
}

.pw-checklist__item--pass {
  /* Įvykdyta — žalia. Kontrastas #047857 ant balto ≥4.5:1. */
  color: #047857;
}

.pw-checklist__icon {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
  font-weight: 700;
}

/* „Slaptažodžiai sutampa / nesutampa" live pranešimas. */
.pw-match {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #B91C1C;
}

.pw-match--ok {
  color: #047857;
}

/* === PASKYROS IŠTRYNIMO SEKCIJA === */
.account-danger-text {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dark);
}

/* Destruktyvus mygtukas — raudonas (#B91C1C ant balto teksto ≥4.5:1).
   Naudojamas ir ištrynimo sekcijoje, ir patvirtinimo modale. */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  align-self: flex-start;
  padding: 12px 24px;
  background: #B91C1C;
  color: var(--white);
  border: 1px solid #B91C1C;
  border-radius: var(--r-input);
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 150%;
  cursor: pointer;
  transition: background .15s;
}

.btn-danger:hover { background: #911616; }

.btn-danger:focus-visible {
  outline: 2px solid #B91C1C;
  outline-offset: 2px;
}

/* === PATVIRTINIMO MODALAS (alertdialog) ===
   Perpanaudoja .modal-overlay / .modal / .modal-hdr / .modal-close / .modal-ftr.
   .modal--confirm — kompaktiškas plotis (bazinis .modal min-width: 768px per
   platus pranešimui). */
.modal--confirm {
  min-width: 0;
  width: min(440px, 100%);
  max-width: 440px;
  padding: 28px;
  gap: var(--gap-md);
}

.modal--confirm .modal-ftr {
  position: static; /* trumpas dialogas — sticky footer nereikalingas */
  border-top: 0;
  padding-top: 0;
}

.modal-confirm-text {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dark);
}

/* prefers-reduced-motion — atjungiam .modal mIn animaciją patvirtinimo
   dialogui (bazinis .modal turi animation: mIn). */
@media (prefers-reduced-motion: reduce) {
  .modal--confirm {
    animation: none;
  }
}

/* === /accounts/ puslapiai (allauth + patvirtinimas + slaptažodis) === */
.page-accounts .accounts-page__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.page-accounts .accounts-page__content > h1 {
  display: none;
}

.page-accounts .accounts-page__content form p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.page-accounts .accounts-page__content label {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}

.page-accounts .accounts-page__content input:not([type="checkbox"]):not([type="hidden"]):not([type="submit"]),
.page-accounts .accounts-page__content select,
.page-accounts .accounts-page__content textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-input);
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-dark);
  background: var(--white);
}

.page-accounts .accounts-page__content input:focus-visible,
.page-accounts .accounts-page__content select:focus-visible,
.page-accounts .accounts-page__content textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.page-accounts .accounts-page__content .btn-primary,
.page-accounts .accounts-page__content button[type="submit"] {
  align-self: flex-start;
}

.page-accounts .accounts-page__content ul.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #B91C1C;
  font-family: Outfit, sans-serif;
  font-size: 14px;
}

.page-accounts .accounts-page__content .contact-back-wrap {
  margin: 0;
}

.page-accounts .account-email-list {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.page-accounts .account-email-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs);
  cursor: pointer;
}

.page-accounts .account-email-address {
  font-family: Outfit, sans-serif;
  font-size: 16px;
  color: var(--text-dark);
}

.page-accounts .account-email-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.page-accounts .account-email-badge--success {
  background: #D1FAE5;
  color: #047857;
}

.page-accounts .account-email-badge--warning {
  background: #FEF3C7;
  color: #B45309;
}

.page-accounts .account-email-badge--primary {
  background: var(--blue-light);
  color: var(--blue);
}

.page-accounts .account-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.page-accounts .account-provider-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
}

/* ===== components/auth.css ===== */

/* AUTH — prisijungimo dropdown + registracijos modal'as.

   STRUKTŪRA:
   - .auth-trigger-wrap — relative wrapper aplink .btn-login (desktop)
   - .auth-dropdown — pop-up po mygtuku desktop'e, full-screen modal mobile'e
   - .auth-modal-overlay + .modal — registracijos modal'as (perpanaudoja modal.css)

   KLASIŲ PERPANAUDOJIMAS:
   - .modal-overlay, .modal, .modal-hdr, .modal-close — egzistuojančios modal.css
   - .form-field, .form-label, .form-input, .form-required, .form-hint — comments.css
   - .btn-primary (registracijos submit) — comments.css
   - .btn-confirm / .btn-cancel — buttons.css

   Naujos klasės: .auth-trigger-wrap, .auth-dropdown*, .auth-row, .auth-remember,
   .auth-link, .auth-switch, .auth-separator. 2026-05-27 įvedimas. */

/* Dropdown — pop-up po trigger mygtuku. Markup'as gyvena body lygmenyje
   (kad veiktų ir desktop, ir mobile-nav trigger'ius — desktop .header-nav
   yra `display:none` ≤900, todėl į jo vidų patalpintas dropdown'as nebūtų
   matomas iš mobile-nav .btn-login).
   Desktop: position: fixed, koordinatės skaičiuojamos JS pusėje pagal
   spustelėto trigger.getBoundingClientRect().
   Mobile (≤640): full-screen overlay per @media taisyklę žemiau.
   `aria-hidden` toggle valdo matomumą + pointer-events. */
.auth-dropdown {
  position: fixed;
  z-index: 1000;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: var(--gap-md);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 8px 32px rgb(0 0 0 / 18%);
  display: none;
  flex-direction: column;
  gap: var(--gap-md);
}

.auth-dropdown[aria-hidden="false"] {
  display: flex;
}

/* Desktop: slaptažodžio atstatymo „išsiųsta" būsena — langas per ekrano vidurį. */
.auth-dropdown:has(.auth-state[data-auth-state="sent"].active) {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

/* Form viduje dropdown'o — flex column su gap. */
.auth-dropdown .auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* „Prisiminti mane" + „Pamiršau slaptažodį" eilutė. */
.auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-family: Outfit, sans-serif;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
}

.auth-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* Linkai — „Pamiršau slaptažodį", „Registruokitės", „Prisijunkite". */
.auth-link {
  font-family: Outfit, sans-serif;
  font-size: 15px;
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.auth-link:hover { color: var(--blue-btn-hover); }

.auth-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Separator tarp form ir switch link'o. */
.auth-separator {
  margin: 0;
  border: 0;
  height: 1px;
  background: var(--separator-color);
}

/* „Prisijungti su Google" — Google Light theme branding gairės. Brand spalvos
   (#FFFFFF / #747775 / #1F1F1F) FIKSUOTOS (ne projekto tema). Šriftas — projekto
   Outfit, weight 500 (sąmoninga išimtis: gairės leidžia, ne Roboto). Pill forma,
   content-width, centruotas. Veiksmas — placeholder console.log (žr. markup). */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;

  /* Tarpas TIK tarp „Prisijungti" ir šio mygtuko — 15px (kiti .auth-state
     gap'ai lieka 24px). flex gap 24 + margin-top -9 = 15px. */
  margin-top: -9px;
  height: 40px;
  padding: 0 12px;
  background: #FFF;
  border: 1px solid #747775;
  border-radius: 9999px;
  color: #1F1F1F;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background-color .15s;
}

.btn-google:hover { background: #F8F9FA; }

.btn-google:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Logo 18×18, originalios Google spalvos (img), aspect ratio išlaikomas. */
.btn-google__logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* „Neturite paskyros? Registruokitės" tekstas. */
.auth-switch {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  color: var(--text-dark);
  text-align: center;
}

/* Klaidos pranešimas (lauko lygio, po input). */
.auth-error {
  font-family: Outfit, sans-serif;
  font-size: 13px;
  color: #B91C1C;
  margin: 0;
}

/* Puslapio / formos pranešimai — tas pats box pattern kaip .contact-success. */
.site-messages {
  width: min(70ch, calc(100% - 2 * var(--gap-md)));
  margin: var(--gap-md) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  box-sizing: border-box;
}

.site-message {
  margin: 0;
  padding: var(--gap-lg);
  border-radius: var(--r-card);
  font-family: Outfit, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  box-sizing: border-box;
}

.site-message--error,
.site-message--error.error {
  color: #B91C1C;
  background: #FEF2F2;
  border: 1px solid #FECACA;
}

.site-message--success,
.site-message--success.success {
  color: var(--text-dark);
  background: #EDF2F9;
  border: 1px solid var(--blue);
}

.site-message:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.auth-form .site-message {
  width: 100%;
}

/* State machine — 3 wrapper'iai (login / forgot / sent). JS valdo .active
   klasę. NEnaudojam HTML `hidden` atributo, nes `display: flex` ant
   .auth-state perdengtų UA numatytą `hidden { display: none }` taisyklę
   (specifikum 0,0,1 < 0,1,0), todėl visi trys wrappers būtų matomi vienu
   metu. Vietoje to: default display:none, aktyvus — display:flex. */
.auth-state {
  display: none;
  flex-direction: column;
  gap: var(--gap-md);
}

.auth-state.active {
  display: flex;
}

/* Forgot/sent būsenos h3 antraštė (login būsenoje title `.visually-hidden`). */
.auth-state-title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0;
}

/* Trumpa instrukcija forgot būsenoje. */
.auth-instruction {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0;
}

/* Sėkmingo siuntimo pranešimas. */
.auth-success-msg {
  font-family: Outfit, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0;
}

/* Slaptažodžio atstatymo „išsiųsta" būsena — centruotas turinys. */
.auth-state[data-auth-state="sent"] {
  align-items: center;
  text-align: center;
}

.auth-state[data-auth-state="sent"] .btn-primary {
  align-self: center;
  min-width: 140px;
}

.auth-register-success {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  align-items: center;
  text-align: center;
  padding: 0 24px 24px;
}

.auth-register-success .btn-primary {
  min-width: 140px;
}

/* „← Grįžti į prisijungimą" — link su padidintu top padding (kad nekiltų
   ant submit mygtuko). */
.auth-back {
  align-self: flex-start;
}

/* Sėkmingo prisijungimo pranešimas (placeholder backendui). */
.auth-success {
  font-family: Outfit, sans-serif;
  font-size: 13px;
  color: #047857;
  margin: 0;
}

/* Close mygtukas dropdown'e — paslėptas desktop'e, matomas mobile full-screen. */
.auth-dropdown-close {
  display: none;
  position: absolute;
  top: var(--gap-sm);
  right: var(--gap-sm);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-dark);
  color: var(--white);
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.auth-dropdown-close svg { width: 14px; height: 14px; }

/* === REGISTRACIJOS MODAL — perpanaudoja modal.css struktūrą === */

/* Modal padengia visą ekraną (kaip kiti modal'ai). Vidaus turinys —
   form'os laukai (form-field), submit mygtukas (.btn-primary), switch link'as. */
.auth-modal-overlay .modal {
  max-width: 480px;
  width: 100%;
}

.auth-modal-overlay .auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  margin-top: var(--gap-md);
}

/* reCAPTCHA widget konteineris registracijos modale. */
.auth-captcha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: var(--gap-md);
}

.auth-captcha .g-recaptcha {
  display: inline-block;
}

/* Disabled submit button — kol form nepilnas (terms checkbox pašalintas
   2026-05-27 — submit gating dabar pagal name + email + slaptažodžio sutapimą). */
.btn-primary:disabled,
.auth-form button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.user-menu__logout-form {
  display: contents;
}

/* === DEMO PRISIJUNGTA BŪSENA — vartotojo trigger + meniu (front-only) ===
   body.is-logged-in perjungia matomą header bloką: .btn-login (neprisijungta)
   VS .btn-user (prisijungta). Vartotojo meniu perpanaudoja .auth-dropdown dėžę
   + positionDropdown + aria-hidden show/hide (žr. auth.js) — nedubliuojam
   dropdown logikos. */

/* Vartotojo trigger — apvalus avataras + vardas. Default paslėptas; matomas tik
   .is-logged-in. Stilius derinamas su .btn-login (transparent, white, 700). */
.btn-user {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-xs);
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--white);
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 150%;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}

.btn-user:hover { background: rgb(255 255 255 / 12%); }

.btn-user:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.btn-user__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* State toggle — neprisijungta rodo .btn-login, prisijungta rodo .btn-user. */
body.is-logged-in .btn-login,
body[data-user-authenticated="true"] .btn-login { display: none; }
body.is-logged-in .btn-user,
body[data-user-authenticated="true"] .btn-user { display: inline-flex; }

/* Mobile-nav variante — toks pat margin kaip .btn-login. */
.mobile-nav .btn-user { margin-top: 16px; }

/* Vartotojo meniu (dropdown) — perpanaudoja .auth-dropdown dėžę, bet
   kompaktiškesnis padding + sava opcijų eilutvarka. */
.user-menu {
  gap: 4px;
  padding: 8px;
}

.user-menu__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-dark);
  text-decoration: none;
  cursor: pointer;
}

/* Opcijos ikona kairėje — fiksuotas 20×20 dydis, contain kad skirtingų
   proporcijų PNG'ai atrodytų vienodai. Dekoratyvi (alt="" aria-hidden). */
.user-menu__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.user-menu__item:hover { background: var(--blue-light); }

.user-menu__item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.user-menu__logout {
  margin-top: 4px;
  border-top: 1px solid var(--separator-color);
  border-radius: 0 0 6px 6px;
  color: #B91C1C;
}

/* === RESPONSIVE === */

/* Mobile (≤640): dropdown tampa full-screen modal. */
@media (width <= 640px) {
  .auth-dropdown {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: 0;
    padding: var(--gap-md) var(--gap-sm);
    box-shadow: none;
    overflow-y: auto;
  }

  .auth-dropdown[aria-hidden="false"] {
    display: flex;
  }

  /* Close mygtukas matomas tik mobile full-screen variante. */
  .auth-dropdown-close {
    display: inline-flex;
  }

  /* Mobile'e papildomo padding'o virš form'os, kad close mygtukas neuždengtų. */
  .auth-dropdown .auth-form {
    margin-top: var(--gap-md);
  }

  /* Sent būsena mobile full-screen — vertikaliai per vidurį. */
  .auth-dropdown:has(.auth-state[data-auth-state="sent"].active) {
    justify-content: center;
  }

  .auth-state[data-auth-state="sent"].active {
    flex: 1;
    justify-content: center;
    padding: var(--gap-md) 0;
  }

  /* Vartotojo meniu mobile'e NEtampa full-screen (skirtingai nei login
     dropdown'as) — lieka kompaktiškas top-right pop-up. Override po
     .auth-dropdown taisyklės (ta pati specifika, source order laimi). */
  .user-menu {
    inset: auto;
    top: 70px;
    right: 8px;
    width: 240px;
    max-width: calc(100vw - 16px);
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: 0 8px 32px rgb(0 0 0 / 18%);
    overflow-y: visible;
  }
}

/* Prefers-reduced-motion — modal'as ir dropdown'as šiuo metu neturi
   transitionų; rezervuota ateičiai. */

/* ===== components/buttons.css ===== */

/* Button – 100x41px, padding 12px 24px 12px 16px, radius 4px */
.btn-login {
  display: flex; flex-direction: row;
  justify-content: center; align-items: center;
  gap: 8px; padding: 12px 24px 12px 16px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: 14px; line-height: 150%;
  cursor: pointer; white-space: nowrap;
  transition: background .15s; flex-shrink: 0;
}
.btn-login:hover { background: rgb(255 255 255 / 12%); }
.btn-login svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-icon-circle {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FEF7FF;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.btn-icon-circle svg { width: 14px; height: 14px; color: var(--blue); }

.link-btn {
  font-weight: 700;
  font-size: 14px; color: var(--blue);
  text-decoration: underline;
  background: none; border: none; cursor: pointer; padding: 0;
}
.link-btn:hover { opacity: .75; }

.btn-search {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 24px 12px 16px;
  background: var(--blue); color: var(--white);
  border: none; border-radius: var(--r-input);
  font-weight: 700;
  font-size: 14px; line-height: 150%;
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  cursor: pointer; white-space: nowrap;
  transition: background .2s; flex-shrink: 0;
}
.btn-search:hover { background: var(--blue-btn-hover); }

.btn-add {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: var(--r-input);
  font-weight: 700;
  font-size: 14px; line-height: 150%;
  color: var(--blue);
  font-feature-settings: 'liga' off, 'clig' off;
  cursor: pointer; width: 100%;
  transition: background .2s;
}
.btn-add:hover { background: var(--blue-light); }
.btn-add.filled { background: var(--blue-light); }

.btn-cancel {
  padding: 12px 24px;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: var(--r-input);
  font-weight: 700;
  font-size: 14px; line-height: 150%;
  color: var(--blue);
  cursor: pointer;
  transition: background .15s;
}
.btn-cancel:hover { background: var(--blue-light); }
.btn-cancel:disabled { opacity: .4; cursor: not-allowed; }

/* „Redaguoti" badge (spec 4.6) — mažas outline pill, TIK admin/redaktoriui (markup'e Django
   {% if user.is_staff %} komentarai). Outline šeima kaip .btn-add/.btn-cancel (baltas fonas +
   --blue border/tekstas, hover --blue-light; kontrastas: tekstas ~7:1 ≥4.5, border ≥3:1), bet
   KOMPAKTIŠKAS (24px pill, 13px tekstas) — vizualiai skiriasi nuo pagrindinių CTA. Naudojama
   inner.html: KIEKVIENO SAKINIO .example-actions eilutėje (Žiūrėti → Redaguoti → širdelė), tiek
   reikšmių, tiek „Vartojimo pavyzdžiai" sekcijose. PERPANAUDOJAMA — bendras admin-edit badge.
   letter-spacing/text-indent reset (žemiau) — defensyvu paveldimai tipografijai. :focus-visible
   globalus (nekuriamas). */
.btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: normal;

  /* text-indent PAVELDIMAS (inherit) → reset, kad badge teksto node nepasislinktų, jei badge
     atsidurtų kabančio įtraukimo kontekste (defensyvu — anksčiau reikėjo .meaning-title h2). */
  text-indent: 0;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: background .15s;
}

.btn-edit:hover { background: var(--blue-light); }
.btn-edit svg { flex-shrink: 0; }

.btn-confirm {
  padding: 12px 24px;
  background: var(--blue); color: var(--white);
  border: 1px solid var(--blue);
  border-radius: var(--r-input);
  font-weight: 700;
  font-size: 14px; line-height: 150%;
  cursor: pointer;
  transition: background .15s;
}
.btn-confirm:hover { background: var(--blue-btn-hover); }
.btn-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* Nav buttons outside the card.
   top: 182px = vidurio aukštis vaizdo placeholder'io: 12px padding + ~30px title
   + 8px gap + ~132px iki vaizdo vidurio (264.46/2). Fiksuota pikseliais, kad
   rodyklės neslinktų, kai kortelė išsiplečia atidarius aprašymą. */
.carousel-btn {
  position: absolute;
  top: 182px;
  transform: translateY(-50%);
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  cursor: pointer;
  transition: box-shadow .2s, background .2s;
  z-index: 10;
}

/* Sakinių kortelės neturi title'o, todėl vaizdas pradeda nuo viršaus.
   12px padding + ~132px iki vaizdo vidurio = 144px. */
.glosos-card--sentences .carousel-btn { top: 144px; }

.carousel-btn:hover { box-shadow: 0 2px 8px rgb(38 75 135 / 18%); background: var(--blue-light); }
.carousel-btn.prev { left: -76px; }
.carousel-btn.next { right: -76px; }
.carousel-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }

/* Buttons sit outside card (-76px) only when viewport has room: viewport >= 1700 fits
   container-max (1634) + 2×(32 padding + 76 offset). Below, buttons overlap card edges. */
@media (width <= 1699px) {
  .carousel-btn.prev { left: 8px; }
  .carousel-btn.next { right: 8px; }
  .carousel-btn { box-shadow: 0 2px 8px rgb(0 0 0 / 15%); }
}

/* Touch įrenginiai (mobile + tablet): rodyklės paslėptos, swipe veikia natūraliai. */
@media (width <= 1023px) {
  .carousel-btn { display: none; }
}

/* ===== components/carousel.css ===== */

.glosos-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  position: relative;
  overflow: visible;
}

/* Tinted variant: light blue background, tighter 24px padding */
.glosos-card--tinted {
  background: #EDF2F9;
  padding: 24px;
}

/* Inside a tinted card, invert the item background to white so cards stand out */
.glosos-card--tinted .glosos-item {
  background: var(--white);
}

/* Sentences card: items have no title, only video + text */
.glosos-card--sentences .glosos-item-title { display: none; }

/* Sentences card: image touches top edge (no top padding), card padding 0 12px 12px */
.glosos-card--sentences .glosos-item {
  padding: 0 12px 12px;
}

.glosos-card--sentences .glosos-img-placeholder {
  margin-left: -12px;
  margin-right: -12px;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
}

/* Sekcijos antraštė; paieškos rezultatuose gali turėti glosos pavadinimą su skaitmenimis
   („ADAŽAS-(4C/B)(1)"), tad lining skaitmenys. Žr. gesture-header.css .gesture-header-top h1. */
.glosos-header {
  display: flex;
  align-items: center;
  font-variant-numeric: lining-nums;
  margin-bottom: 24px;
}

.glosos-header a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  text-decoration: none;
}

/* Lock the chevron SVG to its intrinsic size so flex shrink doesn't squish it
   when the row is tight (e.g. populiariausi-gestai header with period picker). */
.glosos-header a svg { flex-shrink: 0; }

/* On narrow viewports, only the header that shares its row with the period
   picker (.glosos-header--between, used by „Populiariausi gestai") may not
   fit on one line. min-content removes the dead space between the wrapped
   second line and the chevron. Other headers (single-row, no picker) stay on
   default sizing so short titles like „Naujausi sakiniai" stay on one line. */
@media (width <= 640px) {
  .glosos-header--between a h2 { inline-size: min-content; }
}

.glosos-header a h2 {
  font-weight: 700;
  font-size: var(--fs-section-title);
  letter-spacing: -0.019em;
  color: var(--blue);

  /* Reserve underline space so layout does not shift on hover. */
  border-bottom: 1px solid transparent;
}

@media (hover: hover) {
  .glosos-header a:hover h2 { border-bottom-color: var(--blue); }
}

/* Populiariausi header: title on the left, period selector on the right */
.glosos-header--between { justify-content: space-between; gap: 16px; }

/* Carousel wrapper with overflow hidden */
.carousel-outer {
  overflow: clip visible;
  position: relative;
}

.carousel-track {
  display: flex;
  gap: 16px;
  transition: transform .35s ease;
}

/* 320x auto, radius 10px, padding 12px, gap 8px */
.glosos-item {
  flex: 0 0 320px;
  width: 320px;
  background: #EDF2F9;
  border-radius: var(--r-panel);
  padding: 12px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: box-shadow .2s;
  overflow: hidden;
}

@media (hover: hover) {
  .glosos-item:hover { box-shadow: 0 4px 16px rgb(38 75 135 / 13%); }
}

/* Head = link wrapping title + thumbnail (full top portion clickable).
   Bleeds to item edges so hover bg covers entire top to image top. */
.glosos-item-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: calc(100% + 24px);
  margin: -12px -12px 0;
  padding: 12px 12px 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}

/* Sentences variant: image is at top, no title padding */
.glosos-card--sentences .glosos-item-head {
  margin-top: 0;
  padding-top: 0;
}

/* Hover effect only on hover-capable devices (prevents blue flash on mobile tap) */
@media (hover: hover) {
  .glosos-item-head:hover { background: var(--blue-light); }

  /* Non-tinted cards have blue-light items — invert hover to white for contrast */
  .glosos-card:not(.glosos-card--tinted) .glosos-item-head:hover {
    background: var(--white);
  }
}

.glosos-item-head:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Native <button> as card head breaks layout (border/padding/background); prefer <a>. */
button.glosos-item-head {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.glosos-item-title {
  display: block;
  width: 100%;
  padding: 0 8px;
  font-weight: 700;
  font-size: var(--fs-card-title);
  color: var(--blue);
  text-align: center;

  /* Kortelės glosos pavadinimas. Raleway numatytai piešia old-style skaitmenis, todėl glosos su
     skaitmenimis (PADAŽAS-(4C/B)) atrodo kreivai. Žr. gesture-header.css .gesture-header-top h1. */
  font-variant-numeric: lining-nums;
  letter-spacing: 0.02em;
}

/* 320 × ~266.67 (1.20 aspect ratio), bleeds through the card's 12px side padding */
.glosos-img-placeholder {
  width: 320px;
  aspect-ratio: var(--video-aspect);
  flex-shrink: 0;
  margin-left: -12px;
  margin-right: -12px;
  background: linear-gradient(135deg, #bbb 0%, #999 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgb(255 255 255 / 40%);
  position: relative;
  overflow: hidden;
}

/* Video variant: cover fills the 1.21 box; centered crop for non-1.21 sources. */
.glosos-img-placeholder.has-video { background: #000; }

/* BENDRA video ŽYMA (label) — gestų video lango viršutiniam kairiam kampe. Turinys BET KOKS
   („TARPTAUTINIS", „NAUJAS"…) — apibendrinta klasė, NE pririšta prie konkretaus žodžio. SĄLYGINIS:
   markup'as įterpiamas TIK kai yra tekstas. TIK gestų video (dedama .glosos-img-placeholder viduje,
   kuri position:relative); sakinių/pavyzdžių video (.video-modal / .video-modal__video) ten NĖRA.
   Solid badge fonas (--blue) + baltas tekstas → kontrastas ant kintančio video kadro (≥4.5:1).
   pointer-events:none → netrukdo play/hover. z-index virš video. Perpanaudojama VISUOSE puslapiuose
   (vienas apibrėžimas: titulinis, paieska, paieska-glosos, inner). */
.video-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 6px;
  background: var(--blue);
  color: var(--white);
  font-family: Raleway, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 4px;
  pointer-events: none;
}

.glosos-img-placeholder video,
.glosos-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Karuselės gestų kortelė: miniatiūra (arba pilkas placeholder) → video ant hover/click. */
.glosos-img-placeholder.has-poster .glosos-item-poster {
  position: absolute;
  inset: 0;
}

.glosos-img-placeholder.has-hover-video .lgkp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  z-index: 1;
  background: transparent;
  pointer-events: none;
}

.glosos-img-placeholder.has-hover-video {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .glosos-img-placeholder.has-hover-video .lgkp {
    opacity: 0;
  }

  .glosos-img-placeholder.has-hover-video .lgkp.is-video-visible {
    opacity: 1;
    background: #000;
  }

  .glosos-img-placeholder.has-poster:has(.lgkp.is-video-visible) .glosos-item-poster {
    opacity: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  .glosos-img-placeholder.has-hover-video .lgkp__video {
    opacity: 0;
  }

  .glosos-img-placeholder.has-hover-video .lgkp.is-video-visible {
    background: #000;
  }

  .glosos-img-placeholder.has-hover-video .lgkp.is-video-visible .lgkp__video {
    opacity: 1;
  }

  .glosos-img-placeholder.has-poster:has(.lgkp.is-video-visible) .glosos-item-poster {
    opacity: 0;
  }

  /* .lgkp turi pointer-events:none (kad desktop hover/click praeitų į
     .glosos-item-head nuorodą). Mobile Play mygtukas turi gauti tap'ą pats —
     kitaip paspaudimas nukeliauja į <a> ir atidaro gesto puslapį. */
  .glosos-img-placeholder.has-hover-video .lgkp__bigplay {
    pointer-events: auto;
  }
}

.glosos-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgb(0 0 0 / 55%);
  border: none;
  color: var(--white);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .15s;
}
.glosos-play:hover { background: rgb(0 0 0 / 75%); }
.glosos-play svg { width: 18px; height: 18px; fill: currentcolor; }

/* Play/pause icon swap based on .playing state */
.glosos-play .icon-pause { display: none; }
.glosos-img-placeholder.playing .glosos-play .icon-play { display: none; }
.glosos-img-placeholder.playing .glosos-play .icon-pause { display: block; }

/* Touch devices or narrow viewport: show play/pause button + padidinti
   iki 56×56 (toks pat dydis kaip .info-play, geresnis tap target). */
@media (hover: none), (width <= 760px) {
  .glosos-img-placeholder.has-video .glosos-play { display: flex; }

  .glosos-play {
    width: 56px;
    height: 56px;
  }
}

.glosos-item-body {
  width: 100%;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  color: #555;
  line-height: 150%;
  position: relative;
  cursor: pointer;
  transition: max-height .35s ease;
}

/* Collapsed: rodom iki 4 eilučių. -webkit-line-clamp PATI nukerpa ir prideda „…" (truncation
   indikatorius) — to pakanka. Fade mask PAŠALINTAS: jis nušviesindavo apatinius ~25% (75%→100%)
   KIEKVIENOS collapsed dėžės NEPRIKLAUSOMAI nuo to, ar tekstas tikrai nukirptas, todėl (a) 4-ą
   eilutę dengė visą (nuo 75% = 3 eil. ribos — per anksti), (b) trumpiems (1-3 eil.) PILNIEMS
   tekstams proporcingai nušviesindavo pilną paskutinę eilutę (2-line dėžėj 75% = 1.5 eil.).
   Bendras komponentas (titulinis + paieska). */
.glosos-item-body.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reikšmių sąrašo (<ol>) body — modifikatorius .glosos-item-body--list. transition:none — bazinis
   max-height .35s transition (6em→500px collapsed→expanded) STRINGA (computed lieka 96px, ol nepilnai
   išsiskleidžia); atjungus — išskleidimas momentinis (kaip tekstinių kortelių none→500px jump). */
.glosos-item-body--list {
  transition: none;
}

/* Du skirtumai nuo tekstinio body: (1) -webkit-box su block <ol> susitraukia iki min-content (kortelė
   kolapsuoja) → display:block + -webkit-line-clamp:none grąžina normalų plotį; (2) line-clamp neveikia
   ant block <li> → clamp per max-height = 4 eil. (1.5 line-height × 4 = 6em). overflow:hidden paveldimas
   iš .collapsed. Tekstinės kortelės (.collapsed be --list) NEPALIESTOS. glosos-truncate.js matavime
   maxHeight laikinai → none. */
.glosos-item-body--list.collapsed {
  display: block;
  -webkit-line-clamp: none;
  max-height: 6em;
}

/* Fade — paskutinės (4-os) eilutės nušviesėjimas TIK kai tekstas REALIAI nukirptas (>4 eil.):
   .is-truncated prideda js/glosos-truncate.js (matuoja EILUTES: scrollHeight/lineHeight > 4). ≤4 eil.
   → .is-truncated nepridedamas → jokio fade. Išskleidus (.expanded) → mask none (žemiau). -webkit-mask
   + mask abu (vendor prefix privalomas). */
.glosos-item-body.is-truncated {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
}

/* ≤4 eil. (ne .is-truncated) — expand išjungtas (glosos-truncate.js), tad cursor default
   (perrašo .glosos-item-body bazės cursor:pointer). */
.glosos-item-body:not(.is-truncated) {
  cursor: default;
}

.glosos-item-body.expanded {
  max-height: 500px;

  /* Išskleidus — fade nuimamas (visas tekstas matomas). Eina PO .is-truncated → override. */
  -webkit-mask-image: none;
          mask-image: none;
}

/* Žodžio paieškos rezultatai (#pr-gestai-grid[data-zodis-mode]; atributą deda backend'as, formos
   paieškos grid'as jo NETURI) rodo VISAS gesto reikšmes, todėl apkarpymas čia atjungiamas: tekstiniam
   body -webkit-line-clamp, --list variantui max-height, abiem .is-truncated fade. Eina PO .collapsed
   /.is-truncated/.expanded ir dėl šaltinio tvarkos, ir dėl specifiškumo (id+atributas). Formos
   rezultatuose bei paieska-glosos.html (grid be atributo) clamp lieka nepakitęs. */
#pr-gestai-grid[data-zodis-mode] .glosos-item-body.collapsed,
#pr-gestai-grid[data-zodis-mode] .glosos-item-body.is-truncated {
  max-height: none;
  -webkit-line-clamp: none;
  -webkit-mask-image: none;
          mask-image: none;
}

/* Reikšmių sąrašas — numeruotas <ol> .glosos-item-body viduje (visada, ir vienareikšmiams).
   Šriftas/spalva paveldima iš body (Outfit 16px #555). Numeriai per list-style:decimal; padding-left
   vietos „1. 2. 3."; margin:0 + maži li tarpai → matavimas/clamp arti realaus eilučių aukščio. */
.glosos-item-body ol {
  margin: 0;
  padding-left: 1.5em;
  list-style: decimal;
}

.glosos-item-body li + li {
  margin-top: 2px;
}

/* Pagination dots — mobile only */
.carousel-dots { display: none; }

/* Responsive */
@media (width <= 640px) {
  .glosos-card { padding: 20px 16px; }

  .carousel-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
  }

  .carousel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D1D5DB;
    transition: width .25s ease, background .25s ease, border-radius .25s ease;
  }

  .carousel-dots .dot.active {
    width: 20px;
    background: var(--blue);
    border-radius: 3px;
  }

  /* Native horizontal scroll with snap — replaces prev/next buttons on touch */
  .carousel-outer {
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .carousel-outer::-webkit-scrollbar { display: none; }

  .carousel-track {
    transform: none !important;
    transition: none;
    padding-bottom: 8px;
  }

  .glosos-item {
    flex: 0 0 calc(100vw - 56px);
    width: calc(100vw - 56px);
    min-height: auto;
    scroll-snap-align: start;
  }

  .glosos-img-placeholder {
    width: calc(100% + 24px);
    height: auto;
    aspect-ratio: var(--video-aspect);
  }
}

.popular-gestures-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.popular-list-header {
  width: 100%;
  margin-bottom: 24px;
}

.popular-list-intro {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 1.5;
}

.glosos-empty {
  width: 100%;
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  color: #555;
  font-size: 16px;
}

/* ===== components/comments.css ===== */

/* COMMENTS — inner.html komentarų sekcija (Figma 1309:724).
   Box 4 inner.html'e (po .usage-examples). Suvyniota į .main-card baltą
   outer'į (kaip kiti box'ai). Spacing per --gap-* tokens, separator
   per --separator-color. */

/* Inner blue-gray panelis — toks pats pattern'as kaip .tabs, .usage-examples. */
.comments {
  background: #EDF2F9;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--gap-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Antraštės eilutė — ikona + "Komentarai" + skaičius. */
.comments-header {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0 var(--gap-md);
}

.comments-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.comments-title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.456px;
  color: var(--text-dark);
  margin: 0;
}

.comments-count {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--text-dark);
}

.comments-separator {
  margin: 0;
  height: 1px;
  border: 0;
  background: var(--separator-color);
}

/* === LOGIN REQUIRED PRANEŠIMAS === */
.comments-login-required {
  margin: 0 var(--gap-md);
  padding: var(--gap-md);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
}

.comments-login-required p {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  color: var(--text-dark);
}

.comments-login-link {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.comments-login-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* === STATIŠKAS success/patvirtinimo pranešimas (demonstracija) ===
   Žydras notice box VIRŠ komentaro formos. Realiai rodomas PO submit; mock'e statiškas.
   FONO PASTABA: .comments sekcijos bg #EDF2F9 ir var(--blue-light) #E3E9F2 beveik
   vienodi (~1.1:1), todėl PRIDEDAMA subtili mėlyna kraštinė boxui apibrėžti — skirtumas
   nuo .pr-empty (kuris ant balto fono, be kraštinės). Tekstas var(--blue) ant
   var(--blue-light) ≈ 7:1 (≥ WCAG AA 4.5:1). Statiškas → aria-live nebūtina. */
.comments-success {
  /* margin-top --gap-lg (32) — papildomas atskyrimas VIRŠ box'o (prisideda prie .comments flex
     gap 24 → 56px viso; box nebeprisiglaudžia prie aukščiau esančio teksto). Tik viršus. */
  margin: var(--gap-lg) var(--gap-md) 0;
  padding: var(--gap-md);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-xs);
  background: var(--blue-light);
  border: 1px solid rgb(38 75 135 / 25%);
  border-radius: var(--r-card);
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--blue);
}

.comments-success__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* [hidden] saugiklis — .comments-success yra display:flex; autoriaus taisyklė nugalėtų UA
   [hidden]{display:none}, tad be šio override pranešimas liktų matomas. Būtina dinaminiam
   rodymui po submit (comments.js). */
.comments-success[hidden] {
  display: none;
}

/* === TOGGLE: „Parašyti komentarą" mygtukas + collapsed forma === */

/* Mygtukas — primary mėlynas, asimetriškas padding (12/16/12/24) iš dizaino.
   Click handler žr. js/comments.js — atveria/uždaro .comments-form-wrapper. */
.btn-add-comment {
  align-self: flex-start;
  margin: 0 var(--gap-md);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  height: 40px;
  padding: 12px 16px 12px 24px;
  background: var(--blue);
  color: var(--white);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.2s;
}

@media (hover: hover) {
  .btn-add-comment:hover { background: var(--blue-btn-hover); }
}

.btn-add-comment:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Form wrapper — atveriama / uždaroma JS pusėje per `hidden` atributą +
   aria-expanded ant mygtuko. margin-top — kad atsidaręs forma turėtų
   atstumą nuo mygtuko (collapsed būsenoje margin'as nesvarbu — hidden).
   max-width 60% desktop / 80% tablet / 100% mobile — kad forma nebūtų
   ištempta per visą plotį skaitomumo dėlei (kairys sulygiavimas paveldimas
   iš tėvinio flex column). */
.comments-form-wrapper {
  max-width: 60%;
  margin-top: var(--gap-md);
}

.comments-form-wrapper[hidden] {
  display: none;
}

/* === FORMOS STILIAI === */
.comments-form {
  padding: 0 var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.comments-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.form-label {
  font-family: Outfit, sans-serif;
  font-size: 16px;
  color: var(--text-dark);
  display: flex;
  gap: var(--gap-xs);
  align-items: baseline;
}

/* Spalva --text-muted, ne #7D7D7D: pastarasis ant balto duoda 4.12:1 ir neatitinka
   WCAG 1.4.3 AA (>=4.5:1; 12px tekstas, 3:1 lengvatos netaikomos). --text-muted duoda 5.29:1. */
.form-required,
.form-optional {
  font-size: 12px;
  color: var(--text-muted);
}

.form-input,
.form-textarea {
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dark);
  padding: 12px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* Spalva --text-muted del WCAG 1.4.3 AA, kaip .form-required/.form-optional/.form-hint.
   Placeholder yra tekstas, tad jam galioja tas pats >=4.5:1 reikalavimas. */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgb(38 75 135 / 20%);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Spalva --text-muted del WCAG 1.4.3 AA, kaip .form-required/.form-optional (zr. auksciau). */
.form-hint {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* reCAPTCHA placeholder — backend pakeis tikru widget'u. */
.comments-captcha-placeholder {
  padding: var(--gap-md);
  background: rgb(0 0 0 / 3%);
  border: 1px dashed var(--border);
  border-radius: 4px;
  text-align: center;
}

/* Submit mygtukas — primary style (mėlynas, baltas tekstas). */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  height: 40px;
  padding: 12px 16px;
  background: var(--blue);
  color: var(--white);
  border: 0;
  border-radius: var(--r-input);
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-primary:hover { background: var(--blue-btn-hover); }

.btn-primary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.comments-submit {
  align-self: flex-start;
}

/* .comments-moderation-notice — paveldima default .form-hint stilistika
   (Outfit 14px gray). Be papildomų override'ų. */

/* === KOMENTARŲ SĄRAŠAS === */
.comments-list {
  list-style: none;
  padding: 0 var(--gap-md);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.comment + .comment {
  border-top: 1px solid var(--separator-color);
  padding-top: var(--gap-md);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-xs);
}

.comment-author {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-dark);
}

/* Spalva --text-muted del WCAG 1.4.3 AA: #7D7D7D ant .comments fono (#EDF2F9) duoda 3.66:1.
   Butent si vieta buvo WAVE „Very low contrast" x5 inner.html puslapyje. */
.comment-date {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: var(--text-muted);
}

.comment-text {
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #5f5f5f;
  margin: 0;
}

/* „Pridėti video" mygtukas komentare — antrinis/outline stilius, dera
   komentarų sekcijoje (NE pagrindinis mėlynas). Pakeitė YouTube embed.
   Backend integracija vėliau (placeholder console.log). */
.btn-add-video {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2xs);
  margin-top: var(--gap-sm);
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 8px;
  cursor: pointer;
  font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--blue);
}

.btn-add-video:hover {
  background: var(--blue);
  color: var(--white);
}

.btn-add-video:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Komentaro formos „Įkelti video" valdiklis — .btn-add-video mygtukas + pasirinkto failo
   pavadinimas šalia (flex eilutė). Validaciją tvarko inline wiring + bendra validateVideoFile. */
.comment-video-upload {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.comment-video-upload .btn-add-video {
  margin-top: 0; /* flex eilutėje — be standalone viršaus tarpo */
}

.comment-video-filename {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  word-break: break-all;
}

/* =====================================================================
   KOMENTARO VIDEO — SĄMONINGAS nukrypimas nuo §32 1.21 aspect-ratio pattern'o.

   PROJEKTAS visur naudoja aspect-ratio: 1.21 (gestų video, §32). Komentarų
   video — IŠIMTIS: 16/9 (640×360). Priežastis: tai VARTOTOJO content'as
   (telefonu nufilmuoti įrašai, įvairios proporcijos). 16:9 yra standartas
   vartotojo video. Apkerpti iki 1.21 būtų destruktyvu vartotojo turiniui.

   object-fit: contain — vertikalūs telefonų įrašai gauna juodus bar'us iš
   šonų, BET VISA kompozicija matosi. Cover apkirptų kraštus (destruktyvu).

   NEUNIFORM'INTI su likusiu projekto video (NETAISYTI 16/9 → 1.21).
   ===================================================================== */
.comment-video {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin-top: var(--gap-sm);
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.comment-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* === REPLY (ATSAKYTI) — atvaizdavimo pavyzdys, BE logikos ===
   „Atsakyti" mygtukas = perpanaudotas .link-btn (buttons.css ghost tekstinis). Nested reply gija —
   tas pats .comment markup, įdėtas į .comment-replies (rekursinis <ul>); nesting NERIBOTAS. Realiai
   reply tekstas į DOM — TIK per textContent (XSS), NE innerHTML; backend pateiks komentarų MEDĮ. */

/* Actions eilutė po komentaro turiniu. Kol kas tik „Atsakyti" (komentaruose .btn-fav širdutės NĖRA;
   jei atsiras — dėsis čia, šalia, todėl flex row su gap). */
.comment-actions {
  margin-top: var(--gap-sm);
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

/* Įdėtinių reply gija: indent per padding-left + thread linija (border-left). .comment items viduje
   perpanaudoja .comment stilių (+ .comment+.comment separatorius tarp sesių reply). THREAD LINIJA
   #7D7D7D ant .comments #EDF2F9 = 3.65:1 (≥ WCAG 1.4.11 non-text 3:1; --separator-color #ABABB6
   duotų ~2:1). Mobile — mažesnis indent (žr. @media ≤640). */
.comment-replies {
  list-style: none;
  margin: var(--gap-md) 0 0;
  padding: 0 0 0 var(--gap-md);
  border-left: 2px solid #7D7D7D;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Reply forma gijoje (.comment-reply-form — klonuota iš #comment-reply-form-tpl, žr. comments.js).
   Konteineris perpanaudoja .comments-form-wrapper (max-width 60/80/100% + [hidden] display:none +
   margin-top); vidinė .comments-form gijoje BE šoninio padding (specifiškumas 0,2,0 > mobile
   .comments-form 0,1,0) — forma lygiuojasi su komentaro tekstu (sąrašo padding + gijos indent jau
   duoda šoninius tarpus, papildomas 24px stumtų per giliai). */
.comment-reply-form .comments-form {
  padding: 0;
}

/* === RESPONSIVE === */
@media (641px <= width <= 1024px) {
  /* Padding inner'iai jau yra desktop (--gap-md = 24); tablet'e — be pokyčio. */

  /* Tablet typography — atstatyti pagal --fs-*-tablet sistemą. */
  .comment-text {
    font-size: var(--fs-body-tablet);
    line-height: var(--lh-tablet);
  }

  .comments-form-wrapper {
    max-width: 80%;
  }
}

@media (width <= 640px) {
  .comments-header,
  .comments-form,
  .comments-list,
  .comments-login-required {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }

  .comments-login-required {
    margin: 0 var(--gap-sm);
    padding: var(--gap-sm);
  }

  /* Mobile — margin-top žingsniu žemyn (--gap-lg → --gap-md), pagal projekto kompresijos
     konvenciją; šonai --gap-sm kaip kiti komentarų blokai. */
  .comments-success {
    margin: var(--gap-md) var(--gap-sm) 0;
    padding: var(--gap-sm);
  }

  .btn-add-comment {
    margin: 0 var(--gap-sm);
  }

  /* Mobile — input'ai stack'inami vienoje kolonoje (vardas + email atskirai). */
  .comments-form-row {
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
  }

  /* Mobile — komentaro autorius + data stack'inami vertikaliai. */
  .comment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xs);
  }

  .comments-form-wrapper {
    max-width: 100%;
  }

  /* Mobile — konservatyvus reply indent (24 → 12px/lygis), kad gilus nesting nesutrauktų teksto. */
  .comment-replies {
    padding-left: 12px;
  }
}

/* ===== components/contact.css ===== */

/* CONTACT — „Klauskite" kontaktų puslapio (klauskite.html) layout.

   PERPANAUDOJAMOS klasės (NEdubliuojama):
   - .form-field, .form-label, .form-required, .form-input, .form-textarea — comments.css
   - .auth-error (raudonas klaidos tekstas) — auth.css
   - .comments-captcha-placeholder (pilkas dashed blokas) — comments.css
   - .btn-primary (submit) — comments.css
   - header / footer / nav / mobile-nav — bendri komponentai

   NAUJOS klasės (tik page-level wrapper + success + captcha eilutė — projekte
   nebuvo standalone formos puslapio konteinerio): .contact-main, .contact-title,
   .contact-intro, .contact-form, .contact-captcha-row, .contact-captcha-check,
   .contact-captcha-brand, .contact-success. 2026-05-28 įvedimas. */

/* ===== BENDRAS VIDINIŲ PUSLAPIŲ TEMPLATE (box-in-box) =====
   Naudoja klauskite.html + redaguoti-paskyra.html (+ būsimi straipsnių puslapiai).
   Vizualas (pagal inner.html): BALTAS card ant žydro puslapio fono (--bg) — JOKIO
   žydro išorinio box. NEPRIKLAUSOMA nuo inner.html .main-card (atkartoja realias
   jo reikšmes savoje klasėje — inner.html NEpaliečiamas).
   Hierarchija: .inner-page (konteineris) > .inner-page__card (PLATUS baltas box) >
   .inner-page__content (70ch kolona) [> .inner-page__section ...]. JOKIO žydro
   content sluoksnio — tekstas/forma tiesiai baltame. */

/* Konteineris (=<main>). Plotis kaip inner main (max-width var(--container-max),
   centruotas, clamp side padding). width:100% BŪTINAS — body.page-* yra flex
   column (sticky footer), o margin:auto flex item'e be width susitrauktų iki
   turinio. margin-bottom 0 — tarpą iki footer'io valdo footer override (~15px). */
.inner-page {
  width: 100%;
  max-width: var(--container-max);
  margin: 48px auto 0;
  padding: 0 clamp(16px, 2vw, 32px);

  /* Flex column → baltas card (flex:1) išsitempia į pilną main aukštį, todėl
     aukštuose ekranuose (4K) nelieka tuščio tarpo tarp card ir footer'io. main
     jau turi flex:1 0 auto body flex-column'e (žr. apačioje), tad jo aukštis =
     prieinama vieta tarp header/footer. */
  display: flex;
  flex-direction: column;
}

/* PLATUS baltas card — inner.html .main-card realios reikšmės (balta bg, border,
   16px radius, 24px padding, flex column gap 24 kelioms vidinėms panelėms).
   NEPRIKLAUSOMA klasė. */
.inner-page__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);

  /* Viršus 20px (hero modelis — H1 iškeltas, turinys arčiau viršaus); šonai/apačia 24. */
  padding: 20px var(--gap-md) var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);

  /* Užima visą prieinamą main aukštį. Trumpas turinys → card aukštas, turinys
     lieka viršuje (70ch), apačioje balta erdvė. Ilgas turinys (straipsnis) →
     auga natūraliai (flex-shrink:0, nesusispaudžia). */
  flex: 1 0 auto;
}

/* 70ch turinio kolona TIESIAI baltame card — centruota, responsive (mobile 100%),
   optimalus skaitymo plotis ~65-70 simbolių (WCAG; ch prisitaiko prie šrifto).
   BE žydro content sluoksnio: ištisinis tekstas/forma baltame fone. Žydras
   (#EDF2F9) lieka TIK diskretiems blokams/kortelėms (kaip inner .meaning), ne
   ištisiniam tekstui. */
.inner-page__content {
  width: 100%;
  max-width: 70ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Sekcija viename content (pvz. redaguoti: forma | ištrynimas) — antra+ sekcija
   atskirta border-top skirtuku (NE žydru box). */
.inner-page__section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.inner-page__section + .inner-page__section {
  padding-top: var(--gap-md);
  border-top: 1px solid var(--separator-color);
}

/* === STRAIPSNIS — vidinio puslapio straipsnio turinys (straipsnis.html) === */

/* ===========================================================================
   HERO antraštės modelis (.inner-page__hero) — straipsnis/klauskite/redaguoti.
   H1 iškeltas iš .inner-page__card į full-bleed žydrą hero juostą su baltu
   „liežuvėlio" box'u (gradientas). PAKEITĖ .article-h1-box (buvo card viduje).
   =========================================================================== */

/* Full-bleed žydra juosta. scrollbar-gutter: stable (reset.css) → vw stabilus, be
   jump'o tarp puslapių. margin-inline: calc(50% - 50vw) — ištempia iš centruoto
   .inner-page iki viewport kraštų (be 100vw, kad nepridėtų scrollbar pločio). */
.inner-page__hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--gap-xs);          /* hero → card: 8px */
  background: #EDF2F9;
  border-bottom: 4px solid var(--white);
}

/* Centruotas vidinis konteineris — sutampa su .inner-page pločiu/padding'u, tad
   breadcrumb ir box lygiuojasi su .inner-page__card kairiu kraštu. */
.inner-page__hero-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--gap-sm) clamp(16px, 2vw, 32px) 0;   /* viršus 16, apačia 0 (box flush) */
}

/* Breadcrumb hero juostoje — desktop-only (breadcrumb.css ≤1024 display:none). Reset
   bazinį margin; 8px iki box'o. Kairysis margin = centravimo offset (tas pats kaip box
   padding-left vidinė dalis; 100% = hero-inner content plotis), tad breadcrumb tekstas
   prasideda toje pačioje vertikalioje linijoje kaip H1 / 70ch kolona. */
.inner-page__hero .breadcrumb {
  margin: 0 0 var(--gap-xs) max(0px, calc((100% - 70ch) / 2));
}

/* FULL-BLEED baltas box — kairysis kraštas = viewport kairė. margin-left: calc(50% - 50vw)
   nutempia box'o kairę iš centruoto hero-inner iki ekrano krašto (kaip .inner-page__hero
   juosta). H1 LIEKA sulygiuotas su 70ch turinio kolona: padding-left = full-bleed shift
   (50vw - 50%) + centravimo offset max(0px,(100%-70ch)/2). 100% = hero-inner content plotis
   (capped container-max 1634), tad sulygiavimas teisingas ir >1634px. max(0px,…) — kai
   card<70ch (mobile) offset 0.

   RESPONSIVE padding-right: clamp(24px, 100vw - 600px, 682px). Desktop = 682px (sandbox).
   Siaurėjant viewport, 100vw - 600px mažėja → box dešinė + gradiento perėjimas VISADA lieka
   viewport ribose (niekada neišlenda) ir H1 nelieka suspaustas. 600px reserve parinktas taip,
   kad box max-content (padding-left + H1 + padding-right) ≤ max-width:100vw VISAME desktop'e —
   antraip mid-desktop juostoje (~1200–1300px) box atsitrenktų į 100vw ir H1 LŪŽTŲ per anksti.
   Box dešinė nematoma — gradientas baigiasi #EDF2F9 (= juostos tonas), tolygiai įsilieja. */
.inner-page__hero-box {
  display: inline-block;
  margin-left: calc(50% - 50vw);

  /* Saugiklis: box dešinė niekada neviršija viewport (100vw = turinio plotis be scrollbar,
     nes scrollbar-gutter: stable). Mažuose ekranuose (siaurame viewport ilgas H1) box
     apkarpomas iki 100vw → H1 wrap'ina, vietoj horizontalaus scroll. Desktop neapkarpo. */
  max-width: 100vw;

  /* Vertikalūs dydžiai sandbox = box ~119px desktop: viršus 40, apačia 23 (+ H1 34/1.1
     37.4px + pabraukimas mt14 + h4 = 18px → 40+37.4+18+23 ≈ 118). */
  padding-block: 40px 23px;
  padding-left: calc(50vw - 50% + max(0px, (100% - 70ch) / 2));
  padding-right: clamp(24px, calc(100vw - 600px), 682px);

  /* Balta 0%→60%, perėjimas į žydrą (#EDF2F9) dešinėje 100% (box dešinė). */
  background: linear-gradient(90deg, #fff 0%, #fff 60%, #EDF2F9 100%);
}

/* Pabraukimas po H1 — 72×4px, mėlynas, 14px tarpas. ::after ant h1, tad juda kartu su
   H1 slide-in animacija. */
.inner-page__hero-box .contact-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 14px;
  background: var(--blue);
  border-radius: 2px;
}

/* Slide-in (H1 + pabraukimas), delay 0.15s. prefers-reduced-motion → be animacijos. */
@media (prefers-reduced-motion: no-preference) {
  .inner-page__hero-box .contact-title {
    animation: heroSlideIn 0.5s ease 0.15s both;
  }
}

@keyframes heroSlideIn {
  from { opacity: 0; transform: translateY(12px); }

  to { opacity: 1; transform: translateY(0); }
}

/* Desktop (>1024px): H1 VIENA eilute. nowrap → box (inline-block) auga iki H1 max-content
   (grow-to-fit), nebeapkarpomas hero-inner pločio, tad H1 nelūžta mid-desktop juostoje.
   padding-right reserve (600px) užtikrina, kad box max-content ≤ max-width:100vw → jokio
   overflow/h-scroll. Tablet/mobile (≤1024) — nowrap NETAIKOMAS (mažesnis H1 gali wrap'inti). */
@media (width >= 1025px) {
  .inner-page__hero-box .contact-title {
    white-space: nowrap;
  }
}

/* HERO responsive mažėjimo skalė — H1 + box vertikalus padding (pabraukimas 72×4 NEKINTA).
   Tablet (641–1024): H1 30px, box 32/18. Mobile (≤640): H1 26px, box 24/14. */
@media (641px <= width <= 1024px) {
  .inner-page__hero-box {
    padding-block: 32px 18px;
  }

  .inner-page__hero-box .contact-title {
    font-size: 30px;
  }
}

@media (width <= 640px) {
  .inner-page__hero-box {
    padding-block: 24px 14px;
  }

  .inner-page__hero-box .contact-title {
    font-size: 26px;
  }
}

/* Tablet/mobile (≤1024, breadcrumb paslėptas): minimalus viršutinis tarpas virš hero box
   — header→box ~16px (vietoj 64). Body bg ≈ hero žydra, tad .inner-page margin-top (48→12) ir
   hero-inner padding-top (16→4) kartu atrodo kaip vienas tuščias žydras tarpas. */
@media (width <= 1024px) {
  .inner-page {
    margin-top: 12px;
  }

  .inner-page__hero-inner {
    padding-top: 4px;
  }
}

/* Video langas straipsnyje — gestų video aspektas (1.21, kaip inner
   .glosos-img-placeholder / pagrindinis gesto video). Juodas fonas, suapvalinti
   kampai; video užpildo (object-fit: cover, nes aspektas sutampa). */
.article-video {
  width: 100%;
  aspect-ratio: var(--video-aspect);
  background: #000;
  border-radius: var(--r-card);
  overflow: hidden;
}

.article-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Straipsnio paragrafai — 17px, line-height 1.7 (skaitymui), juodas tekstas
   baltame fone. Tarpą tarp paragrafų valdo .inner-page__content flex gap. */
.article-text {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-dark);
}

.article-text--rich > :first-child {
  margin-top: 0;
}

.article-text--rich > :last-child {
  margin-bottom: 0;
}

.article-text--rich p,
.article-text--rich ul,
.article-text--rich ol {
  margin: 0 0 1.25em;
}

.article-text--rich h2,
.article-text--rich h3 {
  margin: 1.5em 0 0.75em;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  color: var(--text-dark);
}

.article-text--rich a {
  color: var(--blue);
  text-decoration: underline;
}

/* TipTap turinys straipsnyje — editorius generuoja gryną HTML be .article-* klasių.
   Lentelės be <thead>/klasių, ląstelėse <p>, sąrašuose <li><p>…</p></li>.
   Frontend stilius per .article-body (HTML nekeičiamas). */
.article-body.article-text--rich {
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-dark);
}

.article-body.article-text--rich > :first-child {
  margin-top: 0;
}

.article-body.article-text--rich > :last-child {
  margin-bottom: 0;
}

.article-body.article-text--rich p {
  margin: 0 0 1.25em;
}

/* TipTap: <p> ląstelėse ir sąrašuose — be dvigubo tarpo */
.article-body.article-text--rich :is(td, th, li) > p {
  margin: 0;
}

.article-body.article-text--rich h2,
.article-body.article-text--rich h3 {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  color: var(--text-dark);
}

.article-body.article-text--rich h2 {
  font-size: 22px;
  line-height: 1.3;
}

.article-body.article-text--rich h3 {
  font-size: 18px;
  line-height: 1.35;
}

.article-body.article-text--rich ul,
.article-body.article-text--rich ol {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
}

.article-body.article-text--rich ul { list-style-type: disc; }

.article-body.article-text--rich ol { list-style-type: decimal; }

.article-body.article-text--rich li + li {
  margin-top: 7px;
}

.article-body.article-text--rich li::marker {
  color: var(--blue);
}

.article-body.article-text--rich ol li::marker {
  font-weight: 600;
}

/* Lentelė be .article-table-wrap — vizualiai kaip .article-table */
.article-body.article-text--rich table {
  width: 100%;
  margin: 0 0 1.25em;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-dark);
  background: var(--white);
}

.article-body.article-text--rich th,
.article-body.article-text--rich td {
  padding: 13px 16px;
  border-bottom: 1px solid #EAEDF2;
  text-align: left;
  vertical-align: top;
}

.article-body.article-text--rich th {
  background: #EDF2F9;
  font-weight: 500;
}

.article-body.article-text--rich th strong,
.article-body.article-text--rich th p strong {
  font-weight: 500;
}

.article-body.article-text--rich tr:last-child th,
.article-body.article-text--rich tr:last-child td {
  border-bottom: 0;
}

.article-body.article-text--rich img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.article-video__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Straipsnio paantraštė (<h2 class="article-h2">) — Raleway bold, mažesnė nei h1.
   margin:0 — vertikalų tarpą valdo .inner-page__content flex gap. */
.article-h2 {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--text-dark);
}

/* Straipsnio sąrašai — bendra klasė <ul class="article-list"> ir
   <ol class="article-list">. Markerio tipą lemia elementas (ul=•, ol=1.).
   padding-left atitraukia markerius nuo balto card krašto; tekstas paveldi
   17px/1.7 iš article konteksto. NAUDOTI klasę (ne grynus <ul>/<ol>), nes
   .inner-page__content dalijasi su formomis (pvz. .pw-checklist redaguoti). */
.article-list {
  margin: 0;
  padding-left: 1.5em;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-dark);
}

ul.article-list { list-style-type: disc; }

ol.article-list { list-style-type: decimal; }

.article-list li + li {
  margin-top: 7px;
}

/* Markeris (• / skaičius) — mėlynas akcentas; ol skaičiai papildomai bold. */
.article-list li::marker {
  color: var(--blue);
}

ol.article-list li::marker {
  font-weight: 600;
}

/* Lentelės wrapper — suteikia rėmelį + suapvalintus kampus. overflow:hidden
   nukerpa <table> kampus prie radiuso (border-collapse ignoruoja radius ant
   pačios lentelės). Mobile: overflow-x keičiamas į auto (žr. media query). */
.article-table-wrap {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* Lentelė — Stilius B: žydra <thead> + baltos <tbody> eilutės, ploni
   horizontalūs skirtukai, BE vertikalių border'ų. 17px, kompaktiškesnis
   line-height (1.5) nei paragrafe. */
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-dark);
}

.article-table thead th {
  padding: 13px 16px;
  background: #EDF2F9;
  font-weight: 500;
  text-align: left;
}

.article-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #EAEDF2;
}

/* Paskutinė eilutė — be skirtuko (wrapper rėmelis užbaigia apačią švariai). */
.article-table tbody tr:last-child td {
  border-bottom: 0;
}

/* H1 hero box'e — Raleway 800, mėlynas, 34px (nėra tikslaus --fs tokeno; artimiausias
   --fs-info-title 32px). margin 0 — tarpus valdo box padding + ::after pabraukimas. */
.contact-title {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--blue);
}

.contact-intro {
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0; /* tarpą iki formos valdo .inner-page__content flex gap */
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.contact-captcha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.contact-captcha .g-recaptcha {
  display: inline-block;
}

/* Sėkmės blokas — žydras box'as (#EDF2F9 + mėlynas border), tas pats
   #EDF2F9 panelių pattern'as kaip .meaning/.tabs/.comments, su var(--blue)
   akcentiniu border'iu. Pakeičia visą formos box'ą po submit. */
.contact-success {
  width: 100%;
  max-width: 70ch;
  margin: 0 auto var(--gap-md);
  padding: var(--gap-lg);
  background: #EDF2F9;
  border: 1px solid var(--blue);
  border-radius: var(--r-card);
  font-family: Outfit, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-dark);
  text-align: center;
  box-sizing: border-box;
}

.contact-success:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* „Grįžti į titulinį" nuoroda — po success box'u, centruota. display valdomas
   per [hidden] (UA) + :not([hidden]) → block. Bazinis blokas NE turi `display`,
   kad `hidden` atributas veiktų (inline `display:block` perdengtų [hidden]). */
.contact-back-link {
  max-width: 70ch;
  margin-top: var(--gap-md);
  margin-inline: auto;
  text-align: center;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-back-link:not([hidden]) {
  display: block;
}

.contact-back-link:hover { color: var(--blue-btn-hover); }

.contact-back-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sticky footer + ~15px tarpas iki footer'io — vidinių puslapių template'ui
   (klauskite + redaguoti). Kai turinio mažai, footer'is prilimpa prie apačios.
   ~15px tarpas — sąmoninga išimtis nuo inner 48px. NEglobalu (titulinis/inner
   nepaveikti). body jau turi min-height: 100vh (reset.css). */
body.page-klauskite,
body.page-redaguoti,
body.page-straipsnis,
body.page-accounts {
  display: flex;
  flex-direction: column;
}

body.page-klauskite > main,
body.page-redaguoti > main,
body.page-straipsnis > main,
body.page-accounts > main {
  flex: 1 0 auto;
}

body.page-klauskite > footer,
body.page-redaguoti > footer,
body.page-straipsnis > footer,
body.page-accounts > footer {
  margin-top: 15px;
}

/* Mobile: mažesnis top tarpas + card padding kaip inner (16px). */
@media (width <= 640px) {
  .inner-page { margin-top: 12px; }
  .inner-page__card { padding: var(--gap-sm); }

  /* Ilgos lentelės scroll'inasi horizontaliai (nelūžta). overflow-y lieka hidden
     (iš bazinės taisyklės) → suapvalinti kampai vis dar nukerpami. */
  .article-table-wrap,
  .article-body.article-text--rich table { overflow-x: auto; }
}

/* ===== components/gesto-forma-drawer.css ===== */

/* GESTO FORMOS DRAWER — slide-in panel iš dešinės (desktop/tablet)
   arba bottom sheet iš apačios (mobile ≤640). Atidaromas iš
   .btn-gesto-forma mygtuko (inner.html'e).

   2026-05-26 prototypo integracija — failas perrašytas pagal naują
   dizainą (gesto-formos-drawer.html). Pagrindiniai pokyčiai:
   - Panel 600px → 680px desktop'e
   - Header'is — pilnas mėlynas banner'is su baltu titulu (nebe blue-on-white)
   - Visi thumbai 128×128 (nebe 185 / 80)
   - Plaštakos forma — caption'ai po thumbais (col 1 / col 3, row 2)
   - Rankos — naujas 3-stulpelių .gf-meta-grid (Kiek rankų / Simetrija / Judesys)
   - Plaštakos padėtis — soft-label virš thumb'o, nebe vienoje eilutėje
   - Sekcijų separator'iai per border-bottom (nebe atskiri <hr>)
   - Naujos klasės: .gf-soft-label, .gf-param__caption, .gf-meta-grid,
     .gf-meta-cell, .gf-param__row-content

   Struktūra:
     .gesto-forma-drawer            — fixed inset:0 container, pointer-events toggle
     .gesto-forma-drawer__overlay   — fade'inamas tamsus fonas (uždarymui).
     .gesto-forma-drawer__panel     — slidin'amas balta panelis.
     .gesto-forma-drawer__header    — mėlynas banner'is + close btn.
     .gesto-forma-drawer__body      — scroll'inamas turinys, sekcijos viduje.
     .gf-param                      — viena parametro sekcija (padding + border-bot).
     .gf-param__label (h2)          — sekcijos antraštė.
     .gf-thumb (128×128)            — universal thumbnail placeholder.

   A11y: role=dialog, aria-modal, aria-labelledby, aria-hidden toggle,
   focus trap JS pusėje, Esc uždaro, prefers-reduced-motion paisoma. */

/* visibility NEnaudojama — ji blokuotų child element'ų transition'us, kai
   parent pereina iš hidden į visible (browser quirk). Vietoje to —
   pointer-events click-through closed state'e + panel transform / overlay
   opacity matomumui. */
.gesto-forma-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.gesto-forma-drawer.is-open,
.gesto-forma-drawer[aria-hidden="false"] {
  pointer-events: auto;
}

.gesto-forma-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 50%);
  opacity: 0;
  transition: opacity 300ms ease;
}

.gesto-forma-drawer.is-open .gesto-forma-drawer__overlay,
.gesto-forma-drawer[aria-hidden="false"] .gesto-forma-drawer__overlay {
  opacity: 1;
}

/* Panelio plotis: 680 desktop (prototypo specifikacija). Mobile breakpoint'e
   jis tampa pilno pločio bottom sheet'u (žr. žemiau). */
.gesto-forma-drawer__panel {
  position: relative;
  width: 680px;
  max-width: 100vw;
  height: 100vh;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms ease;
  box-shadow: -8px 0 32px rgb(0 0 0 / 18%);
}

.gesto-forma-drawer.is-open .gesto-forma-drawer__panel,
.gesto-forma-drawer[aria-hidden="false"] .gesto-forma-drawer__panel {
  transform: translateX(0);
}

/* Header'is — pilnas mėlynas banner'is su baltu titulu + dark close btn.
   Padding 20px 24px (prototypo specifikacija); 20 ≈ --gap-sm (16) artimiausias. */
.gesto-forma-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-md);
  background: var(--blue);
  flex-shrink: 0;
}

.gesto-forma-drawer__title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 0;
}

/* Close mygtukas — baltas apvalus, mėlynas SVG, mėlynas border (kad būtų
   matomas ant mėlyno banner'io). 2026-05-27: pakeistas iš dark navy
   #0F1F3E baltą su mėlynu border'iu (vienoda paletė su drawer). */
.gesto-forma-drawer__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color .15s;
}

@media (hover: hover) {
  .gesto-forma-drawer__close:hover { background: var(--blue-light); }
}

.gesto-forma-drawer__close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Body — scroll container su padding'u ir gap'u tarp .gf-param box'ų.
   2026-05-27: pridėtas padding ir gap, kad žydri box'ai turėtų atstumą
   nuo panel'io kraštų ir vienas nuo kito (separator linijos pašalintos —
   atskyrimas dabar per box bg). */
.gesto-forma-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.gesto-forma-drawer__handle {
  display: none; /* matomas tik mobile */
}

/* ============== PARAMETRŲ SEKCIJOS ============== */

/* Vienas parametro blokas (Plaštakos forma, Rankos, Vieta, ...) — žydras
   užbaigtas box'as su padding'u ir radius'u. 2026-05-27: pakeista iš
   border-bottom separator'io į vizualinį box atskyrimą (light blue bg).
   #EDF2F9 hardcoded — projektas turi --blue-light (#E3E9F2), bet šis
   yra šviesesnis (drawer'io specifinis tonas). */
.gf-param {
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  background: #EDF2F9;
  border-radius: 8px;
}

/* h2 antraštė. */
.gf-param__label {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-dark);
  margin: 0;
}

/* === Info ikona + pastabos tooltip prie gf-param dėžučių (TIK inner .gesture-form-info —
   NE modalo .gf-param). Tekstas iš data-note (Django pateiks; tuščias → ikona hidden per JS).
   Click-toggle tooltip valdo js/gf-param-note.js. === */
.gf-param:has(.gf-note-btn) {
  position: relative; /* info mygtukas absolute pozicionuojamas dėžutės atžvilgiu */
}

.gf-param:has(.gf-note-btn) .gf-param__label {
  padding-right: 28px; /* vieta info ikonai (top-right) — kad ilga antraštė neužeitų */
}

.gf-note-btn {
  position: absolute;
  top: var(--gap-sm);
  right: var(--gap-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s;
}

.gf-note-btn img {
  width: 18px;
  height: 18px;
  display: block;
}

.gf-note-btn:hover {
  background: rgb(38 75 135 / 10%);
}

.gf-note-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Pastabos tooltip — body lygmens, position:fixed (neapkerpa grid/overflow), JS pozicionuoja.
   Vizualas nuoseklus su .variant-tooltip (pilkas #4b4b4b + #fff, kontrastas ~8.6:1). */
.gf-note-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 280px;
  padding: 8px 12px;
  background: #4b4b4b;
  color: #fff;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--r-input);
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
}

.gf-note-tooltip[hidden] {
  display: none;
}

/* Soft-label — antraštinis label virš value/thumb (Rankos meta cells,
   Plaštakos padėtis Pirštai/Delnas). Outfit 500 15px muted gray.
   15px hardcoded — neturim 15px token'o; tarp 14 ir 16 — middle ground. */
.gf-soft-label {
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Sub-label paliktas backward-compat su senesnėm sekcijom (jei kur dar
   būtų naudojamas). Naujame prototype'e — pakeistas .gf-soft-label. */
.gf-param__sub-label {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--blue);
}

/* ============== THUMB (universal 128×128) ============== */

/* Thumb'as — universal 128×128 frame. Naudojamas dviem variantais:
   1) <div class="gf-thumb"> — placeholder su diagonalinių ruožų pattern'u
      (PP Pirštai/Delnas, dar neturi konkrečių img).
   2) <img class="gf-thumb gf-thumb--{form|location}" src="..."> —
      tikras paveikslėlis. object-fit kontekstas pasirenkamas per modifier:
      --form (PF Pradžia/Pabaiga) → cover (formų piešiniai ≈ kvadratiniai,
         užpildo visą 128×128 frame'ą be juostų; minimalus crop kraštuose).
      --location (Vieta) → contain (Vietos schemos dažnai ne kvadratinės,
         contain leidžia visam piešiniui matytis su pilkomis juostomis
         kraštuose — anatominė informacija svarbesnė už pilną užpildymą).
   display: block pašalina inline baseline tarpą.
   Dydis vienodas visose sekcijose, kad thumbai vertikaliai sutaptų plotyje. */
.gf-thumb {
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  background: var(--border);

  /* --border (#E5E7EB) atitinka prototypo --thumb-bg. Pattern matomas tik
     div variante (placeholder); img variante — uždengiamas paveikslėlio
     (cover) arba matomas kraštuose kaip juostos (contain). */
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 5px,
    rgb(38 75 135 / 8%) 5px,
    rgb(38 75 135 / 8%) 6px
  );
  border-radius: var(--r-thumb);
  overflow: hidden;
  display: block;
}

/* Modifier: PF — cover, kad kvadratinis hand-shape užpildytų visą frame'ą
   be tuščių juostų. */
.gf-thumb--form {
  object-fit: cover;
}

/* Modifier: Vieta — contain, kad ne kvadratinė anatominė schema būtų matoma
   pilna (be iškirpimo), nors atsiranda pilkos juostos kraštuose. */
.gf-thumb--location {
  object-fit: contain;
}

/* ============== LAYOUTS ============== */

/* Bazinis content wrapper'is. */
.gf-param__content {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

/* Vieta — thumb viršuje + caption po juo (vertikalus stack'as).
   2026-05-27: pakeista iš horizontalaus inline į vertikalų layout
   vizualinei konsistencijai su Plaštakos forma (caption po thumb'u).
   row-gap 10px hardcoded — tas pats kaip --start-end row-gap. */
.gf-param__content--inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Plaštakos forma — 3 col × 3 row grid:
   Row 1: [soft-label 'Pradžia']    ·    [soft-label 'Pabaiga']
   Row 2: [thumb 128]            [arrow 48]            [thumb 128]
   Row 3: [caption 'O']                  ·                  [caption '5']
   2026-05-27: label'iai perkelti virš thumb'o (anksčiau buvo virš caption
   reikšmės po thumb'u). Naudoja .gf-soft-label klasę — perpanaudojama iš
   Plaštakos padėties (Pirštai/Delnas) konsistencijai.
   row-gap 10px hardcoded — vizualinis tarpas tarp eilučių. */
.gf-param__content--start-end {
  display: grid;
  grid-template-columns: 128px 48px 128px;
  grid-template-rows: auto auto auto;
  gap: 10px var(--gap-sm);
  place-items: center start;
}

.gf-param__content--start-end > .gf-soft-label { grid-row: 1; }
.gf-param__content--start-end > .gf-soft-label--start { grid-column: 1; }
.gf-param__content--start-end > .gf-soft-label--end { grid-column: 3; }

.gf-param__content--start-end > .gf-thumb { grid-row: 2; }
.gf-param__content--start-end > .gf-arrow { grid-row: 2; grid-column: 2; place-self: center center; }

.gf-param__content--start-end > .gf-param__caption { grid-row: 3; }
.gf-param__content--start-end > .gf-param__caption--start { grid-column: 1; }
.gf-param__content--start-end > .gf-param__caption--end { grid-column: 3; }

/* Caption (thumb pavadinimas „pustrečio+" / „Forma 10") — Outfit 500 15px,
   text-align left. Nepainti su .gf-thumb-label (uppercase blue). */
.gf-param__caption {
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-dark);
  text-align: left;
}

/* Arrow konteineris — centruoja SVG, mėlyna spalva. */
.gf-arrow {
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gf-arrow svg {
  width: 36px;
  height: 36px;
}

/* Rankos — 3 col grid (Kiek rankų / Simetrija / Judesio tipas).
   `auto auto auto` + `justify-content: start` — stulpeliai pagal turinį
   (label/value plotis), ne tempiami per visą sekciją (Chrome `1fr`/
   `auto` track'us praplečia užpildyti leftover space; justify-content:
   start sutraukia grid'ą į kairę). 2026-05-27 patikslinimas po pirminio
   gap'o sumažinimo — vizualiai vis tiek atrodė per platūs tarpai dėl
   1fr stretch'inimo. */
.gf-meta-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  gap: var(--gap-sm);
}

/* Meta-cell — soft-label virš value. 4px gap hardcoded — labai siauras
   tarpas tarp label ir value (mažesnis nei --gap-xs=8). */
.gf-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Plaštakos padėtis — Pirštai ir Delnas 2-col grid (desktop/tablet).
   `auto auto` + `justify-content: start` — stulpeliai pagal turinį (thumb +
   tekstas), ne tempiami per pilną sekcijos plotį (Chrome `auto` track'us
   praplečia užpildyti leftover space; justify-content: start sutraukia
   grid'ą į kairę). Mobile (≤640) — atgal į 1 col (override žemiau). */
.gf-param__rows {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: var(--gap-sm);
}

/* Viena row = soft-label + .gf-param__row-content (thumb + value).
   Skirtingai nei senas inline layout'as — label virš content. */
.gf-param__row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

/* PP row content — thumb viršuje + caption po juo (vertikalus stack'as).
   2026-05-27: pakeista iš horizontalaus inline į vertikalų layout
   vizualinei konsistencijai su Plaštakos forma (caption po thumb'u). */
.gf-param__row-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ============== RESPONSIVE ============== */

/* Tablet ≤740px — kai panel'is tampa siauresnis nei prototypo 740 ribos,
   pereinam į fluid 1fr/40px/1fr layout'ą (thumbai išlaiko 128px max). */
@media (width <= 740px) {
  .gf-param__content--start-end {
    grid-template-columns: 1fr 40px 1fr;
    column-gap: var(--gap-xs);
  }

  .gf-param__content--start-end > .gf-thumb {
    width: 100%;
    max-width: 128px;
    height: auto;
    aspect-ratio: 1;
  }
}

/* MOBILE — bottom sheet iš apačios (85vh aukščio). */
@media (width <= 640px) {
  .gesto-forma-drawer {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .gesto-forma-drawer__panel {
    width: 100vw;
    height: 85vh;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -8px 32px rgb(0 0 0 / 18%);
  }

  .gesto-forma-drawer.is-open .gesto-forma-drawer__panel,
  .gesto-forma-drawer[aria-hidden="false"] .gesto-forma-drawer__panel {
    transform: translateY(0);
  }

  .gesto-forma-drawer__handle {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--separator-color);
    border-radius: 2px;
    margin: var(--gap-xs) auto 0;
    flex-shrink: 0;

    /* touch-action: none — apsauga nuo iOS Safari pull-to-refresh, kad
       JS swipe-to-close gestas (gesto-forma-modal.js) nesusikirstų su
       browser default'iniu touch elgesiu. touch-action NĖRA paveldima
       (per spec), tai close × mygtukas header'yje nepaveiktas. */
    touch-action: none;
  }

  .gesto-forma-drawer__header {
    padding: var(--gap-sm) var(--gap-sm);

    /* Header taip pat — swipe-to-close drag zona (žr. handle komentarą). */
    touch-action: none;
  }

  .gesto-forma-drawer__title {
    font-size: 20px;
  }

  .gf-param {
    padding: var(--gap-sm);
  }

  .gf-meta-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
  }

  /* PP rows — 2-col grid mobile'e netilptų (2 × 128 thumbai); stack'inam. */
  .gf-param__rows {
    grid-template-columns: 1fr;
  }

  .gf-param__content--start-end {
    grid-template-columns: 1fr 32px 1fr;
    column-gap: var(--gap-xs);
  }

  .gf-param__content--start-end > .gf-arrow svg {
    width: 28px;
    height: 28px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gesto-forma-drawer__overlay,
  .gesto-forma-drawer__panel {
    transition: none;
  }
}

/* ===== components/gesture-header.css ===== */

/* GESTURE HEADER SECTION — gesto vidinio puslapio antraštė.
   Sudaroma iš:
   1. .gesture-header-top — <h1> glosa + ❤ fav mygtukas
   2. .gesture-main-video — pagrindinis video (≥1280px kairėje; ≤1279px viršuje)
   3. .gesture-form-info — gesto formos parametrai (6 .gf-param box'ai; ≤1279px po video
      su .gf-toggle collapse trigger'iu)
   4. .gesture-variants — variantų KARUSELĖ (horizontalus scroll'as; .related-item kortelės)

   Video pattern'as suderintas su §32 (FRONTEND_CONTEXT.md): placeholder turi
   aspect-ratio 1.21 + background #000; video turi object-fit: cover. */

/* (Breadcrumb tarpas — VIENODAS visuose puslapiuose per .breadcrumb komponentą,
   margin: var(--gap-sm) 0; žr. breadcrumb.css. inner.html: breadcrumb seka po .search-card
   block flow'e, tad jo margin-top = gap nuo paieškos — atskiras .search-card + .breadcrumb
   override NEBEREIKALINGAS.) */

/* Vertikalus tarpas tarp gretimų .main-card box'ų (inner.html: gesto+reikšmės,
   tabs, vartojimo pavyzdžiai). Adjacent sibling — taikoma TIK kai du
   main-card'ai eina po kito (t.y. tik inner.html). */
.main-card + .main-card {
  margin-top: var(--gap-md);
}

/* .gesture-header — INNER blue-gray panelis (Figma 1309:517), gyvena VIDUJE
   .main-card balto outer'io kartu su .meanings (Figma 1309:515 struktūra).
   max-width / margin nereikalingi — main-card valdo horizontalų layout'ą. */
.gesture-header {
  background: #EDF2F9;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--gap-md);
}

.gesture-header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

/* Figma: Raleway Bold 48px, lh 1.5, ls -0.912px, UPPERCASE. Spalva --blue (#264B87). */
.gesture-header-top h1 {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.5;
  letter-spacing: -0.912px;
  color: var(--blue);
  text-transform: uppercase;

  /* Raleway pagal nutylėjimą piešia old-style skaitmenis (1 mažas, 4 su nuleistine), todėl
     glosos su skaitmenimis (PAMANYTI-(1+>E), PADAŽAS-(4C/B)) atrodo kreivai. Matuota: numatytas
     plotis sutampa su oldstyle-nums, lining-nums skiriasi, t. y. lnum feature veikia. */
  font-variant-numeric: lining-nums;
  margin: 0;
  flex-shrink: 0;
}

/* ❤ Favorites mygtukas — Figma node 1309:547. Toggle (aria-pressed).
   40×40 fiksuotas, padding 7px 8px, border-radius 8px. */
.btn-fav {
  width: 40px;
  height: 40px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 8px;
  color: var(--blue);
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.btn-fav:hover { background: var(--blue-light); }

/* ON state — TIK ikona keičiama (outline mėlynas → užpildyta raudona).
   Mygtuko border/bg/dimensijos NEKEISTI — lieka kaip OFF. */
.btn-fav[aria-pressed="true"] svg path {
  fill: #E11D48;
  stroke: #E11D48;
}

/* BODY — 2 col grid (desktop): video 600px fiksuotas kairėje, variantai
   užpildo likusią vietą (1fr) iki dešinio kortelės padding'o. gap 32px tarp
   kolonų. Variantų .glosos-img-placeholder thumb'as lieka 174px fixed —
   plečiasi tik content + items max-width pagal viewport'ą. */
.gesture-header-body {
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: var(--gap-lg);
  align-items: start;
}

/* ≤1279px — forma sukraunama PO video (ne šalia): video viršuje, žemiau „Gesto forma"
   collapse trigger'is + formos gridas (vienas stulpelis). ≥1280px lieka 600px 1fr (forma
   šalia video). Anksčiau stack'ino tik ≤1024px (tablet) — išplėsta iki 1279, kad ir
   1025–1279px forma būtų po video (collapse pattern reikalauja vertikalaus stack'o). */
@media (width <= 1279px) {
  .gesture-header-body {
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
  }

  /* Grid item'ai pagal nutylėjimą turi min-width:auto — tai NELEIDŽIA 1fr stulpeliui
     trauktis žemiau item'o min-content (video ~600px). Todėl <~726px (kai konteineris
     <600px) stulpelis liktų 600px ir video/trigger išsikištų pro dešinę (horizontalus
     overflow). min-width:0 leidžia stulpeliui susitraukti iki konteinerio → video
     (width:100% + max-width:600px) tampa tikrai responsyvus: 600px kol telpa, paskui
     seka konteinerį. */
  .gesture-main-video,
  .gf-collapsible {
    min-width: 0;
  }
}

/* Video thumb'ai perpanaudoja .glosos-img-placeholder + .glosos-play iš
   carousel.css (DRY §24). Šioje vietoj — tik dimensijų + margin'ų override'ai
   per parent selektorius. */

/* Pagrindinis video — Figma 1309:528 fiksuotas 600×496 (aspect 600/496=1.2097).
   max-width: 100% — kad mobile/tablet (single-col 1fr) placeholder nenuteptų
   už narrow viewport krašto. border-radius: var(--r-thumb) (4px) atitinka
   variantų thumb'ų radius'ą. */
.gesture-main-video .glosos-img-placeholder {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 496;
  border-radius: var(--r-thumb);
  margin: 0;
}

/* =====================================================================
   NIEKADA NEPRIDĖTI translateZ(0) ar kitų GPU-layer hack'ų ant
   .gesture-main-video video.
   Tai sukelia Firefox downscale blur (1318×1080 → 320×264 per GPU bilinear
   interpolation). Chrome/Safari atrodo OK be jokio fix'o. Senas „fix"
   buvo dabartinis bug'as — pašalinta 2026-06-01.
   ===================================================================== */

/* .related-item — variantų KARUSELĖS kortelė (.gesture-variants > li). Perpanaudota iš
   buvusio dešinio sąrašo; baltas box su border. Karuselės dydžiai/elgsena žemiau
   (.gesture-variants .related-item). Figma 1309:549/1309:550 (496×160 buvęs sąrašas). */
.related-item {
  display: flex;
  gap: var(--gap-md);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--gap-xs);
  align-items: stretch;
}

/* Variantų sąrašo thumb'ai — Figma 1309:551 fiksuotas 174×144 (aspect 174/144).
   border-radius 4px (--r-thumb), ne --r-input (6px). Override'inam carousel
   base'ą 320px width + 6px radius. */

/* Karuselės thumb — aspect-ratio LIEKA §32 1.21 (per .lgkp). align-self: center
   neleidžia placeholder'iui flex-stretch'intis iki (aukštesnės) kortelės turinio —
   thumb lieka savo proporcinio aukščio (width/1.21), todėl jokio letterbox'o, o video
   (object-fit: cover) neiškraipomas. Mažinimas proporcinis: keičiamas tik width. */
.related-item .glosos-img-placeholder {
  width: 139px;
  aspect-ratio: 174 / 144;
  border-radius: var(--r-thumb);
  flex-shrink: 0;
  margin: 0;
  align-self: center;
}

/* Video dėžės kampai suapvalinti — border-radius + overflow: hidden. */
.gesture-main-video .glosos-img-placeholder,
.related-item .glosos-img-placeholder {
  border-radius: var(--r-thumb);
  overflow: hidden;
}

/* ŠVARUS sprendimas: juodas §32 fonas inner kontekste → transparent ir ant .lgkp, ir ant
   placeholder.has-video — todėl video dėžėje nelieka jokio juodo fono (nei kampuose, nei
   juostose); kur video nėra, matosi šviesi/transparent dėžė. video-player.css ir titulinis
   NEKEIČIAMI (§32 juodas fonas lieka tik ten). */
.gesture-main-video .lgkp,
.related-item .lgkp,
.gesture-main-video .glosos-img-placeholder.has-video,
.related-item .glosos-img-placeholder.has-video {
  background: transparent;
}

/* Figma 1309:539 — 2-sekcijos layout vertikaliai centruotas 144px thumb'o
   atžvilgiu. Tarp count↔link gap: 0 (natural line-height stacking, vienas
   text-block'as). 10px gap tarp text-block'o ir fav button'o — per margin-top
   ant .related-item-fav. */
.related-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
}

/* Figma 1309:556 — Outfit Regular 16px, color BLACK (#000), ls -0.304px. */
.related-item-count {
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.304px;
  color: #000;
}

/* Figma I1309:557;225:4238 — Raleway Bold 24px, ls -0.456px, color --blue.
   display: flex + min-width: 0 — kad span'as galėtų trumpėti (ellipsis), o chevron liktų.
   align-self: flex-start + max-width: 100% — link'as (ir pointer/klikas) tik teksto pločio,
   NE per visą kortelę (tėvas .related-item-content yra stretch column); ilgas pavadinimas
   vis tiek nukerpamas iki konteinerio ribos. */
.related-item-link {
  display: flex;
  align-self: flex-start;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.456px;
  color: var(--blue);
  text-decoration: none;
}

.related-item-link:hover { text-decoration: underline; }

/* Pavadinimas vienoje eilutėje; ilgas → nukerpamas daugtaškiu. Pilnas pavadinimas
   matomas custom tooltip'e (hover/focus) ir SR per aria-label ant nuorodos. */
.related-item-link__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* Varianto glosos pavadinimas. Žr. .gesture-header-top h1. */
  font-variant-numeric: lining-nums;
}

/* Chevron visada matomas dešinėje (netrumpinamas). */
.related-item-link svg {
  flex-shrink: 0;
}

/* Figma 1309:561 — 40×40, padding 7px 8px, border-radius 8px, white bg,
   blue border. margin-top: 10px atstoja Figma 1309:539 spec'o 10px tarpą tarp
   text-block (count+link) ir fav (nes .related-item-content gap=0, kad count
   ir link liktų tight'ai). */
.related-item-fav {
  margin-top: 10px;
  width: 40px;
  height: 40px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 8px;
  color: var(--blue);
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.related-item-fav:hover { background: var(--blue-light); }

/* ON state — TIK ikona raudona filled, box nepakeistas. */
.related-item-fav[aria-pressed="true"] svg path {
  fill: #E11D48;
  stroke: #E11D48;
}

/* TABLET (641-1024px) — TIK layout adjustments. Tablet typography = desktop
   (jokio font mažinimo, suderinta su titulinio dizaino principu — žr.
   FRONTEND_CONTEXT.md §17). Vienintelė išimtis: .related-item-link lieka
   18px (variantų sąrašas siauresnis, 24px būtų per didelis). */
@media (641px <= width <= 1024px) {
  .gesture-header-body {
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
  }

  .gesture-header-top h1 {
    font-size: var(--fs-h1-tablet);
    line-height: var(--lh-tablet);
  }
}

/* MOBILE (≤640px) — visi variantai matomi, thumb 120px, h1 32px. */
@media (width <= 640px) {
  /* Inner-specific: override pirmo .main-card mobile gap (20 iš layout.css) į 24, kad
     gh→meanings tarpas būtų ~24. Inner-detektorius per .search-card → .breadcrumb →
     .main-card seką (TIK inner.html; breadcrumb įterptas tarp jų). Kartu pašalinami
     .gesture-header { margin: 16 auto } ir .meanings { margin-top: 24 } indėliai į tą
     patį tarpą, kad viskas susidėtų į švarius 24px. */
  .search-card + .breadcrumb + .main-card { gap: var(--gap-md); }
  .gesture-header { padding: var(--gap-sm); }
  .gesture-header-top { flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }

  .gesture-header-top h1 {
    font-size: var(--fs-h1-mobile);
    line-height: var(--lh-mobile);
    flex-shrink: 1;
    min-width: 0;
  }

  .gesture-header-body {
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
  }

  /* Karuselės thumb mažesnis mobile (siauresnės 280px kortelės). */
  .related-item .glosos-img-placeholder { width: 96px; }
}

/* Labai siaurame viewport'e (<385px) — related thumb dar mažesnis (100px),
   kad „N variantas / NETIKRAS-[X]" tekstas + rodyklė + favorite mygtukas
   tilptų be ankštumo. .gesture-main-video jau adaptuojasi per max-width:
   100% (žr. baziną deklaraciją). 2026-05-27 įvedimas. */
@media (width <= 384px) {
  .related-item .glosos-img-placeholder { width: 80px; }
}

/* ============================================================================
   REIKŠMĖS + VARTOJIMO PAVYZDŽIAI

   Po .gesture-header-body seka <div class="meanings"> su <article class="meaning">
   reikšmių sąrašu (1., 2., ...). Kiekviena reikšmė turi sakinio pavyzdžių, kur
   kiekvienas pavyzdys turi „Žiūrėti įrašą" mygtuką + ❤ fav mygtuką.
   ============================================================================ */

/* Reikšmių sąrašas — gyvena VIDUJE .main-card balto outer'io (kartu su
   .gesture-header). gap: 24px tarp atskirų .meaning panel'ių atitinka Figma
   1309:515 outer'io gap'ą. margin-top NEBEREIKIA — main-card valdo gap. */
.meanings {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Viena reikšmė = vienas #EDF2F9 panel'is (Figma 1309:581/1309:614). Spalva
   suvienodinta su .gesture-header — visi mėlyni inner paneliai #EDF2F9.
   gap: 24px tarp antraštės ir pavyzdžių (Figma 1309:584 mt-[72px] - 48 ms = 24). */
.meaning {
  background: #EDF2F9;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Figma H2: Raleway Bold 32px, lh 1.5, tracking -0.019em (Figma 1309:583).
   Hanging indent: padding-left + negative text-indent — kad "2." iškyštų
   į kairę, o multi-line antraštės antra eilutė sulygiuotų su pirmos eilutės
   tekstu (NE su skaičiumi). Reikšmės atitinka `.examples { padding-left: 29 }`
   desktop'e, kad pavyzdžiai irgi būtų sulygiuoti su antra eilute. */
.meaning-title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: -0.019em;
  color: var(--text-dark);

  /* Lining skaitmenys: antraštėje gali būti glosa su skaitmenimis (ADAŽAS-(4C/B)).
     Paveldima, tad padengia ir .meaning-note viduje. Žr. .gesture-header-top h1. */
  font-variant-numeric: lining-nums;
  margin: 0;
  padding-left: 29px;
  text-indent: -29px;
}

/* Papildoma reikšmės informacija .meaning-title viduje (pvz. „apie nesąžiningą elgesį").
   Antraštės lygis ir hanging indent nekeičiami: inline span, todėl text-indent veikia kaip anksčiau.
   font-size em, ne px: .meaning-title dydis responsive (32 / --fs-h2-tablet / --fs-h2-mobile),
   tad note proporcingai seka paskui. Svoris 400 ir --text-muted atitinka projekto antrinio teksto
   konvenciją (.glosa-variant, .related-item-count svoris; --text-muted spalva iš account.css,
   pagination.css). Kontrastas ant .meaning fono (#EDF2F9, NE balto): 4.70:1, matuota gyvai.
   WCAG AA normaliam tekstui reikia 4.5:1, o 24px (>=24px regular) skaitosi kaip large text (3:1). */
.meaning-note {
  font-weight: 400;
  font-style: italic;
  font-size: 0.75em;
  color: var(--text-muted);

  /* Eksplicitiškai, nors paveldima iš .meaning-title: note gali turėti glosą su skaitmenimis
     (ADAŽAS-(4C/B)) ir gali būti perpanaudota kitame kontekste. */
  font-variant-numeric: lining-nums;
}

/* Pavyzdžių blokas įtraukiamas tiek, kad jų kairys kraštas sulygiuotų su
   "Netikras" žodžio "N" raide antraštėje (NE su "1." skaičiumi). Matuojant
   "1. " plotį Raleway Bold 32px → 29px desktop'e. Tablet/mobile h2 mažesnis,
   todėl padding'as proporcingai mažesnis (žr. responsive @media).
   gap: 0 — vertikalų atstumą valdo `.example { padding-block }` ir border'is. */
.examples {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 29px;
}

/* 24px padding-block sukuria simetrišką 24px tarpą iš abiejų separator'iaus
   pusių. Pirmas/paskutinis example'as turi padding'ą reset'intą prie ribų. */
.example {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  padding-block: var(--gap-md);
}

.example:first-child { padding-top: 0; }
.example:last-child { padding-bottom: 0; }

/* Separator linija tarp pavyzdžių — sėdi viršuje sekančio example'o
   (Figma 1309:591 / 1309:607, 1px #ABABB6 — projekto --text-ph spalvos
   atspalvis). 24px padding-top ant .example + 24px padding-bottom ant prieš
   tai esančio = simetrinis 24/24 centruotas separator'ius. */
.example + .example {
  border-top: 1px solid var(--separator-color);
}

/* gap tarp .example-text ir .example-transcription — desktop = --gap-md.
   Tablet = --gap-sm, Mobile = --gap-2xs (per atskirus @media blokus FAILO PAB.). */
.example-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Figma 1309:586: Outfit Regular 24px, line-height 28px (Figma `leading-[28px]`). */
.example-text {
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: #5f5f5f;
  margin: 0;
}

/* Transkripcija — gestų glosų sąrašas tame pačiame sakinyje. */
.example-transcription {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  /* Lining skaitmenys dedami ant konteinerio, nes glosa gali būti <a> (su gesto puslapiu) arba
     <span> (be jo): paveldėjimas padengia abu. Taikoma ir tab'ams (sinonimai/homonimai/antonimai),
     kurie perpanaudoja šią klasę. Žr. .gesture-header-top h1. */
  font-variant-numeric: lining-nums;
  gap: 4px 10px;
}

/* Tuščia transkripcija (backend gali atiduoti <ul class="example-transcription"></ul>
   be <li>) — mazgo aukštis 0, BET jis lieka .example-content flex item'u ir sugeneruoja
   pilną gap (--gap-md) tuščio tarpo. display: none išima jį iš flex srauto → dingsta ir
   aukštis, ir gap'as. `:not(:has(li))`, NE `:empty`: Django render'as palieka whitespace
   tarp tag'ų, o `:empty` tokio mazgo NEATITINKA. Taisyklė prie pačios klasės deklaracijos
   → veikia VISUR, kur .example-transcription perpanaudojama (reikšmės, vartojimo
   pavyzdžiai, tab'ai sinonimai/homonimai/antonimai). */
.example-transcription:not(:has(li)) {
  display: none;
}

/* Figma 1309:600: Raleway SemiBold (600) 20px, color #264289 (kiek tamsesnis
   negu --blue #264B87 — Figma-specifinis variantas), lh 1.5, ls -0.019em.
   Glosa BE gesto (šablone <span>) naudoja tą pačią tipografiją, bet be nuorodos požymių. */
.example-transcription a,
.example-transcription span {
  font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.019em;
}

.example-transcription a {
  color: #264289;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.example-transcription a:hover { opacity: 0.75; }

.example-transcription span {
  color: var(--text-dark);
  text-decoration: none;
}

/* Figma 1309:587/594: gap tarp „Žiūrėti įrašą" mygtuko ir širdutės. */
.example-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-shrink: 0;
}

/* „Redaguoti" badge (admin) pozicijos: (1) glosa — .gesture-header-top flex row'e po širdutės
   (base .btn-edit + row gap 16 + align-items:center → vertikaliai centruotas); (2) sakinys — INLINE
   .example-text <p> pabaigoje (base inline-flex + vertical-align:middle sulygiuoja su tekstu; markup'e
   tarpas prieš badge → atskyrimas + natūralus wrap taškas ilgam sakiniui). Papildomo CSS nereikia. */

/* Figma 1309:588: pl-16 pr-24 py-12, h-40 (fixed), w-138, rounded-6, bg #264B87,
   Raleway Bold 14px white, gap-8 tarp icon ir text. Eksplicitinis height: 40px
   užtikrina, kad būtų Figma exact aukštis (be `box-sizing: content-box` tricks). */
.btn-watch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 12px 24px 12px 16px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--r-input);
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-watch:hover { background: var(--blue-btn-hover); }

/* Mažesnė ❤ fav mygtukas pavyzdžiui (36×36, ne 40×40 kaip header'yje). */
.btn-fav-sm {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: var(--r-input);
  color: var(--blue);
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.btn-fav-sm:hover { background: var(--blue-light); }

/* ON state — TIK ikona raudona filled, box nepakeistas. */
.btn-fav-sm[aria-pressed="true"] svg path {
  fill: #E11D48;
  stroke: #E11D48;
}

/* TABLET typography + spacing kompresija — BUTINAI po desktop .meaning/
   .example-content def'ų, kad cascade'as veiktų. */
@media (641px <= width <= 1024px) {
  .meaning {
    gap: var(--gap-sm);
  }

  .example-content {
    gap: var(--gap-sm);
  }

  .meaning-title {
    font-size: var(--fs-h2-tablet);
    line-height: var(--lh-tablet);
  }

  .example-text {
    font-size: var(--fs-body-tablet);
    line-height: var(--lh-tablet);
  }

  .example-transcription a,
  .example-transcription span {
    font-size: var(--fs-small-tablet);
  }
}

/* MOBILE — Variantas A (titulinio principai): font'ai švelniai sumažinti
   per --fs-*-mobile variables (h2=22, body=16); .meaning padding sutapatintas
   su .main-card mobile padding (16); .examples padding-left atspindi h2
   mobile "1. " plotį (~24px Raleway Bold 22px); .example-actions gap mažesnis
   (16, mygtukai arčiau mobile UI). .related-item-link 18px (stabilus per
   visus breakpoint'us). .btn-watch 14px (stabilus). */
@media (width <= 640px) {
  .meanings {
    gap: var(--gap-md);
  }

  /* .meaning padding mobile = var(--gap-sm) (sutampa su .main-card mobile padding).
     .meaning gap mobile = var(--gap-2xs) (kompresija per spacing pattern'ą). */
  .meaning {
    padding: var(--gap-sm);
    gap: var(--gap-2xs);
  }

  /* Hanging indent mobile: 20px = Raleway Bold 22px "1. " plotis (matuota
     gyvai). Sutampa su .examples padding-left mobile. Hardcoded — ne spacing
     token (semantinis font width compensation). */
  .meaning-title {
    font-size: var(--fs-h2-mobile);
    line-height: var(--lh-mobile);
    padding-left: 20px;
    text-indent: -20px;
  }

  .example {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-sm);
  }

  .example-text {
    font-size: var(--fs-body-mobile);
    line-height: var(--lh-mobile);
  }

  .example-transcription a,
  .example-transcription span {
    font-size: var(--fs-body-mobile);
  }

  /* Mobile — tarp text ir transcription tight'esnis (9px = var(--gap-2xs)). */
  .example-content {
    gap: var(--gap-2xs);
  }

  .example-actions {
    align-self: flex-start;
    gap: var(--gap-sm);
  }

  .btn-watch {
    font-size: 14px;
    padding: 8px 14px;
  }

  /* h2 mobile = 22px (--fs-h2-mobile), "1. " plotis 20px (matuota gyvai —
     hanging indent, hardcoded ne token'as). */
  .examples {
    padding-left: 20px;
  }
}

/* ============================================================================
   GESTO FORMOS PARAMETRAI dešinėje (.gesture-form-info)

   Perkelta iš panaikinto .gesto-forma-drawer (2026-06): 6 .gf-param box'ai
   užima dešinę .gesture-header-body koloną (1fr). CSS Grid (auto-fit) — DOM
   tvarka išlaikoma (a11y reading order). Aukštis ribotas iki pagrindinio video
   aukščio (496px) — jei netelpa, scroll'inasi vertikaliai. .gf-* baziniai
   stiliai NEKEIČIAMI — tik kontekstiniai dydžių override'ai (thumb, padding).
   ============================================================================ */

/* CSS Grid (NE multicol): multicol su fiksuotu max-height išsilieja į papildomus
   stulpelius horizontaliai (→ horizontalus scrollbar). Grid auga vertikaliai ir
   scroll'inasi per overflow-y.

   Stulpelių logika derinama su .gesture-header-body layout'u:
   - DESKTOP plačiausias (≥1280px): forma ŠALIA video (dešinė 1fr kolona) → fiksuoti
     2 stulpeliai (1fr 1fr), kad balansuotų su video aukščiu (žr. @media žemiau).
   - DESKTOP siaura (1025–1279px): forma vis dar šalia video, bet dešinė kolona per
     siaura 2 stulpeliams → 1 stulpelis (bazinė reikšmė).
   - TABLET/MOBILE (≤1024px): forma SUKRAUTA po video per visą plotį → auto-fit
     užpildo plotį be tuščios vietos iš šonų (žr. @media žemiau). */
.gesture-form-info {
  display: grid;

  /* Bazė — 1 stulpelis (fallback; faktiškai ≤1279px auto-fit, ≥1280px 2 stulp. — žemiau). */
  grid-template-columns: 1fr;

  /* Tarpas tarp boxų: row-gap 10px (−4px vs 12 → formos apačia ≥1280px sutampa su video
     apačia ±1px; forma buvo 501px, video 496px), column-gap lieka 12px. */
  gap: 10px 12px;

  /* stretch — vienoje eilutėje esantys boxai (pvz. Vieta + Plaštakos padėtis)
     išsitempia iki aukščiausio → vienodas aukštis. */
  align-items: stretch;
}

/* ≤1279px (kur .gesture-header-body sukrauta — forma per visą plotį po video/trigger) —
   auto-fit sudeda tiek stulpelių, kiek telpa, BE tuščios vietos iš šonų (1fr max užpildo
   plotį). min 235px = siauriausias box'as (Plaštakos forma: thumb 90 + rodyklė 16 + thumb
   90 + 2×8 gap + 2×12 padding ≈ 236px). min(100%, 235px) — apsauga nuo horizontalaus
   overflow, kai kolona siauresnė nei 235px. */
@media (width <= 1279px) {
  .gesture-form-info {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  }
}

/* DESKTOP plačiausias (≥1280px) — forma šalia video; fiksuoti 2 stulpeliai (NE auto-fit),
   kad forma būtų ~2× žemesnė ir balansuotų su video aukščiu (496px), o ultra-wide nerodytų
   3+ stulpelių. Kaip buvo prieš auto-fit. */
@media (width >= 1280px) {
  .gesture-form-info {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================================
   GESTO FORMOS COLLAPSE (disclosure) — TIK ≤1279px.
   Perimta iš search-toggle.css: trigger'is (.gf-toggle, kaip .toggle-link) +
   max-height/opacity animacija per [aria-expanded] (kaip .expanded-content).
   ≥1280px: trigger paslėptas (display:none, žemiau bazė), forma visada matoma
   (collapse stiliai uždėti TIK @media ≤1279px). Žr. js/gesture-form-toggle.js.
   .gf-collapsible — wrapper, kad trigger + forma būtų vienas grid item
   (.gesture-header-body stulpelyje); esamas auto-fit gridas/boxai NEKEISTI. */

/* Trigger paslėptas desktop'e (≥1280px). */
.gf-toggle {
  display: none;
}

@media (width <= 1279px) {
  /* Trigger PO video — full-width = video plotis (max-width:600px, kaip video placeholder),
     lygiuotas su video kairiu kraštu (bazė margin-left:0; ≤1024px centruotas margin:0 auto
     kaip video — žr. tablet bloką). Stilius perimtas iš .btn-gesto-forma (mėlynas outline).
     justify-content:center — etiketė+rodyklė centre 600px bar'e. */
  .gf-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 600px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--blue);
    border-radius: var(--r-input);
    color: var(--blue);
    font-family: Raleway, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
  }

  .gf-toggle:hover { background: var(--blue-light); }

  .gf-toggle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: var(--r-input);
  }

  /* Rodyklė — pasisuka 180° išskleidus (kaip .toggle-link-chevron). */
  .gf-toggle-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  .gf-toggle[aria-expanded="true"] .gf-toggle-chevron {
    transform: rotate(180deg);
  }

  /* Suskleista (default) — max-height/opacity animacija (kaip .expanded-content). */
  .gesture-form-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.45s ease,
      opacity 0.25s ease;
  }

  /* Išskleista — subsequent-sibling nuo trigger'io (jie greta .gf-collapsible viduje).
     max-height su atsarga (1-stulp. mobile 6 boxai gali būti ~840px aukščio). */
  .gf-toggle[aria-expanded="true"] ~ .gesture-form-info {
    max-height: 2000px;
    opacity: 1;
    transition:
      max-height 0.7s ease,
      opacity 0.5s ease 0.2s;
  }
}

/* Reduced motion — animacijų nėra (perimta iš search-toggle.css). */
@media (prefers-reduced-motion: reduce) {
  .gf-toggle,
  .gf-toggle-chevron,
  .gesture-form-info {
    transition: none !important;
  }
}

/* ≤1279px (forma sukrauta po video) — video, „Gesto forma" trigger IR formos gridas
   centruojami (margin:0 auto), visi to paties max-width:600px (= video plotis) → vienas
   centruotas 600px stulpelis: video / trigger / forma, horizontaliai per vidurį, dešinėje/
   kairėje vienodi tarpai. PO collapse bloko — kad video/trigger margin įveiktų bazinį
   margin:0 (ta pati specifika, lemia source order). ≤640px (konteineris <600) visi užpildo
   plotį (margin auto = 0). ≥1280px nepaliesta — video šalia formos. */
@media (width <= 1279px) {
  .gesture-main-video .glosos-img-placeholder {
    margin: 0 auto;
  }

  .gf-toggle {
    margin: 0 auto 12px;
  }

  .gesture-form-info {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Kiekvienas parametras — baltas box'as (natūraliai atskiria parametrus).
   .gf-* bazinės spalvos/fontai NEKEIČIAMI — tik kontekstinis box bg + radius. */
.gesture-form-info .gf-param {
  /* padding 16→12, antraštė→turinys gap 8→6 — dalis aukščio mažinimo. */
  padding: 12px;
  gap: 6px;
  background: var(--white);
  border-radius: var(--r-card);
}

/* Antraštė kompaktiškesnė gesto formoje (bazė 18px → 17). Scope override (§52). */
.gesture-form-info .gf-param__label {
  font-size: 17px;
}

/* Visi thumbai vienodi 82×82 (Plaštakos forma pradžia/pabaiga, Vieta,
   Judesio tipas, Plaštakos padėtis Pirštai/Delnas). */
.gesture-form-info .gf-thumb {
  width: 90px;
  height: 90px;
}

/* Plaštakos forma start-end grid'as pagal 82px thumbus. Rodyklės stulpelis
   susiaurintas (16px), kad 82+16+82 + tarpai tilptų į siaurą 2-stulp. koloną (~233px). */
.gesture-form-info .gf-param__content--start-end {
  grid-template-columns: 90px 16px 90px;
  gap: 8px var(--gap-xs);
}

/* Rankos meta — flex su wrap: 3 ląstelės (Kiek rankų / Simetrija / Judesio tipas)
   telpa vienoje eilutėje plačiame stulpelyje, o siaurame (2-stulp. nuo 1280px)
   natūraliai susidėlioja į 1–2 eilutes (be horizontalaus overflow). */
.gesture-form-info .gf-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

/* Parašai (.gf-param__caption) centruojami thumb atžvilgiu (ne kairėje):
   flex-stack'uose (Vieta, PP eilutės, Rankos meta) — align-items: center;
   start-end grid'e (Plaštakos forma) — justify-self: center. Lūpų judesys
   boxuose caption yra tiesioginis .gf-param vaikas (be thumb) — šie selektoriai
   jo neliečia, lieka kairėje. */

/* Vienodas vertikalus stack gap (10px) VISOSE sekcijose — kad soft-label →
   thumb → caption gultų vienodame aukštyje (Plaštakos forma jau 10px; .gf-meta-cell
   bazė buvo 4px, .gf-param__row 8px — suvienodinta). */
.gesture-form-info .gf-param__row-content,
.gesture-form-info .gf-meta-cell {
  align-items: center;
  gap: 8px;
}

.gesture-form-info .gf-param__row {
  gap: 8px;
}

/* Plaštakos padėtis (Pirštai/Delnas) — bazinis .gf-param__rows (gesto-forma-drawer.css)
   ties @media (width <= 640px) stack'ina į 1fr (paveldėta iš seno fiksuoto pločio drawer'io,
   kur 640px viewport = siauras panelis). .gesture-form-info kontekste box'as visada ≥235px
   (auto-fit min), tad du 90px thumb'ai (90 + 16 gap + 90 = 196px + 24 padding = 220px box)
   telpa GRETA iki pat ~320px viewport — 640px stack'as buvo per ankstyvas.
   auto-fit, 90px tracks: laiko Pirštai/Delnas greta KOL fiziškai telpa (box turinys ≥196px),
   o tikrai per siaurame (<~300px viewport) gražiai stack'ina į 1 stulpelį. Packed left per
   bazinį justify-content: start. Scope'inta — .gf-param__rows naudoja TIK šis boxas. */
.gesture-form-info .gf-param__rows {
  grid-template-columns: repeat(auto-fit, 90px);
}

/* Dvi rankos — soft-label (Simetrija / Judesio tipas) į kairę (kaip kitų boxų
   Pradžia/Pabaiga, Pirštai/Delnas); img + caption lieka centruoti per align-items. */
.gesture-form-info .gf-meta-cell > .gf-soft-label {
  align-self: flex-start;
}

/* Vieta — thumb iš kairės (full-width container, todėl flex-start, kaip Plaštakos
   forma/padėtis), o parašas po juo apribotas thumb'o pločiu (82px) ir centruotas
   tekstas → centruotas thumb'o atžvilgiu, ne per visą boxą. */
.gesture-form-info .gf-param__content--inline {
  align-items: flex-start;
  gap: 8px;
}

.gesture-form-info .gf-param__content--inline > .gf-param__caption {
  width: 93px;
}

/* Vieta neturi soft-label eilutės (kaip Plaštakos padėties Pirštai/Delnas), todėl jos
   thumb gultų aukščiau. margin-top (≈ soft-label aukštis 21px + row gap 8px) nuleidžia
   Vietos thumb'ą į tą pačią liniją kaip Plaštakos padėties thumb'ai. */
.gesture-form-info .gf-param__content--inline > .gf-thumb {
  margin-top: 29px;
}

.gesture-form-info .gf-param__content--start-end > .gf-param__caption {
  justify-self: center;
}

.gesture-form-info .gf-param__content--inline > .gf-param__caption,
.gesture-form-info .gf-param__row-content > .gf-param__caption,
.gesture-form-info .gf-meta-cell > .gf-param__caption,
.gesture-form-info .gf-param__content--start-end > .gf-param__caption {
  text-align: center;
}

/* Rankos „Judesio tipas" — paveikslėlis virš tekstinės reikšmės; vienodas 82×82
   (kaip kiti thumbai). Rankos meta-grid lieka bazinis horizontalus (auto auto auto).
   Backend parinks img pagal reikšmę (simetriska/nesimetriska/pakaitomis/sinc.png). */
.gf-move-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
}

/* ============================================================================
   APJUNGTAS LŪPŲ JUDESYS — full-width box. ≥1280px: KAIRĖJE Žodinis + Gestinis (arti, 15px),
   DEŠINĖJE Pastaba, atskirta VERTIKALIA linija (border-left). ≤1279px: viskas vertikaliai
   (Žodinis, Gestinis, Pastaba), linija → border-top. Pakeitė du atskirus .gf-param boxus.
   Scope'inta .gesture-form-info kontekste. */
.gesture-form-info .gf-param--lips {
  grid-column: 1 / -1;

  /* .gf-param bazė yra flex-column; čia — eilutė: [Žodinis+Gestinis] | [Pastaba]. */
  flex-direction: row;
  align-items: stretch;
  gap: var(--gap-md);
}

/* Kairė grupė — Žodinis + Gestinis arti (15px); netemptisi (flex-shrink:0). */
.gf-lips-pair {
  display: flex;
  gap: 15px;
  flex-shrink: 0;
}

.gf-lips-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Pastaba dešinėje — atskirta vertikalia linija (border-left); flex:1 + min-width:0 leidžia
   tekstui wrap'inti. Rodoma TIK jei backend pateikia turinį (tuščia → šio bloko HTML'e nėra). */
.gf-lips-note {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--gap-md);
  border-left: 1px solid rgb(38 75 135 / 18%);
}

/* Label „Pastaba" + ikona; tipografija per perpanaudotą .gf-soft-label (Outfit 500 15px muted). */
.gf-lips-note__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.gf-lips-note__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.gf-lips-note__text {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
}

/* ≤1279px (forma stack po video) — viskas vertikaliai: Žodinis, Gestinis, Pastaba; vertikali
   linija dešinėje → border-top virš pastabos. */
@media (width <= 1279px) {
  .gesture-form-info .gf-param--lips {
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .gf-lips-pair {
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .gf-lips-note {
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid rgb(38 75 135 / 18%);
  }
}

/* ============================================================================
   VARIANTŲ KARUSELĖ (.gesture-variants) — horizontalus scroll'as po .gesture-header
   sekcija (.main-card viduje). .related-item kortelės perpanaudotos su .lgkp thumb.
   Klaviatūra: tabindex=0 + role=region → scroll'as rodyklėmis; vidiniai link'ai
   ir mygtukai Tab-fokusuojami. :focus-visible matomas.
   ============================================================================ */
.gesture-variants {
  list-style: none;

  /* Tarpas iki gesto formos sekcijos (neigiamas — karuselė kiek pakelta). */
  margin: -6px 0 0;
  padding: 0 0 var(--gap-2xs);
  display: flex;
  gap: var(--gap-sm);
  overflow-x: auto;
  scroll-snap-type: x proximity;

  /* Drag-to-scroll (pelei) — žr. js/variant-drag.js.
     Custom SVG kursoriai: sisteminis grabbing Chrome/Edge baltas (nematomas ant balto fono),
     Firefox ok. Custom delnas su tamsiu kontūru (#1a1a1a) + baltu vidumi — matomas ant balto
     IR ant video. Sisteminis grab/grabbing lieka fallback'u (po data-URI). Hotspot 12 12. */
  --cur-grab: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%231a1a1a%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226.2%22%20y%3D%224.5%22%20width%3D%222.8%22%20height%3D%228%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%229.4%22%20y%3D%223%22%20width%3D%222.8%22%20height%3D%229.5%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%223%22%20width%3D%222.8%22%20height%3D%229.5%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2215.8%22%20y%3D%224.5%22%20width%3D%222.8%22%20height%3D%228%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%223.2%22%20y%3D%2211.5%22%20width%3D%222.8%22%20height%3D%226.5%22%20rx%3D%221.4%22%20transform%3D%22rotate(-30%204.6%2014.7)%22%2F%3E%3Crect%20x%3D%225.5%22%20y%3D%2210%22%20width%3D%2213%22%20height%3D%229.5%22%20rx%3D%224%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%226.2%22%20y%3D%224.5%22%20width%3D%222.8%22%20height%3D%228%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%229.4%22%20y%3D%223%22%20width%3D%222.8%22%20height%3D%229.5%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%223%22%20width%3D%222.8%22%20height%3D%229.5%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2215.8%22%20y%3D%224.5%22%20width%3D%222.8%22%20height%3D%228%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%223.2%22%20y%3D%2211.5%22%20width%3D%222.8%22%20height%3D%226.5%22%20rx%3D%221.4%22%20transform%3D%22rotate(-30%204.6%2014.7)%22%2F%3E%3Crect%20x%3D%225.5%22%20y%3D%2210%22%20width%3D%2213%22%20height%3D%229.5%22%20rx%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 12 12, grab;
  --cur-grabbing: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%231a1a1a%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%227.5%22%20width%3D%222.8%22%20height%3D%224.5%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%227%22%20width%3D%222.8%22%20height%3D%225%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%227%22%20width%3D%222.8%22%20height%3D%225%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%227.5%22%20width%3D%222.8%22%20height%3D%224.5%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%223.8%22%20y%3D%2211.5%22%20width%3D%222.8%22%20height%3D%225.5%22%20rx%3D%221.4%22%20transform%3D%22rotate(-25%205.2%2014.2)%22%2F%3E%3Crect%20x%3D%225.5%22%20y%3D%229.5%22%20width%3D%2213%22%20height%3D%2210%22%20rx%3D%224.5%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%227%22%20y%3D%227.5%22%20width%3D%222.8%22%20height%3D%224.5%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%227%22%20width%3D%222.8%22%20height%3D%225%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%227%22%20width%3D%222.8%22%20height%3D%225%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%227.5%22%20width%3D%222.8%22%20height%3D%224.5%22%20rx%3D%221.4%22%2F%3E%3Crect%20x%3D%223.8%22%20y%3D%2211.5%22%20width%3D%222.8%22%20height%3D%225.5%22%20rx%3D%221.4%22%20transform%3D%22rotate(-25%205.2%2014.2)%22%2F%3E%3Crect%20x%3D%225.5%22%20y%3D%229.5%22%20width%3D%2213%22%20height%3D%2210%22%20rx%3D%224.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 12 12, grabbing;

  cursor: var(--cur-grab);

  /* Karuselė — navigacijos widget'as; teksto pažymėjimas išjungtas VISADA (scope'inta tik
     karuselei, ne puslapiui), kad tempiant ar paspaudus kursorius netaptų teksto (I-beam)
     ir tekstas nesižymėtų. Link'ai vis tiek spaudžiami (user-select click'ui netrukdo). */
  -webkit-user-select: none;
  user-select: none;
}

/* Tempimo metu — grabbing; scroll-snap išjungtas, kad scrollLeft tempiant nesnapintų atgal
   į kortelę (atleidus snap'as vėl įsijungia). */
.gesture-variants.is-dragging {
  cursor: var(--cur-grabbing);
  scroll-snap-type: none;
}

/* Tempimo metu — grabbing ant VISŲ vaikų (įskaitant link'us/tekstą), kad kursorius
   netaptų teksto (I-beam) ar pointer; teksto pažymėjimas ir taip išjungtas (user-select +
   JS preventDefault). Galioja TIK tempiant — atleidus link'ai vėl pointer. */
.gesture-variants.is-dragging * {
  cursor: var(--cur-grabbing);
}

/* Thumb'o overlay mygtukai (.lgkp__hit/.lgkp__bigplay) bazėje turi cursor: pointer, todėl
   ant thumb'ų kursorius būdavo nenuoseklus (pointer vietoj grab). Karuselėje juos verčiam
   paveldėti container'io kursorių (grab / tempiant grabbing) — drag sritis nuosekli.
   Tikra aktyvi vieta — .related-item-link — lieka pointer (UA stilius). video-player.css
   NEKEIČIAMAS. */
.gesture-variants .lgkp__hit,
.gesture-variants .lgkp__bigplay {
  cursor: inherit;
}

/* Play ikona karuselės thumb'uose buvo per didelė (užėmė beveik visą thumb'ą) — sumažinta
   dvigubai (apskritimas 64→32px, SVG 28→14px). Scope'inta TIK .gesture-variants — kitur
   (pagrindinis video, modalai) play ikona NEPALIESTA, video-player.css NEKEIČIAMAS. */
.gesture-variants .lgkp__bigplay {
  width: 32px;
  height: 32px;
}

.gesture-variants .lgkp__bigplay svg {
  width: 14px;
  height: 14px;
}

.gesture-variants .related-item {
  flex: 0 0 auto;
  width: 400px;
  scroll-snap-align: start;
}

.gesture-variants:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-card);
}

.gesture-variants::-webkit-scrollbar { height: 8px; }
.gesture-variants::-webkit-scrollbar-track { background: transparent; }
.gesture-variants::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ============================================================================
   VARIANTŲ PAVADINIMO TOOLTIP (.variant-tooltip) — pilnas pavadinimas ant hover/focus,
   kai .related-item-link__text nukirptas daugtaškiu. Valdo js/variant-tooltip.js.
   WCAG 2.2 SC 1.4.13: dismissable (Esc), hoverable (pelę galima užvesti ant tooltip'o),
   persistent (jokio auto-hide timer'io). position: fixed — neapkerpa karuselės overflow.
   PILKAS fonas #4b4b4b + #fff tekstas → kontrastas ~8.6:1 (≥4.5:1). */
.variant-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  padding: 8px 12px;
  background: #4b4b4b;
  color: #fff;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--r-input);
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);

  /* hoverable — pelė gali užeiti ant tooltip'o, jis nedingsta. */
  pointer-events: auto;
}

.variant-tooltip[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .variant-tooltip { transition: none; }
}

/* MOBILE (≤640px) — karuselės kortelės siauresnės, kad tilptų į narrow viewport.
   .gesture-form-info auto-fit (min(100%,300px)) pats susitraukia į 1 stulpelį. */
@media (width <= 640px) {
  .gesture-variants .related-item {
    width: 280px;
  }
}

/* ===== components/info-modal.css ===== */

/* INFO MODAL — apvalus klaustuko mygtukas gesture-card header'yje +
   modal'as su video ir aprašymu apie gesto parametrą.

   .modal-overlay / .modal / .modal-hdr / .modal-close — naudoja egzistuojančias
   klases iš modal.css. Video konteinerio dydis ir stilius — paveldima iš
   .info-media (info.css): width 458px, aspect-ratio 1.21, border-radius 8px,
   object-fit cover. */

/* Klaustuko ikona su question.png — gesture-card header'yje (<button>, atidaro info-modal)
   IR paieškos antraštėse (<a href="straipsnis.html">, atsidaro naujame lange). Ta pati klasė
   abiem — „nuogas" stilius (be border/background/border-radius/padding); question.png pati turi
   savo apvalų dizainą. Liko dydis + reset (cursor, display, flex centering child'ui).
   text-decoration:none — <a> versijai (paieška), kad nebūtų pabraukimo. */
.gc-info-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.gc-info-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gc-info-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Info modal'o body — desktop: video kairėje, tekstas dešinėje.
   Užima likusią modal vietą; jei turinys (long aprašymas + video) ilgesnis
   nei .modal max-height — scrolli'na viduje, kad close mygtukas header'yje
   liktų matomas. */
.info-modal-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.info-modal-body .info-media {
  flex-shrink: 0;

  /* width 458px ir aspect-ratio 1.21 paveldima iš .info-media bazinio stiliaus */
}

.info-modal-text-wrap {
  flex: 1;
  min-width: 0;
}

.info-modal-text {
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0;
}

/* Mobile: vertical stack (video viršuje, tekstas apačioje) */
@media (width <= 900px) {
  .info-modal-body { flex-direction: column; }

  .info-modal-body .info-media {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;

    /* aspect-ratio: 1.21 paveldima */
  }
}

/* Info modal'as paprastesnis — nereikia footer su mygtukais */
.info-modal .modal-ftr { display: none; }

/* ===== components/info.css ===== */

/* INFO SECTION - Apie žodyną, Apie LGK, LGK gramatika, Pirštų abėcėlė, Kaip naudotis */
.info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 64px;
  align-self: stretch;

  /* No fixed height: lets flex naturally fit content + 4:3 video (343.5px tall).
     align-items: flex-start — tekstas lygiuojamas VIRŠUJE: antraštė prasideda
     lygiai su video viršumi (nebe centruota greta aukštesnio video). */
}

.info-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 16px;
}

.info-title {
  font-weight: 700;
  font-size: var(--fs-info-title);
  line-height: 150%;
  letter-spacing: -0.019em;
  color: #262626;
}

.info-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: stretch;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  letter-spacing: -0.011em;
  color: #1E1E1E;
}

.info-body p {
  margin: 0;
}

.info-body p + p {
  margin-top: 0.75em;
}

.info-more {
  display: inline-flex;
  align-self: flex-start;
  height: 40px;
  padding: 12px 0;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  font-feature-settings: 'liga' off, 'clig' off;
  text-align: center;
  color: var(--blue);
  text-decoration: underline;
  text-underline-position: from-font;
}
.info-more:hover { text-decoration-thickness: 2px; }

.info-media {
  width: 458px;
  aspect-ratio: var(--video-aspect);
  flex-shrink: 0;
  background: linear-gradient(135deg, #bbb 0%, #999 100%);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.info-media.has-video { background: #000; }

/* Juodo video fono panaikinimas (kaip inner .lgkp) — .info-media ir jos .lgkp → transparent,
   kad info video dėžėje neliktų juodo fono (kampuose/juostose). Po base rule, kad kaskadoje
   laimėtų (tas pats specifiškumas). video-player.css NEKEIČIAMAS. */
.info-media .lgkp,
.info-media.has-video {
  background: transparent;
}

.info-media video,
.info-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.info-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgb(0 0 0 / 55%);
  border: none;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.info-play:hover { background: rgb(0 0 0 / 75%); }
.info-play svg { width: 22px; height: 22px; fill: currentcolor; }
.info-play .icon-pause { display: none; }
.info-media.playing .info-play .icon-play { display: none; }
.info-media.playing .info-play .icon-pause { display: block; }

/* Responsive */
@media (width <= 900px) {
  .info-item { flex-direction: column; height: auto; gap: 24px; }
  .info-text, .info-media { width: 100%; max-width: 100%; }
  .info-media { height: auto; aspect-ratio: var(--video-aspect); }
}

@media (width <= 640px) {
  .info-card { padding: 20px 16px; }
  .info-title { font-size: 24px; }
  .info-body { font-size: 16px; }
}

/* ===== components/istorija.css ===== */

/* ============================================================================
   ŽIŪRĖTŲ GESTŲ ISTORIJA (istorija.html) — vartotojo peržiūrų žurnalas.
   KOPIJA megstamiausi struktūros: .inner-page template (contact.css), .mg-* sąrašas
   (megstamiausi.css), .zs-word tekstas (zodziai.css), video modalas (video-modal/
   video-player.css), pagination (pagination.css). SKIRTUMAS: NĖRA pašalinimo; vietoj
   šiukšliadėžės — peržiūros DATOS+LAIKO žyma (.hist-time).

   §41 reuse: layout/tekstas/modalas/pagination — perpanaudoti. ČIA TIK .hist-time žyma.
   ============================================================================ */

/* Peržiūros laiko žyma — žalsva pill, dešinėje .mg-item krašte (kur megstamiausi buvo .mg-remove).
   Pill forma ir spalvos perimtos iš buvusio .zs-tag--ex; po zodziai bold/italic swap ta klasė
   shared CSS nebeturi pill/spalvų (paslėpta + spalvos perkeltos į Copy inline), todėl istorijai —
   atskira semantinė <time> žyma, NE .zs-tag. tabular-nums — kad datos skaitmenys lygiuotųsi. */
.hist-time {
  flex: 0 0 auto;
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #E6F4EA;
  color: #1E6B3A;
  font-family: Raleway, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Mobile — žemesnis dydis/padding, kad ilga data+laikas tilptų prie wrap'inamo teksto. */
@media (width <= 640px) {
  .hist-time {
    padding: 3px 10px;
    font-size: 12px;
  }
}

/* ===== components/list-row.css ===== */

/* ============================================================================
   LIST-ROW — BENDRA sąrašo eilutės bazė. Dalijasi keli puslapiai:
     - zodziai.html + zodziai - Copy.html (kartu su .zs-item — bold/italic ar badge specifika),
     - megstamiausi.html (kartu su .mg-item — glosa/sakinys + .mg-remove),
     - istorija.html (kartu su .mg-item — žalia datos žyma .hist-time).

   Tikslas: VIENODA bazė visuose (tarpai, rėmelis, vertikalus centravimas). Specifika
   (bold/italic, badge spalvos, datos žyma, .mg-item__main flex-grow) lieka ATSKIROSE klasėse.

   Vertikalus centravimas — align-items: center (NE baseline), kad tekstas ir dešinysis
   elementas (badge/data/mygtukas) būtų centruoti tarpusavyje.
   ============================================================================ */

.list-row {
  display: flex;
  align-items: center;

  /* Žodis/dešinysis elementas atskiriami per space-between — flex gap NENAUDOJAMAS (Tado
     sprendimas). Jei dešinysis elementas suartėtų per arti — margin ant jo, NE gap. */
  justify-content: space-between;

  /* Vienodas eilučių aukštis VISUOSE puslapiuose (zodziai/megstamiausi/istorija): aukščiausias
     dešinysis elementas (~26px žyma/mygtukas) + padding + border = 56px; žemesnės eilutės
     ištempiamos, tekstas centruojamas per align-items. border-box — padding/border įskaičiuoti. */
  min-height: 56px;

  /* Simetriškas padding (viršus = apačia = 14px; šonai 4px) — Tado patvirtinta reikšmė. */
  padding: 14px 4px;

  /* line-height 24px VIENODAS visiems sąrašams (zodziai/megstamiausi/istorija) — paveldi ir
     <a>, ir <button> .zs-word; erdvesnis tarp wrap'intų sakinio eilučių. Žymos (.zs-tag /
     .hist-time) turi savo line-height — pill dizainas nepaveiktas. */
  line-height: 24px;
  border-bottom: 1px solid var(--border);
}

.list-row:last-child {
  border-bottom: 0;
}

/* ===== components/lupu-judesys-combobox.css ===== */

/* LŪPŲ JUDESYS — inline combobox.
   Talpinasi gestų formos kortelėje (~190px) vietoj „Pridėti" mygtuko. */

.combo-wrap {
  position: relative;
  width: 100%;
}

.combo-input-row {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: var(--r-input);
  padding: 7px 8px 7px 10px;
  gap: 6px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.combo-input-row:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgb(38 75 135 / 20%);
}

.combo-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dark);
}

.combo-input::placeholder { color: var(--text-ph); }

/* „✕" išvalymo mygtukas — rodomas tik kai įvestas tekstas / yra pasirinkta */
.combo-clear {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--text-ph);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color .15s, background .15s;
}

.combo-clear:hover { color: var(--text-dark); background: var(--blue-light); }

.combo-clear:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.combo-clear[hidden] { display: none; }

.combo-clear svg { width: 15px; height: 15px; }

/* Chevron ▾ */
.combo-chevron {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .15s;
}

.combo-chevron:hover { color: var(--blue-btn-hover); }

.combo-chevron:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.combo-chevron svg { width: 20px; height: 20px; }

.combo-wrap:has(.combo-list.open) .combo-chevron { transform: rotate(180deg); }

/* Dropdown sąrašas */
.combo-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid #CCC;
  border-radius: var(--r-input);
  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}

.combo-list.open { display: block; }

.combo-item {
  padding: 8px 12px;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dark);
  cursor: pointer;
  transition: background .1s;
}

@media (hover: hover) {
  .combo-item:hover { background: var(--blue-light); }
}

.combo-item.active { background: var(--blue-light); }

.combo-item[aria-selected="true"] {
  background: var(--blue-light);
  font-weight: 700;
  color: var(--blue);
}

.combo-item mark {
  background: none;
  color: var(--blue);
  font-weight: 700;
}

.combo-empty {
  padding: 10px 12px;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: var(--text-ph);
  font-style: italic;
}

/* ===== components/megstamiausi.css ===== */

/* ============================================================================
   MĖGSTAMIAUSI (megstamiausi.html) — vartotojo išsaugotų įrašų rinkinys.
   Sujungia DU tipus viename sąraše: glosa (<a>) + vartojimo pavyzdys (<button>,
   atidaro video modalą). Perpanaudoja .inner-page template (contact.css): hero,
   .inner-page__card, .contact-title; breadcrumb; tokenai (variables.css).
   Įrašo tekstas — .zs-word (zodziai.css) GLOSAI IR SAKINIUI vienodai.

   PASTABA (§41 reuse): patvirtinimo modalas — .modal--confirm / .modal-confirm-text /
   .btn-danger JAU egzistuoja account.css; video modalas — video-modal.css /
   video-player.css. ČIA TIK nauji .mg-* + button.zs-word reset.
   ============================================================================ */

/* === Sąrašas — kiekvienas įrašas viena eilutė (tekstas + pašalinimo ikona). === */
.mg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* .mg-item bazė (flex/centravimas/padding/rėmelis/last-child) — perkelta į .list-row (bendra
   eilutės klasė). Čia lieka TIK specifika (.mg-item__main flex-grow, button reset, .mg-remove).
   HTML li klasė: „list-row mg-item" (megstamiausi.js / istorija.js). */

/* Teksto stulpelis — auga, min-width:0 kad ilgi sakiniai wrap'intųsi (ne overflow). */
.mg-item__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* button.zs-word — kad <button> (sakinys) atrodytų IDENTIŠKAI kaip <a> (glosa).
   .zs-word (zodziai.css) duoda font/spalvą/hover; čia TIK nuimam button chrome.
   font NEnustatom (kad nenugožtų .zs-word Raleway/dydžio). */
button.zs-word {
  -webkit-appearance: none;
  appearance: none;
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  line-height: inherit; /* UA „normal" override — paveldi 24px iš .list-row (kaip <a>). */
  cursor: pointer;
}

/* === Pašalinimo mygtukas — TIK raudona šiukšliadėžės ikona (be teksto). ===
   Aukštis 26px — sutampa su istorija datos žyma (.hist-time ~26px), kad .list-row eilutės
   būtų vienodo aukščio visuose puslapiuose. Paspaudimo plotas išlaikytas ~36px per ::before
   (nematomas hit-area išplėtimas; pseudo-elementas priklauso mygtukui — klikas veikia). */
.mg-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  width: 36px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--r-input);
  color: #b3261e;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mg-remove::before {
  content: '';
  position: absolute;
  inset: -5px 0;
}

.mg-remove svg {
  width: 20px;
  height: 20px;
}

.mg-remove:hover {
  background: rgb(179 38 30 / 8%);
}

/* === Tuščio rinkinio pranešimas. === */
.mg-empty {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  color: #555;
}

/* ===== components/modal.css ===== */

/* MODAL - expanded grid picker */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgb(0 0 0 / 55%);
  z-index: 1000; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;

  /* Blokuojam scroll chaining į body, kad uždarius modal'ą puslapio
     scroll pozicija nebūtų pasikeitusi. */
  overscroll-behavior: contain;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--white); border-radius: var(--r-card);
  padding: 38px;
  width: fit-content;
  min-width: 768px;
  max-width: 1320px;
  max-height: 90vh; /* footer'iui visada matomam mobile/tight viewport'uose */
  box-shadow: 0 20px 60px rgb(0 0 0 / 25%);
  animation: mIn .22s ease;
  display: flex; flex-direction: column; gap: 29px;
}

@keyframes mIn {
  from { opacity: 0; transform: translateY(-14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.modal-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 19px;
  flex-shrink: 0; /* nesusispaudžia, kai grid scrolli'na viduje */
}

.modal-hdr h3 {
  font-weight: 700;
  font-size: var(--fs-card-title); line-height: 1.5;
  letter-spacing: -0.019em; color: var(--text-dark);
}

.modal-close {
  background: var(--text-dark); border: none; cursor: pointer;
  color: var(--white); padding: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.modal-close:hover { background: #333; }
.modal-close svg { width: 14px; height: 14px; }

.modal-search {
  display: flex; align-items: center;
  background: var(--white); border: 1px solid var(--border-input);
  border-radius: var(--r-input); padding: 12px 14px; gap: 8px;
  max-width: 320px;
  flex-shrink: 0; /* nesusispaudžia, kai grid scrolli'na viduje */

  /* SVG search ikona naudoja currentColor — paveldima čia. */
  color: var(--text-ph);
}

/* Modifier — paieškos input'as užima visą modal'o plotį (Vieta modal'as). */
.modal-search.modal-search--full { max-width: none; }

.modal-search input {
  flex: 1; border: none; outline: none;
  font-family: Outfit, sans-serif; font-size: 15px;
  color: var(--text-dark); background: transparent;
}
.modal-search input::placeholder { color: var(--text-ph); }

.modal-grid {
  display: flex;
  flex-direction: column;
  gap: 29px;

  /* Užima visą likusią vietą tarp header/search ir footer; paieška ir
     footer'is lieka matomi, item'ai scrolli'nasi viduje. min-height: 0
     leidžia flex item'ui shrink'tis žemiau intrinsic size. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-group-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0;
}

/* Wrapper around .modal-group-items exists so mobile overflow fades can be
   absolutely positioned without scrolling along with the items. */
.modal-group-items-wrap {
  position: relative;
}

.modal-group-items {
  display: grid;
  grid-template-columns: repeat(5, 128px);
  gap: 20px 16px;
}

.grid-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; cursor: pointer;
  background: none; border: none; padding: 0;
  font-family: inherit;
  transition: transform .15s;
}

@media (hover: hover) {
  .grid-item:hover { transform: translateY(-2px); }
  .grid-item:hover .grid-thumb { background: #EDEEF2; }
}

.grid-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  background: #F5F5F7;
  border: 2px solid transparent;
  border-radius: 8px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}

/* Placeholder pattern — diagonal stripes (slepiam kai yra paveikslėlis) */
.grid-thumb:not(:has(.grid-thumb-img))::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 8px,
      rgb(38 75 135 / 5%) 8px,
      rgb(38 75 135 / 5%) 9px);
  pointer-events: none;
}

/* Paveikslėlis užpildo grid-thumb plotą */
.grid-thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.grid-thumb-label {
  position: relative; z-index: 1;
  font-family: Outfit, sans-serif;
  font-size: 11px; font-weight: 500;
  color: #8A8A96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.grid-check {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  display: none; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 6px rgb(38 75 135 / 35%);
}
.grid-check svg { width: 12px; height: 12px; }

.grid-item.selected .grid-thumb {
  border-color: var(--blue);
  background: var(--blue-light);
}
.grid-item.selected .grid-check { display: flex; }

.grid-label {
  font-family: Outfit, sans-serif;
  font-size: 14px; font-weight: 400;
  color: var(--text-dark);
  text-align: left;
  line-height: 1.4;
}

.grid-item.selected .grid-label {
  color: var(--blue); font-weight: 500;
}

/* Empty placeholder variant — category has no image assigned yet.
   Visually distinct (no stripes, dashed border), not selectable. */
.grid-thumb--empty {
  background: #F5F5F7;
  background-image: none;
  border: 1px dashed #D1D5DB;
  cursor: not-allowed;
}

.grid-thumb--empty::before { content: none; }

.grid-item--empty {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Hide the label visually on empty placeholders; preserves layout height
   (so cards in the same row stay aligned) and keeps text for screen readers. */
.grid-item--empty .grid-label {
  visibility: hidden;
}

/* Neutralize hover/focus transforms inherited from base .grid-item */
@media (hover: hover) {
  .grid-item--empty:hover { transform: none; }

  .grid-item--empty:hover .grid-thumb--empty,
  .grid-item--empty:focus .grid-thumb--empty {
    background: #F5F5F7;
    border-color: #D1D5DB;
  }

  .grid-item--empty:hover .grid-label { color: inherit; }
}

.modal-empty {
  padding: 32px;
  text-align: center;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: var(--text-ph);
}

.modal-ftr {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 14px; flex-wrap: wrap;
  flex-shrink: 0; /* footer'is niekada nesispaudžia ir neslepiamas */
  position: sticky;
  bottom: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.modal-count {
  margin-right: auto;
  font-family: Outfit, sans-serif;
  font-size: 14px; color: #555;
}
.modal-count strong { color: var(--blue); font-weight: 700; }

/* Responsive — taikom ir tarpinėms rezoliucijoms (641-900), nes desktop
   layout'as (min-width: 768, 5×128 grid, padding 38) telpa tik nuo ~820+
   viewport'o. Mobile (≤640) elgesys nepakitęs, nes ≤640 įeina į ≤900. */
@media (width <= 900px) {
  /* Modal telpa į viewport'ą be horizontalaus scroll'o:
     5 stulpeliai išsidėsto per visą plotį per 1fr. Vartotojas gali
     pinch-to-zoom'inti pirštais (viewport meta neturi user-scalable=no). */
  .modal {
    width: 100%;
    min-width: 0;
    padding: 24px 20px;
  }
  .modal-search { max-width: none; }

  .modal-group-items-wrap { overflow: visible; }

  .modal-group-items {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
  }

  /* Mobile'e nėra horizontalaus scroll'o, todėl edge gradient fade'ų nereikia.
     JS klases (`has-overflow-start/end`) palieka pridėti — be scroll'o jos
     niekada netoggle'inamos, tad ::before/::after lieka neaktyvios. */
  .modal-group-items-wrap::before,
  .modal-group-items-wrap::after { display: none; }
}

@media (width <= 640px) {
  /* Placeholder'is mažas (~60px pločio @ 375 viewport) — sumažinam tekstus
     viduje, kad netilptų išgriūtų už ribų. */
  .grid-thumb-label { font-size: 10px; }
  .grid-label { font-size: 12px; }
}

@media (width <= 480px) {
  .modal-ftr { flex-direction: column; align-items: stretch; }
  .modal-count { margin-right: 0; text-align: center; }
  .btn-cancel, .btn-confirm { width: 100%; }
}

/* ===== components/nav.css ===== */

/* Logotipo margin-left — clamp(35, (100vw-1700)/2, 110).
   Elgesys: ≥1920px → 110 (max), 1770-1920 → linear 35→110, <1770 → 35 (min).
   v4.3 (2026-05-27): min pakeltas iki 35 (vietoj 20), max pasiekiamas
   ties vw=1920 (vietoj 1830). Logotipas po pakeitimo užima daugiau
   vietos nuo kairio krašto vidutiniame ir mažame viewport'e. */
.header-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-left: clamp(35px, calc((100vw - 1700px) / 2), 110px);

  /* .header-logo yra <a> (linkas į titulinį) — reset'inam link stilių (be underline,
     be link-mėlynos); cursor:pointer paveldimas iš a[href]. Perkelta iš main.css 2026-06-04. */
  text-decoration: none;
  color: inherit;
}

/* LGKŽ logo — inline SVG.
   Bazinė klasė + bendros raidžių tipografijos. Header/footer kontekstai
   skiriasi tik spalvomis (žr. taikymo selektorius žemiau ir layout.css). */
.logo-svg {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.logo-letter {
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 20px;
}

/* Header'is: balti kvadratai, mėlynos raidės */
.header-logo .logo-svg { color: var(--white); }
.header-logo .logo-letter { fill: var(--blue); }

.header-title {
  font-weight: 700;
  font-size: clamp(15px, 2vw, 24px); line-height: 1.5; letter-spacing: -0.019em;
  color: var(--white); white-space: nowrap;
}

/* Meniu margin-right — ta pati clamp formuluotė kaip logo. Simetriška. */
.header-nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  height: 48px;
  flex-shrink: 0;
  margin-right: clamp(20px, calc((100vw - 1634px) / 2), 110px);
}

/* Menu/Top/Link – weight 500, padding 12px 0 */
.nav-link {
  display: flex; align-items: center;
  padding: 12px 0; height: 48px;
  font-weight: 500;
  font-size: 14px; line-height: 150%;
  color: var(--white); text-decoration: none; white-space: nowrap;
  transition: opacity .2s;
}
.nav-link:hover { opacity: .75; }

/* Hamburger pakeičia .header-nav ≤900px. Ta pati margin formuluotė. */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  margin-right: clamp(20px, calc((100vw - 1634px) / 2), 110px);
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; }

/* MOBILE NAV */
.nav-overlay { display: none; position: fixed; inset: 0; background: rgb(0 0 0 / 40%); z-index: 900; }
.nav-overlay.open { display: block; }

.mobile-nav {
  position: fixed; top: 0; right: 0;
  width: 260px; height: 100%;
  background: var(--blue); z-index: 910;
  transform: translateX(100%); transition: transform .3s ease;
  padding: 32px 24px; display: flex; flex-direction: column; gap: 8px;
}
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-close {
  align-self: flex-end;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  margin-bottom: 8px;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-close:hover { background: rgb(255 255 255 / 12%); }
.mobile-nav-close svg { width: 16px; height: 16px; }
.mobile-nav .nav-link { display: block; height: auto; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / 15%); font-size: 16px; }
.mobile-nav .btn-login { margin-top: 16px; width: auto; justify-content: center; }

/* Prisijungusio vartotojo sekcija — INLINE mėlyname sidebar'yje (≤900px,
   Variantas A: matoma iškart, be toggle). Atskira nuo body-lygmens floating
   #userMenu (desktop >900px lieka nepaliestas). Rodoma tik body.is-logged-in.
   „Vartotojas" eilutė — identifikatorius (NE toggle, jokio aria-expanded).
   Opcijos integruotos kaip .mobile-nav .nav-link: baltas tekstas, border-bottom
   skirtukai, tie patys ikonų dydžiai (.user-menu__icon 20×20). */
.mobile-nav-user {
  display: none;
  flex-direction: column;
}

body.is-logged-in .mobile-nav-user,
body[data-user-authenticated="true"] .mobile-nav-user { display: flex; }

.mobile-nav-user__name {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin: 16px 0 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
}

.mobile-nav-user__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* Baltas box opcijoms — perpanaudoja desktop floating dropdown vizualą
   (.auth-dropdown.user-menu: balta bg, border, var(--r-card) radius, padding 8,
   gap 4), kad tamsios .user-menu__item ikonos + tekstas vėl matytųsi (sidebar
   fonas mėlynas). Skiriasi TIK pozicionavimas: čia inline (static), ne floating.
   Opcijos viduje naudoja TAS PAČIAS .user-menu__item / __icon / __logout klases
   kaip desktop dropdown'as — stiliaus nedubliuojam. */
.mobile-nav-user__box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

/* Responsive */
@media (width <= 900px) {
  .header-nav { display: none; }
  .hamburger { display: flex; }
}

/* TABLET + MOBILE (≤1024px) — header žemesnis (70px) + .header-title fiksuotas 17px.
   Desktop (≥1025px) NEPALIESTAS (clamp + 94px). body > header (0,0,2) — ta pati specifika
   kaip layout.css bazė (94px); laimi source order'iu (nav.css po layout.css build'e).
   Perkelta iš main.css 2026-06-04 (buvo main-only). */
@media (width <= 1024px) {
  body > header { height: 70px; }
  .header-title { font-size: 17px; }
}

@media (width <= 640px) {
  /* header height (70px) ir .header-title font-size (17px) valdomi ≤1024px bloke / main.css.
     Buvę čia `header { height: auto; padding }` (dead) ir `.header-title { font-size: 14px }`
     pašalinti. */
  .header-logo .logo-svg { height: 22px; } /* raidės skalė per SVG viewport */

  /* Mobile — atskira 16px margin per logo / hamburger (NE reset į 0).
     Bare `header { padding: 16px 20px }` perdengiamas `body > header
     { padding: 0 }` (specifikum 0,0,2 > 0,0,1), todėl spacing turi būti
     valdomas per child margin'us, kad logo / hamburger neprilimptų. */
  .header-logo { margin-left: 16px; }

  .header-nav,
  .hamburger { margin-right: 16px; }
}

/* Labai siaurame viewport'e (≤364) pavadinimo tekstas „Lietuvių gestų
   kalbos žodynas" netelpa kartu su logo + hamburger ir flex overflow
   suima dešinio krašto 16px tarpą iki ~8px. Slepiame title'ą — lieka
   tik LGKŽ logo (~80px) + 16px gap + hamburger + 16px dešinė. */
@media (width <= 364px) {
  .header-title { display: none; }
}

/* ===== components/pagination.css ===== */

/* ============================================================================
   PAGINATION (.pagination) — bendras serverio puslapiavimo komponentas.
   Naudosimas keliuose puslapiuose (Mėgstamiausi, glosų sąrašas, paieškos rezultatai).
   Server-side per URL (?puslapis=N); markup generuoja Django (Arvydas). ČIA TIK CSS.
   Markup kontraktas + visos būsenos: žr. pagination-pavyzdys.html (šaknyje).
   Tokenai — variables.css. JOKIO JS.
   ============================================================================ */

.pagination {
  display: flex;
  justify-content: center;
}

.pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs);
}

/* Bendras dydis — numeris / daugtaškis / nav. */
.pagination__link,
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--r-input);
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* Nuoroda (numeris + nav). */
.pagination__link {
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pagination__link:hover {
  background: var(--blue-light);
}

.pagination__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Dabartinis puslapis — užpildytas, neaktyvus. */
.pagination__link[aria-current="page"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  pointer-events: none;
}

/* Neaktyvus prev/next (pirmas/paskutinis puslapis) — renderinamas kaip <span>, ne <a>. */
.pagination__link.is-disabled {
  color: var(--text-muted);
  background: var(--white);
  border-color: var(--border);
  pointer-events: none;
  cursor: default;
}

/* Daugtaškis tarp atotrūkių. */
.pagination__ellipsis {
  min-width: 24px;
  color: var(--text-muted);
}

/* Prev/Next — rodyklė (+ desktop'e tekstas). */
.pagination__nav {
  gap: var(--gap-xs);
}

.pagination__nav svg {
  width: 16px;
  height: 16px;
  fill: currentcolor;
  flex-shrink: 0;
}

/* Kompaktiškas indikatorius „6 / 50" — vizualus tik mobile. Statomas iš currentPage/totalPages
   (Django): vizualus `<span aria-hidden>6 / 50</span>` + SR `<span class="visually-hidden">
   Puslapis 6 iš 50</span>`. */
.pagination__compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 40px;
  padding: 0 12px;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
}

/* Desktop: compact paslėptas KARTU su jo <li> (kad ul gap nepaliktų tuščio tarpo). */
.pagination li:has(.pagination__compact) {
  display: none;
}

/* === Mobile (≤640px): KOMPAKTIŠKAS režimas — garantuotai viena eilutė ‹ 6 / 50 › === */
@media (width <= 640px) {
  /* Slepiam numerius (.pagination__link be .pagination__nav) + daugtaškius KARTU su jų <li>
     (kad neliktų tuščių ul gap tarpų). Prev/Next (.pagination__nav) lieka. */
  .pagination li:has(.pagination__link:not(.pagination__nav)),
  .pagination li:has(.pagination__ellipsis) {
    display: none;
  }

  /* Rodom kompaktišką indikatorių. */
  .pagination li:has(.pagination__compact) {
    display: flex;
  }

  /* Prev/Next tekstą („Atgal"/„Pirmyn") paslepiam VIZUALIAI, bet paliekam SR (nav nuorodos
     prieinamas vardas) — lieka tik rodyklė. Replikuojam .visually-hidden pattern'ą (negalim
     naudoti klasės: desktop'e tekstas matomas). */
  .pagination__nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    /* stylelint-disable-next-line property-no-deprecated */
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ===== components/paieska.css ===== */

/* ============================================================================
   PAIEŠKOS REZULTATAI (paieska.html) — žodžio paieškos rezultatų puslapis.
   Statinis (Django render'ina /paieska?q=…). PASTABA (spec 3.12.5): galutinį išdėstymą klientas
   dar tikslins — struktūra/CSS gali keistis.

   PERPANAUDOTA (NE čia): .inner-page hero + .inner-page__card (baltas box) — contact.css;
   .gesture-cards grid (5/4/3/1) + .glosos-item gestų kortelė (+ .lgkp thumb) — search.css/carousel.css;
   .mg-list/.list-row + .zs-word pavyzdžiams — megstamiausi/zodziai/list-row; .video-modal + .lgkp
   full — video-modal/video-player; .visually-hidden — utilities.

   ČIA TIK: sekcijos tarpai/antraštė, „Rasta: N", tuščia būsena, .glosos-item fluid override grid'ui.
   ============================================================================ */

/* Sekcija = .inner-page__card (baltas box) su H2 viduje. Tarpas tarp dviejų sekcijų. */
.pr-section {
  margin-bottom: var(--gap-md);
}

.pr-section:last-child {
  margin-bottom: 0;
}

/* Paieškos blokas (search-card, perkeltas iš inner) — 5px tarpas iki pirmos rezultatų sekcijos.
   Scope .inner-page → TIK paieska/paieska-glosos; inner.html (mainContent, be .inner-page) nepaliestas. */
.inner-page .search-card {
  margin-bottom: 5px;
}

/* Sekcijos antraštė — titulinio .glosos-header MĖLYNAS H2 stilius, BET be <a>/strėlytės (tik tekstas).
   Titulinyje mėlyna yra ant `.glosos-header a h2`; čia H2 TIESIOGIAI turi .glosos-header klasę
   (h2.glosos-header — titulinio div.glosos-header NEPAVEIKTAS). `.glosos-header` bazė (flex,
   margin-bottom 24px) paveldima iš carousel.css. */
h2.glosos-header {
  color: var(--blue);
  font-weight: 700;
  font-size: var(--fs-section-title);
  letter-spacing: -0.019em;
}

/* Tarpas H2 → turinys. .glosos-header paveldi margin-bottom:24px iš carousel.css (titulinio
   kontekstas — po antrašte eina karuselė). .inner-page__content = flex column su gap:24px
   (var(--gap-md)); flex gap NEcollapse'ina su margin → 24+24=48px tuščio tarpo. Scoped override:
   margin-bottom:0 → tarpą valdo TIK flex gap (24px, vienodas box rhythm). Titulinio .glosos-header
   (div, ne .pr-section viduje) NEPALIESTAS. */
.pr-section .glosos-header {
  margin-bottom: 0;
}

/* Pavyzdžių sąrašas = inner .usage-examples-list (separator'iai tarp .example + tarpai + [hidden]
   override PERPANAUDOTI iš usage-examples.css), BET be inner 29px hanging-indent: paieškoje nėra
   numeruotų reikšmių, su kuriomis lygiuotis — turinį pozicionuoja .inner-page__content (kaip H2/glosa). */
.pr-pvz .usage-examples-list {
  padding: 0;
}

/* Paryškintas RASTAS ŽODIS (paieškos terminas) pavyzdžio tekste. <mark> default geltonas fonas →
   OVERRIDE į projekto paletę (--blue-light fonas + --blue BOLD tekstas; bold + spalva, NE TIK spalva
   — WCAG: spalva ne vienintelis skirtumas). Subtilus pill. Stilius .pr-highlight (mock + Django klasė)
   IR bet kuriam <mark> .example-text'e (jei Django pažymėtų bare <mark> — vis tiek ne geltona). */
.pr-highlight,
.pr-pvz .example-text mark {
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 700;
  padding: 0 2px;
  border-radius: 3px;
}

/* Transkripcijos NUORODOS highlight (rastas terminas — pvz. „NAMAS"). Perpanaudoja .pr-highlight
   (bg --blue-light + padding + radius pritaikomi, nes .example-transcription a jų nenustato), BET
   .example-transcription a (gesture-header.css, 0,1,1) turi font-weight:600 → bold (700) reikalauja
   didesnio specifiškumo (0,2,1, čia). color/underline NEliečiam → nuoroda lieka savo mėlyna (#264289)
   + underline, klikinama. Django: rastas transkripcijos žodis gauna class="pr-highlight". */
.example-transcription a.pr-highlight,
.example-transcription span.pr-highlight {
  font-weight: 700;
}

/* HERO be box (.inner-page__hero--bare) — paieska/paieska-glosos: vizualus hero box (H1 + „Rasta: N"
   badge) PAŠALINTAS (klientas). Liko TIK breadcrumb (desktop) + .visually-hidden H1 (SR/SEO/struktūra).
   Badge'o hero-scoped override (.inner-page__hero-box .zs-tag--mean) buvo ČIA — pašalintas kaip negyvas.
   ≤1024 breadcrumb paslėptas (breadcrumb.css) → juosta lieka tuščia: sutraukiam iki 0 (be 4px baltos
   border linijos ir tarpo), kad neliktų pakibusio artefakto. H1 .visually-hidden (position:absolute)
   lieka prieinamas SR — juosta NE display:none. Desktop juosta nekeičiama (slim breadcrumb bar). */
@media (width <= 1024px) {
  .inner-page__hero--bare {
    margin-bottom: 0;
    border-bottom: 0;
  }

  .inner-page__hero--bare .inner-page__hero-inner {
    padding-block: 0;
  }
}

/* Paieška VISADA išskleista (paieska/paieska-glosos): collapsed būsena + „Išskleisti/Suskleisti" toggle
   PAŠALINTI; .search-card--static rodo .expanded-content nuolat. Override search-toggle.css animacijos:
   max-height:none (NE 1400px cap — kad aukštas turinys mobile nebūtų apkarpytas), opacity/transform/
   transition reset; overflow:visible (autocomplete dropdown + fokuso outline'ams). Specifiškumas
   .search-card.search-card--static (0,2,0) > .search-card (0,1,0). */
.search-card.search-card--static {
  overflow: visible;
}

.search-card--static .expanded-content {
  max-height: none;
  opacity: 1;
  overflow: visible;
  transform: none;
  transition: none;
}

/* Tuščios sekcijos būsena (Gestai 0 / Vartojimo pavyzdžiai 0) — žydras centruotas boxas su prasmingu
   tekstu. Bendra ABIEM sekcijoms ir VISIEMS puslapiams (paieska/nieko_nerasta/paieska-glosos —
   render'inama per paieska.js .pr-empty). Tekstas — paieska.js (textContent, XSS-safe). Kontrastas:
   var(--blue) #264B87 ant var(--blue-light) #E3E9F2 ≈ 7:1 (≥ WCAG AA 4.5:1). */
.pr-empty {
  margin: 0;
  padding: 32px 24px;
  background: var(--blue-light);
  border-radius: var(--r-card);
  font-family: Outfit, sans-serif;
  font-size: 20px;
  text-align: center;
  color: var(--blue);
}

/* === Gestų kortelė grid'e. .glosos-item perpanaudota iš titulinio karuselės, BET ten ji FIKSUOTO
   320px pločio (horizontaliam scroll'ui). Čia — .gesture-cards grid (1fr celės) → fluid (užpildo
   celę). .glosos-img-placeholder taip pat fiksuoto 320px → tampa fluid (edge-to-edge per esamus
   -12px bleed margin'us). Karuselės kontekstas (.glosos-card/.carousel-track) NELIEČIAMAS. === */

/* ABI sekcijos (gestai + pavyzdžiai) — turinys per VISĄ card plotį, kaip titulinio .glosos-card:
   kortelės/sąrašas/H2 prasideda nuo card content-left (card kairė + 24px padding ≈ 53 @1440), be 70ch
   siaurinimo/centravimo, be tuščios kairės erdvės. max-width:none → .inner-page__content užpildo card
   vidų (≈53→1373); margin-inline:auto tampa 0. Abi sekcijos vienodo pločio IR vienodai pozicionuotos
   (kairė + dešinė sutampa). Hero H1/„Rasta:N" badge — atskiri (hero full-bleed), NEPALIESTI.
   .pr-section = abu sekcijų <section> (pr-gestai + pr-pvz). */
.pr-section .inner-page__content {
  max-width: none;
}

/* Rezultatų gestų grid — LANKSTUS (1fr stulpeliai, NE fiksuotas 320px): užpildo VISĄ plotį be tuščios
   dešinės kiekviename breakpoint'e. Desktop 4 → tablet (≤1024) 3 → mobile (≤640) 2 → labai siaura (≤360) 1.
   Kortelės plotis kinta (1fr); video .glosos-img-placeholder lieka calc(100% + 24px) + aspect-ratio
   (1.20/Figma) → aukštis seka plotį, video neiškraipomas (object-fit:cover). minmax(0,1fr) neleidžia
   stulpeliui išsipūsti dėl turinio (lūpų combo placeholder ir pan.). Gap paveldimas iš .gesture-cards
   bazės (search.css: 16px, ≤900px 12px). Scope .pr-gestai → titulinio karuselė ir gesto formos
   .gesture-cards NEPALIESTI. */
.pr-gestai .gesture-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (width <= 1024px) {
  .pr-gestai .gesture-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (width <= 640px) {
  .pr-gestai .gesture-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 360px) {
  .pr-gestai .gesture-cards { grid-template-columns: 1fr; }
}

.pr-gestai .glosos-item {
  width: auto;
}

/* Paslėptos (>10) kortelės — .glosos-item turi display:flex (carousel.css), tad [hidden] reikia
   eksplicitiškai (kaip inner .usage-examples-list .example[hidden]). „Rodyti daugiau" (paieska.js)
   nuima hidden → kortelė vėl rodoma. */
.pr-gestai .glosos-item[hidden] {
  display: none;
}

.pr-gestai .glosos-img-placeholder {
  width: calc(100% + 24px);
}

/* Reikšmės tekstas po video = .glosos-item-body (PERPANAUDOTA iš titulinio glosų kortelės —
   carousel.css; JOKIOS atskiros paieškos klasės). VIENODAS vizualas/truncation kaip titulinyje:
   Outfit 16px, #555, .collapsed → line-clamp-4 + fade mask. SEMANTIKA skiriasi: titulinyje body =
   vartojimo PAVYZDYS, paieškoje = REIKŠMĖ (kurioje rastas ieškotas žodis). Kortelė = visa titulinio
   .glosos-item (head/thumb/body), tik be carousel slide ARIA (čia grid) ir fluid plotis (.pr-gestai
   width:auto). Body stiliaus paieska.css NEdubliuoja — viskas iš carousel.css. */

/* ===== components/period-picker.css ===== */

.period-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  color: var(--text-dark);
}

.period-picker select {
  -webkit-appearance: none;
  appearance: none;

  /* Figma: 89x29, padding 4px 8px, border 1px solid #264B87, radius 6px */
  display: flex;
  width: 89px;
  height: 29px;
  padding: 4px 28px 4px 8px; /* right padding reserves room for the 20px arrow */
  box-sizing: border-box;
  border: 1px solid var(--blue);
  border-radius: var(--r-input);
  background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M15 8.33338L10 13.3334L5 8.33338L6.16667 7.16671L10 11L13.8333 7.16671L15 8.33338Z' fill='%23264B87'/></svg>") no-repeat right 4px center;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
}
.period-picker select:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; }

/* Mobile: stack label above select to free horizontal room and prevent the
   native dropdown from being pushed past the card's right edge. */
@media (width <= 640px) {
  .period-picker {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ===== components/plastakos-forma-modal.css ===== */

/* PLAŠTAKOS FORMA — wizard modal'as
   Naudoja egzistuojančius .modal-overlay, .modal, .modal-hdr, .modal-close,
   .modal-search, .modal-ftr, .btn-cancel, .btn-confirm, .modal-grid,
   .grid-item, .grid-thumb, .grid-thumb-label, .grid-check, .grid-label
   stilius — pridedam tik wizard-specifinius elementus su .pfm- prefiks'u. */

/* Header'is su back mygtuku + title — perdengiam egzistuojantį .modal-hdr layout'ą */
.pfm-hdr-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.pfm-back {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--blue);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.pfm-back.visible { display: inline-flex; }

.pfm-back:hover {
  background: var(--blue-light);
  border-color: var(--blue);
}

.pfm-back:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Step'ų konteineriai */
.pfm-step {
  display: none;
  flex-direction: column;
  gap: 24px;
}

/* Aktyvus step užima visą likusią vietą tarp header'io ir footer'io —
   IR pats yra scroll container'iu. Step 1 turinys (kinta + 2 choice cards)
   gali būti aukštesnis nei viewport, tad scrolli'na čia. Step 2 turi vidinį
   .modal-grid.pfm-grid scroll'ą — outer .pfm-step scroll nesisuktinasi, nes
   .modal-grid.pfm-grid (flex:1) užpildo visą step plotą. */
.pfm-step.visible {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* „Forma kinta" checkbox eilutė */
.pfm-kinta-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 19px;
  background: var(--blue-light);
  border: 1px solid #C8D4E8;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background .15s, border-color .15s;
}

.pfm-kinta-row:hover { background: #D8E2F0; }

.pfm-kinta-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.pfm-kinta-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background .15s, border-color .15s;
  margin-top: 1px;
}

.pfm-kinta-row.checked .pfm-kinta-checkbox {
  background: var(--blue);
  border-color: var(--blue);
}

.pfm-kinta-row.checked .pfm-kinta-checkbox::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translate(1px, -1px);
}

.pfm-kinta-text {
  flex: 1;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dark);
}

.pfm-kinta-text strong {
  font-family: Raleway, sans-serif;
  font-weight: 700;
}

.pfm-kinta-hint {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: #5A6B85;
  margin-top: 4px;
  line-height: 1.4;
}

/* Pasirinkimo kortelės — 1 stulpelis (tik pradžia) arba 2 (pradžia + pabaiga) */
.pfm-choice-grid {
  display: grid;
  gap: 19px;
  grid-template-columns: 1fr;
}

.pfm-choice-grid.cols-2 { grid-template-columns: 1fr 1fr; }

.pfm-choice-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
  position: relative;
}

@media (hover: hover) {
  .pfm-choice-card:hover {
    border-color: var(--blue);
    background: #FAFBFD;
    box-shadow: 0 4px 12px rgb(38 75 135 / 8%);
  }
}

.pfm-choice-card.has-selection {
  border-color: var(--blue);
  background: var(--blue-light);
}

@media (hover: hover) {
  .pfm-choice-card.has-selection:hover { background: #D8E2F0; }
}

.pfm-choice-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.pfm-choice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.pfm-choice-title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark);
}

.pfm-choice-card.has-selection .pfm-choice-title { color: var(--blue); }

.pfm-choice-status {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: var(--text-ph);
  font-style: italic;
}

.pfm-choice-card.has-selection .pfm-choice-status {
  color: var(--blue);
  font-style: normal;
  font-weight: 500;
}

.pfm-choice-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--white);
  border-radius: 8px;
  min-height: 120px;

  /* flex: 1 leidžia preview užpildyti likusią kortelės aukštį, kad abi
     kortelės būtų vienodo aukščio per grid align-items: stretch
     (Pradžia su 90px thumb'u = Pabaiga su dashed placeholder'iu). */
  flex: 1;
  font-family: Outfit, sans-serif;
  font-size: 13px;
  color: var(--text-ph);
}

.pfm-choice-card:not(.has-selection) .pfm-choice-preview {
  border: 2px dashed var(--border);
  background: transparent;
  justify-content: center;
  font-style: italic;
  transition: border-color .15s, color .15s;
}

@media (hover: hover) {
  .pfm-choice-card:not(.has-selection):hover .pfm-choice-preview {
    border-color: var(--blue);
    color: var(--blue);
  }
}

.pfm-preview-thumb {
  width: 90px;
  height: 90px;
  background: #F5F5F7;
  border-radius: var(--r-input);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.pfm-preview-thumb:not(:has(.pfm-preview-thumb-img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 6px,
    rgb(38 75 135 / 8%) 6px,
    rgb(38 75 135 / 8%) 7px
  );
}

/* Paveikslėlis užpildo pfm-preview-thumb plotą */
.pfm-preview-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.pfm-preview-thumb-label {
  position: relative;
  z-index: 1;
  font-family: Outfit, sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #8A8A96;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pfm-preview-info {
  flex: 1;
  min-width: 0;
}

.pfm-preview-label {
  font-family: Raleway, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  font-style: normal;
}

.pfm-preview-clear {
  background: transparent;
  border: none;
  color: var(--blue);
  font-family: Outfit, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
}

.pfm-preview-clear:hover { color: var(--blue-btn-hover); }

.pfm-preview-clear:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Step 2 grid'ui — perdengiam .modal-grid kad būtų 5 stulpeliai
   (egzistuojantis .modal-grid yra flex column kategorijoms; čia
   reikia plokščio 5-col grid).
   flex/min-height/overflow paveldima iš .modal-grid bazės — niekada
   nenaudoti max-height nes konfliktuotų su flex:1 sizing'u.
   padding-top 4px — leidžia .grid-item:hover translateY(-2px) lift'ui
   nekirpti viršutinės eilės item'ų (parent overflow:auto kerpa be šito). */
.modal-grid.pfm-grid {
  display: grid;
  grid-template-columns: repeat(5, 128px);
  gap: 20px 16px;
  padding-top: 4px;
}

/* Footer status — tekstinė santrauka. Naudojam egzist. .modal-count
   stilių per dvigubą klasę. */
.pfm-status {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: #555;
  flex: 1;
  min-width: 0;
}

/* RESPONSIVE */
@media (width <= 900px) {
  .pfm-choice-grid,
  .pfm-choice-grid.cols-2 { grid-template-columns: 1fr; }

  .modal-grid.pfm-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
}

/* ===== components/rankos-modal.css ===== */

/* RANKOS — 3 nepriklausomi pasirinkimo laukai (Kiek rankų, Simetrija,
   Judesio tipas). Anksčiau buvo 3-lygių kaskada — nuo 2026-05-25 perdarymo
   visi laukai matomi vienu metu ir pildomi nepriklausomai.
   Naudoja egzistuojančius .modal-overlay, .modal, .modal-hdr, .modal-close,
   .modal-ftr, .btn-cancel, .btn-confirm stilius. */

/* Sekcija — visi 3 laukai vienoje kolonoje. */
.ra-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Grupės antraštė virš radio mygtukų rinkinio */
.ra-group-label {
  font-family: Outfit, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* Radio mygtukų eilė — wrap'ina ant siaurų ekranų */
.ra-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Radio mygtukas — pilkas border'is + balta. Active = mėlyna */
.ra-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: Raleway, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  flex: 1 1 auto;
  min-width: 130px;
  text-align: left;
}

@media (hover: hover) {
  .ra-radio:hover {
    border-color: var(--blue);
    background: #FAFBFD;
  }
}

.ra-radio.active {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}

.ra-radio:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Radio „dot" — apvalus žiedas */
.ra-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s;
}

.ra-radio.active .ra-radio-dot {
  border-color: var(--blue);
}

.ra-radio.active .ra-radio-dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--blue);
}

/* Disabled subgrupė (nepasiekiamas pagal aukštesnio lygio pasirinkimą) —
   vizualiai išblukinta, klikams nepasiekiama (native button[disabled] taip
   pat blokuoja klik'us ir tab fokusą; pointer-events: none uždengia ir
   antraštę). */
.ra-field--disabled {
  opacity: 0.35;
  pointer-events: none;
}

.ra-radio:disabled {
  cursor: not-allowed;
}

/* Simetrija/Judesio tipas — PP/PFM step 2 .grid-item / .grid-thumb pattern'as
   .modal-group-items konteineryje. 128px kolonų plotis IDENTIŠKAS PP step 2
   default'iniam .modal-group-items (žr. modal.css 110 eilutę), gap'as
   20px 16px sutampa pilnai. justify-content: center centruoja porą sekcijos
   viduryje (vietoj numatytojo start, kuris stumtų į kairę). */
.ra-section .modal-group-items {
  grid-template-columns: repeat(2, 128px);
  gap: 20px 16px;
  justify-content: center;
}

/* Footer status — Outfit, kaip kituose modal'uose */
.ra-status {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: #555;
  flex: 1;
  min-width: 0;
}

/* RESPONSIVE */
@media (width <= 640px) {
  .ra-options { flex-direction: column; }
  .ra-radio { min-width: 0; }
}

/* ===== components/search-toggle.css ===== */

/* SEARCH TOGGLE — collapsible search card su animacija.
   Card pradžioje rodo collapsed-content; paspaudus „Išskleisti paiešką" link'ą
   virš kortelės, animuotai atskleidžia expanded-content (pilna search-row +
   gesture-section).

   Pasikartojantys layout/stilizavimo dalykai (.search-row, .search-block,
   .input-field, .btn-search, .search-panel, .gesture-* ir t.t.) gyvena
   search.css. Šis failas — tik card animacija + toggle link'as. */

/* Card */
.search-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  overflow: hidden;
  transition: padding 0.45s ease, max-height 0.45s ease;
}

.search-card.is-open {
  overflow: visible;
  position: relative;
  z-index: 20;
  transition: padding 0.7s ease, max-height 0.7s ease;
}

/* Autocomplete sąrašas išlenda žemiau kortelės — overflow:hidden kirptų dropdown'ą,
   o sekantis .breadcrumb/.main-card pieštų viršuje. z-index iškelia kortelę. */
.search-card:has(.ac-list.open),
.search-card:has(.combo-list.open) {
  overflow: visible;
  position: relative;
  z-index: 20;
}

/* Collapsed content — animuojamas per max-height + opacity (ne display) */
.collapsed-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 200px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height 0.45s ease,
    opacity 0.25s ease;
}

.search-card.is-open .collapsed-content {
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.7s ease,
    opacity 0.2s ease;
}

/* Bazinė collapsed row — veikia ir desktop, ir mobile (visada vienoje eilutėje) */
.collapsed-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.collapsed-row .ac-wrap,
.collapsed-row .input-field {
  flex: 1;
  min-width: 0; /* leidžia inputui shrinkint'is mažuose ekranuose */
}

.collapsed-content:has(.ac-list.open) {
  overflow: visible;
  max-height: none;
}

.search-card.is-open .collapsed-content {
  overflow: hidden;
  max-height: 0;
}

/* Expanded content — startuoja paslėpta, atsiveria slinkdamas iš viršaus */
.expanded-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition:
    max-height 0.45s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.search-card.is-open .expanded-content {
  max-height: none;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
  transition:
    max-height 0.7s ease,
    opacity 0.5s ease 0.2s,
    transform 0.5s ease 0.2s;
}

/* Toggle link — pakeitė mygtuką, dabar yra virš .search-card */
.toggle-link-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  padding: 0 8px;
}

.toggle-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 4px;
  color: var(--blue);
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.toggle-link:hover { opacity: 0.75; }

.toggle-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.toggle-link-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.toggle-link[aria-expanded="true"] .toggle-link-chevron {
  transform: rotate(180deg);
}

@media (width <= 640px) {
  .search-card { padding: 16px; }

  /* Collapsed mobile: viskas vienoje eilutėje (max-height lieka 200px) */
  .collapsed-content { max-height: 200px; }

  /* Mobile: „Ieškoti" be ikonos, tik tekstas — kad sutilptų į vieną eilutę */
  .collapsed-row .btn-search svg { display: none; }
  .collapsed-row .btn-search { padding: 0 14px; }

  .toggle-link-row { padding: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toggle-link,
  .toggle-link-chevron,
  .search-card,
  .collapsed-content,
  .expanded-content {
    transition: none !important;
  }
}

/* ===== components/search.css ===== */

/* SEARCH ROW */
.search-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.search-block { display: flex; flex-direction: column; gap: 16px; }

.search-block h2 {
  font-weight: 700;
  font-size: var(--fs-card-title); line-height: 1.5; letter-spacing: -0.019em; color: var(--text-dark);
}

.search-panel {
  background: var(--blue-light); border-radius: var(--r-panel);
  padding: 32px 24px; display: flex; flex-direction: column; gap: 16px;
}

/* AUTOCOMPLETE */
.ac-wrap { position: relative; width: 100%; }

.input-field {
  display: flex; align-items: center;
  background: var(--white);
  border: 1px solid var(--border-input);
  border-radius: var(--r-input);
  padding: 12px 10px; gap: 8px; width: 100%;
}

.input-field input {
  flex: 1; border: none; outline: none;
  font-family: Outfit, sans-serif; font-weight: 400;
  font-size: 16px; line-height: 20px; color: var(--text-dark);
  background: transparent; width: 100%;
}
.input-field input::placeholder { color: var(--text-ph); }

/* Exclusive lock: vienu metu tik 1 iš 3 autocomplete laukų aktyvus.
   Kai kiti 2 disabled — opacity, pilkesnis fonas, pointer-events none. */
.input-field:has(input:disabled) {
  opacity: 0.5;
  pointer-events: none;
  background: #F5F5F7;
}

/* Kai bent vienas iš 3 autocomplete laukų aktyvus — visos 5 gesture kortelės
   disabled. SVARBU: klaustuko mygtukas (.gc-info-btn) lieka aktyvus VISADA,
   todėl opacity NE ant kortelės, o tik ant .btn-add ir combo-wrap'o. */
.gesture-card.is-disabled .btn-add-row,
.gesture-card.is-disabled .btn-add,
.gesture-card.is-disabled .combo-wrap {
  opacity: 0.5;
  pointer-events: none;
}

.gesture-card.is-disabled .combo-input {
  background: #F5F5F7;
}

.ac-list {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid #ccc;
  border-radius: var(--r-input);
  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
  z-index: 200; overflow: hidden;
  max-height: 210px; overflow-y: auto;
}
.ac-list.open { display: block; }

.ac-empty {
  padding: 10px 14px;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  color: var(--text-ph);
  font-style: italic;
  cursor: default;
}

.ac-item {
  padding: 10px 14px;
  font-family: Outfit, sans-serif; font-size: 15px;
  color: var(--text-dark); cursor: pointer;
  transition: background .1s;
}
.ac-item:hover, .ac-item.active { background: var(--blue-light); }
.ac-item mark { background: none; color: var(--blue); font-weight: 700; }

/* Šaltinio bold/italic „Ieškoti žodžio" pasiūlymams (autocomplete.js prideda klasę pagal source;
   tas pats principas kaip zodziai.html: reikšmė → bold, sakinys → italic). KEIČIA TIK
   font-weight / font-style — spalva, dydis, šriftas, padding, aukštis lieka iš .ac-item. */
.ac-item--meaning { font-weight: bold; }
.ac-item--example { font-style: italic; }

/* Glosų autocomplete: pagrindinis gestas → bold, variantas → italic. */
.ac-item.glosa-main { font-weight: 700; font-style: normal; }
.ac-item.glosa-variant { font-weight: 400; font-style: italic; }

.search-actions {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}

/* GESTURE SECTION */
.gesture-section { display: flex; flex-direction: column; gap: 16px; }

.gesture-section h2 {
  font-weight: 700;
  font-size: var(--fs-card-title); line-height: 1.5; letter-spacing: -0.019em; color: var(--text-dark);
}

.gesture-panel {
  background: var(--blue-light); border-radius: var(--r-panel);
  padding: 32px 24px; display: flex; flex-direction: column; gap: 16px;
}

/* Gesture cards grid — eksplicitūs breakpoint'ai (vietoj auto-fit minmax):
   ≥1330px → 5 stulpeliai (visos 5 kortelės vienoje eilėje);
   1095-1329px → 4 stulpeliai (5-oji kortelė pereina į antrą eilę);
   <1095px → 3 stulpeliai (4-oji ir 5-oji kortelės antroje eilėje);
   ≤640px → 1 stulpelis (žr. mobile breakpoint žemiau).
   minmax(0, 1fr) — užtikrina, kad stulpeliai pasiskirsto VIENODAI net jei
   kortelės turinys (pvz., Lūpų judesys combobox placeholder) turi didesnį
   intrinsic min-width nei 1fr (be šito col su platesniu turiniu išauga). */
.gesture-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

@media (width <= 1329px) {
  .gesture-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (width <= 1094px) {
  .gesture-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Žemiau 810px viewport'o — gestų formos kortelės stack'inasi į vieną
   stulpelį (visos 5 viena po kita), kad „Lūpų judesys" combobox + visi
   kortelių parametrai turėtų pakankamai pločio be horizontalaus glaudimo.
   Lieka iki ≤640 mobile breakpoint'o, kur 1 stulpelis jau galiojo. */
@media (width <= 810px) {
  .gesture-cards { grid-template-columns: 1fr; }
}

.gesture-card {
  background: var(--white); border-radius: var(--r-input);
  padding: 16px 10px;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .2s;
}
.gesture-card:hover { box-shadow: 0 2px 12px rgb(38 75 135 / 12%); }
.gc-header { display: flex; align-items: center; gap: 8px; }

.gc-icon {
  width: 38px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}

.gc-label {
  font-weight: 700;
  font-size: 14px; color: #262626; line-height: 1.5;
}
.gesture-footer { display: flex; justify-content: flex-end; gap: 12px; }

/* Responsive */
@media (width <= 900px) {
  .search-row { grid-template-columns: 1fr; gap: 20px; }
  .gesture-cards { gap: 12px; }
}

@media (width <= 640px) {
  .search-panel, .gesture-panel { padding: 20px 16px; }
  .gesture-cards { grid-template-columns: 1fr; }
}

/* ===== components/selected-params.css ===== */

/* SELECTED PARAMS — vizualinis pasirinktų parametrų blokas gestų kortelėje.
   Naudojamas „Plaštakos forma", „Plaštakos padėtis", „Rankos", „Vieta" kortelėms.

   Grupė ([box su antrašte] + [thumb 70×70 IŠORĖJE box'o]) yra vertikalus
   flex-column. Layout variantai išorinį wrapper'į keičia:
   - Default (.gc-selected-params) — flex column; Vieta (1 grupė) ir Rankos.
   - .gc-selected-params--grid — 2 stulpeliai (PP: Pirštai|Delnas; PFM be kinta).
   - .gc-selected-params--grid-arrow — 3 stulpeliai su horizontalia rodykle
     (PFM su kinta: Pradžia → Pabaiga).

   Rankos modal'as toliau naudoja tekstinį .gc-selected-row variantą
   box'o viduje (be .gc-selected-group, be thumb).

   Žinomos duplikacijos — sinchronizuoti keičiant: main.css ir
   lgk-zodynas_12.html inline stiliai (žr. CLAUDE.md). */

.gc-selected-params {
  width: 100%;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* Užima visą likusią gesture-card vertikalią vietą (visos 5 kortelės
     eilėje stretch'inasi vienodu aukščiu per .gesture-cards grid). */
  flex: 1;
  min-height: 0;
}

/* 2-col grid — grupės šalia viena kitos. Tuščia ląstelė lieka „skylė". */
.gc-selected-params--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}

/* 2-col grid (1fr 1fr) — IDENTIŠKAS .gc-selected-params--grid (PP), kad
   Pradžia/Pabaiga box'ai sutaptų pločiu ir tarpu su Pirštai/Delnas.
   Rodyklė padėta absoliučiai (position: absolute) — todėl ji NEdalyvauja
   grid sizing'e ir nepralaužia 1fr 1fr proporcijų. */
.gc-selected-params--grid-arrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 84px;
  gap: 6px 8px;
  align-items: start;
  position: relative;
}

.gc-selected-params--grid-arrow > .gc-selected-group {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
}

/* FIKSUOTOS POZICIJOS — DOM eilėje pirmas vaikas visada eina į col 1,
   antras (--grid) arba trečias (--grid-arrow) į col 2. Be šito grid
   auto-placement išvalymo (× ant Pradžios) atveju įdėtų Pabaigos
   .gc-selected-group į col 1 (nes jis turi explicit grid-row, o tuščia
   placeholder div'a — neturi). nth-child(2) tarp --grid-arrow yra arrow,
   bet jis position: absolute — todėl jo grid-column irrelevant. */
.gc-selected-params--grid > *:nth-child(1),
.gc-selected-params--grid-arrow > *:nth-child(1) {
  grid-column: 1;
}

.gc-selected-params--grid > *:nth-child(2),
.gc-selected-params--grid-arrow > *:nth-child(3) {
  grid-column: 2;
}

.gc-selected-params--grid-arrow > .gc-selected-group > .gc-selected-thumb {
  justify-self: center;
}

/* Rodyklė — absoliučiai pozicionuota tarpe tarp dviejų thumb'ų.
   left: 50% + translateX(-50%) horizontaliai centruoja viduryje gap'o.
   bottom: 42px + translateY(50%) — arrow centras prilygsta thumb centrui
   (42px = pusė thumb aukščio; thumb sėdi pačioje konteinerio apačioje). */
.gc-selected-params--grid-arrow > .gc-selected-arrow {
  position: absolute;
  left: 50%;
  bottom: 42px;
  transform: translate(-50%, 50%);
}

/* Grupė = [box + thumb] vertikaliai. Naudojama PFM/PP/Vieta — thumb
   horizontaliai centruotas po (full-width) box'u ant baltos kortelės fono. */
.gc-selected-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Vienas box'as = pasirinkimo antraštės blokas (be thumb viduje).
   position: relative — leidžia absoliučiai pozicionuoti .gc-selected-clear
   viršutiniame dešiniame kampe.
   padding 7/10/5 — asimetriškas, kompensuoja Raleway font'o descender
   erdvės asimetriją title'uose be descender'ių (Pradžia, Pirštai ir t.t.).
   Be šios kompensacijos title atrodo ~1px aukščiau optinio centro. */
.gc-selected-box {
  position: relative;
  background: var(--blue-light);
  border-radius: 8px;
  padding: 7px 10px 5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}

/* Išvalymo mygtukas su remove.png ikona — į box'o vidų, vertikaliai
   centruotas dešinėje pusėje (top: 50% + translateY(-50%)). 25px apvalus,
   balta su mėlynu border'iu. Vidinis <img> užpildo turinio plotą.
   Click handler'is JS pusėje išvalo atitinkamą pasirinkimą (PFM start/end,
   PP fingers/palm, Vieta, Rankos all). */
.gc-selected-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition: background-color .15s;
}

.gc-selected-clear img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (hover: hover) {
  .gc-selected-clear:hover { background: var(--blue-light); }
}

.gc-selected-clear:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Rankos kortelė — single-box layout (be .gc-selected-group), box turi
   stretch'intis iki kortelės apačios. */
.gc-selected-params:not(:has(.gc-selected-group)) .gc-selected-box {
  flex: 1;
}

.gc-selected-box-title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.4;
  text-align: left;
}

/* Tekstinė eilutė box'o viduje (Rankos modal'as).
   <strong> — antraštė Raleway 700; po jos — Outfit 400 reikšmė. */
.gc-selected-row {
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.4;
}

.gc-selected-row strong {
  font-family: Raleway, sans-serif;
  font-weight: 700;
}

/* Legacy .gc-selected-item — nebenaudoja PFM/PP/Vieta (thumb dabar sėdi
   tiesiogiai .gc-selected-group viduje). Stilius paliktas atsarginiam
   naudojimui (kad esamas HTML, jei kur liko, vis dar elgtųsi padoriai). */
.gc-selected-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.gc-selected-thumb {
  width: 84px;
  height: 84px;
  background: #F5F5F7;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Paveikslėlis užpildo visą thumb dėžutę. */
.gc-selected-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  z-index: 1;
}

/* Placeholder pattern (slepiam, kai yra paveikslėlis) */
.gc-selected-thumb:not(:has(.gc-selected-thumb-img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 5px,
    rgb(38 75 135 / 8%) 5px,
    rgb(38 75 135 / 8%) 6px
  );
}

.gc-selected-label {
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* btn-add + × clear button — flex eilutėje su 8px gap. .btn-add užima
   visą likusią vietą, × yra fixed 32×32. */
.btn-add-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.btn-add-row .btn-add {
  flex: 1;
  width: auto; /* override .btn-add { width: 100% } iš buttons.css */
}

.gc-clear-btn {
  /* Aukštis paveldimas iš .btn-add-row stretch — kad sutaptų su .btn-add,
     kurio aukštis priklauso nuo padding 7px 10px + line-height 150% (~37px).
     Plotis fiksuotas 32px (kvadratinis vizualus boxas). */
  width: 36px;
  height: auto;
  align-self: stretch;
  flex-shrink: 0;
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  border-radius: var(--r-input);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;

  /* padding-bottom 2px — optinis × simbolio centravimas (× glyph turi
     vidinį baseline offset'ą, todėl be šito nukrenta ~1px žemyn). */
  padding: 0 0 2px;
  transition: background .15s;
}

@media (hover: hover) {
  .gc-clear-btn:hover { background: var(--blue-light); }
}

.gc-clear-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Rodyklė tarp dviejų [box+thumb] grupių (PFM su kinta) — horizontali (→),
   nupiešta SVG natūralia kryptimi (be CSS rotacijos). */
.gc-selected-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  line-height: 1;
  flex-shrink: 0;
  align-self: center;
}

.gc-selected-arrow svg {
  display: block;
}

/* Mobile: sutrauktas grid gap + box padding (horizontalus layout liekas). */
@media (width <= 640px) {
  .gc-selected-params--grid,
  .gc-selected-params--grid-arrow {
    gap: 4px;
  }

  .gc-selected-group {
    gap: 4px;
  }

  .gc-selected-box {
    padding: 6px 10px;
  }
}

/* ===== components/tabs.css ===== */

/* TABS — inner.html papildomos informacijos tab'ai (Pastabos / Sinonimai /
   Homonimai / Antonimai). Pagal Figma node 1309:625.

   WAI-ARIA pattern: tablist / tab / tabpanel. JS — js/tabs.js.

   Separator linija: 1px var(--border) horizontaliai (per visą tabs container'į
   po padding'o), plius aktyvaus tab'o 4px storis mėlynas indikatorius (per
   pseudo-element ::after). Šis sprendimas priimtas, nes Figma `Group632723`
   SVG (h-4 w-1270) tiesiogiai inspect'inti negalima — pseudo-element pattern'as
   yra standartinis underline tabs UI. */

.tabs {
  background: #EDF2F9;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--gap-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.tabs-list {
  display: flex;
  gap: 82px;
  padding: 0 var(--gap-md);
  flex-wrap: wrap;
  position: relative;
}

/* Vienas tab'as — flex row su ikona + tekstu. `position: relative` reikalingas
   active indikatoriaus pseudo-element'ui (::after). */
.tab {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.456px;
  color: var(--text-dark);
  height: 28px;
  position: relative;
}

.tab--active,
.tab[aria-selected="true"] {
  color: var(--blue);
}

/* Aktyvaus tab'o 4px storio mėlynas indikatorius — sėdi po tab'o tekstu,
   sutampa su separator'iaus pozicija. Bottom: -calc(--gap-md + 4px) =
   -(24 + 4) = -28px, kad nuo .tab.bottom nukristų pro .tabs gap (24px) ir
   uždengtų separator'iaus liniją. */
.tab[aria-selected="true"]::after,
.tab--active::after {
  content: '';
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--blue);
}

.tab-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentcolor;
}

/* SVG path inherit'ina currentcolor — kad spalva atitiktų tab text color
   (juodas neaktyviems, mėlynas aktyviam). */
.tab-icon path {
  fill: currentcolor;
}

.tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Separator — 1px var(--separator-color) per visą tab container'io plotį po
   var(--gap-md) horizontalaus padding'o (sutampa su .meaning ir .usage-examples). */
.tabs-separator {
  margin: 0 var(--gap-md);
  height: 1px;
  border: 0;
  background: var(--separator-color);
}

.tab-panel {
  /* padding-left = gap-md + 29px hanging-indent kompensacija — pastabų turinys
     vertikaliai sulygiuojamas su reikšmių .example-text (tas įtrauktas 29px dėl
     numeruotos antraštės hanging indent: .examples { padding-left: 29 }). */
  padding: 0 var(--gap-md) 0 calc(var(--gap-md) + 29px);
}

.tab-panel[hidden] {
  display: none;
}

/* Tab panel slide-in — kai panelis parodomas (hidden nuimamas perjungus tab'ą), turinys
   įslysta iš apačios + ryškėja. display:none→block neleidžia transition → @keyframes
   animation (paleidžiama kas kartą, kai panelis tampa matomas; įsk. pradinį numatytąjį
   panelį užkrovus). Scope .tabs .tab-panel — neliečia kitų. prefers-reduced-motion →
   be animacijos (turinys pasirodo iškart, be judesio). */
@media (prefers-reduced-motion: no-preference) {
  .tabs .tab-panel:not([hidden]) {
    animation: tabPanelSlideIn 0.22s ease-out;
  }
}

@keyframes tabPanelSlideIn {
  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }
}

/* Tab'ų panel turinys perpanaudoja .example-text ir .example-transcription
   klases iš gesture-header.css (DRY §24) — typography sutampa su reikšmių
   sekcijos analogais (desktop 24/20, mobile 16). */

/* TABLET + MOBILE (≤1024) — tab'ai horizontaliai scroll'inami (vietoj wrap),
   kad nesisivaržytų į kelias eilutes. Šis pattern'as taikomas tablet'ui ir
   mobile'iui, nes ant abu viewport'ų visi 4 tab'ai gali netilpti vienoje
   eilutėje. */
@media (width <= 1024px) {
  .tabs-list {
    flex-wrap: nowrap;
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs-list::-webkit-scrollbar { display: none; }

  .tab { flex-shrink: 0; }
}

/* TABLET (641-1024) — kompresijos pattern'as: gap ir padding mažėja. */
@media (641px <= width <= 1024px) {
  .tabs-list {
    gap: var(--gap-md);
    padding: 0 var(--gap-md);
  }

  .tabs-separator {
    margin: 0 var(--gap-md);
  }

  .tab-panel {
    padding: 0 var(--gap-md) 0 calc(var(--gap-md) + 29px);
  }
}

/* MOBILE (≤640) — font sumažinamas iki 18, padding ir gap'ai dar mažiau.
   Horizontal scroll jau iš platesnio ≤1024 bloko. */
@media (width <= 640px) {
  .tabs-list {
    gap: var(--gap-sm);
    padding: 0 var(--gap-sm);
  }

  .tab {
    font-size: 18px;
  }

  .tabs-separator {
    margin: 0 var(--gap-sm);
  }

  .tab-panel {
    padding: 0 var(--gap-sm) 0 calc(var(--gap-sm) + 20px);
  }
}

/* ===== components/usage-examples.css ===== */

/* USAGE EXAMPLES — „Vartojimo pavyzdžiai" sekcija inner.html.
   Figma node 1309:663. Eina po reikšmių sekcijos (.meanings), prieš tab'us.

   KLASIŲ PERPANAUDOJIMAS (§24): .example, .example-content, .example-text,
   .example-transcription, .example-actions, .btn-watch, .btn-fav — visi iš
   gesture-header.css. Šis failas tik unikalūs container + header + separator
   + "Rodyti visus" toggle stiliai. */

.usage-examples {
  background: #EDF2F9;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--gap-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.usage-examples-header {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0 var(--gap-md);
}

.usage-examples-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.usage-examples-title {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.456px;
  color: var(--text-dark);

  /* Antraštėje gali būti glosos pavadinimas su skaitmenimis („ADAŽAS-(4C/B)(1)"), o Raleway
     numatytai piešia old-style skaitmenis. Žr. gesture-header.css .gesture-header-top h1. */
  font-variant-numeric: lining-nums;
  margin: 0;
}

/* Separator linija po antraštės — per visą container'io plotį.
   Spalva per var(--separator-color) (unified inner.html separator). */
.usage-examples-separator {
  margin: 0;
  height: 1px;
  border: 0;
  background: var(--separator-color);
}

.usage-examples-list {
  list-style: none;

  /* padding-left = gap-md + 29px hanging-indent kompensacija — vartojimo pavyzdžių
     tekstas vertikaliai sulygiuojamas su reikšmių .example-text (tas įtrauktas
     29px dėl numeruotos antraštės hanging indent: .examples { padding-left: 29 }). */
  padding: 0 var(--gap-md) 0 calc(var(--gap-md) + 29px);
  margin: 0;
  display: flex;
  flex-direction: column;

  /* gap: 0 — vertikalų ritmą valdo TIK `.example { padding-block: var(--gap-md) }`
     + `.example + .example` border'is (gesture-header.css), lygiai kaip reikšmių
     `.examples { gap: 0 }`. Su gap: var(--gap-md) flex tarpas NEcollapse'ina su
     padding'u → virš separator'iaus susidarydavo 24 (pirmo padding-bottom) + 24
     (gap) = 48px, o po juo tik 24px (asimetriškas tarpas). */
  gap: 0;
}

/* Atskyrimo linija tarp pavyzdžių (Figma 1309:694/719). Unified
   var(--separator-color) — sutampa su kitomis inner.html separator linijomis. */
.usage-examples-list .example + .example {
  border-top: 1px solid var(--separator-color);
  padding-top: var(--gap-md);
}

/* HTML `hidden` atributo override — `.example { display: flex }` iš
   gesture-header.css turi didesnę specificity nei UA `[hidden]` taisyklė,
   todėl reikia eksplicitiškai forsuoti display: none paslėptiems pavyzdžiams. */
.usage-examples-list .example[hidden] {
  display: none;
}

.usage-examples-toggle-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--gap-md);
}

/* „Rodyti visus" / „Rodyti mažiau" toggle — Figma 1309:722.
   border 1px #264289, rounded 4, h 40, padding 12 16 12 24, w 137. */
.btn-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  height: 40px;
  padding: 12px 16px 12px 24px;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 4px;
  cursor: pointer;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
}

.btn-expand-toggle-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.btn-expand-toggle[aria-expanded="true"] .btn-expand-toggle-icon {
  transform: rotate(180deg);
}

.btn-expand-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-expand-toggle-icon { transition: none; }
}

/* RESPONSIVE — paddingai sutampa su .gesture-header / .meaning pattern'u.
   Tablet (641-1024): 24px, Mobile (≤640): 16px. */
@media (641px <= width <= 1024px) {
  .usage-examples-header,
  .usage-examples-list,
  .usage-examples-toggle-wrapper {
    padding-left: var(--gap-md);
    padding-right: var(--gap-md);
  }

  /* Pavyzdžių sąrašas +29px (hanging-indent kompensacija) — sulygiuotas su
     reikšmių .example-text. Antraštė/toggle lieka prie gap-md. */
  .usage-examples-list {
    padding-left: calc(var(--gap-md) + 29px);
  }
}

@media (width <= 640px) {
  .usage-examples-header,
  .usage-examples-list,
  .usage-examples-toggle-wrapper {
    padding-left: var(--gap-sm);
    padding-right: var(--gap-sm);
  }

  /* Mobile hanging-indent kompensacija = 20px (atitinka .examples mobile). */
  .usage-examples-list {
    padding-left: calc(var(--gap-sm) + 20px);
  }
}

/* ===== components/video-modal.css ===== */

/* VIDEO MODAL — globalus modal'as, kurį atidaro „Žiūrėti įrašą" mygtukai
   (reikšmių sekcijoje ir vartojimo pavyzdžiuose). Vienas DOM instance'as
   inner.html'e; JS keičia <video src> + tekstą + transkripciją pagal
   spustelėto .example DOM turinį (data-video-src + DOM read).

   2026-05-27 įvedimas. Žr. js/video-modal.js.

   A11y:
   - role=dialog, aria-modal, aria-labelledby (sr-only h2)
   - aria-hidden toggle (visibility per pointer-events + opacity)
   - Focus restore į trigger mygtuką; Tab focus trap viduje (JS)
   - Esc + overlay click + close mygtukas uždaro
   - Native video controls (Space/K = pause/play, M = mute, F = fullscreen)
   - VISI projekto video MUTED + autoplay paspaudus (žr. FRONTEND_CONTEXT §32)
   - Transkripcijos glosos: nuorodos į gesto puslapį naujame tabe; be URL — paprastas tekstas. */

/* Visa modal'o dėžė (overlay + content) fade'inama kartu per parent opacity. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.video-modal.is-open,
.video-modal[aria-hidden="false"] {
  pointer-events: auto;
  opacity: 1;
}

.video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 75%);
}

/* Content — 600px wide; max-height = viewport - 2×gap, kad būtų erdvės teksto
   sekcijai apačioje + ji scroll'intųsi kai reikia. */
.video-modal__content {
  position: relative;
  width: 600px;
  max-width: calc(100vw - var(--gap-md) * 2);
  max-height: calc(100vh - var(--gap-md) * 2);
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Close mygtukas — dark navy circle su baltu ×. Absolute pozicija ANT video
   viršaus-dešinės (over-video pattern). top/right = body padding (gap-md=24)
   + 12px = 36px → 12px įstrižai video kampo. Mobile = gap-sm (16) + 12 = 28px. */
.video-modal__close {
  position: absolute;
  top: 36px;
  right: 36px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgb(15 31 62 / 90%);
  color: var(--white);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color .15s;
}

@media (hover: hover) {
  .video-modal__close:hover { background: rgb(15 31 62 / 100%); }
}

.video-modal__close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Body — flex column: video viršuje (juodas wrap, fiksuotas aspect-ratio)
   + info sekcija apačioje. Vertikaliai scroll'inasi, jei turinys viršija
   ekraną. Outer padding ant body suteikia BALTĄ rėmelį aplink video + info,
   kad modalas atrodytų kaip projekto kiti modali (NE flush juodas video iki
   modalo kraštų). gap tarp video-wrap ir info — gap-md. */
.video-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--gap-md);
  overflow-y: auto;
}

/* Video wrap — aspect-ratio 600:496 (≈ Figma), juodas fonas (§32 standartinis
   video pattern: placeholder/wrap juodas, kad pillar/letterbox būtų nepastebimas).
   NIEKADA NEPRIDĖTI border-radius/overflow/object-fit modifikacijų — §32 sako:
   joks individualus video kontekstas video atvaizdavimo nelaužo. */
.video-modal__video-wrap {
  width: 100%;
  aspect-ratio: 600 / 496;
  background: #000;
  flex-shrink: 0;
}

/* §32 standartinis video atvaizdavimas — `object-fit: cover; object-position:
   center` taikoma VISIEMS projekto video (.glosos-img-placeholder, .info-media,
   ir čia). Vienas pattern'as — vienodai taikomas, joks kontekstas neišimtis.
   Background ant video elemento NEnustatomas — wrap'as suteikia juodą foną,
   o cover užpildo wrap'ą pilnai, todėl video „dėžės" fonas niekada nesimato. */
.video-modal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Info sekcija — padding'as nereikalingas (body jau valdo outer padding).
   Tik vidinis gap tarp label/text/transcription. */
.video-modal__info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* Pavyzdžio tekstas — atitinka .example-text bazinę typography (17px Outfit). */
.video-modal__text {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-dark);
}

/* Transkripcija: žodžių sąrašas inline (kaip pavyzdyje). JS dinamiškai kuria <a> glosoms su
   gesto puslapiu ir <span> toms, kurios jo neturi. Paslepiama, kai pavyzdys neturi transkripcijos. */
.video-modal__transcription {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.video-modal__transcription li { margin: 0; }

/* [hidden] override: bazinė taisyklė turi `display: flex`, todėl `[hidden]` atributas
   vien savaime neslepia. */
.video-modal__transcription[hidden] { display: none; }

/* Glosa: nuoroda į gesto puslapį (atsidaro naujame tabe). Anksčiau čia buvo <button>, todėl
   background/border/cursor liko iš to reset'o (ant <a> jie nekenkia, bet ir nebūtini).
   display: inline-block PRIVALOMAS: <button> buvo inline-block, tad vertikalus padding kėlė
   elemento aukštį (22px); inline <a> to nedarytų ir eilutė sumažėtų iki 18px. */
.video-modal__word {
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .video-modal__word:hover { color: var(--blue-btn-hover, #1a3a6b); }
}

/* Glosa BE gesto puslapio (šablone <span>): ta pati tipografija, bet be nuorodos požymių,
   kad neatrodytų spaudžiama. */
.video-modal__word--plain {
  color: var(--text-dark);
  text-decoration: none;
  cursor: auto;
}

.video-modal__word:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mobile — modal'as per pilną plotį, video aspect-ratio išlieka. */
@media (width <= 640px) {
  .video-modal__content {
    width: 100%;
  }

  .video-modal__body {
    padding: var(--gap-sm);
    gap: var(--gap-sm);
  }

  /* Mobile body padding = gap-sm (16) → mygtukų pozicija = 16 + 12 = 28px. */
  .video-modal__close {
    top: 28px;
    right: 28px;
  }
}

/* prefers-reduced-motion — šiuo metu modal'as neturi animacijų;
   palikta tuščia sekcija ateičiai (jei kada vėl pridėsim transition). */

/* ===== components/video-player.css ===== */

/* LGK CUSTOM VIDEO PLAYER (.lgkp) — 3 mode'ai per data-mode atributą:
   - thumb: karuselės kortelės, inner pagrindinis, inner related (hover desktop /
            click mobile autoplay; jokio controls; loop desktop only).
   - info:  titulinio info sekcijos video (click play/pause; jokio loop/hover).
   - full:  modalas + komentarai (pilni controls, wheel speed, keyboard, fullscreen).
   Mute KONTROLĖ PAŠALINTA (§32 video-muted politika — visi VISADA muted).
   Žr. js/video-player.js + FRONTEND_CONTEXT.md.

   --ctrl-bg / --ctrl-fg lieka šios komponentos lygmenyje (control-overlay
   spalvos, ne projekto tokenai). */

.lgkp {
  --ctrl-bg: rgb(0 0 0 / 65%);
  --ctrl-fg: #fff;

  position: relative;
  width: 100%;
  aspect-ratio: var(--video-aspect);
  background: #000;
  overflow: hidden;
}

/* §32 komentarų video išimtis — 16:9 vietoj 1.21. Klasė pridėta root'e. */
.lgkp.lgkp--16-9 { aspect-ratio: 16 / 9; }

/* Video kūnas — §32 standartas. */
.lgkp__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* §32 SĄMONINGAS nukrypimas TIK fullscreen: mokomieji gestų video necropinami — rodomas
   VISAS kadras (rankos iki kraštų) + JUODOS juostos, jei proporcijos nesutampa. Normaliame
   rodyme LIEKA cover (užpildo 1.21 dėžę) — nekeičiama.
   requestFullscreen() kviečiamas ant .lgkp (video-player.js) → :fullscreen taikomas .lgkp.
   background:#000 fullscreen'e — nes inner pagrindiniam video gesture-header.css nustato
   .lgkp background:transparent (inner dizainas); be šito juostos remtųsi tik ::backdrop. Čia
   garantuojam juodas juostas VISIEMS full mode video (modalas jau #000 iš bazės; video-player.css
   yra vėliau cascade'e → laimi tie prieš gesture-header). Normaliam rodymui įtakos NĖRA.
   Atskiros taisyklės (NE viena su kableliu): nežinomas :-webkit-full-screen neturi invaliduoti
   standartinės :fullscreen taisyklės. -webkit- prefiksas PRIVALOMAS iOS/Safari. */
.lgkp:fullscreen {
  background: #000;
}

.lgkp:fullscreen .lgkp__video {
  object-fit: contain;
}

/* stylelint-disable-next-line selector-no-vendor-prefix */
.lgkp:-webkit-full-screen {
  background: #000;
}

/* stylelint-disable-next-line selector-no-vendor-prefix */
.lgkp:-webkit-full-screen .lgkp__video {
  object-fit: contain;
}

/* Klaviatūros / paspaudimo zona — perdengia visą player'į; <button> dėl
   semantiškumo (Tab fokusas, Enter/Space). */
.lgkp__hit {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.lgkp__hit:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}

/* Centrinis greičio indikatorius (full mode'e — wheel/keyboard). */
.lgkp__speed-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ctrl-bg);
  color: var(--ctrl-fg);
  font-size: 28px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--r-thumb);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.lgkp__speed-flash.show { opacity: 1; }

/* Centrinis big-play overlay — matomas kai pauzė. */
.lgkp__bigplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--ctrl-bg);
  display: grid;
  place-items: center;
  padding: 0;
  transition: opacity .2s, transform .2s;
}

.lgkp__bigplay svg { width: 28px; height: 28px; fill: #fff; }

.lgkp.is-playing .lgkp__bigplay {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.8);
}

.lgkp__bigplay:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* thumb mode desktop: big-play paslėptas (hover triggers autoplay).
   Mobile/touch (pointer:coarse): big-play matomas. */
@media (hover: hover) and (pointer: fine) {
  .lgkp[data-mode="thumb"] .lgkp__bigplay { display: none; }
}

/* Full controls juosta — matoma tik full mode'e. */
.lgkp__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px;
  background: linear-gradient(transparent, rgb(0 0 0 / 75%));
  transition: opacity .25s ease, transform .25s ease;
  opacity: 1;

  /* Virš .lgkp__hit (inset:0 overlay) — kad juostos mygtukai gautų touch/click pirma (iOS). */
  z-index: 1;
}

.lgkp:not([data-mode="full"]) .lgkp__controls { display: none; }

.lgkp.is-idle.is-playing .lgkp__controls {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.lgkp__btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  flex: 0 0 auto;

  /* iOS: greitas tap be 300ms delay / double-tap zoom — patikimesnis click ant juostos mygtukų. */
  touch-action: manipulation;
}

.lgkp__btn svg { width: 20px; height: 20px; fill: #fff; }

.lgkp__btn:hover,
.lgkp__speed-ctrl:hover { background: rgb(255 255 255 / 15%); }

/* Disabled (greičio mygtukai ties 0.25× / 2.0× kraštais). */
.lgkp__btn:disabled { opacity: 0.4; cursor: default; }
.lgkp__btn:disabled:hover { background: transparent; }

.lgkp__btn:focus-visible,
.lgkp__speed-ctrl:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Progress slankiklis. */
.lgkp__progress {
  --pct: 0%;

  flex: 1 1 auto;
  height: 34px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;

  /* Touch scrubbing: naršyklė NEPERIMA gesto (scroll/pan) — visi pointermove pristatomi JS,
     todėl velkant pirštu pozicija slenka sklandžiai (be pointercancel kapojimo). Mobile+tablet. */
  touch-action: none;
}

/* Vizualūs vaikai NEperima pointer'ių — visi pointer/touch event'ai eina į .lgkp__progress
   (tėvą), kad pointermove drag metu nebūtų nukreiptas į vaiką (track/fill/thumb) ir
   nepristatytas progress handler'iui. Mobile dinaminio drag fix. */
.lgkp__progress-track,
.lgkp__progress-fill,
.lgkp__progress-thumb {
  pointer-events: none;
}

.lgkp__progress-track {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 30%);
}

.lgkp__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pct);
  background: #fff;
  border-radius: 3px;
}

.lgkp__progress-thumb {
  position: absolute;
  top: 50%;
  left: var(--pct);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .15s;
}

.lgkp__progress:hover .lgkp__progress-thumb,
.lgkp__progress:focus-visible .lgkp__progress-thumb { opacity: 1; }

.lgkp__progress:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 6px;
}

.lgkp__time {
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 74px;
  text-align: center;
}

/* Greičio valdiklio vidurinis mygtukas — rodo dabartinį greitį IR atstato (1.0×).
   Pakeitė seną .lgkp__speed-badge. Kaip .lgkp__btn, bet platesnis tekstui („1.75×").
   tabular-nums — kad plotis nešokinėtų keičiant skaitmenis. */
.lgkp__speed-ctrl {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  height: 34px;
  min-width: 44px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;

  /* iOS: greitas tap (žr. .lgkp__btn). */
  touch-action: manipulation;
}

/* SR-only — perpanaudoja .visually-hidden pattern'ą, bet komponente įdedam
   tiesiogiai (componento autonomija). */
.lgkp__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  /* stylelint-disable-next-line property-no-deprecated */
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .lgkp__speed-flash,
  .lgkp__controls,
  .lgkp__bigplay { transition: none; }
}

@media (width <= 520px) {
  .lgkp__time { min-width: 64px; font-size: 15px; }
}

/* Touch įrenginiai — controls mygtukai ≥44px tap target (WCAG 2.2 Target Size).
   Galioja visiems juostos .lgkp__btn (play/fs/greitis−/+) + .lgkp__speed-ctrl, kad juosta
   liktų lygi. Desktop (pelė) — lieka 34px. */
@media (pointer: coarse) {
  .lgkp__controls .lgkp__btn {
    width: 44px;
    height: 44px;
  }

  .lgkp__speed-ctrl {
    height: 44px;
    min-width: 48px;
  }
}

/* === MOBILE / siauras ekranas — controls juosta į 2 eilutes (fullscreen fix) ===
   PROBLEMA (C1): siaurame full-mode video play + laikas + greitis×3 + fullscreen NEtelpa
   vienoje eilutėje. .lgkp__btn yra flex:0 0 auto (NEsitraukia); progress (flex:1 1 auto)
   susitraukia iki 0, bet likę fiksuoti elementai vis tiek overflow'ina → fullscreen
   (paskutinis) išstumiamas ir NUKERPAMAS .lgkp overflow:hidden → mobile NEMATOMAS.
   SPRENDIMAS: progress + laikas — viršutinė eilutė (progress flex-basis palieka vietos
   laikui); play + greitis×3 + fullscreen — apatinė eilutė; fullscreen margin-left:auto →
   apačioj dešinėj, visada matomas. Touch ≥44px išlieka (pointer:coarse taisyklė aukščiau).
   Desktop (>600px) NEPALIESTAS. */
@media (width <= 600px) {
  .lgkp__controls {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Viršutinė eilutė: progress (auga) + laikas. flex-basis palieka ~100px laikui+gap
     (laikas „0:00 / 0:00" ~77px), todėl laikas telpa toje pačioje eilutėje, o play su
     likusiais mygtukais wrap'inasi į apatinę eilutę. */
  .lgkp__controls .lgkp__progress {
    order: 1;
    flex-basis: calc(100% - 100px);
  }

  .lgkp__controls .lgkp__time {
    order: 2;
    min-width: 0;
  }

  /* Apatinė eilutė: play + greitis×3 + fullscreen (fullscreen — dešinėje). */
  .lgkp__controls [data-lgkp="play"] {
    order: 3;
  }

  .lgkp__controls [data-lgkp="speed-down"] {
    order: 4;
  }

  .lgkp__controls [data-lgkp="speed-reset"] {
    order: 5;
  }

  .lgkp__controls [data-lgkp="speed-up"] {
    order: 6;
  }

  /* PiP — TIK straipsnio full mode (kiti puslapiai mygtuko neturi, tad ši taisyklė jiems
     no-op). Įtraukiamas į apatinę eilutę kaip eilinis mygtukas, prieš fullscreen. BE order
     PiP gautų default order:0 → iškristų prieš progress. Touch ≥44px — iš pointer:coarse. */
  .lgkp__controls [data-lgkp="pip"] {
    order: 7;
  }

  .lgkp__controls [data-lgkp="fs"] {
    order: 8;
    margin-left: auto;
  }
}

/* ===== components/zodziai.css ===== */

/* ============================================================================
   ŽODŽIŲ SĄRAŠAS (zodziai.html) — abėcėlinis žodžių indeksas.
   Perpanaudoja .inner-page template (contact.css): hero, .inner-page__card,
   .contact-title; breadcrumb (breadcrumb.css); tokenai (variables.css).
   ČIA TIK nauji stiliai: grid layout, alfabeto nav, žodžių sąrašas.
   ============================================================================ */

/* Grid override ant .inner-page__card. Bazė (balta bg, border, radius 16, padding 20/24,
   ≤640px padding 16) — contact.css, NEDUBLIUOJAMA. Čia tik flex → grid + 2 stulpeliai.

   Pirma kolona = `(100% - 70ch)/2` = atstumas iki 70ch kolonos kairės, kuri SUTAMPA su hero
   H1 „Žodžių sąrašas" pozicija (card padding pasinaikina matematikoje) → turinys LYGIUOJASI su
   H1. Alfabetas left-aligned šioje kolonoje; likęs jos plotis = tarpas iki turinio (turinys
   NEprasideda iškart po alfabeto). max(42px,…) — siaurame ekrane (>760px) garantuoja vietos
   alfabetui. column-gap:0 — atstumą jau duoda pirmos kolonos plotis. */
.zs-card {
  display: grid;
  grid-template-columns: max(42px, calc((100% - 70ch) / 2)) 1fr;
  column-gap: 0;
  align-items: start;
}

/* === Alfabeto nav — sticky kairysis stulpelis (vienas vertikalus stulpelis). === */
.zs-alphabet {
  position: sticky;
  top: 16px;
  align-self: start;
  padding-left: var(--gap-xs);
}

.zs-alphabet ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zs-alphabet__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
  transition: background 0.15s;
}

.zs-alphabet__link:hover {
  background: var(--blue-light);
}

.zs-alphabet__link[aria-current="page"] {
  background: var(--blue);
  color: var(--white);
}

.zs-alphabet__link.is-disabled {
  color: #b0b8c4;
  cursor: default;
  pointer-events: none;
}

/* === Dešinysis turinys — raidės antraštė + žodžių sąrašas. === */
.zs-letter-heading {
  margin: 0 0 var(--gap-sm);
  font-family: Raleway, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: var(--blue);
}

/* BE gap — tarpą tarp eilučių apibrėžia TIK .list-row padding + border-bottom (kaip .mg-list). */
.zs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* === Žodžio įrašas + šaltinio žyma. PAGRINDINĖ (kliento pasirinkta) versija = BOLD/ITALIC:
   badge (.zs-tag) PASLĖPTAS, žodis stilizuojamas pagal source (per :has ant sibling .zs-tag--*):
   „meanings" → bold (700), „examples" → italic (400). Šaltinį SR'ui perduoda .visually-hidden
   .zs-srhint (link'o viduje) — WCAG 1.3.1, nes bold/italic balso skaitytuvui neprieinamas.
   BADGE versija — zodziai - Copy.html (inline override: .zs-tag rodomas, .zs-srhint paslėptas). === */

/* .zs-item bazė (flex/centravimas/padding/rėmelis) — perkelta į .list-row (bendra eilutės klasė).
   Čia .zs-item lieka TIK kaip :has selektorių kontekstas (bold/italic pagal source). HTML li klasė:
   „list-row zs-item" (zodziai.js). */

.zs-word {
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--blue);
  text-decoration: none;
}

.zs-word:hover {
  text-decoration: underline;
}

/* Badge paslėptas pagrindinėje (bold/italic) versijoje; source klasė (.zs-tag--*) lieka DOM'e
   :has selektoriui. Badge VIZUALŲ stilių (pill + spalvos) turi TIK kopija (Copy inline). */
.zs-tag {
  display: none;
}

/* Bold/italic pagal source (per sibling .zs-tag--* klasę). */
.zs-item:has(.zs-tag--mean) .zs-word {
  font-weight: 700;
  font-style: normal;
}

.zs-item:has(.zs-tag--ex) .zs-word {
  font-weight: 400;
  font-style: italic;
}

/* Glosos TIPAS — BENDRAS modifikatorius glosų AUTOCOMPLETE pasiūlymams (.ac-item, search.css) IR glosų
   sąrašui (glosos.html .zs-word). type „main" → bold, „variant" → italic. KEIČIA TIK font-weight/
   font-style (analogiškai .zs-tag--mean/ex). Eina PO .zs-word → variant įveikia bazinį font-weight:700.
   Pridedama JS (autocomplete.js / glosos.js) pagal type; SR hint „(pagrindinis)"/„(variantas)".
   Lining skaitmenys: .glosa-* žymi būtent GLOSOS pavadinimą, kuris gali turėti skaitmenų. Bendrų
   .zs-word / .ac-item NEliečiam, nes jos rodo ir žodžius/temas. Žr. .gesture-header-top h1. */
.glosa-main { font-weight: 700; font-variant-numeric: lining-nums; }
.glosa-variant { font-weight: 400; font-style: italic; font-variant-numeric: lining-nums; }

/* Disclaimer — paaiškina paryškinto/pasvirojo šrifto reikšmę (TIK zodziai.html, HTML'e). */
.zs-disclaimer {
  margin: 0 0 var(--gap-md);
  padding: 12px 16px;
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-input);
  font-family: Outfit, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
}

/* „Rodyti daugiau" mygtukas — vizualas perpanaudotas iš .btn-cancel (buttons.css: balta bg,
   mėlynas border/tekstas, r-input, padding 12×24, hover blue-light). Čia TIK centravimas po
   žodžių sąrašu (block + margin-inline auto). Paslepiamas per `hidden` atributą (JS). */
.zs-load-more {
  display: block;
  margin: var(--gap-md) auto 0;
}

/* [hidden] override — bazinė .zs-load-more turi `display: block`, todėl UA `[hidden]`
   atributas vien savaime neslepia (analogiškai .video-modal__back, .combo-clear). */
.zs-load-more[hidden] {
  display: none;
}

/* === Responsive — ≤760px: alfabetas tampa horizontalia juosta virš turinio. === */
@media (width <= 760px) {
  .zs-card {
    grid-template-columns: 1fr;
  }

  /* Horizontali juosta, PRILIMPANTI prie ekrano viršaus skrolinant (sticky top:0).
     Baltas fonas + vertikalus padding + z-index — kad po juosta scroll'inami žodžiai
     neprasišviestų pro raides. */
  .zs-alphabet {
    position: sticky;
    top: 0;
    z-index: 1;
    order: -1;
    padding: var(--gap-xs) 0;
    background: var(--white);
  }

  .zs-alphabet ul {
    flex-flow: row wrap;
  }
}