/**
 * MapCheck — Video + Text module styles
 *
 * Two-column responsive grid. Video sits at its declared aspect ratio
 * via padding-top trick (no black bars), text column flows to natural
 * height. Light/dark variants. Container queries collapse to single
 * column when narrow.
 */

.mc-vshow {
  padding: 3.5rem clamp(1rem, 4vw, 5vw);
  container-type: inline-size;
  container-name: vshow;
}

/* ── Background variants ────────────────────────────────────── */
.mc-vshow--paper      { background: #ffffff; color: var(--mc-ink); }
.mc-vshow--paper_warm { background: var(--mc-paper-warm); color: var(--mc-ink); }
.mc-vshow--ink        { background: var(--mc-ink); color: #ffffff; }

.mc-vshow__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* video-right swaps the column order */
.mc-vshow--video_right .mc-vshow__video-col { order: 2; }
.mc-vshow--video_right .mc-vshow__text-col  { order: 1; }


/* ── Video column ───────────────────────────────────────────── */
.mc-vshow__video-col { min-width: 0; }   /* let the video shrink in flex/grid */

.mc-vshow__video {
  position: relative;
  width: 100%;
  background: #000;
  border: 1px solid var(--mc-paper-rule);
  overflow: hidden;
}

/* Aspect-ratio variants — padding-top hack so the box keeps the
   ratio independent of content. Modern browsers also support
   aspect-ratio CSS but padding hack is universally compatible. */
.mc-vshow__video--16x9 { padding-top: 56.25%; }    /* 9 / 16 */
.mc-vshow__video--4x3  { padding-top: 75%; }       /* 3 / 4  */
.mc-vshow__video--1x1  { padding-top: 100%; }
.mc-vshow__video--4x5  { padding-top: 125%; }      /* 5 / 4  */
.mc-vshow__video--9x16 {
  padding-top: 0;                                   /* portrait — height-driven */
  height: clamp(360px, 60vh, 640px);
  max-width: 360px;
  margin: 0 auto;
}

.mc-vshow__video > iframe,
.mc-vshow__video > video,
.mc-vshow__video > .mc-vshow__video-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.mc-vshow__video--9x16 > iframe,
.mc-vshow__video--9x16 > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mc-vshow__video-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mc-paper-warm);
  color: var(--mc-ink-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1rem;
}


/* ── Text column ────────────────────────────────────────────── */
.mc-vshow__kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.mc-vshow--paper      .mc-vshow__kicker,
.mc-vshow--paper_warm .mc-vshow__kicker { color: var(--mc-rust); }
.mc-vshow--ink        .mc-vshow__kicker { color: var(--mc-straw-lt); }

.mc-vshow__heading {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.mc-vshow--paper      .mc-vshow__heading,
.mc-vshow--paper_warm .mc-vshow__heading { color: var(--mc-ink) !important; }
.mc-vshow--ink        .mc-vshow__heading { color: #ffffff !important; }
.mc-vshow__heading em {
  font-style: italic;
  color: var(--mc-moss) !important;
}
.mc-vshow--ink .mc-vshow__heading em { color: var(--mc-straw-lt) !important; }

.mc-vshow__body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.mc-vshow--paper      .mc-vshow__body,
.mc-vshow--paper_warm .mc-vshow__body { color: var(--mc-ink-mid); }
.mc-vshow--ink        .mc-vshow__body { color: rgba(255, 255, 255, 0.78); }
.mc-vshow__body p { margin: 0 0 0.75rem; }
.mc-vshow__body p:last-child { margin-bottom: 0; }


/* ── Bullets ────────────────────────────────────────────────── */
.mc-vshow__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.55rem;
}
.mc-vshow__bullets li {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  padding-left: 1.5rem;
  position: relative;
}
.mc-vshow__bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--mc-moss);
}
.mc-vshow--paper      .mc-vshow__bullets li,
.mc-vshow--paper_warm .mc-vshow__bullets li { color: var(--mc-ink); }
.mc-vshow--ink        .mc-vshow__bullets li { color: rgba(255, 255, 255, 0.85); }
.mc-vshow--ink        .mc-vshow__bullets li::before { color: var(--mc-straw-lt); }


/* ── CTA ────────────────────────────────────────────────────── */
.mc-vshow__cta-wrap {
  margin-top: 0.5rem;
}
.mc-vshow__cta {
  display: inline-block !important;
  padding: 0.95rem 1.6rem !important;
  font-size: 0.9rem !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}


/* ════════════════════════════════════════════════════════════════
 *  Container queries — collapse to single column when narrow
 * ════════════════════════════════════════════════════════════════ */

@container vshow (max-width: 800px) {
  .mc-vshow__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .mc-vshow--video_right .mc-vshow__video-col,
  .mc-vshow--video_right .mc-vshow__text-col { order: initial; }
  .mc-vshow__video--9x16 {
    height: auto;
    padding-top: 0;
    max-width: 320px;
    aspect-ratio: 9 / 16;
  }
  .mc-vshow__video--9x16 > iframe,
  .mc-vshow__video--9x16 > video {
    position: relative;
  }
}

@container vshow (max-width: 500px) {
  .mc-vshow { padding: 2rem 1rem; }
  .mc-vshow__heading { font-size: 1.5rem; }
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
  @media (max-width: 800px) {
    .mc-vshow__inner { grid-template-columns: 1fr; gap: 2rem; }
  }
}