/* ==========================================================================
   ANUPANA — pages.css
   --------------------------------------------------------------------------
   Layout patterns used by the inner pages only. Loaded after site.css on
   every page except the homepage and 404.

   Why a second stylesheet rather than growing site.css: the homepage's
   critical CSS stays exactly the size it was when it was measured, and the
   inner-page patterns can grow without the showpiece paying for them.

   Same rules as site.css — tokens only, logical properties only, and the
   same two declared exceptions (breakpoint literals in @media conditions,
   which custom properties cannot express). The strings "left" and "right"
   do not appear in this file.

   THE BRIEF FOR THIS FILE: every page must read as the same brand without
   repeating the homepage's layout. The shared parts are the chrome, the
   type scale, the palette and the page head. Everything below the page
   head is a pattern that appears on exactly one page.
   ========================================================================== */


/* ==========================================================================
   PAGE HEAD — the one shared inner-page device.
   Indented: label in the first two columns, title starting at column 3.
   Deliberately NOT the homepage arrangement (title 1–7 against a plate at
   9–12); an inner page announces itself by indentation instead.
   ========================================================================== */

.page-head {
  padding-block-start: var(--space-section);
  padding-block-end: var(--space-section-sm);
}

.page-head__label,
.page-head__title,
.page-head__lede { grid-column: 1 / -1; }

.page-head__title { margin-block-start: var(--sp-5); }
.page-head__lede { margin-block-start: var(--sp-7); }

.t-standfirst {
  font-family: var(--ff-display);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  max-inline-size: var(--measure-lede);
}


/* ==========================================================================
   SPACING UTILITIES — a short, closed set.
   These exist for a specific reason: the Content-Security-Policy in
   _headers sets style-src 'self', which blocks inline style attributes.
   A one-off vertical gap therefore cannot be written as style="..." and
   needs a class. Five values, no more; anything needing a sixth should
   become a real component instead.
   ========================================================================== */

.u-mt-4 { margin-block-start: var(--sp-4); }
.u-mt-5 { margin-block-start: var(--sp-5); }
.u-mt-6 { margin-block-start: var(--sp-6); }
.u-mt-8 { margin-block-start: var(--sp-8); }
.u-mt-9 { margin-block-start: var(--sp-9); }


/* ==========================================================================
   DEFLIST — hanging definition rows.        APPROACH ONLY
   ========================================================================== */

.deflist { border-block-start: var(--rule-weight-strong) solid var(--c-rule-strong); }

.deflist__row {
  display: grid;
  gap: var(--sp-3) var(--gutter);
  padding-block: var(--sp-7);
  border-block-end: var(--hairline) solid var(--c-rule);
}

.deflist__term {
  font-family: var(--ff-display);
  font-size: var(--fs-600);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.deflist__desc {
  margin: 0;
  color: var(--c-ink-muted);
  max-inline-size: var(--measure);
}


/* ==========================================================================
   STEPS — a process read across a rule.     APPROACH ONLY
   Reads as a sequence rather than a list: the numerals sit on a single
   horizontal rule, which is what separates it from the homepage index.
   ========================================================================== */

.steps { display: grid; gap: var(--sp-8) var(--gutter); }

.step {
  border-block-start: var(--rule-weight-strong) solid var(--c-rule-strong);
  padding-block-start: var(--sp-5);
}

.step__num {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-700);
  line-height: var(--lh-display);
  color: var(--c-ink-secondary);
  font-variant-numeric: tabular-nums;
}

.step__title {
  margin-block-start: var(--sp-4);
  font-family: var(--ff-display);
  font-size: var(--fs-500);
  line-height: var(--lh-heading);
  font-weight: var(--fw-display);
}

.step__text { margin-block-start: var(--sp-3); color: var(--c-ink-muted); }


/* ==========================================================================
   PLAINLIST — the negative space of the brand, on a deep ground.
   APPROACH ONLY
   ========================================================================== */

.plainlist { display: grid; }

.plainlist li {
  padding-block: var(--sp-5);
  border-block-end: var(--hairline) solid var(--c-rule-strong);
  max-inline-size: var(--measure-wide);
}

.plainlist li:first-child { border-block-start: var(--hairline) solid var(--c-rule-strong); }


/* ==========================================================================
   ENTRY — expanded therapy record, alternating sides.   THERAPIES ONLY
   The homepage compresses these into single rows; here each one is a
   full spread with its own plate and a specification list.
   ========================================================================== */

.entry { padding-block: var(--space-section-sm); }

.entry + .entry { border-block-start: var(--hairline) solid var(--c-rule); }

.entry__figure,
.entry__body { grid-column: 1 / -1; }

