/* ===========================================================================
   inner-pages.css — furniture shared by every page except Home: the page
   hero, the breadcrumb, the sticky document layout and the closing CTA band.
   Loaded on all pages; page-specific rules live in pages/*.css.
   =========================================================================== */

/* ══ Page hero ═════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
  background: var(--surface-sunken);
  border-block-end: 1px solid var(--c-border);
}

.page-hero__wash {
  position: absolute;
  z-index: -1;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: 40rem;
  block-size: 40rem;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgb(var(--rgb-accent) / 0.22) 0%, transparent 68%);
  pointer-events: none;
}

.page-hero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }

@media (min-width: 64rem) {
  .page-hero--media .page-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
  }
  .page-hero--media .breadcrumb { grid-column: 1 / -1; }
}

.page-hero__content { max-inline-size: 40rem; display: flex; flex-direction: column; gap: var(--sp-4); }
.page-hero__lede { max-inline-size: 36rem; }
.page-hero__actions { margin-block-start: var(--sp-3); }

.page-hero__media .media {
  border-radius: var(--r-2xl);
  aspect-ratio: 4 / 3;
  box-shadow: var(--sh-lg);
}

/* ══ Breadcrumb ════════════════════════════════════════════════════════════ */
.breadcrumb { margin-block-end: var(--sp-5); }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
}
.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--sp-2);
  color: var(--ink-300);
}
/* Padded to a real hit area. A breadcrumb link is legitimately small type,
   but at its natural 18px line box it was the only tap target on any of
   these pages under the 44px minimum; the padding is vertical only and
   pulled back out with a negative margin so it doesn't change the rhythm
   between the breadcrumb and the heading beneath it. */
.breadcrumb a {
  display: inline-block;
  padding-block: var(--sp-3);
  margin-block: calc(var(--sp-3) * -1);
  color: var(--c-text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--brand-700); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-700); font-weight: var(--fw-medium); }

/* ══ Document layout — sticky nav beside the content ═══════════════════════ */
.doc-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 64rem) {
  .doc-layout { grid-template-columns: 15rem minmax(0, 1fr); }
}

.doc-nav { display: none; }

@media (min-width: 64rem) {
  .doc-nav { display: block; }
  .doc-nav__inner {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sp-6));
    max-block-size: calc(100svh - var(--header-h) - var(--sp-8));
    overflow-y: auto;
  }
}

.doc-nav__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin-block-end: var(--sp-4);
}

.doc-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* The rail sits on the inline-start edge and flips for RTL automatically */
  border-inline-start: 2px solid var(--c-border);
}

.doc-nav__link {
  display: block;
  padding-block: var(--sp-2);
  padding-inline: var(--sp-4);
  margin-inline-start: -2px;
  border-inline-start: 2px solid transparent;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.doc-nav__link:hover { color: var(--brand-700); }
.doc-nav__link.is-current {
  color: var(--brand-800);
  font-weight: var(--fw-semibold);
  border-inline-start-color: var(--accent-400);
}

.doc-content { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); min-inline-size: 0; }

/* .section-head carries its own bottom margin for the usual case where it
   sits directly inside a .section. .doc-content is a flex column that
   already spaces its children, so the two added up — measured 99px between
   the Laboratory heading block and the first accordion, against the 51px
   this rhythm uses everywhere else. The flex gap alone is the right amount. */
.doc-content > .section-head { margin-block-end: 0; }


/* ══ Closing CTA band ══════════════════════════════════════════════════════ */
.cta-band {
  position: relative;
  overflow: clip;
  background: var(--brand-900);
  color: var(--c-text-invert);
}
/* h1-h4 and .lede set their own (light-surface) colour elsewhere in the
   system, so they don't just inherit this section's white — same fix as
   .section--brand, restated here because .cta-band is used standalone. */
.cta-band h2, .cta-band h3 { color: var(--c-text-invert); }
.cta-band .lede { color: var(--brand-100); }
.cta-band .eyebrow { color: var(--brand-200); }
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 56rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); }
}
/* min-inline-size: 0 on both. They are grid items, so each defaults to a
   min-content floor — and with a long CTA label inside .cta-band__actions
   that floor was 368px against a 360px phone, dragging the text column out to
   the same width and pushing both past the screen edge. Measured on the
   Georgian Laboratory page. */
.cta-band__text {
  max-inline-size: 34rem;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.cta-band__actions { flex-wrap: wrap; min-inline-size: 0; }
.cta-band__actions .btn a { direction: ltr; unicode-bidi: isolate; }

/* ══ Accordion — a styled <details>, not the browser default ═══════════════
   For long catalogues (a test category can run 40 items deep) that should
   start collapsed rather than dumping everything on the page at once. */
.accordion {
  /* The doc-nav rail jumps to these by #id; without the offset the sticky
     header lands on top of the summary you just jumped to. Set here rather
     than as an inline style on every <details> in the template. */
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-4));
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-raised);
}
.accordion + .accordion { margin-block-start: var(--sp-3); }
.accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-semibold);
  color: var(--ink-800);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ""; }
