/* s4 — 賦能媽媽 / Aimeee Club. Boxes from spec/section-club.json (page y minus 3250).
   Type: explicit family / weight / size / lineHeightPx per node, no inheritance shortcuts. */

/* --- eyebrow pill ------------------------------------------------------- */
#s4 .s4-eyebrow {
  font-family: var(--font-zh);
  font-weight: 500;
  font-size:calc(26px * var(--ts, 1));
  line-height:calc(31.2px * var(--ts, 1));
  letter-spacing:calc(0.52px * var(--ts, 1));
  text-align: center;
  color: #54565b;
}

/* --- bilingual headline (one Figma text node, two styled runs) ----------- */
#s4 .s4-head {
  font-family: var(--font-en);
  font-weight: 700;
  font-size:calc(66px * var(--ts, 1));
  line-height:calc(70px * var(--ts, 1));
  letter-spacing: 0;
  text-align: center;
  background: linear-gradient(90deg, #fe884a 0%, #ff6666 50%, #895ab7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* run 1 (the leading space of line 2): Noto Sans HK 700 at the inherited 66px. line-height:0 keeps
   its taller ascent from raising the line box, which otherwise drops line 2 by 6px. */
#s4 .s4-head-sp { font-family: var(--font-zh); font-weight: 700; line-height: 0; }
/* run 2: Noto Sans HK 700 48 / 70 */
#s4 .s4-head-zh { font-family: var(--font-zh); font-weight: 700; font-size:calc(48px * var(--ts, 1)); line-height:calc(70px * var(--ts, 1)); }

/* --- programme pills ---------------------------------------------------- */
#s4 .s4-pill {
  border: 1px solid #000000;   /* Figma strokeAlign INSIDE, weight 1 */
  border-radius: 61px;
}
#s4 .s4-label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size:calc(42px * var(--ts, 1));
  line-height:calc(120px * var(--ts, 1));          /* Figma lineHeightPx; centres the run in the 79px pill */
  letter-spacing: 0;
  text-align: center;
}

/* --- circular photos ---------------------------------------------------- */
#s4 .s4-clip {
  border-radius: 50%;
  overflow: hidden;
}
#s4 .s4-fill { position: absolute; }
#s4 .s4-fill img { position: absolute; }
#s4 .s4-ring { pointer-events: none; }

/* 1:65095 — grey circle, MULTIPLY, fill-opacity .4, layer opacity .85.
   Not inside the clip group in Figma, so it also darkens the lilac panel behind. */
#s4 .s4-scrim {
  border-radius: 50%;
  background: rgba(96, 96, 96, 0.4);
  opacity: 0.85;
  mix-blend-mode: multiply;
}

/* 1:65089 — star. The exported SVG carries its drop-shadow, so the anchored box is a
   wrapper at the node bounds and the art overhangs it by the render-bounds delta. */
#s4 .s4-art img { position: absolute; }

/* --- body copy ---------------------------------------------------------- */
#s4 .s4-body {
  font-weight: 500;
  font-size:calc(26px * var(--ts, 1));
  line-height:calc(35px * var(--ts, 1));
  letter-spacing: 0;
  text-align: center;
  color: #54565b;
}
#s4 .s4-body-en { font-family: var(--font-en); }
#s4 .s4-body-zh { font-family: var(--font-zh); }

/* U+0003 in 1:65189. Figma draws it zero-width and does NOT break the line there;
   it is kept in the DOM so the string stays byte-equal to spec/strings.json. */
#s4 .s4-etx { font-size: 0; line-height: 0; }

/* 1:65190 run 0 "Aimeee Club Community " is Figtree 600; the node default is Noto Sans HK 500.
   line-height:0 keeps the Figtree inline box from growing the fixed 50px line box (3px per line). */
#s4 .s4-closing-en { font-family: var(--font-en); font-weight: 600; line-height: 0; }
#s4 .s4-closing {
  font-family: var(--font-zh);
  font-weight: 500;
  font-size:calc(38px * var(--ts, 1));
  line-height:calc(50px * var(--ts, 1));
  letter-spacing: 0;
  text-align: center;
  color: #54565b;
}