.entry__num {
  display: block;
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  color: var(--c-ink-secondary);
  font-variant-numeric: tabular-nums;
}

.entry__name {
  margin-block-start: var(--sp-3);
  font-family: var(--ff-display);
  font-size: var(--fs-700);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

.entry__text { margin-block-start: var(--sp-5); max-inline-size: var(--measure); }

.entry__spec {
  margin-block-start: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  max-inline-size: var(--measure);
}

.entry__spec-row {
  display: grid;
  gap: var(--sp-1) var(--sp-5);
  padding-block-start: var(--sp-3);
  border-block-start: var(--hairline) solid var(--c-rule);
}

.entry__spec-key {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-secondary);
}

.entry__spec-val { margin: 0; font-size: var(--fs-200); }

.entry__more { margin-block-start: var(--sp-6); }

.textlink {
  font-size: var(--fs-200);
  color: var(--c-accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-weight);
  text-underline-offset: var(--underline-offset);
  text-decoration-color: var(--c-rule);
  transition: text-decoration-color var(--dur-micro) var(--ease-out-slow);
}

.textlink:hover { text-decoration-color: currentColor; }


/* ==========================================================================
   LONGFORM — a reading page with a side rail.     PANCHAKARMA ONLY
   The only page on the site built for sustained reading, so it is the only
   one with a single measure column and a persistent rail.
   ========================================================================== */

.longform__rail,
.longform__body { grid-column: 1 / -1; }

.longform__body > * { max-inline-size: var(--measure); }

.longform__body h2 {
  margin-block-start: var(--sp-9);
  margin-block-end: var(--sp-5);
  font-size: var(--fs-700);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

.longform__body h3 {
  margin-block-start: var(--sp-7);
  margin-block-end: var(--sp-3);
  font-size: var(--fs-500);
  line-height: var(--lh-heading);
  font-weight: var(--fw-display);
}

.longform__body p + p { margin-block-start: var(--sp-5); }

.railnav { display: grid; gap: var(--sp-3); }

.railnav a {
  font-size: var(--fs-200);
  color: var(--c-ink-muted);
  text-decoration: none;
  padding-block: var(--sp-1);
  border-inline-start: var(--rule-weight-strong) solid var(--c-rule);
  padding-inline-start: var(--sp-4);
  transition: border-color var(--dur-micro) var(--ease-out-slow),
              color var(--dur-micro) var(--ease-out-slow);
}

.railnav a:hover { border-inline-start-color: var(--c-accent); color: var(--c-ink); }


/* ==========================================================================
   TIMETABLE — the shape of a day.                 PANCHAKARMA ONLY
   ========================================================================== */

.timetable {
  margin-block-start: var(--sp-6);
  border-block-start: var(--rule-weight-strong) solid var(--c-rule-strong);
  max-inline-size: var(--measure-wide);
}

.timetable__row {
  display: grid;
  gap: var(--sp-1) var(--sp-6);
  padding-block: var(--sp-5);
  border-block-end: var(--hairline) solid var(--c-rule);
}

.timetable__time {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-200);
  color: var(--c-ink-secondary);
}

.timetable__what { margin: 0; }


/* ==========================================================================
   NOTE — staircase entries.                           NOTES ONLY
   Each entry steps across the grid instead of stacking flush. This is the
   most openly asymmetric pattern on the site and it exists on one page.
   ========================================================================== */

.note { grid-column: 1 / -1; }

.note + .note { margin-block-start: var(--space-section-sm); }

.note__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-block-end: var(--sp-4);
  border-block-end: var(--hairline) solid var(--c-rule);
}

.note__title {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-700);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

.note__body { margin-block-start: var(--sp-5); }
.note__body p + p { margin-block-start: var(--sp-5); }


/* ==========================================================================
   LOCATOR — a schematic, not a map.                    VISIT ONLY
   Drawn entirely in CSS from palette tokens. There is no map embed, no
   tile request, and no real coordinate anywhere in this project.
   ========================================================================== */

.locator {
  position: relative;
  aspect-ratio: var(--ar-square);
  background-color: var(--c-surface-sunk);
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0, transparent var(--sp-9),
      var(--c-rule) var(--sp-9),
      var(--c-rule) calc(var(--sp-9) + var(--hairline))),
    repeating-linear-gradient(180deg,
      transparent 0, transparent var(--sp-9),
      var(--c-rule) var(--sp-9),
      var(--c-rule) calc(var(--sp-9) + var(--hairline)));
  overflow: hidden;
}

.locator__road {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--sp-9) * 2);
  inline-size: var(--sp-5);
  background-color: var(--c-surface);
  border-inline: var(--hairline) solid var(--c-rule);
}

