/* Evolv-To: the Commercials showcase. Loads after multimedia.css and evins-multimedia.css and reuses
   the dark screening room, the player, the pitch column and the strip. Commercials are landscape, so
   the strip carries wide thumbs, and the page closes on a related-work line above the next-site line. */

/* The stage is a 16:9 commercial, shorter than the 9:16 reel stage. From 1280px up the panel column
   is wider, so the three items take fewer lines, and its type and spacing are tighter, so the pitch
   fits beside the stage at the same height. Below 1280px the two stack, as below 1000px elsewhere. */
@media (min-width: 1280px) {
    .screen { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .pitch { padding: 1rem 1.2rem; gap: 0.75rem; }
    .pitch .now { padding: 0.65rem 0.9rem; }
    .pitch .now .t { font-size: 1.02rem; margin-top: 0.2rem; }
    .pitch .now .d { font-size: 0.84rem; margin-top: 0.15rem; }
    .pitch li { grid-template-columns: 1.8rem 1fr; gap: 0.55rem; padding: 0.6rem 0; }
    .pitch li .n { font-size: 1rem; }
    .pitch li p { font-size: 0.9rem; line-height: 1.42; }
    .pitch li strong { font-size: 0.98rem; margin-bottom: 0.1rem; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    .screen { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .pitch { padding: 0.7rem 1.1rem; gap: 0.5rem; }
    .pitch .now { padding: 0.55rem 0.85rem; }
    .pitch .now .t { font-size: 0.98rem; }
    .pitch li { padding: 0.42rem 0; }
    .pitch li p { font-size: 0.85rem; line-height: 1.38; }
    .pitch li strong { font-size: 0.94rem; }
}
@media (max-width: 1279px) {
    .screen { grid-template-columns: 1fr; }
    .song-col .pitch { position: static; }
}

/* The hero facts and the pitch beside the stage describe the Evins spot, not the intro that
   opens the strip, so each carries a label that says so. */
.spot-h { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0; }
.mm-hero .facts .spot-h { grid-column: 1 / -1; }
.pitch .spot-list { display: flex; flex-direction: column; gap: 0.6rem; }

/* The strip: wide 16:9 thumbs instead of the 9:16 reel thumbs */
.plist button { flex-basis: 300px; }
.plist button img { aspect-ratio: 16 / 9; }

/* Related work, a second line above "Next in the showcase" with room for more than one link */
.next-site.related { align-items: flex-start; }
.next-site.related .links { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; text-align: right; }

@media (max-width: 1000px) {
    .plist button { flex-basis: 240px; }
}
@media (max-width: 600px) {
    .next-site.related { flex-direction: column; gap: 0.75rem; }
    .next-site.related .links { align-items: flex-start; text-align: left; }
}