/* =========================================================================
   Ludic Media Studio — v2 Comms Campaigns (v2/comms-campaigns.html ONLY)
   Loaded after sections.css, audience.css and site.css, via the page's
   `css` in _build/build_v2_comms_campaigns.py.

   What lives here: the hero's letterboxed composite, and the page's signature
   block — THE ROLLOUT board (`cc-` classes): stages across, studios down on a
   wide screen; one card per studio on a phone, with empty stages dropped.

   Same rules as every stylesheet here: no ID selectors, only the documented
   breakpoints, black / white / yellow pairs only, never white on yellow.
   ========================================================================= */

:root {
  /* The hero composite's own yellow field (sampled from the image), so the
     letterbox above and below it disappears into the picture. */
  --cc-field: #fdce2c;
  --cc-lab: 10.5rem;   /* the rollout board's studio column */
}
@media (min-width: 80rem) { :root { --cc-lab: 13rem; } }

/* ---------- hero: the composite, uncropped ------------------------------ */
/* The client's composite is 2.24:1 — a poster on the left, a LinkedIn post on
   the right. The hero frame is 4:3, so the picture is contained, not cropped,
   on a ground that matches its own. */
.v2-hero--comms .vx-hero__photo { background: var(--cc-field); }
.v2-hero--comms .vx-hero__photo img { aspect-ratio: 3 / 2; object-fit: contain; }
.v2-hero--comms .vx-hero__card { width: 40%; }
@media (min-width: 64rem) {
  .v2-hero--comms .vx-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- results: longer figures ("75,000+"), so a smaller size ------ */
.v2-numbers-wrap .v2-number__big { font-size: clamp(1.875rem, 3.6vw, 3.25rem); }

/* ---------- the rollout board -------------------------------------------- */
.cc-board__key { display: none; }

.cc-phases { display: grid; gap: var(--space-xs); margin-bottom: var(--space-md); }
@media (min-width: 36rem) { .cc-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-phase { position: relative; padding: var(--space-xs) var(--space-xs) var(--space-sm); background: var(--black); color: var(--white); }
.cc-phase__n {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.cc-phase__n span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: 0.25rem;
  background: var(--yellow);
  color: var(--black);
  font-size: var(--text-base);
  font-weight: 900;
  letter-spacing: 0;
}
.cc-phase__title { margin-top: 0.625rem; font-size: var(--text-lg); font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; }
.cc-phase__goal { margin-top: 0.375rem; font-size: var(--text-sm); line-height: var(--leading-mid); }

.cc-lanes { display: grid; gap: var(--space-sm); }
@media (min-width: 48rem) { .cc-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-lane { background: var(--white); color: var(--black); border: 3px solid var(--black); box-shadow: 0.375rem 0.375rem 0 var(--black); }
.cc-lane__name { font-size: var(--text-md); font-weight: 800; line-height: var(--leading-snug); border-bottom: 3px solid var(--black); }
.cc-lane__link { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem var(--space-xs); color: var(--black); text-decoration: none; }
a.cc-lane__link:hover { color: var(--black); text-decoration: underline; text-underline-offset: 0.2em; }
.cc-lane__link .ax-glyph {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0.3125rem;
  box-sizing: content-box;
  background: var(--yellow);
  border: 2px solid var(--black);
  border-radius: 50%;
}
.cc-cell { display: grid; gap: 0.125rem; padding: 0.625rem var(--space-xs); }
.cc-cell + .cc-cell { border-top: 1px solid var(--line); }
.cc-cell--empty { display: none; }
.cc-cell__stage { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-cell__what { font-size: var(--text-sm); line-height: var(--leading-mid); }

@media (min-width: 64rem) {
  .cc-board { background: var(--white); border: 3px solid var(--black); box-shadow: 0.75rem 0.75rem 0 var(--black); }
  .cc-board__head { display: grid; grid-template-columns: var(--cc-lab) minmax(0, 1fr); background: var(--black); color: var(--white); }
  .cc-board__key {
    display: grid;
    align-content: end;
    gap: 0.25rem;
    padding: var(--space-sm) var(--space-xs);
    color: var(--yellow);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .cc-phases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
  .cc-phase { padding: var(--space-sm) var(--space-xs); border-left: 1px solid var(--dark-grey); }
  /* The arrow from one stage to the next, on the line between them. */
  .cc-phase:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--space-sm) + 0.625rem);
    right: -0.5rem;
    width: 1rem;
    height: 1rem;
    background: var(--yellow);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .cc-lanes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cc-lane {
    display: grid;
    grid-template-columns: var(--cc-lab) minmax(0, 1fr);
    border: 0;
    border-top: 2px solid var(--black);
    box-shadow: none;
    transition: background-color var(--duration) var(--ease);
  }
  .cc-lane:first-child { border-top: 0; }
  .cc-lane:hover,
  .cc-lane:focus-within { background: var(--yellow); }
  .cc-lane__name { border-bottom: 0; border-right: 3px solid var(--black); font-size: var(--text-base); }
  .cc-lane__link { align-items: flex-start; height: 100%; padding: var(--space-xs); }
  .cc-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; }
  .cc-cell { position: relative; align-content: start; padding: var(--space-xs); }
  .cc-cell + .cc-cell { border-top: 0; border-left: 1px solid var(--line); }
  .cc-cell--empty { display: block; }
  .cc-cell--empty::before {
    content: "";
    position: absolute;
    left: var(--space-xs);
    right: var(--space-xs);
    top: 50%;
    border-top: 2px dashed var(--line);
  }
  .cc-lane:hover .cc-cell--empty::before,
  .cc-lane:focus-within .cc-cell--empty::before { border-top-color: var(--black); }
  /* Each filled cell keeps its stage name for a screen reader; the column
     header says it for everyone else. */
  .cc-cell__stage {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cc-cell__what { display: block; padding-left: 0.75rem; border-left: 4px solid var(--black); font-weight: 600; }
}