/* ============================================================
   BUKA · partners.css: /partners (distributors, telcos, platforms)
   The shared B2B components (.p-hero, .stats, .lanes, .notes,
   .contact, .form) live in buka.css. This file holds only what
   this page adds: the audience notes, the four-lane grid, the
   release split, the poster strip, the single legal note and the
   contact column. Same engineering rules as buka.css: hover
   movement uses `translate`, never a transition on `transform`;
   nothing starts at opacity 0.
   ============================================================ */

/* ---- Hero ---- */
.p-hero h1 { margin-top: 18px; max-width: 15ch; }
/* Never break "micro-drama" or "mass-market" at the hyphen on phones. */
.disp .nw { white-space: nowrap; }
.p-hero .eyebrow { white-space: normal; }

/* ---- The audience ---- */
.audience__notes {
  display: grid; gap: 14px;
  margin-top: clamp(28px, 4vw, 44px);
}
.audience__where {
  max-width: 56ch;
  padding-left: 16px;
  border-left: 2px solid var(--amber);
  font-size: var(--step-body-lg);
  line-height: 1.5;
  color: var(--text);
}
.audience__notes .stats__note { margin-top: 0; padding-left: 18px; }

/* ---- What we offer: four lanes, two by two ---- */
#lanes .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { #lanes .lanes { grid-template-columns: minmax(0, 1fr); } }
#lanes .lane h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
#lanes .lane h3 .tri { font-size: 10px; }
#lanes .lane p { max-width: 54ch; font-size: 1rem; }

/* ---- How we release: heading beside the paragraph on desktop ---- */
.release { display: grid; gap: clamp(20px, 3vw, 28px); }
.release .sec-head { margin-bottom: 0; }
.release__body {
  max-width: 56ch;
  font-size: var(--step-body-lg);
  line-height: 1.6;
  color: var(--text-mut);
}
@media (min-width: 900px) {
  .release {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }
}

/* ---- The slate: four posters, each a link to /shows ---- */
.p-slate {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}
@media (max-width: 700px) { .p-slate { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-slate__card {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 480 / 861;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  translate: 0 0;
  transition: translate 200ms var(--ease-play), border-color 200ms ease;
}
.p-slate__card picture { display: block; height: 100%; }
.p-slate__card img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .p-slate__card:hover { translate: 0 -4px; border-color: var(--amber); }
}
.p-slate__card:focus-visible { outline: 2px solid var(--amber-glow); outline-offset: 3px; }
.p-slate__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: clamp(22px, 3vw, 32px); }

/* ---- Legal note: one quiet card, heading and sentence on one line
   where there is room ---- */
#note { padding-block: clamp(40px, 6vw, 72px); }
#note .notes { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 701px) {
  #note .note-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
  #note .note-card p { margin-top: 0; }
}

/* ---- Contact ---- */
.contact__direct h2 { margin-top: 16px; font-size: clamp(2rem, 4.6vw, 3.5rem); }
.contact__line {
  margin-top: 20px;
  max-width: 38ch;
  font-size: var(--step-body-lg);
  line-height: 1.55;
  color: var(--text-mut);
}
.contact__direct .contact__wa { margin-top: 24px; color: var(--text-hi); }