/* ============================================================
   Case-study modules rebuilt from baked-text images as live HTML
   (Top Artist Campaign + SoundOn). Loaded after styles.css.
   Desktop mirrors the old Figma exports; tablet / phone reflow so
   every number and label stays readable.
   ============================================================ */
:root { --cm-gap: 14px; }
@media (max-width: 600px) { :root { --cm-gap: 12px; } }

/* Heading-less continuation blocks used to touch via the images' baked
   black margins — now that they're live cards, keep one card gap. */
.case-section--cont + .case-section--cont { padding-top: var(--cm-gap); }

/* ---------- Shared stat tile ---------- */
.cm-tile {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  padding: 18px 18px 20px;
  color: #1A1A1A;
  background: #fff;
  min-width: 0;
}
.cm-tile--green { background: #1ee890; }
.cm-tile--blue  { background: #0ba1ea; }
.cm-tile--empty { background: #111; }
.cm-tile__num {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cm-tile__lbl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.35;
}

/* ---------- Key Results: photo + 8 stat tiles ---------- */
.cm-kr {
  max-width: min(100%, 1152px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1454fr 1063fr;   /* photo : tile block, as in the export */
  gap: var(--cm-gap);
  container-type: inline-size;
}
.cm-kr__photo { display: block; aspect-ratio: 1454 / 1160; border-radius: var(--radius-md); overflow: hidden; background: #111; }
.cm-kr__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-kr__grid {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--cm-gap);
}
.cm-kr .cm-tile { padding: 14px 14px 16px; }
.cm-kr .cm-tile__lbl {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-small); line-height: 1.35; letter-spacing: 0; color: #1a1a1c;
}
.cm-kr .cm-tile__num { margin: auto 0; font-size: min(var(--fs-stat), 3.1cqw); }

/* ---------- TikTok TOP 10 Campaign List ---------- */
.cm-top10 {
  max-width: min(100%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 303fr 934fr;
  gap: var(--cm-gap);
  color: #fff;
}
.cm-top10__title,
.cm-top10__chart { background: #111; border-radius: var(--radius-md); }
.cm-top10__title { padding: 36px 26px 36px 30px; }
.cm-top10__title h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);   /* keeps "Campaign List" on one line down to 901px */
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.cm-top10__chart { padding: 56px 64px 40px 24px; display: flex; flex-direction: column; }
.cm-top10__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cm-top10__list li { display: flex; flex-direction: column; gap: 6px; }
.cm-top10__list span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.35;
  color: #e9e9ec;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cm-top10__list i {
  display: block;
  height: 12px;
  width: var(--w);
  border-radius: 2px;
  background: #e5b2f1;
  transform-origin: left center;
}
.cm-top10__list li.is-ref i { background: #3b3b3b; }
.cm-top10__foot {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.cm-top10__legend {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: var(--fs-small); color: #cfcfd4;
  font-weight: 400;
  line-height: 1.5;
}
.cm-top10__legend i { width: 12px; height: 12px; border-radius: 50%; background: #e5b2f1; flex: none; }
.cm-top10__date { font-family: var(--font-mono); font-size: var(--fs-label); color: #cfcfd4; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; }

/* ---------- Billie Eilish case: phones card + 7 stat tiles ---------- */
.cm-case {
  max-width: min(100%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cm-gap);
}
.cm-case__hero {
  margin: 0;
  background: #111;
  border-radius: var(--radius-md);
  padding: 36px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.cm-case__hero picture { display: block; width: 84%; }
.cm-case__hero img { display: block; width: 100%; height: auto; }
.cm-case__hero figcaption { display: flex; flex-direction: column; gap: 10px; color: #fff; }
.cm-case__hero strong { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; }
.cm-case__hero span { font-family: var(--font-mono); font-size: var(--fs-small); color: #e9e9ec; font-weight: 400; line-height: 1.5; }
.cm-case__stats {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--cm-gap);
}
.cm-case .cm-tile { padding: 22px 20px 22px; gap: 16px; }
.cm-case .cm-tile__num { font-size: var(--fs-stat); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.cm-case .cm-tile__lbl { margin-top: auto; overflow-wrap: anywhere; }

/* ---------- SoundOn Key Outputs: 4 cards, live titles ---------- */
.cm-outputs {
  max-width: min(100%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cm-gap);
}
.cm-out {
  background: #111;
  border: var(--cover-stroke-w) solid var(--cover-stroke);
  border-radius: var(--radius-md);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cm-out__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0 0 14px;
  max-width: 11em;
  color: #fff;
}
/* Pinned to the card's bottom-right, so shots line up across a row
   even when one title wraps to two lines. */
.cm-out picture { display: block; width: 67.4%; margin: auto 0 0 auto; }
.cm-out img { display: block; width: 100%; height: auto; }

/* ---------- Game mechanics: the full cards, scaled (never cropped) at every width ---------- */
.cm-gp { margin: 0; }
.cm-gp picture { display: block; }

/* ---------- Business Strategy: SVGs wrapped for tap-to-zoom ---------- */
.bizstrat--svg > .cm-zoom--biz { width: 48.75%; }
.cm-zoom--biz > .bizstrat__svg { width: 100%; }
/* The diagrams are transparent with dark ink — give them paper in the dark lightbox. */
.lightbox__img[src$=".svg"] { background: #fff; padding: 16px; box-sizing: border-box; }

/* ---------- Tap-to-zoom affordance + pan-able lightbox on phones ---------- */
.cm-zoom { position: relative; }
.cm-zoom__badge {
  display: none;
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  align-items: center; gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.78);
  color: #fff;
  font-family: var(--font-display); font-size: var(--fs-small); line-height: 1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-weight: 400;
}
.cm-zoom__badge svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 900px) {
  .cm-kr { grid-template-columns: 1fr; }
  .cm-kr .cm-tile__num { font-size: var(--fs-stat); }   /* tiles are wide again — drop the desktop cqw cap */
  .cm-kr .cm-tile { aspect-ratio: 1 / 0.82; }

  .cm-top10 { grid-template-columns: 1fr; }
  .cm-top10__title { padding: 24px 24px; }
  .cm-top10__title h3 br { display: none; }
  .cm-top10__chart { padding: 28px 28px 24px; }
  .cm-top10__foot { margin-top: 32px; }

  .cm-case { grid-template-columns: 1fr; }
  .cm-case__hero picture { width: min(84%, 420px); }
  /* Equal tiles: every row as tall as the tallest tile, one gap everywhere. */
  .cm-case__stats { grid-template-rows: none; grid-auto-rows: 1fr; }
  .cm-case .cm-tile { min-height: 150px; }

  .cm-out picture { width: 100%; }
  .cm-out__title { margin-bottom: 18px; }
}

@media (max-width: 700px) {
  /* Stacked Before / After: full-width diagrams, static down-arrow between them
     (the animated side arrow was floating under the "Before" pill). */
  .bizstrat--svg > .cm-zoom--biz { width: 100%; }
  .bizstrat--svg .ba-arrow {
    position: relative; top: auto; left: auto;
    margin-left: 5.3%;   /* centre on the "After" pill, which sits at 52.65% of after.svg (shift = half the margin) */
    width: 2px; height: 28px; flex: none;
    background: #D9D9D9;
    transform: none; animation: none;
  }
  .bizstrat--svg .ba-arrow::after {
    right: auto; left: 50%; top: auto; bottom: 0;
    width: 9px; height: 9px;
    border-top: 0; border-right: 2px solid #D9D9D9; border-bottom: 2px solid #D9D9D9;
    transform: translateX(-50%) rotate(45deg);
  }
}

@media (max-width: 760px) {
  .cm-zoom__badge { display: inline-flex; }

  /* Wide diagrams: open at a readable height and pan sideways (fit-to-width
     made them ~120px tall on a phone). */
  .lightbox.is-open {
    justify-content: flex-start;
    overflow: auto;
    padding: 0;
    overscroll-behavior: contain;
  }
  .lightbox .lightbox__img {
    flex: none;
    max-width: none;
    max-height: none;
    width: auto;
    height: min(78vh, 720px);
    margin: auto 0;
    border-radius: 0;
  }
  .lightbox__hint { font-size: 0; }
  .lightbox__hint::after { content: "Swipe to explore \00b7  tap \00d7  to close";}
}

@media (max-width: 600px) {
  .cm-kr__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .cm-kr .cm-tile--empty { display: none; }
  .cm-kr .cm-tile { aspect-ratio: auto; min-height: 120px; padding: 14px; }
  .cm-kr .cm-tile__num { font-size: var(--fs-stat); margin: 18px 0 0; }

  .cm-top10__chart { padding: 22px 20px 20px; }
  .cm-top10__list { gap: 16px; }
  .cm-top10__list i { height: 10px; }
  .cm-top10__foot { flex-direction: column; align-items: flex-start; margin-top: 24px; }

  .cm-case__hero { padding: 24px 16px 22px; gap: 16px; }
  .cm-case__stats { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .cm-case .cm-tile--empty { display: none; }
  .cm-case .cm-tile { padding: 16px 14px; }
  .cm-case .cm-tile--span { grid-column: 1 / -1; }   /* 7th tile fills the last row */

  .cm-outputs { grid-template-columns: 1fr; }
  .cm-out { padding: 18px 16px 18px; }
  .cm-out__title { max-width: none; }

}