/* ==========================================================================
   Macallan UI Case dialog — Applied AI → Products, card 02.
   Prototyped in Playground/macallan-ui-case (rounds 1–5), merged 2026-09-28.
   --------------------------------------------------------------------------
   Loaded AFTER Main/applied-ai/styles.css. Nothing here is new visual
   language: every font, size, colour, radius and shadow below is lifted from
   one of two incumbent sources, noted inline.
     [AI]  Main/applied-ai/styles.css  → .inspiration-case* (Products modal)
     [WK]  Main/cases/gucci/detail.css + case-page.css (Works Case Detail)
   The dialog reuses the .inspiration-case-modal classes for its close button
   and scroller, then (round 2) overrides the shell to a full-viewport sheet.

   Responsive contract (RESPONSIVE.md): sizes are fluid clamp() tokens, the
   structural changes (1 → 2 columns, flow → sticky stack) are @container
   queries on the article's own width, and no @media query resizes anything.
   ========================================================================== */

/* [WK] The Works CJK display face, same file, CJK code points only.
   Registered at 400 (Applied AI headings are 400; Works registers 700 because
   its headings are 700). Headings only; body copy is on --sans, which now carries
   the same 思源黑体 via "Dunben Sans SC" (assets/fonts-cjk.css). */
@font-face{
  font-family:"Noto Sans SC";
  src:url("../assets/fonts/cjk/NotoSansSC-400.woff2?v=20261014-2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;
}

.macallan-case-modal{
  /* colour — all existing values */
  --mc-bg:#121314;                       /* [AI] --ink, [WK] --case-bg */
  --mc-ink:#f7f5f2;                      /* [AI][WK] --case-ink */
  --mc-muted:#a8a8a8;                    /* [AI] lead / function copy */
  --mc-soft:#929292;                     /* [WK] --case-muted */
  --mc-panel:#191919;                    /* [WK] --case-panel (Judgement card) */
  --mc-panel-line:#2a2a2a;               /* [WK] --case-line (card divider) */
  --mc-surface:#1c1c1c;                  /* [AI][WK] media ground */
  --mc-note-bg:rgba(18,19,20,.74);       /* [AI] close button ground */
  --mc-shadow:0 22px 54px rgba(0,0,0,.34);/* [WK] tilted card shadow */

  /* type — families */
  --mc-display-font:"Noto Sans SC",var(--serif);  /* serif Latin, WK CJK face */
  --mc-text-font:var(--sans);                     /* DunbenSans + system CJK */

  /* type — scale (existing sizes, interpolated instead of stepped) */
  --mc-card-title:clamp(38px,2.9vw,52px);          /* [WK] Judgement intro */
  --mc-card-sub:clamp(20px,1.1rem + .35vw,23px);   /* [WK] No.2 promoted kicker 23 / Challenge 20 */
  --mc-process:clamp(44px,5.3vw,84px);             /* [AI] Main Function Flow h3 */
  --mc-h4:clamp(28px,3vw,46px);                    /* [AI] function h4 */
  --mc-statement:clamp(20px,1.1rem + .35vw,23px);  /* [WK] Reflection 20 → 23 */
  --mc-body:clamp(16px,1.18vw,19px);               /* [AI] function copy */
  --mc-meta:clamp(13px,.8rem + .1vw,14px);         /* [WK] showcase hint 13/14 */
  --mc-label:16px;                                 /* [WK] .dv-case-small-title */

  /* space — the rhythm is carried by space now, not by rules */
  --mc-gutter:clamp(22px,4vw,74px);                /* [AI] (100% - clamp(44px,8vw,148px)) / 2 */
  --mc-measure:1280px;                             /* [AI] functions / [WK] media width */
  --mc-section:clamp(96px,11vw,184px);             /* between major blocks */
  --mc-step-gap:clamp(256px,28vw,464px);           /* between process stages (round 4: ×2 of round 3) */
  --mc-inner:clamp(56px,6.8vw,112px);              /* heading/copy → board (round 5: ×2) */
  --mc-gap:clamp(32px,5vw,86px);                   /* [AI] function column gap */
  --mc-stack:clamp(16px,2vw,28px);
  --mc-radius:12px;                                /* [WK] shared card radius */
  --mc-card-pad:clamp(24px,3.4vw,48px);            /* [WK] Judgement card 24 → 32 → 48 */

  /* card stack — [WK] --case-stack-* values */
  --mc-stack-top:clamp(92px,12svh,132px);
  --mc-stack-peek:18px;
  --mc-stack-travel:clamp(240px,34svh,420px);
  --mc-stack-hold:clamp(120px,18svh,220px);
  --mc-stack-min-scale:.94;
}

/* ---------- Full-viewport sheet (round 2) ----------
   A project-level case, not a quick look: the dialog covers the whole
   viewport, the backdrop is the page colour, and nothing of the page shows. */
.inspiration-case-modal.macallan-case-modal{
  position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;
}
.inspiration-case-modal.macallan-case-modal::backdrop{background:var(--mc-bg);backdrop-filter:none}
.macallan-case-modal .inspiration-case-modal__frame{box-shadow:none;border-radius:0}
/* The inherited close button drops to 42px on phones; RESPONSIVE.md asks for
   a 44px tap target at <=1024. Extend the hit area only, not the drawn circle. */
.macallan-case-modal .inspiration-case-modal__close::after{content:"";position:absolute;inset:-4px;border-radius:50%}

/* The scroller is also the query container for the article's structural
   changes. It is the article's width, not the viewport's, that decides. */
.mc{container:mc / inline-size}

.mc-wrap{width:min(100% - var(--mc-gutter) * 2,var(--mc-measure));margin-inline:auto}

/* ---------- Hero ----------
   Top title and lead reuse Inspiration Board's shared classes in styles.css,
   including the incumbent mobile type/spacing rules. Other Macallan headings
   retain the Works-derived display face and scale. */
.mc-hero{padding-block:clamp(92px,10vw,150px) 0;text-align:center}

/* ---------- Boards ----------
   Final images since 2026-09-29. Same width as the 16:9 placeholders they
   replaced (the .mc-wrap measure), but each board keeps its OWN aspect
   ratio — no forced 16:9 box, no object-fit crop. The img's width/height
   attributes reserve the right height before it loads, so taller boards
   (Design System, UX 02) simply make the page longer. */
.mc-board{
  position:relative;margin:0;overflow:hidden;border-radius:var(--mc-radius);
  background:var(--mc-surface);
}
.mc-board img{display:block;width:100%;height:auto}
/* Placeholder spec from V0.4, shown only while the board is a stand-in.
   Delete the <figcaption> when the real board lands. */
.mc-board__note{
  position:absolute;inset:auto clamp(10px,1.4vw,20px) clamp(10px,1.4vw,20px);
  width:fit-content;max-width:calc(100% - clamp(20px,2.8vw,40px));
  padding:6px 12px;border-radius:999px;background:var(--mc-note-bg);
  color:var(--mc-ink);font-family:var(--mc-text-font);font-size:var(--mc-meta);line-height:1.4;text-align:left;
}
.mc-boards{display:grid;gap:var(--mc-stack)}

/* ---------- Project Intent / My Workflow — [WK] Judgement cards ---------- */
.mc-duo{padding-top:var(--mc-section)}
.mc-duo__stack{display:grid;gap:var(--mc-stack)}
.mc-card{
  display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;
  border-radius:var(--mc-radius);background:var(--mc-panel);box-shadow:var(--mc-shadow);
  transform-origin:center top;
}
.mc-card__head{
  padding:var(--mc-card-pad);border-bottom:1px solid var(--mc-panel-line);
}
.mc-card__head h3{
  margin:0;color:var(--mc-ink);font-family:var(--mc-display-font);
  font-size:var(--mc-card-title);font-weight:400;line-height:1.02;letter-spacing:-.035em;
}
.mc-card__sub{
  margin:clamp(12px,1.2vw,18px) 0 0;color:var(--mc-muted);
  font-family:var(--mc-text-font);font-size:var(--mc-card-sub);font-style:italic;line-height:1.35;
}
.mc-card__body{display:flex;flex-direction:column;justify-content:center;padding:var(--mc-card-pad)}
/* Same size and leading as the Selected Process stage copy, as asked. */
.mc-card__body p{
  max-width:38em;margin:0;color:var(--mc-muted);
  font-family:var(--mc-text-font);font-size:var(--mc-body);line-height:1.65;text-wrap:pretty;
}

/* ---------- Selected Process ---------- */
.mc-process{padding-top:var(--mc-section)}
/* No text-wrap:balance here (2026-10-07). This title runs the shared
   Main-Title Animation, which splits it into inline-block word/char boxes
   carrying will-change:transform while they animate. Safari's balance pass
   over those atomic boxes mis-wraps "Selected Process" onto two lines, then
   re-lays it out as one line when the animation ends and will-change is
   dropped (~1.8s): a visible layout jump on iPhone. For a two-word title
   balance is a no-op anyway (fits → one line; doesn't → one word per line),
   and the Inspiration Board twin (.inspiration-case__functions>h3, same
   size/leading, no balance) never jumped. Don't add it back while the title
   is animated. */
.mc-process>.mc-wrap>h3{
  margin:0 0 var(--mc-section);font-size:var(--mc-process);line-height:.92;text-align:center;
}
.mc-steps{display:grid;gap:var(--mc-step-gap)}
.mc-step__head{margin-bottom:var(--mc-inner)}
/* A stage with no board (01) ends at its copy — no heading-to-board gap left
   hanging before the next stage. */
.mc-step__head:last-child{margin-bottom:0}
.mc-step h4{margin:0;font-family:var(--mc-display-font);font-size:var(--mc-h4);line-height:1.08;text-wrap:balance}
.mc-step__num{color:var(--mc-soft)}
.mc-step__copy{
  max-width:36em;margin:clamp(16px,1.6vw,22px) 0 0;color:var(--mc-muted);
  font-family:var(--mc-text-font);font-size:var(--mc-body);line-height:1.65;
}

/* ---------- Reflection — [WK] rule / small title / lead (the only rule) ---------- */
/* Closing space doubled in round 3 (was clamp(86px,10vw,160px)). */
.mc-reflection{padding-block:var(--mc-section) clamp(172px,20vw,320px)}
.mc-reflection__rule{height:1px;margin-bottom:clamp(32px,3vw,48px);background:var(--mc-ink)}
.mc-reflection__label{
  display:block;margin-bottom:clamp(28px,3vw,48px);color:var(--mc-ink);
  font-family:var(--mc-text-font);font-size:var(--mc-label);line-height:1;
}
.mc-reflection__lead{
  max-width:1120px;margin:0;color:var(--mc-ink);
  font-family:var(--mc-text-font);font-size:var(--mc-statement);line-height:1.65;text-wrap:pretty;
}

/* ---------- Structure 1: side-by-side stage heads once the article has room. */
@container mc (min-width:48rem){
  .mc-step__head{
    display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:var(--mc-gap);align-items:start;
  }
  /* Top-align the stage title and its copy on their first line of ink,
     not on their line boxes: each block gives up its own half-leading
     ((1em - 1lh) / 2), so the 46px title (lh 1.08) and the 19px copy
     (lh 1.65) start at the same visual top. */
  .mc-step__head>h4,
  .mc-step__copy{margin-top:calc((1em - 1lh) / 2)}
  /* Ink-level correction: the copy always opens with CJK, whose glyphs
     reach ~0.15em higher than Latin caps and lining figures. Stage titles
     that are Latin after the number (02–05) are nudged up by that amount so
     their cap line meets the copy's first line; 01 is CJK and needs none. */
  .mc-step__head--latin>h4{margin-top:calc((1em - 1lh) / 2 - .15em)}
  /* 01's title is CJK set in the Works Noto face, which reaches ~0.13em
     higher than the system CJK in the copy — nudge it down to match (measured). */
  .mc-step__head--cjk>h4{margin-top:calc((1em - 1lh) / 2 + .04em)}
  /* EN mode (2026-10-14): copy and titles are both Latin, so no ink-level
     nudge — the plain half-leading offset already lines up the caps.
     zh keeps the per-script corrections above (01/03–05 CJK, 02 Latin). */
  html:not([lang="zh-CN"]) .mc-step__head>h4{margin-top:calc((1em - 1lh) / 2)}
}

/* ---------- Structure 2: [WK] Judgement card layout + sticky stack.
   56rem of the ARTICLE (≈ a 1024px window; never a phone or portrait
   tablet). Below it the two cards are single-column and simply flow. The
   stack also needs vertical room — a card taller than the space under the
   pin line would have its last lines covered — hence the height guard. */
@container mc (min-width:56rem){
  .mc-card{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .mc-card__head{
    display:flex;flex-direction:column;justify-content:center;
    min-height:clamp(320px,28vw,400px);border-bottom:0;border-right:1px solid var(--mc-panel-line);
  }
}
@media (min-height:40rem){
  @container mc (min-width:56rem){
    .mc-duo__stack{display:block;padding-bottom:var(--mc-stack-hold)}
    .mc-card{
      position:sticky;top:var(--mc-stack-top);
      transform:scale(var(--mc-stack-scale,1));will-change:transform;
    }
    .mc-card+.mc-card{top:calc(var(--mc-stack-top) + var(--mc-stack-peek));margin-top:var(--mc-stack-travel)}
  }
}

@media (prefers-reduced-motion:reduce){
  .macallan-case-modal .reveal{opacity:1;transform:none;transition:none}
  .mc-card{transform:none!important}
}

/* zh phones (2026-10-14 pm): card titles (项目意图 / 我的工作流) and their
   subheads 2px smaller. */
@media (max-width:760px){
  html[lang="zh-CN"] .macallan-case-modal{
    --mc-card-title:calc(clamp(38px,2.9vw,52px) - 2px);
    --mc-card-sub:calc(clamp(20px,1.1rem + .35vw,23px) - 2px);
  }
}