.locator__road--cross {
  inset-inline: 0;
  inset-block-start: calc(var(--sp-9) * 2);
  inset-block-end: auto;
  inline-size: auto;
  block-size: var(--sp-5);
  border-inline: none;
  border-block: var(--hairline) solid var(--c-rule);
}

.locator__mark {
  position: absolute;
  inset-block-start: calc(var(--sp-9) * 2 + var(--sp-8));
  inset-inline-start: calc(var(--sp-9) * 2 + var(--sp-8));
  inline-size: var(--sp-5);
  block-size: var(--sp-5);
  border-radius: var(--radius-1);
  background-color: var(--c-marker-bg);
}

/* The address/schematic pair. Both get an explicit grid-row so the figure
   sits beside the text rather than being pushed to the next row by
   auto-placement — the source order is text-then-figure for reading, but
   the figure is placed in the earlier columns. */
.visit-detail__body,
.visit-detail__figure { grid-column: 1 / -1; }

.locator__caption {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-100);
  line-height: var(--lh-loose);
  color: var(--c-ink-secondary);
}


/* ==========================================================================
   SPEC — the austere two-column record.        ABOUT THIS DEMO ONLY
   No plates, no gradients, no motion flourish. The honesty page is set
   like a document on purpose.
   ========================================================================== */

.spec { border-block-start: var(--rule-weight-strong) solid var(--c-rule-strong); }

.spec__row {
  display: grid;
  gap: var(--sp-2) var(--gutter);
  padding-block: var(--sp-6);
  border-block-end: var(--hairline) solid var(--c-rule);
}

.spec__key {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-secondary);
}

.spec__val { margin: 0; max-inline-size: var(--measure); }
.spec__val p + p { margin-block-start: var(--sp-4); }

/* Browsers shrink the default monospace face, which would drop inline code
   below the 14px floor. Pinned to a token instead. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-200);
  background-color: var(--c-surface-sunk);
  padding-inline: var(--sp-2);
  border-radius: var(--radius-1);
}


/* ==========================================================================
   CTA — the closing strip, shared by every inner page.
   One of only two devices repeated across pages (the other is the page
   head). Repetition here is deliberate: the contact route must be in the
   same place on every page.
   ========================================================================== */

.cta__text,
.cta__action { grid-column: 1 / -1; }

.cta__action { align-self: center; margin-block-start: var(--sp-6); }


/* ==========================================================================
   ERROR PAGE
   ========================================================================== */

.error { padding-block: var(--space-section-lg); }
.error__code {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-secondary);
}
.error__title { margin-block-start: var(--sp-5); }
.error__text { margin-block-start: var(--sp-6); max-inline-size: var(--measure-lede); }
.error__actions { margin-block-start: var(--sp-8); }


/* ==========================================================================
   BREAKPOINTS — same two literals as site.css, same reason.
     48rem = 768px   ·   64rem = 1024px
   ========================================================================== */

@media (min-width: 48rem) {

  .page-head__label { grid-column: 1 / 3; }
  .page-head__title { grid-column: 3 / -1; margin-block-start: 0; }
  .page-head__lede { grid-column: 3 / 10; }

  .deflist__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .entry__figure { grid-column: 1 / 5; }
  .entry__body { grid-column: 6 / -1; }

  /* Alternating sides. Grid placement, not source order, so the DOM stays
     in reading order for keyboard and screen reader. */
  .entry:nth-of-type(even) .entry__figure { grid-column: 9 / -1; grid-row: 1; }
  .entry:nth-of-type(even) .entry__body { grid-column: 1 / 8; grid-row: 1; }

  .longform__rail { grid-column: 1 / 3; }
  .longform__body { grid-column: 4 / -1; }

  .timetable__row { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); }

  .note--a { grid-column: 1 / 9; }
  .note--b { grid-column: 5 / -1; }
  .note--c { grid-column: 3 / 11; }

  .spec__row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); }

  .entry__spec-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); }

  .cta__text { grid-column: 1 / 7; }
  .cta__action { grid-column: 8 / -1; margin-block-start: 0; }

  .visit-detail__figure { grid-column: 1 / 6; grid-row: 1; }
  .visit-detail__body { grid-column: 7 / -1; grid-row: 1; }
}

@media (min-width: 64rem) {

  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .longform__rail {
    position: sticky;
    inset-block-start: var(--sp-10);
    align-self: start;
  }

  .note--a { grid-column: 1 / 8; }
  .note--b { grid-column: 6 / -1; }
  .note--c { grid-column: 3 / 10; }
}