/* eyespecialist.sg — home-only additions, loaded after site.css
 * =======================================================================
 * Draft A's page-scoped sheet, the same arrangement hero4.css / hero5.css
 * use: site.css carries the system, this carries what only the homepage has.
 * Fold it into site.css once the other drafts are deleted and site.css stops
 * being shared with pages that do not want these rules.
 *
 * Every colour here resolves through a token from tokens.css. No inline hex,
 * oklch() or rgb() — that is the house rule and it has no exceptions.
 */

/* ---- Assurances strip — THE RULES LIVE IN site.css --------------------
 * See the block of the same name there. Only the page-specific override is
 * here: site.css closes the strip with a hairline, because a page without
 * the call to action below has nothing else ending it. This page's band IS
 * the boundary, and a hairline 1px under a hard dark edge is the
 * two-edges-together mistake. Restore both if the band ever goes back to
 * being the inset panel it was for one round.
 */
.assure {
  padding-bottom: 0;
  border-bottom: 0;
}

/* The surgeons open the specialists section, so they take .people's old spacing
 * rather than .pcp's hairline — the section head is already the boundary, and a
 * rule there would be two edges together. The physicians' block below keeps its
 * hairline, which is now the only one in the section and separates the tiers.
 *
 * ONE COLUMN AT EVERY WIDTH, because there are THREE of them: .pcp__list goes
 * 2-up at 60rem, which tiles for Bedok's two surgeons and leaves 2 + 1 with a
 * half-empty row here. Scoped to the surgeons so the physicians' pair still
 * takes the 2-up. */
.specialists .pcp--surgeons {
  margin-top: var(--space-xl);
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 60rem) {
  .specialists .pcp--surgeons .pcp__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* THREE COLUMNS FROM 64rem, because a stacked row wastes the width it just
 * bought. One column of surgeons means each row is ~920px wide at 1440, and
 * with name/role/creds/focus stacked in it the right two-thirds are empty and
 * the section runs ~300px TALLER than the 3-up cards it replaced. Sitting the
 * identity and the detail side by side puts the row's height back at the
 * portrait's own and pays that back.
 *
 * 64rem and not 48: at 768 the row is ~672px, so two text columns are ~235px
 * each and "Oculoplastics — eyelid, orbit and tear ducts" wraps to three
 * lines. Below this the areas stay stacked, which is .pcp__item's own shape. */
@media (min-width: 64rem) {
  .specialists .pcp--surgeons .pcp__item {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "photo ident detail";
    column-gap: var(--space-lg);
  }

  /* THE POINT OF THE ROWS IS LESS SCROLL, so the desktop row is cut to what it
   * needs. Three columns leave the text ~135px tall, so the PORTRAIT sets the
   * row height and it is the only lever that moves it: 176 → 156 takes 60px
   * off the section, and the 40px row-gap → 24 takes 32 more. Section 1501 →
   * 1409 at 1440, against the 4:3 cards' own 1441.
   *
   * 156 AND NOT 140. At 140 the row bottoms out at 146px — the text becomes
   * the constraint and a smaller portrait buys nothing — for 30px more, and it
   * would level the surgeons with the physicians' 140. That step is what is
   * left of the tier distinction now both tiers are rows.
   *
   * Scoped to 64rem because below it the rows are stacked and TEXT-bound
   * (259px at 768 against a 176px portrait), so neither value pays there — and
   * the wider gap is worth keeping where the rows are tall and uneven. */
  .specialists .pcp--surgeons {
    --pcp-photo: 156px;
  }

  .specialists .pcp--surgeons .pcp__list {
    row-gap: var(--space-lg);
  }
}

/* ======================================================================
 * .advice — "Looking for the best eye specialist in Singapore?"
 *
 * A prose band, built like .forty: tint and hairlines on the section, a
 * page-max shell inside. Nothing here is new type — the h2 is the section
 * scale every other band uses and the paragraphs are body text — because the
 * block earns its place on what it says, not on how it is set.
 *
 * The lede is one step up (--text-md) and carries the definition of "best",
 * which is the sentence a featured snippet or an AI Overview would lift. Keep
 * it first and keep it self-contained for that reason.
 * ====================================================================== */

.advice {
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-2xl);
}

.advice__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.advice__lede {
  max-width: var(--measure-lede);
  margin-top: var(--space-md);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink-2);
  font-variant-numeric: oldstyle-nums;
  text-wrap: pretty;
}

.advice__body {
  max-width: var(--measure);
  margin-top: var(--space-md);
  font-variant-numeric: oldstyle-nums;
  text-wrap: pretty;
}

/* 600 STATED, because `.hero__lede strong` is site.css's only strong rule and a
 * bare <strong> otherwise falls to the browser's 700 — a weight this site does
 * not load, so it renders as synthesised fake bold. Weight alone carries it
 * here: .advice__body is --color-ink already, so there is no colour step left
 * to take, unlike the hero lede's. */
.advice__body strong {
  font-weight: 600;
}

/* ----------------------------------------------------------------------
 * .advice__marks — two marks under the transparency sentence
 *
 * A row, not tiles. Three equal icon-tile columns are banned and a card
 * here would be a card inside a prose band; these sit inline, mark then
 * label, so they read as a caption the sentence above earns rather than
 * as a second component dropped into the band.
 *
 * SIZED UP FROM THE OBVIOUS 24-26, and that is the whole point of them:
 * at the conditions index's 26px beside a 13px muted label the pair read
 * as fine print and the band looked no more visual than before. 34px and
 * a 14.4px label in full ink is the smallest that reads as a mark rather
 * than a bullet. It is still the house stroke voice — 1.6, round caps,
 * accent — because a second weight beside the nine condition glyphs and
 * the three assurance marks is what makes a page look assembled.
 *
 * Tracking steps DOWN to 0.14em where .label uses 0.16. The token is set
 * for --text-xs; carried onto 14.4px text the same em value opens the
 * word past the point where it reads as one thing.
 *
 * gap is asymmetric on purpose — 2.5rem across, 1rem down — so that when
 * the row wraps below ~30rem the marks stack as a short list rather than
 * drifting into a loose column. Nothing here is clickable, so the 44px
 * floor does not apply.
 * -------------------------------------------------------------------- */

.advice__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-lg);
}

.advice__mark {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.advice__mark-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: 1.3;
}

.advice__icon {
  flex: none;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The band is already tall — numeral, table, coda and the screening panel — so
 * the photograph is capped well under .photoset--solo's 44rem: 24rem keeps it
 * a supporting picture and saves ~240px of scroll. The `sizes` on the <img>
 * is derived from this number; move both together. */
.forty .photoset--solo {
  max-width: 24rem;
}