/* Watch Guide page (Figma 745:23907): 4-column staggered grid of vertical video cards with a bookmark */
.wp-open{display:block}
.wp-open[hidden]{display:none!important}
.watchguide .calendar__featured .wp-open .video-card{width:100%}
.wg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-32);align-items:start;padding-bottom:var(--space-48)}
.wg-item .video-card{cursor:pointer}
.wg-item .video-card__thumb{aspect-ratio:278/494;flex:none;min-height:0}
body[data-nav-active="watch"] .nav{position:absolute}
.calendar__featured .video-card__img{object-position:50% 30%}
.watchguide .calendar__filters{align-items:flex-end}
.watchguide .calendar__filters>.select{width:200px;flex:none}
.video-card__ph{position:absolute;inset:0;display:block;background:linear-gradient(160deg,var(--neutral-200),var(--neutral-100))}
.wp-img-ph{display:flex;align-items:flex-end;padding:var(--space-20);box-sizing:border-box;font:var(--text-2xl);text-transform:uppercase;color:var(--text-primary);background:linear-gradient(160deg,var(--neutral-200),var(--neutral-100))}
.wp-img-ph[hidden]{display:none}
#watch-modal [data-wp="img"]{object-position:50% 82%}
   /* phones: selects in a 2-column grid instead of widening the page */

/* 1024–1279: four 200 Selects + Sort did not fit (sideways scroll at 1024–1100); they share the row */
@media (min-width:1024px) and (max-width:1279px){
  .watchguide .calendar__filters{gap:var(--space-16)}
  .watchguide .calendar__selects{flex:1 1 0;gap:var(--space-12);min-width:0}
  .watchguide .calendar__selects .select{width:auto;flex:1 1 0;min-width:0}
  .watchguide .calendar__filters>.select{width:160px;flex:none}
  .watchguide .calendar__selects .calendar__clear{flex:none}
}
.wg-lead-tab,.wg-results{display:none}
.wg-results[hidden]{display:none!important}
.watchguide .empty-state{max-width:420px}

/* ===== Tablet + phone (Prompt 19; Figma tablet 2115:94023 / 2115:94745 / 2115:95364 / 2115:96374, phone 2115:96969 / 2115:97220 /
   2115:97435 / 2115:97698). Shared Game Day layout rules come from calendar.css (Filter Row, bar not sticky, featured rail). ===== */
@media (max-width:1023px){
  .watchguide .calendar__filters>.select{display:none}
  .wg-results{display:flex;flex-direction:column;gap:var(--space-12);order:2}
  .wg-results__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:22px}
  .wg-results__count{font:var(--text-mobile-label);letter-spacing:.44px;text-transform:uppercase;color:var(--text-secondary)}
  .wg-results__clear{padding:var(--space-4) 0;border:0;background:none;cursor:pointer;font:var(--text-xs);color:var(--text-link);white-space:nowrap}
  .wg-results__clear:hover{text-decoration:underline;text-underline-offset:2px}
  .wg-results__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-4)}
  .wg-results__chips .follow-item__label{font:var(--text-xs)}
  .wg-results__comma{font:var(--text-row-title);align-self:center;margin-right:var(--space-4)}
  .watchguide .wg-item .video-card__thumb{aspect-ratio:158/281}
  /* the footer's newsletter band replaces the separate Newsletter Section the tablet frames still draw; phones have no footer */
  main.calendar~.nli-sub{display:none}
}
.wp-cta[hidden]{display:none!important}
/* Title panel, all breakpoints (desktop 1262:46900, tablet 2115:96374, phone 2115:97698): badges only (no repeated text line),
   "Watch on <service>" Primary + Share / Save icon buttons */
#watch-modal [data-wp="line"]{display:none}
#watch-modal .event-modal__meta .badge{text-transform:none}
#watch-modal .event-modal__actions{flex-wrap:nowrap}
#watch-modal .wp-cta:not([hidden]){flex:1;min-width:0;display:inline-flex}
#watch-modal .wp-cta .btn__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#watch-modal .wp-cta:not([hidden])~.btn{width:48px;padding:0;justify-content:center;flex:none}
#watch-modal .wp-cta:not([hidden])~.btn .btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Tablet 600–1023 (2115:94023): hero 40 top, title 36, 12, lead 14/20 (tablet copy), 24; featured 2 × 332 (16 apart), 8 / 40;
   divider 8; section 40 top: title 36, 20, Filter Row 56, 20, 4 × 158 grid 16 apart, rows 24; filtered: featured + divider hidden;
   Title panel 480 wide, 8 inset, over a scrim */
