/* ==========================================================================
   Price lists – the `kainos` block (client 2026-10-12, Ramunė: "Turim tokį reikalą su kainoraščiais. Labai nepatogu.
   … Gal eitų supaprastinti plius iš karto registraciją įdėti?"; template-parts/blocks/kainos.php, cards/price.php,
   assets/js/price-list.js). Loaded only on pages with the block (inc/price-list.php). familia.lt's tokens (theme.css):
   the title scale for the block's title, the body text (--f-copy-*: #676767, the brown #3d291d for what matters), the
   compact field (--f-field-h-compact 44px, its rim, corners and focus ring), the site's sky button (#88cef7, brown
   text, as "Registracija Vizitui" / .f-specialist-book) as a pill; rows on the page's grey ground under hairlines, as
   the FAQ's ("One grey ground"). Every target is at least 44px (the "Daugiau" text toggle 32px). One price list of the
   city at a time ("Paslaugų sritis"); a list's groups are folds when it has 2+ (their title and row count).
     phones, tablets (≤ 1024px)   her mock-up: the cities as one segmented control across the width, the search,
                                  "Paslaugų sritis"; a row = the name (bold), the price big + "Įprasta kaina", "Su lojalumo
                                  kortele 81 €" under it, "Daugiau", and "Registruotis" on the right
     desktop (≥ 1025px)           the cities, the search and the select in one bar; a row is one line of a table –
                                  name · price (+ "Įprasta kaina" under it) · loyalty price (+ its label) · the button
   ========================================================================== */
.f-kainos {
 --f-prices-rule: rgb(61 41 29 / .16);
 --f-prices-ink: #3d291d;
}
/* the site's border-box (site.css: `*, ::before, ::after { box-sizing: inherit }`) does not reach into a details' content –
   Chrome's ::details-content box is content-box, so a 44px button in a fold was 62px */
.f-kainos details * { box-sizing: border-box; }
.bl.f-kainos .titlec { margin-bottom: 20px; }
.bl.f-kainos .titlec .titleH { margin: 0; }

