/* ============================================================
   MODULE — services_index (.zd-sidx)
   Zdorovo Dental — homepage build (ТЗ на оновлення головної).
   Loads AFTER zd-blocks.css. No new design tokens.
   · Two tiers: --major (has child pages, 2-up) / --minor (no children, 4-up).
   · Reveal is an OVERLAY panel — card height never changes, zero layout shift.
   · --uniform is the fallback single-grid treatment (all categories alike).
   · Childless cards are clickable edge-to-edge via a stretched ::after.
   · Column tracks are minmax(0,1fr) so long UA compounds cannot widen a column.
   ============================================================ */

/* ============================================================
   MODULE — services_index  (.zd-sidx)
   Homepage «Наші послуги» — a service DIRECTORY, not a feature grid.

   Two tiers, which is ТЗ's own ordering rule made visible:
     .zd-sidx--major → categories WITH child pages (wide, 2-up, the
                       SEO-linking rows) — these come first
     .zd-sidx--minor → categories WITHOUT children (compact, 4-up)
   Cards size to their own content: no subgrid, so no dead space in
   the short ones.

   Loads AFTER main.css. No new tokens.
   Prefix note: mirrors the live theme's zd-. For a zd- build, swap
   zd- → zd- globally in this file.
   ============================================================ */

/* align-items: stretch (default) — cards in a row share the row height.
   Safe because the reveal is an overlay panel: opening one never resizes
   its cell, so an equal-height row still never shifts. */
.zd-sidx { display: grid; grid-template-columns: 1fr; gap: 16px; }
.zd-sidx + .zd-sidx { margin-top: 16px; }
/* clear separation between the two tiers, wherever they sit in the markup */
.zd-sidx--minor { margin-top: 40px; }
.zd-sidx--major + .zd-sidx--minor, .tier + * .zd-sidx--minor { margin-top: 0; }
.zd-sidx--uniform + .zd-sidx--uniform { margin-top: 16px; }

/* ---------- card shell ---------- */
.zd-sidx__cat {
  background: var(--surface); border: 1px solid var(--zd-line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  position: relative; /* anchors the .zd-sidx__extra overlay panel */
  display: grid; align-content: start;
  height: 100%; /* fill the row-height cell */
  transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s;
}
.zd-sidx__cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-tint); }

/* ---------- head: icon + linked title ---------- */
.zd-sidx__head { display: flex; align-items: center; gap: 14px; }
.zd-sidx__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; }
/* library SVGs ship with no width/height — always size them here */
.zd-sidx__icon svg { display: block; }

.zd-sidx__title { margin: 0; font-family: var(--font-heading); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--ink-800); text-wrap: pretty; }
.zd-sidx__title a { color: inherit; text-decoration: none; }
.zd-sidx__title a:hover { color: var(--zd-accent-strong); text-decoration: none; }

.zd-sidx__text { margin: 0; color: var(--zd-muted); text-wrap: pretty; }

/* ---------- whole-card link (categories with NO child pages) ----------
   Cards that have nothing to expand are a single destination, so the whole
   tile is the hit area. One stretched pseudo-element on the existing title
   link — no nested anchors, no JS, and the accessible name stays the title.
   Cards WITH a child list keep per-link targets: a card-wide link would
   swallow the child links and the toggle. */