@media (min-width:600px) and (max-width:1023px){
  .watchguide .wg-lead-web{display:none}.watchguide .wg-lead-tab{display:block}
  .watchguide .calendar__featured .video-card__body{padding-top:var(--space-8)}
  .watchguide.is-filtered :is(.calendar__featured,.calendar__divider){display:none}
  .watchguide.is-filtered .calendar__hero{padding-bottom:var(--space-8)}
  .wg-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-24) var(--space-16);margin-top:var(--space-20)}
  .watchguide .empty-state{padding:var(--space-48) 0 var(--space-64)}
  #watch-modal .event-modal{width:480px;height:calc(100% - 2 * var(--space-8));margin:var(--space-8);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
}
/* Phone <600 (2115:96969): App / Header, featured rail 300 wide (16 / 12 apart) + dots, divider 8, List Bar "ALL RECOMMENDATIONS",
   Filter Row 56, results header (filtered), 2 × 173 grid (16 sides, 12 apart, rows 20), App / Tab Bar (Watch);
   filtered: featured + dots + divider hidden; Title details = full-height bottom sheet */
@media (max-width:599px){
  .watchguide .calendar__featured>.wp-open{flex:none;width:300px;scroll-snap-align:start}
  .watchguide .calendar__featured .video-card__body{padding-top:var(--space-8)}
  .watchguide.is-filtered :is(.calendar__featured,.calendar__dots,.calendar__divider){display:none}
  .watchguide.is-filtered .calendar__hero-in{padding:0} /* the hero keeps its visually hidden h1 */
  .watchguide.is-filtered .calendar__headwrap{padding-top:var(--space-16)}
  .watchguide .calendar__headwrap{padding-top:var(--space-24);padding-bottom:0}
  .watchguide .calendar__heading{height:auto;min-height:14px}
  .watchguide .calendar__bar>.calendar__wrap{padding:0}
  .wg-results{padding:var(--space-16) var(--space-16) 0}
  .wg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-20) var(--space-12);padding:var(--space-16) var(--space-16) var(--space-32)}
  .watchguide .wg-item .video-card__thumb{aspect-ratio:173/306}
  .watchguide>.calendar__wrap:has(>.wg-grid){width:100%}
  .watchguide .empty-state{padding:var(--space-40) var(--space-16)}
  .watchguide .empty-state__title{font:var(--text-mobile-3xl)}
  .watchguide .empty-state__body{font:var(--text-mobile-base)}
  /* Prompt 31 4.1: Title details is full screen on phones (Figma 2115:97698, 374 wide = 8 inset), not a sheet: no grabber */
  #watch-modal{align-items:stretch}
  #watch-modal .event-modal{width:calc(100% - 2 * var(--space-8));height:calc(100dvh - 2 * var(--space-8));max-height:none;margin:var(--space-8);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
  #watch-modal .event-modal::before{display:none}
}
/* Desktop (Figma 745:23907): featured 2 × 640, 48 apart; ALL RECOMMENDATIONS → filters 32; filters → grid 32 */
@media (min-width:1024px){
  .watchguide .calendar__featured{gap:var(--space-48)}
  .watchguide .calendar__bar{padding:var(--space-32) 0 0}
  .watchguide .calendar__filters{margin-bottom:var(--space-32)}
}
#watch-modal .event-modal__actions .wp-cta{order:0}#watch-modal .event-modal__actions [data-share]{order:1}#watch-modal .event-modal__actions [data-save]{order:2} /* Share then Save, as drawn */

/* ===== Prompt 31 Part 4 (2026-10-27) =====
   4.1 panel ⋮ (shared Card / Action Menu) sits after Share and Save, icon only like them */
#watch-modal .event-modal__head .wp-menu{flex:none;margin-left:auto}   /* panel chrome: title, ⋮, close (the ⋮ is not drawn: needs Figma) */
#watch-modal .event-modal__head .wp-menu+.event-modal__x{margin-left:0}
/* 4.2 Where to watch (Figma Watch row I1262:47042;1264:44699): provider = Button Secondary Small (40, 8 / 16, radius md), 16 icon +
   text-xs label, 12 apart, hugging its label at every width; wordmark services show the wordmark (label kept for screen readers) */
#watch-modal .wp-watch{gap:var(--space-12)}
#watch-modal .wp-provider{flex:none;gap:var(--space-8)}
#watch-modal .wp-provider__icon{flex:none;width:16px;height:16px;border-radius:var(--radius-sm)}
#watch-modal .wp-provider__logo{flex:none;width:70px;height:24px;margin:calc(-1 * var(--space-4)) 0;object-fit:contain}   /* 70 × 24: not a Figma token yet (wordmark files 357 × 122) */
#watch-modal .wp-provider--logo .btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wp-watch__none{margin:0;font:var(--text-sm);color:var(--text-secondary)}
/* 4.4 Related = Story Card Size=List (1528:68100) as placed in the panel (I1262:47042;1262:44393): 8 padding, 12 gap, 162 × 91 image,
   content gap 2, 2-line card-title-sm title, author 20 */
#watch-modal .event-modal__rel .story-card--list{width:100%;box-sizing:border-box;padding:var(--space-8);gap:var(--space-12)}
#watch-modal .event-modal__rel .story-card--list .story-card__content{flex:1;gap:var(--space-2);justify-content:center}
#watch-modal .event-modal__rel .story-card--list .story-card__title{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#watch-modal .wp-menu{border-color:transparent;background:transparent;box-shadow:none}
#watch-modal .wp-menu:hover,#watch-modal .wp-menu[aria-expanded="true"]{background:var(--surface-elevated);box-shadow:none}