.accordion__summary:hover { background: var(--brand-50); }
.accordion__count {
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
}
.accordion__chevron {
  margin-inline-start: auto;
  color: var(--ink-400);
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.accordion[open] .accordion__chevron { transform: rotate(180deg); }
.accordion__body {
  padding: 0 var(--sp-5) var(--sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-2) var(--sp-5);
}
.accordion__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
}
.accordion__item::before {
  content: "";
  inline-size: 0.3rem;
  block-size: 0.3rem;
  border-radius: var(--r-full);
  background: var(--accent-500);
  flex-shrink: 0;
}

/* ══ Numbered steps ══════════════════════════════════════════════════════ */
.steps { display: flex; flex-direction: column; gap: var(--sp-5); list-style: none; padding: 0; }
.steps__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); }
.steps__number {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-full);
  background: var(--brand-700);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}
.section--brand .steps__number,
.on-dark .steps__number { background: var(--accent-400); color: var(--ink-900); }
.steps__text { padding-block-start: 0.45rem; line-height: var(--lh-relaxed); }


/* ══ Long-form prose ═══════════════════════════════════════════════════════
   The About, Services-ethics and Laboratory-capabilities bodies are plain
   admin textareas: several paragraphs separated by newlines, rendered with
   white-space: pre-line. Previously they went out as one `.lede`, which
   sets a lede's size and colour on what is really body copy — three or four
   paragraphs at 19px in muted grey. This gives them a real measure, real
   paragraph rhythm, and body-text colour. */
.prose {
  max-inline-size: 38rem;
  white-space: pre-line;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
}
.prose--wide { max-inline-size: 46rem; }
.section--brand .prose, .on-dark .prose { color: var(--brand-100); }

/* A short line of type that opens a band — one notch above body copy but
   below a heading. Used for the "what a home visit is" summary. */
.standfirst {
  max-inline-size: 34rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--c-text);
}
.section--brand .standfirst, .on-dark .standfirst { color: #fff; }


/* ══ Pull-quote / callout ══════════════════════════════════════════════════
   A single fact worth stopping on — the home-visit call-out fee, the
   welfare pledge. Accent rail on the inline-start edge, so it flips in RTL. */
.callout {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  border: 1px solid var(--c-border);
  border-inline-start: 4px solid var(--accent-400);
  box-shadow: var(--sh-sm);
}
.callout__icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--accent-100);
  color: var(--accent-800);
}
.callout__text { display: flex; flex-direction: column; gap: var(--sp-1); min-inline-size: 0; }
.callout__title { font-weight: var(--fw-semibold); color: var(--ink-800); }
.callout__body { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: var(--lh-relaxed); }
.section--brand .callout, .on-dark .callout {
  background: rgb(var(--rgb-white) / 0.07);
  border-color: rgb(var(--rgb-white) / 0.16);
  box-shadow: none;
}
.section--brand .callout__title, .on-dark .callout__title { color: #fff; }
.section--brand .callout__body, .on-dark .callout__body { color: var(--brand-100); }


/* ══ Service groups ════════════════════════════════════════════════════════
   Was: icon + h2 in a flex row, then a bare two-column checklist, with a
   hand-drawn <div> rule between groups. Now each group is a card, so the
   page reads as a set of things rather than one long undifferentiated list. */
.svc-group {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-5));
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.svc-group:hover { box-shadow: var(--sh-md); border-color: var(--c-border-strong); }
.svc-group__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
}
/* min-inline-size: 0 so the title yields to the row rather than setting its
   own min-content as a floor — "ლაბორატორიული დიაგნოსტიკა" beside a nowrap
   count overran the card by 15px at 360px otherwise. */
.svc-group__head h2 { margin: 0; font-size: var(--fs-xl); min-inline-size: 0; }
.svc-group__count {
  margin-inline-start: auto;
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  white-space: nowrap;
}
.svc-group__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-2) var(--sp-5);
}


/* ══ Team ══════════════════════════════════════════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-5);
}
.team-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: clip;
  background: var(--surface-raised);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.team-card__photo { aspect-ratio: 3 / 4; object-fit: cover; inline-size: 100%; display: block; background: var(--surface-sunken); }
.team-card__photo--empty { display: grid; place-items: center; color: var(--ink-300); }
.team-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.team-card__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--ink-900); }
.team-card__role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-600);
}
.team-card__bio { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--c-text-muted); }


/* ══ Empty state ═══════════════════════════════════════════════════════════
   Shown where content is genuinely not there yet (no team profiles, no
   photos). A dashed box that says so beats a section that silently vanishes
   and leaves an unexplained gap in the page's rhythm. */
