/* ═══════════════════════════════════════════════════════════════════════════
   Fun-Tastic 悠樂長 · pages/eyecare.css
   Page-only styles for EyeCare 365. Not in a cascade layer, so it wins over the design
   system; everything is scoped to .page--eyecare and nothing shared is restyled.
   The two data figures have their own stylesheet (src/css/figures.css).

   Contents
     1  Hero: the lens              5  Nine stations, and since
     2  Why it matters              6  Young people run the cameras
     3  How the screening works     7  With Lions Clubs
     4  Macau in numbers            8  Important note      9  Action

   Photographs: every size here is 34rem or less, so each picture is sharp from the 960px
   files and simply sharper from the 1600px ones (picture() builds the srcset from photos.json).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────── 1 Hero: the lens ──
   A circular photograph inside two rings, like a camera lens seen from the front, and a
   smaller photograph leaning into it (the two figures of the logo). eyecare.js opens the
   glass like an aperture; without scripts or motion it is simply open. */
.page--eyecare .ec-hero .page-hero__art { max-inline-size: 34rem; }
@media (min-width: 56rem) {
  .page--eyecare .ec-hero .page-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.page--eyecare .ec-lensduo { margin: 0; gap: 1.25rem; }
.page--eyecare .ec-lensduo__stage { position: relative; aspect-ratio: 1 / .92; isolation: isolate; }
.page--eyecare .ec-lens {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 78%;
  aspect-ratio: 1;
  padding: 5%;                                   /* the housing shows as a ring around the glass */
  border-radius: 50%;
  background: var(--white-a08);
  box-shadow: inset 0 0 0 2px var(--white-a24);
}
.page--eyecare .ec-lens::before {                /* the outer ring */
  content: "";
  position: absolute;
  inset: -4.5%;
  border: 2px solid var(--white-a14);
  border-radius: 50%;
  pointer-events: none;
}
.page--eyecare .ec-lens__glass { inline-size: 100%; block-size: 100%; background: var(--white-a14); }
.page--eyecare .ec-lensduo__small {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: 1;
  inline-size: 44%;
  box-shadow: 0 0 0 clamp(6px, 1vw, 12px) var(--bg);
}
.page--eyecare .ec-lensduo__caption { max-inline-size: 26em; }
/* The glass waits for eyecare.js (data-reveal-manual). Should that file never arrive, it opens by itself. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ft-failsafe) .page--eyecare .ec-lens__glass:not(.is-in) { animation: ec-lens-rescue .6s 3.6s both; }
}
@keyframes ec-lens-rescue {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ───────────────────────────────────────────────── 2 Why it matters ──
   Two paragraphs, set large and calm, beside an eye drawn from the brand's two arcs. */
.page--eyecare .ec-why__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.page--eyecare .ec-why__art { inline-size: min(100%, 15rem); }
.page--eyecare .ec-eye { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.page--eyecare .ec-eye :is(.ec-eye__lid, .ec-eye__iris) {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.page--eyecare .ec-eye .ec-eye__lid--over { stroke: var(--orchid); }
.page--eyecare .ec-eye .ec-eye__lid--under { stroke: var(--mint); }
.page--eyecare .ec-eye__pupil { fill: var(--indigo); }
[dir="rtl"] .page--eyecare .ec-eye { transform: scaleX(-1); }   /* orchid stays on the start side, as on the bridge */
.page--eyecare .ec-why__text { display: grid; gap: 1.35rem; }
.page--eyecare .ec-why__first {
  max-inline-size: 30em;
  color: var(--heading);
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  line-height: calc(var(--lh-sub) + .14);
}
.page--eyecare .ec-why__second { max-inline-size: 34em; }
@media (min-width: 56rem) {
  .page--eyecare .ec-why__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .page--eyecare .ec-why__art { inline-size: min(100%, 22rem); justify-self: center; }
}

/* ──────────────────────────────────────── 3 How the screening works ──
   The four steps are the shared .steps component; each gets a small drawing of its own.
   Then the photographs, the three facts as icon circles, and two quiet lines. */
.page--eyecare .ec-ico :is(path, circle, rect, line) { vector-effect: non-scaling-stroke; }   /* 1.75px at any size, like the sprite icons */
.page--eyecare .ec-steps__icon { margin-block-end: .5rem; }
/* four steps: one column, two by two, or four across. Never three and one left over. */
@media (min-width: 40rem) { .page--eyecare .ec-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .page--eyecare .ec-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page--eyecare .ec-how__more { margin-block-start: clamp(3.5rem, 2rem + 5vw, 6rem); }
.page--eyecare .ec-facts { display: grid; gap: 1rem; }
.page--eyecare .ec-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; max-inline-size: none; }
@media (min-width: 40rem) {
  .page--eyecare .ec-facts { gap: 1.5rem 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page--eyecare .ec-fact { grid-template-columns: minmax(0, 1fr); gap: .8rem; justify-items: start; align-content: start; }
}
.page--eyecare .ec-fact__text {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  text-wrap: balance;
}
/* Chinese: a short label breaks at its comma, not inside a word ("免散瞳，/ 毋須滴眼藥水") */
.page--eyecare .ec-fact__text:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
.page--eyecare .ec-how__paired {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  max-inline-size: none;
  padding: 1rem 1.25rem;
  border-radius: var(--r-row);
  background: var(--row);
}
/* The certification line: set apart and quiet. One element, one key (see the template). */
.page--eyecare .ec-how__equipment {
  max-inline-size: 36em;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
  color: var(--fg-muted);
  font-size: var(--fs-small);
}
@media (max-width: 55.99rem) {
  .page--eyecare .ec-how__photos { max-inline-size: 30rem; }
}

/* ──────────────────────────────────────────────── 4 Macau in numbers ──
   Intro, photograph and figure share one grid. Phones: one after the other. From 56rem the
   photograph sits beside the intro; from 72rem it moves down beside the figure, where the
   figure leaves room for it: the hall next to the crowd of dots. */
.page--eyecare .ec-macau__grid { display: grid; gap: var(--space-xl) var(--space-xl); }
.page--eyecare .ec-macau__grid > * { min-inline-size: 0; }
.page--eyecare .ec-macau__intro { display: grid; gap: var(--space-s); align-content: start; }
.page--eyecare .ec-macau__photo { inline-size: min(100%, 20rem); }
@media (min-width: 56rem) {
  .page--eyecare .ec-macau__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    grid-template-areas: "intro photo" "figure figure";
    align-items: center;
  }
  .page--eyecare .ec-macau__intro { grid-area: intro; }
  .page--eyecare .ec-macau__photo { grid-area: photo; justify-self: end; }
  .page--eyecare .ec-macau__figure { grid-area: figure; }
}
@media (min-width: 72rem) {
  .page--eyecare .ec-macau__grid { grid-template-areas: "intro intro" "figure photo"; align-items: start; row-gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
}
@media (min-width: 80rem) {
  .page--eyecare .ec-macau__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
  .page--eyecare .ec-macau__photo { inline-size: 100%; }
}

/* ───────────────────────────────────────── 5 Nine stations, and since ── */
.page--eyecare .ec-stations__head {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  align-items: end;
  margin-block-end: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
}
.page--eyecare .ec-stations__intro { display: grid; gap: var(--space-s); }
.page--eyecare .ec-stations__count { max-inline-size: 17rem; }
@media (min-width: 56rem) {
  .page--eyecare .ec-stations__head { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Ma On Shan runs wide; Mong Kok leans into its square corner, like the two figures of the logo. */
.page--eyecare .ec-stations__photos {
  display: grid;
  gap: var(--space-l);
  align-items: end;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.page--eyecare .ec-stations__wide > .frame { --ar: 3 / 2; }
.page--eyecare .ec-stations__small { inline-size: min(100%, 22rem); }
@media (min-width: 56rem) {
  /* The smaller photograph hangs a little lower than the wide one and covers its square corner
     (the same step as the shared .frame-pair). Both sizes follow the container, so the
     percentages hold at every width. */
  .page--eyecare .ec-stations__photos { grid-template-columns: minmax(0, 9fr) minmax(0, 4fr); gap: 0; align-items: start; isolation: isolate; }
  .page--eyecare .ec-stations__wide > .frame { --ar: 16 / 9; }
  .page--eyecare .ec-stations__wide > figcaption { max-inline-size: 60%; }
  .page--eyecare .ec-stations__small { z-index: 1; gap: 1.5rem; inline-size: 122%; margin-inline-start: -22%; margin-block-start: 48%; }
  .page--eyecare .ec-stations__small > .frame { box-shadow: 0 0 0 clamp(6px, 1vw, 12px) var(--bg); }
}

/* "And since": three more stops in date order, on a short line of their own, drawn like the
   map above without pretending to be on it. The line runs down from stop to stop and arrives
   at the last one, the latest and the largest day since spring: an indigo panel with its
   photograph and its counted number. The first two stay quiet rows. */
.page--eyecare .ec-since {
  --mark: 1.375rem;
  --thick: .375rem;
  --rail: 2.6rem;
  display: grid;
  gap: var(--space-l);
  margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.page--eyecare .ec-since__list { display: grid; gap: var(--space-l); isolation: isolate; }
.page--eyecare .ec-since__stop { position: relative; max-inline-size: none; }
.page--eyecare .ec-since__stop:not(.ec-since__stop--latest) {
  display: grid;
  gap: .6rem var(--space-xl);
  align-items: start;
  padding-inline-start: var(--rail);
}
.page--eyecare .ec-since__stop:not(.ec-since__stop--latest)::before {   /* the stop */
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .3em;
  box-sizing: border-box;
  inline-size: var(--mark);
  block-size: var(--mark);
  border: .28rem solid var(--heading);
  border-radius: 50%;
  background: var(--bg);
}
.page--eyecare .ec-since__stop:not(.ec-since__stop--latest)::after {    /* the line on to the next stop */
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: calc((var(--mark) - var(--thick)) / 2);
  inset-block-start: calc(.3em + var(--mark) / 2);
  inline-size: var(--thick);
  block-size: calc(100% + var(--space-l));
  border-radius: var(--r-full);
  background: var(--heading);
}
.page--eyecare .ec-since__stop:nth-child(2)::after { block-size: calc(100% + var(--space-l) + 1.5rem); }   /* on, and in under the panel */
.page--eyecare .ec-since__where { display: grid; gap: .2rem; align-content: start; }
.page--eyecare .ec-since__what { display: grid; gap: .7rem; align-content: start; }
.page--eyecare .ec-since__name { font-size: var(--fs-sub); }
.page--eyecare .ec-since__date { color: var(--fg-muted); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.page--eyecare .ec-since__note { max-inline-size: 34em; color: var(--fg-muted); }
@media (min-width: 56rem) {
  .page--eyecare .ec-since__stop:not(.ec-since__stop--latest) { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .page--eyecare .ec-since__what { padding-block-start: .35rem; }
}

/* the latest stop */
.page--eyecare .ec-latest { display: grid; gap: var(--space-l) var(--space-xl); align-items: center; }
.page--eyecare .ec-latest > * { margin-block-start: 0; min-inline-size: 0; }
.page--eyecare .ec-latest__text { display: grid; gap: var(--space-m); align-content: start; }
.page--eyecare .ec-latest .ec-since__name {
  font-size: var(--fs-section);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.page--eyecare .ec-latest .ec-since__date { font-size: var(--fs-lead); }
.page--eyecare .ec-latest .ec-since__note { max-inline-size: 28em; color: var(--fg); }
.page--eyecare .ec-latest .stat__label { color: var(--fg); font-size: var(--fs-lead); }
.page--eyecare .ec-latest__photo { inline-size: min(100%, 32rem); }
@media (min-width: 56rem) {
  .page--eyecare .ec-latest { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
  .page--eyecare .ec-latest__photo { justify-self: end; inline-size: 100%; }
}

/* ─────────────────────────────────── 6 Young people run the cameras ──
   The heart of the charity, on the young people's own colour. Text on mint is ink and indigo,
   never white. Two beats: what they do (led by a student at the controls, in a circle), then
   how they learn (the school training, its counted number, the volunteers who came through
   Time Auction), with two supporting pictures leaning together. */
.page--eyecare .ec-youth__text { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.page--eyecare .ec-youth__lead { inline-size: min(100%, 30rem); }
.page--eyecare .ec-youth__learn { margin-block-start: clamp(3rem, 2rem + 5vw, 6rem); }
.page--eyecare .ec-youth__stat { max-inline-size: 20rem; }
@media (min-width: 56rem) {
  .page--eyecare .ec-youth__lead { justify-self: end; }
}
@media (max-width: 55.99rem) {
  .page--eyecare .ec-youth__photos { max-inline-size: 30rem; }
}

/* ──────────────────────────────────────────────── 7 With Lions Clubs ── */
.page--eyecare .ec-lions__text { display: grid; gap: 1.35rem; }
.page--eyecare .ec-lions__photo { inline-size: min(100%, 34rem); }
/* The 1 June recognition: its photograph sits with the sentence it belongs to. */
.page--eyecare .ec-lions__thanks {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: center;
  padding: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  border-radius: var(--r-panel);
  background: var(--row);
}
.page--eyecare .ec-lions__thumb { inline-size: clamp(6.5rem, 4rem + 9vw, 10rem); }             /* a 320px file: a thumbnail */
.page--eyecare .ec-lions__thumb--large { inline-size: clamp(9rem, 5rem + 12vw, 15rem); }       /* a full-size file (the template reads photos.json) */
.page--eyecare .ec-lions__thankstext { display: grid; gap: .6rem; }
.page--eyecare .ec-lions__thumbcaption { color: var(--fg-muted); font-size: var(--fs-small); line-height: calc(var(--lh-text) - .2); }
@media (max-width: 36rem) {
  .page--eyecare .ec-lions__thanks { grid-template-columns: minmax(0, 1fr); }
  .page--eyecare .ec-lions__thumb--large { inline-size: min(100%, 18rem); }
}

/* ────────────────────────────────────────────────── 8 Important note ──
   Unmissable but not alarming: a whole band of calm ground, one large heading, plain sentences. */
.page--eyecare .ec-note__in { display: grid; gap: var(--space-l) clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.page--eyecare .ec-note__text { display: grid; gap: 1.2rem; }
.page--eyecare .ec-note__title { max-inline-size: 18em; }
.page--eyecare .ec-note__main {
  max-inline-size: 32em;
  color: var(--heading);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: calc(var(--lh-text) - .1);
}
.page--eyecare .ec-note__body { max-inline-size: 36em; }
@media (min-width: 48rem) {
  .page--eyecare .ec-note__in { grid-template-columns: auto minmax(0, 1fr); }
}

/* ────────────────────────────────────────────────────────── 9 Action ── */
.page--eyecare .ec-talk__text { display: grid; gap: 1.25rem; }
.page--eyecare .ec-talk__reach { display: grid; gap: .45rem; margin: 0; }
.page--eyecare .ec-talk__reach > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; }
.page--eyecare .ec-talk__reach dt { min-inline-size: 5.5rem; color: var(--fg-muted); font-size: var(--fs-small); }
.page--eyecare .ec-talk__reach dd { margin: 0; font-family: var(--font-latin); font-weight: var(--fw-strong); overflow-wrap: anywhere; }