/* ============================================================
   BUKA · shows.css: /shows, the slate for brands and partners
   A buyer page: poster, numbers, one line of pitch and one watch
   link per show. The shared B2B pieces (.p-hero, .sec-head, .chip,
   .btn) live in buka.css; this file adds the show cards and the
   two closing doors. Same engineering rules as buka.css: no
   transition on transform, nothing starts at opacity 0, and no
   motion module (the .rv reveals are CSS only).
   ============================================================ */

/* ---- Hero ---- */
.p-hero h1 { margin-top: 18px; max-width: 15ch; }
.p-hero .eyebrow { white-space: normal; }

/* Phones: the two-row header is taller than the section padding,
   so anchor jumps land below it. */
@media (max-width: 700px) {
  main section[id] { scroll-margin-top: 56px; }
}

/* ---- Show cards --------------------------------------------------
   Phones: one card per row, poster on top.
   560-819px: two cards per row, poster on top.
   820px and up: one card per row, poster left, text right, and the
   numbers laid out across the card so they read as one strip. */
.shows { padding-top: clamp(8px, 2vw, 24px); }
.shows__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
@media (min-width: 560px) and (max-width: 819px) {
  .shows__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.show-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 18px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
}
@media (min-width: 820px) {
  .show-card {
    grid-template-columns: clamp(200px, 22vw, 280px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
    padding: 16px;
  }
}

/* The posters carry a stale language tag in their top corner, and the
   title art sits at the bottom, so the 9:14 crop keeps the bottom. */
.show-card__poster {
  align-self: start;
  aspect-ratio: 9 / 14;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink-700);
}
.show-card__poster picture { display: block; height: 100%; }
.show-card__poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.show-card__body {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0;
  padding: 2px 4px 4px;
}
@media (min-width: 820px) {
  .show-card__body { padding: clamp(6px, 1.2vw, 16px) clamp(4px, 1.2vw, 16px) 4px 0; }
}
.show-card__name {
  font: 900 clamp(1.75rem, 3.2vw, 2.75rem)/0.98 var(--sans);
  letter-spacing: var(--track-disp);
  text-wrap: balance;
}
.show-card__meta { margin-top: 12px; }

/* The numbers: plain list, number in <b>, label under it. */
.show-card__stats {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 24px;
}
@media (min-width: 820px) {
  .show-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .show-card__stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.show-card__stats li {
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-mut);
}
.show-card__stats b {
  display: block;
  margin-bottom: 6px;
  font: 900 clamp(1.625rem, 2.6vw, 2.25rem)/1 var(--sans);
  letter-spacing: -0.03em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.show-card__pitch {
  margin-top: 20px;
  margin-bottom: 24px;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}

/* Watch link: the site's solid chip with the triangle, at a full
   44px tap height, straight after the pitch. */
.show-card__watch {
  min-height: var(--tap);
  padding: 12px 18px;
  font-size: 0.75rem;
  white-space: normal;
  text-align: left;
  line-height: 1.2;
  transition: background-color 140ms ease;
}
.show-card__watch .tri { font-size: 11px; }
@media (max-width: 359px) {
  .show-card__watch { padding-inline: 14px; font-size: var(--step-mono-sm); }
}
.show-card__watch:hover { background: var(--amber-glow); }
.show-card__watch:focus-visible { outline-offset: 3px; }

.shows__note {
  margin-top: clamp(18px, 2.4vw, 26px);
  max-width: 72ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-mut);
}

/* ---- Doors: two short cards side by side ---- */
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 760px) { .doors { grid-template-columns: minmax(0, 1fr); } }
.door {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 28px;
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
}
.door__line {
  max-width: 17ch;
  font: 900 clamp(1.75rem, 3.4vw, 2.75rem)/1 var(--sans);
  letter-spacing: var(--track-disp);
  text-wrap: balance;
}
@media (max-width: 380px) {
  .door .btn--lg { padding: 15px 24px; font-size: 1rem; }
}