.zd-sidx__cat:not(:has(.zd-sidx__kids)) { cursor: pointer; }
.zd-sidx__cat:not(:has(.zd-sidx__kids)) .zd-sidx__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.zd-sidx__cat:not(:has(.zd-sidx__kids)):hover .zd-sidx__title a { color: var(--zd-accent-strong); }
.zd-sidx__cat:not(:has(.zd-sidx__kids)):has(.zd-sidx__title a:focus-visible) { outline: 3px solid rgba(27,174,112,.4); outline-offset: 3px; }
.zd-sidx__cat:not(:has(.zd-sidx__kids)) .zd-sidx__title a:focus-visible { outline: none; }
/* the tinted icon picks up the hover too, so the whole tile reacts as one */
.zd-sidx--minor .zd-sidx__cat:hover .zd-sidx__icon { background: var(--zd-accent); color: #fff; }
.zd-sidx--minor .zd-sidx__icon { transition: background .18s, color .18s; }

/* ---------- child links ---------- */
/* anchors the overlay panel to the bottom of the VISIBLE list, so the
   revealed links continue directly from it with no gap */
.zd-sidx__kidswrap { position: relative; align-self: start; }
.zd-sidx__kids { list-style: none; margin: 0; padding: 0; }
.zd-sidx__kids li { margin: 0; break-inside: avoid; }
.zd-sidx__kids a {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
  font-size: 14.5px; font-weight: 600; line-height: 1.45;
  color: var(--zd-accent-strong); text-decoration: none;
}
.zd-sidx__kids a::before { content: "›"; flex: none; font-size: 17px; line-height: 1.2; color: var(--green-300); transition: transform .16s var(--ease-out), color .16s; }
.zd-sidx__kids a:hover { color: var(--green-700); text-decoration: none; }
.zd-sidx__kids a:hover::before { color: var(--zd-accent); transform: translateX(2px); }

/* ---------- overflow children: an OVERLAY panel ----------
   The rest of the child pages hang off the card's bottom edge as a
   floating continuation of the card, so opening one category never
   resizes its grid cell — no layout shift, no stretched neighbours.
   The panel is a real part of the card in the DOM (every link is in
   the page source, not fetched); [hidden] keeps the closed links out
   of the tab order. */
.zd-sidx__extra {
  position: absolute; top: 100%; z-index: 41;
  background: var(--surface);
  border: 1px solid var(--zd-line); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 26px 40px -18px rgba(17, 28, 23, .28);
}
.zd-sidx__extra[hidden] { display: none; }
.zd-sidx__extra .zd-sidx__kids { padding: 2px 0 0; border-top: 0; }
/* the open card reads as one sheet with its panel */
/* holds the button's track open while it is docked in the panel */
.zd-sidx__more-slot { display: block; align-self: end; pointer-events: none; }

/* docked in the overlay panel: the button is the last thing in the expanded
   card, under the revealed links */
.zd-sidx__more--docked { margin-top: 16px !important; align-self: start !important; }
.zd-sidx__cat.is-open { position: relative; z-index: 40; box-shadow: var(--shadow-md); }
/* siblings recede while a sheet is open — no orphaned buttons or half-covered
   titles showing through from underneath */
.zd-sidx-open .zd-sidx__cat:not(.is-open) { opacity: .32; pointer-events: none; z-index: 1; transition: opacity .2s var(--ease-out); }
.zd-sidx-open .zd-sidx__cat:not(.is-open):hover { transform: none; box-shadow: var(--shadow-sm); }
.zd-sidx__cat.is-open:hover { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .zd-sidx__extra:not([hidden]) { animation: zd-sidx-drop .2s var(--ease-out); }
}
@keyframes zd-sidx-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- reveal button (hardened against Astra's bare-button styles) ---------- */
.zd-sidx__more {
  padding: 9px 15px 9px 13px !important;
  display: inline-flex !important; align-items: center; gap: 7px; width: fit-content;
  background: var(--zd-tint) !important; color: var(--zd-accent-strong) !important;
  border: 1px solid transparent !important; border-radius: var(--radius-pill) !important;
  font: 700 13.5px/1 var(--font-sans) !important; text-transform: none !important;
  letter-spacing: 0 !important; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.zd-sidx__more:hover, .zd-sidx__more:focus-visible {
  background: var(--surface) !important; color: var(--green-700) !important; border-color: var(--zd-accent) !important;
}
.zd-sidx__more:focus-visible { outline: 3px solid rgba(27,174,112,.4); outline-offset: 2px; }
.zd-sidx__more svg { width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease-out); }
.zd-sidx__more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* label swap in pure CSS — no JS text, so no Ukrainian plural forms needed */
.zd-sidx__more-less { display: none; }
.zd-sidx__more[aria-expanded="true"] .zd-sidx__more-more { display: none; }
.zd-sidx__more[aria-expanded="true"] .zd-sidx__more-less { display: inline; }

/* ============================================================
   TIER 1 — major: has child pages. Wide row, solid green icon.
   ============================================================ */
.zd-sidx--major .zd-sidx__cat { padding: 26px 26px 24px; gap: 14px; min-height: 300px; }
/* subgrid: every card shares the row's track heights, so descriptions
   (and each band below them) are the same height across the row */
@supports (grid-template-rows: subgrid) {
  .zd-sidx--major .zd-sidx__cat { grid-row: span 4; grid-template-rows: subgrid; }
}
.zd-sidx--major .zd-sidx__icon { width: 52px; height: 52px; border-radius: 15px; background: var(--zd-accent); color: #fff; box-shadow: 0 6px 16px rgba(27,174,112,.28); }
.zd-sidx--major .zd-sidx__icon svg { width: 28px; height: 28px; }
.zd-sidx--major .zd-sidx__title { font-size: 21px; }
.zd-sidx--major .zd-sidx__text { font-size: 15px; line-height: 1.6; min-height: 48px; }
.zd-sidx--major .zd-sidx__kids { padding-top: 14px; border-top: 1px solid var(--zd-line); }
.zd-sidx--major .zd-sidx__more { align-self: end; margin-top: auto; }
.zd-sidx--major .zd-sidx__kids { margin-bottom: 0; }
.zd-sidx--major .zd-sidx__extra { padding: 0 26px 22px; left: -27px; right: -27px; }
.zd-sidx--major .zd-sidx__extra .zd-sidx__kids { border-top: 0; padding-top: 0; }

/* ============================================================
   TIER 2 — minor: no child pages. Compact tile, tinted icon.
   Nothing is missing here, so nothing looks empty.
   ============================================================ */
.zd-sidx--minor .zd-sidx__cat { padding: 20px; gap: 11px; min-height: 190px; }
@supports (grid-template-rows: subgrid) {
  .zd-sidx--minor .zd-sidx__cat { grid-row: span 2; grid-template-rows: subgrid; }
}
.zd-sidx--minor .zd-sidx__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--zd-tint); color: var(--zd-accent-strong); }
.zd-sidx--minor .zd-sidx__icon svg { width: 23px; height: 23px; }
.zd-sidx--minor .zd-sidx__title { font-size: 16.5px; }
.zd-sidx--minor .zd-sidx__text { font-size: 14px; line-height: 1.55; min-height: 92px; }

/* no icons variant — the title carries the accent instead */
.zd-sidx--noicons .zd-sidx__icon { display: none; }
.zd-sidx--noicons .zd-sidx__head { padding-bottom: 13px; border-bottom: 2px solid var(--zd-tint); }

/* ---------- section action ---------- */
.zd-sidx__cta { margin-top: 28px; text-align: center; }

/* The tier min-heights above are the no-subgrid fallback. With subgrid the card
   is sized by the PARENT's tracks, so a floor on the item is ignored — the real
   floor is min-height on .zd-sidx__text, which sits in a track and sizes it. */

/* ---------- responsive ---------- */
/* single-column mobile: no row to match, so drop the floor */
@media (max-width: 599px) {
  .zd-sidx__cat { min-height: 0 !important; grid-row: auto !important; grid-template-rows: none !important; }
  .zd-sidx__text { min-height: 0 !important; }
}
@media (min-width: 600px) {
  .zd-sidx--minor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 920px) {
  .zd-sidx--major { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zd-sidx--minor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zd-sidx--major, .zd-sidx--minor, .zd-sidx--uniform { row-gap: 16px; }
  /* wide major cards: child links in two text columns */
  .zd-sidx--major .zd-sidx__kids { columns: 2; column-gap: 28px; }
  .zd-sidx--major .zd-sidx__extra .zd-sidx__kids { columns: 2; column-gap: 28px; }
}

/* ============================================================
   FALLBACK — one uniform grid (.zd-sidx--uniform), if you prefer
   all 12 categories treated alike. Still content-height, still no
   dead space; just no tier contrast.
   ============================================================ */
.zd-sidx--uniform .zd-sidx__cat { padding: 22px; gap: 12px; min-height: 250px; }
@supports (grid-template-rows: subgrid) {
  .zd-sidx--uniform .zd-sidx__cat { grid-row: span 4; grid-template-rows: subgrid; }
}
.zd-sidx--uniform .zd-sidx__icon { width: 46px; height: 46px; border-radius: 13px; background: var(--zd-tint); color: var(--zd-accent-strong); box-shadow: none; }
.zd-sidx--uniform .zd-sidx__icon svg { width: 25px; height: 25px; }
.zd-sidx--uniform .zd-sidx__title { font-size: 18px; }
.zd-sidx--uniform .zd-sidx__text { font-size: 14.5px; line-height: 1.6; min-height: 70px; }
.zd-sidx--uniform .zd-sidx__kids { padding-top: 13px; border-top: 1px solid var(--zd-line); columns: 1; }
.zd-sidx--uniform .zd-sidx__more { align-self: end; margin-top: auto; }
.zd-sidx--uniform .zd-sidx__extra { padding: 0 22px 20px; left: -23px; right: -23px; }
.zd-sidx--uniform .zd-sidx__extra .zd-sidx__kids { border-top: 0; padding-top: 0; }
@media (min-width: 600px) { .zd-sidx--uniform { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .zd-sidx--uniform { grid-template-columns: repeat(3, minmax(0, 1fr)); } }