.empty-state {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-xl);
  color: var(--c-text-subtle);
  background: var(--surface-sunken);
}
.empty-state svg { color: var(--ink-300); }


/* ══ Contact ═══════════════════════════════════════════════════════════════ */
.contact-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 60rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--sp-7);
    /* Stretch, not start: the map is a fixed 4:3 box and the details panel
       is as tall as its content, so at `start` the two columns ended at
       different heights (measured 480px against 575px) and the block read as
       misaligned. Stretching lets the map take the row's full height. */
    align-items: stretch;
  }
}

.contact-map {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 20rem;
  aspect-ratio: 4 / 3;
  border: 0;
  display: block;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
@media (min-width: 60rem) { .contact-map { aspect-ratio: auto; min-block-size: 30rem; } }
.contact-map--placeholder {
  display: grid;
  place-items: center;
  background: var(--surface-sunken);
  color: var(--ink-300);
  border: 1px solid var(--c-border);
}

.contact-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
}

/* Every line here is a tap target on a phone, so each is a real 48px row
   rather than a paragraph with a link somewhere inside it. */
.contact-methods { display: flex; flex-direction: column; gap: var(--sp-1); }
.contact-method {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-block-size: 3rem;
  padding: var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
a.contact-method:hover { background: var(--brand-50); }
.contact-method__icon {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--brand-50);
  color: var(--brand-700);
}
.contact-method--urgent .contact-method__icon { background: var(--danger-50); color: var(--danger-600); }
.contact-method__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.contact-method__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.contact-method__value {
  font-weight: var(--fw-medium);
  color: var(--ink-800);
  overflow-wrap: anywhere;
}
/* Phone numbers are LTR even on an RTL page — "+995 599 99 64 87" reordered
   by the bidi algorithm is a different, unreachable number. */
.contact-method__value--tel { direction: ltr; unicode-bidi: isolate; }


/* ══ Opening hours ═════════════════════════════════════════════════════════ */
.hours { display: flex; flex-direction: column; }
.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  border-block-end: 1px solid var(--c-border);
}
.hours__row:last-child { border-block-end: 0; }
.hours__row.is-today { color: var(--ink-900); font-weight: var(--fw-semibold); }
.hours__time { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.hours__row--closed .hours__time { color: var(--c-text-subtle); font-weight: var(--fw-regular); }

.hours-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.hours-status--open { background: var(--sage-100); color: var(--sage-800); }
.hours-status--closed { background: var(--ink-50); color: var(--ink-600); }
.hours-status__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--r-full); background: currentColor; flex-shrink: 0; }
.hours-status--open .hours-status__dot { background: var(--sage-600); }


/* ══ Text band ═════════════════════════════════════════════════════════════
   Heading on one side, the passage on the other, the heading sticking while
   its own text scrolls past. Used for the About page's philosophy/welfare
   passages and the Laboratory capabilities note — several hundred words that
   were previously a full-width h2 with a full-width paragraph under it,
   repeated, which is what made those pages read as a document dump. */
.text-band { display: grid; gap: var(--sp-5); }
.text-band__head { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 60rem) {
  .text-band {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .text-band__head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sp-6));
  }
}
.text-band__body { display: flex; flex-direction: column; gap: var(--sp-5); min-inline-size: 0; }


/* ══ Error pages (404 / 403) ═══════════════════════════════════════════════
   Centred, narrow, and deliberately calm. Someone landing here has already
   hit a small failure; the page's job is to look like a considered part of
   the site rather than a crash, and to hand them the two or three routes
   they were probably after. The 500 page shares this look but carries its
   own inline copy of it — see templates/500.html for why it can't use this
   file at all. */
.error-page { text-align: center; }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  /* Decorative, and deliberately low-contrast: it labels the page for
     someone who already knows what a 404 is, and must not compete with the
     sentence that actually explains what happened. aria-hidden in the
     template keeps it out of the screen-reader's path entirely. */
  color: var(--ink-200);
  margin: 0 0 var(--sp-3);
}
.error-page h1 { margin-block-end: var(--sp-3); }
.error-page .lede { margin-inline: auto; max-inline-size: 46ch; }
.error-page__actions { justify-content: center; margin-block-start: var(--sp-6); }

.error-page__links { margin-block-start: var(--sp-8); }
.error-page__links-title {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin-block-end: var(--sp-3);
}
.error-page__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
}
/* 44px tap targets, same floor as the footer's link lists — this row wraps
   to two lines on a phone and the links end up close together. */
.error-page__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--c-text-muted);
}
.error-page__links a:hover { color: var(--c-text); }

.error-page__urgent {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--c-border);
  color: var(--c-text-subtle);
  font-size: var(--fs-sm);
}
.error-page__urgent a {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  /* Same isolation as the footer's number: digits and "+" have no strong
     direction of their own and would otherwise be reordered in fa/he. */
  unicode-bidi: isolate;
}