/* the bar: cities, search, "Paslaugų sritis", the count */
.f-prices__bar { display: grid; gap: 12px; }
.f-prices__where { display: grid; gap: 6px; min-width: 0; }
.f-prices__label { margin: 0; color: var(--f-field-label-ink, #3d291d); font-size: var(--f-field-label, 14px); line-height: 1.43; }
.f-prices__cities {
 display: inline-flex;
 flex-wrap: wrap;
 gap: 2px;
 justify-self: start;
 max-width: 100%;
 padding: 3px;
 border: 1px solid #d9cec6;
 border-radius: 999px;
 background: #fff;
}
.f-prices__city {
 flex: 0 0 auto;
 min-width: 0;
 min-height: 44px;
 margin: 0;
 padding: 0 22px;
 border: 0;
 border-radius: 999px;
 background: transparent;
 color: var(--f-prices-ink);
 font: 400 15px/1.2 Geologica, sans-serif;
 white-space: nowrap;
 cursor: pointer;
}
.f-prices__city:hover { background: #e5f5ff; }
.f-prices__city[aria-pressed="true"] { background: #88cef7; font-weight: 500; }
.f-prices__city:focus-visible,
.f-prices__clear:focus-visible,
.f-prices__other:focus-visible,
.f-kainos .f-price__book:focus-visible,
.f-price__more > summary:focus-visible { outline: 3px solid #007c91; outline-offset: 2px; }
.f-prices__tools { display: grid; gap: 12px; align-items: end; }
.f-prices__area { display: grid; gap: 6px; min-width: 0; }
.f-prices__search { position: relative; }
#page .f-kainos .f-prices__search .input {
 width: 100%;
 height: var(--f-field-h-compact, 44px);
 padding: 0 48px 0 44px;
 -webkit-appearance: none;
 appearance: none;
}
.f-prices__input::-webkit-search-cancel-button,
.f-prices__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.f-prices__glass { position: absolute; z-index: 1; top: 50%; left: 14px; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--f-prices-ink); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.f-prices__clear {
 position: absolute;
 top: 0;
 right: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 margin: 0;
 padding: 0;
 border: 0;
 border-radius: 0 var(--f-field-radius, 8px) var(--f-field-radius, 8px) 0;
 background: none;
 color: var(--f-prices-ink);
 cursor: pointer;
}
.f-prices__clear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#page .f-kainos .f-prices__area select { height: var(--f-field-h-compact, 44px); }
/* while a search runs over every list the chosen one does not apply: the select steps back (picking a list ends the search) */
.f-kainos.is-searching .f-prices__area { opacity: .7; }   /* the label still 5:1 on the ground */
.f-kainos.is-searching .f-prices__area:is(:hover, :focus-within) { opacity: 1; }
.f-prices__status { margin: 0; color: var(--f-copy-color, #676767); font-size: var(--f-copy-sm, 14px); line-height: var(--f-copy-sm-lh, 1.4); }
.f-prices__status:empty { margin-top: -12px; }
.f-kainos.is-empty .f-prices__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a price list: its title, its groups' titles, the rows */
.f-prices__list { margin-top: 28px; }
.f-prices__cat {
 margin: 0 0 10px;
 color: var(--f-prices-ink);
 font-size: 22px;
 font-weight: 400;
 line-height: 1.2;
 letter-spacing: -.02em;
 scroll-margin-top: 96px;
}
.f-prices__cat:focus { outline: none; }
.f-prices__cat:focus-visible { outline: 3px solid #007c91; outline-offset: 4px; }
.f-prices__rows { margin: 0; padding: 0; border-top: 1px solid var(--f-prices-rule); list-style: none; }
/* a group of a list with 2+ groups: a fold – its title, its row count, a chevron (the search opens the ones with a match
   and hides the counts) */
.f-prices__group.is-fold > summary {
 display: flex;
 align-items: center;
 gap: 8px;
 min-height: 48px;
 padding: 8px 0;
 border-bottom: 1px solid var(--f-prices-rule);
 list-style: none;
 cursor: pointer;
}
.f-prices__list > details.is-fold:first-of-type > summary { border-top: 1px solid var(--f-prices-rule); }
.f-prices__group.is-fold > summary::-webkit-details-marker { display: none; }
.f-prices__sub { margin: 0; color: var(--f-prices-ink); font-size: 17px; font-weight: 500; line-height: 1.3; }
.f-prices__count { color: var(--f-copy-color, #676767); font-size: var(--f-copy-sm, 14px); white-space: nowrap; }
.f-prices__group.is-fold > summary svg { flex: none; width: 20px; height: 20px; margin-left: auto; fill: none; stroke: var(--f-prices-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.f-prices__group.is-fold[open] > summary svg { transform: rotate(180deg); }
.f-prices__group.is-fold > summary:hover .f-prices__sub { text-decoration: underline; text-underline-offset: .15em; }
.f-prices__group.is-fold > summary:focus-visible { outline: 3px solid #007c91; outline-offset: 2px; }
.f-prices__group.is-fold > .f-prices__rows { border-top: 0; }
.f-kainos.is-searching .f-prices__count { display: none; }

.f-price {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 grid-template-areas: "name book" "now book" "loyal book" "more more";
 column-gap: 14px;
 align-items: center;
 padding: 14px 0;
 border-bottom: 1px solid var(--f-prices-rule);
}
.f-price.is-plain { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "now" "loyal" "more"; }
#page .f-price p { max-width: none; margin: 0; }
.f-price__name { grid-area: name; color: var(--f-prices-ink); font-size: 16px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.f-price__now { grid-area: now; padding-top: 6px; color: var(--f-prices-ink); line-height: 1.2; }
.f-price__now .f-price__value { font-size: 20px; font-weight: 500; }
.f-price__label { color: var(--f-copy-color, #676767); font-size: var(--f-copy-sm, 14px); font-weight: 400; }
.f-price__now .f-price__label { margin-left: 4px; }
.f-price__loyal { grid-area: loyal; padding-top: 4px; line-height: 1.3; }
.f-price__loyal .f-price__value { color: var(--f-prices-ink); font-size: 15px; font-weight: 500; }
.f-price__more { grid-area: more; margin-top: 4px; }
.f-price__more > summary {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 min-height: 32px;
 color: var(--f-prices-ink);
 font-size: var(--f-copy-sm, 14px);
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: .15em;
 list-style: none;
 cursor: pointer;
}
.f-price__more > summary::-webkit-details-marker { display: none; }
.f-price__more > summary:hover { text-decoration-thickness: 2px; }
.f-price__more > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.f-price__more[open] > summary svg { transform: rotate(180deg); }
.f-price__more-open,
.f-price__more[open] .f-price__more-closed { display: none; }
.f-price__more[open] .f-price__more-open { display: inline; }
.f-price__text { padding: 4px 0 2px; }
.f-price__text .html > :last-child { margin-bottom: 0; }
.f-kainos .f-price__book {
 grid-area: book;
 align-self: center;
 justify-self: end;
 height: auto;
 min-height: 44px;
 margin: 0;
 padding: 8px 16px;
 border: 1px solid #88cef7;
 border-radius: 999px;
 background: #88cef7;
 box-shadow: none;
 color: var(--f-prices-ink);
 font-size: 15px;
 font-weight: 500;
 line-height: 1.2;
 text-decoration: none;
 white-space: nowrap;
}
.f-kainos .f-price__book:is(:hover, :focus, :active) { border-color: #70bfee; background: #70bfee; box-shadow: none; color: var(--f-prices-ink); }
/* "Skambinti" (client 2026-10-13: remote consultations – "a call button with number"): the same 44px pill as an outline –
   white with the sky as its 2px rim, so it reads as another action – a handset and the number itself (a desktop cannot
   dial; its visitor reads it), the digits even (tabular) */
.f-kainos .f-price__call {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 7px 14px;
 border: 2px solid #88cef7;
 background: #fff;
 font-variant-numeric: tabular-nums;
}
.f-kainos .f-price__call svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.f-kainos .f-price__call:is(:hover, :focus, :active) { border-color: #70bfee; background: #e5f5ff; color: var(--f-prices-ink); }

/* nothing found */
.f-prices__empty { margin-top: 24px; padding: 20px; border-radius: 10px; background: #fff; }
#page .f-prices__empty p { margin: 0; color: var(--f-copy-color, #676767); font-size: var(--f-copy-size, 16px); font-weight: var(--f-copy-weight, 300); line-height: var(--f-copy-lh, 1.4); }
#page .f-prices__empty .f-prices__empty-title { margin-bottom: 4px; color: var(--f-prices-ink); font-size: 18px; font-weight: 500; }
#page .f-prices__empty .f-prices__elsewhere { margin-top: 12px; }
.f-prices__other {
 min-height: 44px;
 margin: 8px 8px 0 0;
 padding: 0 16px;
 border: 1px solid #88cef7;
 border-radius: 999px;
 background: #fff;
 color: var(--f-prices-ink);
 font: 400 15px/1.2 Geologica, sans-serif;
 cursor: pointer;
}
.f-prices__other:hover { background: #e5f5ff; }

@media (prefers-reduced-motion: reduce) {
 .f-price__more > summary svg,
 .f-prices__group.is-fold > summary svg { transition: none; }
}

/* phones: the cities across the width, three equal segments; the call pill where "Registruotis" is, a step smaller so
   the name and the prices keep their room beside a number ("+370 5 2690 333": ~150px) */
@media (max-width: 768px) {
 .f-kainos .f-price__call { gap: 4px; padding: 7px 10px; font-size: 14px; }
 .f-kainos .f-price__call svg { width: 16px; height: 16px; }
 .f-prices__cities { display: flex; justify-self: stretch; }
 .f-prices__city { flex: 1 1 0; padding: 0 8px; }
 .f-prices__list { margin-top: 24px; }
}

/* desktop: one bar, rows as a table */
@media (min-width: 1025px) {
 .f-prices__bar { grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: end; }
 /* the bar spans the block (its right edge = the rows' right edge); "Paslaugų sritis" as wide as its longest name
    (Laboratoriniai tyrimai ir sveikatos ištyrimo programos) so it reads in full, the search takes the rest (≥ 220px) –
    on a narrower desktop the select gives way first (client 2026-10-12) */
 .f-prices__tools { grid-column: -2; grid-template-columns: minmax(220px, 1fr) minmax(0, max-content); }
 #page .f-kainos .f-prices__area select { width: 100%; min-width: 0; padding-right: 40px; }
 /* the city switch as tall as the two fields beside it: 44px outside = buttons 44 − 2 × (3px padding + 1px border)
    (client 2026-10-12: "city selector is slightly taller"); phones keep 44px buttons – there the controls stack */
 .f-prices__city { min-height: calc(var(--f-field-h-compact, 44px) - 8px); }
 .f-prices__tools:first-child,
 .f-prices__status { grid-column: 1 / -1; }
 .f-prices__list { margin-top: 36px; }
 .f-prices__cat { font-size: 28px; }
 .f-prices__sub { font-size: 18px; }
 /* the button column: "Registruotis" fits 150px; a block with a "Skambinti" (a number as its text – "+370 5 2690 333",
    "+370 690 68935") widens it for every row, so the price columns stay aligned across the rows and lists */
 .f-kainos { --f-prices-book: 150px; }
 .f-kainos:has(.f-price__call) { --f-prices-book: 186px; }
 .f-price {
  grid-template-columns: minmax(0, 1fr) 150px 190px var(--f-prices-book);
  grid-template-areas: "name now loyal book" "more more more .";
  column-gap: 24px;
  padding: 12px 0;
 }
 .f-price.is-plain { grid-template-columns: minmax(0, 1fr) 150px 190px var(--f-prices-book); grid-template-areas: "name now loyal ." "more more more ."; }
 .f-price__now,
 .f-price__loyal { display: flex; flex-direction: column; gap: 2px; padding-top: 0; }
 .f-price__loyal { flex-direction: column-reverse; }
 .f-price__now .f-price__value { font-size: 18px; }
 .f-price__now .f-price__label { margin-left: 0; }
 .f-price__label { font-size: 13px; }
 .f-price__more { margin-top: 2px; }
}