/* Shared layout for the bespoke vocab lessons (cha-cai, chao-fan, xi-zhuang, …).
   Load AFTER base.css and BEFORE any page-specific stylesheet:
       base.css → lesson.css → <page>.css
   The vcard system itself lives in base.css; this file adds the recurring
   lesson furniture — voice-button groups, the step-flow diagram, comprehension
   questions, pull quotes and the hover-gloss passage. `.hl` here intentionally
   overrides base.css's red underline with gold, which relies on the load order
   above. */
:root { --scale: 1; }

/* ── Per-card voice group ───────────────────────── */
.vplay-group {
  display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.55rem;
}
.vplay-group .vplay {
  margin-top: 0;
  font-size: calc(0.68rem * var(--scale));
  padding: 0.15rem 0.55rem;
}

/* ── Process flow (the recipe/procedure as steps) ── */
.flow { display: flex; flex-direction: column; gap: 0; }
.flow-row { display: flex; align-items: stretch; }
.flow-row-rtl { flex-direction: row-reverse; }
.flow-turn { display: flex; justify-content: flex-end; color: var(--muted); padding: 0.2rem 0; font-size: 1.1rem; line-height: 1; }
.flow-step {
  flex: 1;
  background: white; border: 1px solid var(--border);
  border-radius: 8px; padding: 0.85rem 0.75rem; text-align: center;
}
.flow-step.accent { border-top: 3px solid var(--red); }
.flow-step.done   { border-top: 3px solid var(--green); }
.flow-arrow { flex: 0 0 auto; display: flex; align-items: center; padding: 0 0.4rem; color: var(--muted); }
.fh { font-size: 1.2rem; font-weight: 700; color: var(--navy); }
.fpy { display: none; font-size: 0.65rem; color: var(--red); margin-top: 0.1rem; }
body.show-py .fpy { display: block; }
.fe { font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }

/* ── Comprehension questions ───────────────────── */
.qlist { list-style: none; counter-reset: qc; }
.qitem {
  counter-increment: qc;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 1.1rem 1.1rem 1.1rem 3.5rem;
  margin-bottom: 0.9rem; position: relative;
}
.qitem::before {
  content: counter(qc);
  position: absolute; left: 1rem; top: 1rem;
  width: 1.8rem; height: 1.8rem;
  background: var(--red); color: white;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
}
.qzh { font-size: 0.97rem; font-weight: 500; }
.qpy { display: none; font-size: 0.75rem; color: #FF8FA0; margin-top: 0.2rem; }
body.show-py .qpy { display: block; }
.qhint { font-size: 0.76rem; color: rgba(255,255,255,0.45); margin-top: 0.4rem; font-style: italic; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 0.4rem; }

/* ── Pull quote ────────────────────────────────── */
.pullquote { border-left: 4px solid var(--gold); padding: 0.75rem 1.25rem; color: rgba(255,255,255,0.75); font-style: italic; font-size: 0.95rem; margin: 1.5rem 0; }

/* ── Passage highlight (hover for gloss) ───────── */
.passage { font-size: 1.05rem; line-height: 2.1; color: var(--ink); }
.passage p { margin-bottom: 1.25rem; }
.hl { border-bottom: 2px solid var(--gold); cursor: help; position: relative; }
.hl::after {
  content: attr(data-t);
  position: absolute; left: 50%; bottom: 135%; transform: translateX(-50%);
  background: var(--navy); color: white; font-size: 0.72rem; white-space: nowrap;
  padding: 0.25rem 0.5rem; border-radius: 4px; opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 5;
}
.hl:hover::after { opacity: 1; }

/* ── The cook, in real photos (step strip) ───────── */
.cook-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  container-type: inline-size;   /* sequences span by the strip's own column count */
}
.cook-fig {
  background: white; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.cook-fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--navy);
}
/* A step told as a before→after sequence: one figure, 2–3 frames side by side.
   Spans two strip columns once the strip has two (2 × 210px + 1rem gap = 436px);
   a single column on phones. */
.cook-seq-imgs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; background: var(--border);
}
@container (min-width: 436px) { .cook-seq { grid-column: span 2; } }
/* .cook-stack: the frames stacked in one column, two rows tall, for a pair that
   would otherwise leave a hole (e.g. after two singles, before a wide sequence).
   Only at three columns (662px); below that it falls back to side by side. */
@container (min-width: 662px) {
  .cook-seq.cook-stack { grid-column: auto; grid-row: span 2; }
  .cook-stack .cook-seq-imgs { display: flex; flex-direction: column; flex: 1; }
  .cook-stack .cook-seq-imgs img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}
/* Three frames across two columns: go slightly portrait so the row height
   matches a single 4:3 frame beside it (3 × ⅔-width frames at 8:9 ≈ 4:3). */
.cook-seq-imgs img:first-child:nth-last-child(3),
.cook-seq-imgs img:first-child:nth-last-child(3) ~ img { aspect-ratio: 8 / 9; }
.cook-cap { padding: 0.7rem 0.85rem 0.9rem; }
.cook-step {
  font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 0.25rem;
}
.cook-zh { font-size: 1.15rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.cook-py { display: none; font-size: 0.72rem; color: var(--red); margin-top: 0.15rem; }
body.show-py .cook-py { display: block; }
.cook-en { font-size: 0.76rem; color: var(--muted); margin-top: 0.3rem; }