/* Apply finale (original section#choose). Only what the original markup can't express after the edits. */

/* One card instead of two: one original card width (468 at the 1440 reference), centred. */
.section-choose .finale-row { justify-content: center; }
.section-choose .finale-row > [data-node-id="666:3423"] { flex: 0 1 468px; }

/* The chrome key render is a transparent square: show all of it, centred on the card's #141414. */
.section-choose .finale-media > img { object-fit: contain; }

/* New copy is longer than the original's: keep the wrapped lines even (sub 2 lines, phone title 2 lines). */
.section-choose .finale-sub,
.section-choose .finale-title { text-wrap: balance; }

/* Seats chip (and its separator): shown once js/sections/finale.js has the number from PREMIERE_CONFIG. */
.section-choose .finale-meta:not([data-ready]) > :not(:first-child) { display: none; }

/* The original's fixed 240px sides leave 288px at 768 (its two cards break there); give the card room on tablets. */
@media (min-width: 768px) and (max-width: 1023px) {
  .section-choose .finale-wrap { padding-left: 48px; padding-right: 48px; }
}

/* The original's ≤767 full-width button row selects on the old labels (aria-label="Trade Prop"); same values, except
   the pills share the row by label length ("Rewatch The Video" doesn't fit half of it) and wrap below ~340px. */
@media (max-width: 767px) {
  .section-choose .finale-row > [data-node-id="666:3423"] { max-width: 468px; margin-inline: auto; }
  .section-choose .mobile-view .finale-actions { gap: 8px; width: 100%; display: flex; flex-wrap: wrap; }
  .section-choose .mobile-view .finale-actions > button { flex: auto; min-width: 0; padding-left: 10px; padding-right: 10px; }
}
/* Meta row wider than the card (narrow phones, long counts; measured by js/sections/finale.js): drop the hairline
   separator and let the seats chip wrap under the name chip instead of running into the card's padding. */
.section-choose .finale-meta[data-tight] { flex-wrap: wrap; }
.section-choose .finale-meta[data-tight] > :nth-child(2) { display: none; }