/* =====================================================================
   Homepage · tablet, 600–1023px (Figma "Homepage / Tablet — Signed in" 1812:74383, 744 wide; signed out = the same page with the
   Follow Topics band and Members). Values are the frame's; the navbar is navbar.css, the footer is Footer · Mobile (sections.css).
   Layout: 32px gutter (680 content at 744) · 40px section padding · Desktop text styles for the page and CTAs=1 headers, Mobile
   component variants where the frame uses them (compact story cards, Device=Mobile event cards, CTAs=2 header, Newsletter Mobile).
   Loaded after sections.css, so every rule is scoped to .home and wins over the desktop and older small-screen rules.
   ===================================================================== */
@media (min-width:600px) and (max-width:1023px){
  .home .wrap{width:calc(100% - 2 * var(--space-32))}
  /* Section Header · Desktop with an eyebrow is 60 tall in the frame (title area 56 + the button's shadow box) */
  .home .section-header:not(.section-header--photo):has(.section-header__eyebrow):not(:has(.section-header__actions .btn + .btn)){min-height:60px}

  /* ---- Featured Stories (1812:74385): 40 below the 120 navbar, Main card 680×620, three compact cards (216, 16 apart) 24 below ---- */
  .home .featured{padding:calc(120px + var(--space-40)) 0 var(--space-40)}
  .home .featured__track{height:auto}
  .home .featured__sticky{position:static}
  .home .featured__grid{display:flex;flex-direction:column;gap:var(--space-24);height:auto}
  .home .featured__grid>.story-card--main{aspect-ratio:auto;height:calc((100vw - 2 * var(--space-32)) * 9 / 16 + 238px);border-radius:var(--radius-md)}   /* 16:9 image + the panel (620 at 744) */
  .home .featured__grid>.story-card--main .story-card__content{left:14px;right:14px;bottom:var(--space-16);padding:var(--space-24);gap:var(--space-8);box-shadow:var(--shadow-card-rest)}
  .home .featured__grid>.story-card--main .story-card__tags-row{min-height:32px}
  .home .featured__grid>.story-card--main .badge{min-height:24px;padding:3px var(--space-12);font:var(--text-sm)}
  .home .featured__grid>.story-card--main .story-card__title{font:var(--text-3xl);display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}
  .home .featured__grid>.story-card--main .story-card__desc{font:var(--text-base);color:var(--text-secondary);white-space:normal;overflow:visible}
  .home .featured__grid>.story-card--main .story-card__byline{gap:var(--space-12)}
  .home .featured__grid>.story-card--main .author__avatar{width:28px;height:28px}
  .home .featured__grid>.story-card--main .author__name{font:var(--text-xs)}
  .home .featured__grid>.story-card--main .story-card__meta{font:var(--text-sm)}
  .home .featured__grid>.story-card--main .story-card__meta>span:not(:first-child){display:none}   /* author + read time, no date */
  .home .featured__latest{height:auto;overflow:visible}
  .home .featured__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16);transform:none}

  /* Story Card / Compact / Default (Featured, Foley's Takes, Fresh): image 234:132, Small badge + ⋮, 2-line 14/18 title, author only */
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .story-card__media{aspect-ratio:234/132;height:auto}
  .home .takes__author .story-card__media{aspect-ratio:16/9}
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .story-card__content{flex:none;justify-content:flex-start;gap:var(--space-6);padding:var(--space-10) var(--space-12) var(--space-12)}
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .badge{min-height:20px;padding:var(--space-2) var(--space-8);font:var(--text-xxs)}
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .story-card__title{font:var(--text-card-title-sm);text-transform:uppercase;-webkit-line-clamp:2}
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .story-card__byline{gap:var(--space-4) var(--space-12)}
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .author{gap:var(--space-6)}
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .author__avatar{width:20px;height:20px}
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .author__name{font:var(--text-xs)}
  :is(.home .featured__list,.home .fresh__grid,.home .takes__author) .story-card__meta{display:none}
  .home .featured__list .story-card__title{min-height:36px}

  /* ---- For you: tablet and phone share one set of rules since Prompt 31 (sections.css, "For you, tablet and phone") ---- */

  /* ---- Foley's Takes (1812:74409): 40 padding, CTAs=2 header (Mobile), author 24 above the compact story card (680), then
     "THIS WEEK'S SELECTIONS" and the picks rail (282 cards, 16 apart) running off the right edge ---- */
  .home #takes{padding:var(--space-40) 0}
  .home .takes{gap:var(--space-24)}
  .home .author-profile__freq{font:var(--text-xs)}
  .home .author-profile__name{font:var(--text-mobile-xl);margin-top:var(--space-4)}
  .home .picks__label{font:var(--text-xs);letter-spacing:0;margin-bottom:var(--space-16)}
  .home .picks__list{flex-direction:row;gap:var(--space-16);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-right:calc(50% - 50vw);padding-right:calc(50vw - 50%)}
  .home .picks__list::-webkit-scrollbar{display:none}
  .home .picks__list>.event-card{flex:0 0 282px;scroll-snap-align:start}

  /* Event Card · Device=Mobile (Standard 1812:74423 in the picks, Compact 1812:74433 in Events Calendar): no date column; Sport
     Badge (sport colour) + ⋮, 14/18 Storica title, "City • Time" 12/16, Compact Action Strip. Standard: 4 then 8 apart; Compact: 4. */
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-8);padding:var(--space-16)}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card--staff{padding:15px}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) :is(.event-card__date,.event-card__divider,.event-card__media){display:none}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__content{display:contents}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__tags-row{min-height:32px}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__meta{gap:var(--space-8)}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__meta>.badge[data-sport]:first-child{--badge-bg:var(--sport-c);--badge-border:var(--border-default);--badge-fg:var(--sport-fg);min-height:20px;min-width:46px;padding:var(--space-2) var(--space-8);font:var(--text-xxs);justify-content:flex-start}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__meta>.badge--person{display:none}   /* Show Foley's Take = off in both lists */
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__meta>.badge--staff-pick{min-height:20px;padding:var(--space-2) var(--space-8);font:var(--text-xxs)}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__title{margin-top:calc(-1 * var(--space-4));font:var(--text-card-title-sm);text-transform:uppercase;white-space:nowrap}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__mmeta{display:block;font:var(--text-xs);color:var(--card-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .event-card__actions{gap:var(--space-12)}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .action-strip{gap:var(--space-2);padding:var(--space-4)}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .action-strip__btn{width:32px;height:32px;padding:var(--space-6)}
  :is(.home .picks__list,.home .events-grid,.calendar .cal-day__list) .action-strip__btn svg{width:20px;height:20px}
  .home .events-grid .event-card{gap:var(--space-4)}
  .home .events-grid .event-card__title{margin-top:0}

  /* ---- What to Watch section (1812:74427): 40 padding; Events Calendar = 8 Compact cards in two columns (332, 16 apart), Worth
     Watching 56 below = four posters across (158, 16 apart). Headers 28 above their content. ---- */
  .home #calendar{padding:var(--space-40) 0}
  .home .events-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16);margin-top:var(--space-28)}
  .home .events-grid__col{display:contents}
  .home .worth--head{margin-top:var(--space-56)}
  .home .worth--head .section-header{margin-bottom:var(--space-28)}
  .home .worth__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-16)}
  .home .worth__grid .video-card__thumb{flex:none;aspect-ratio:278/494;min-height:0}
  .home .worth__grid .video-card__title{font:var(--text-card-title-sm);-webkit-line-clamp:2}   /* 14/18 (answer 13c; Figma draws 14 on a 28 line) */
  .home .worth__grid .video-card__meta{font:var(--text-xs)}   /* Streaming Tile Metadata Row 12/16 (1734:82865, Prompt 28 review) */
  .home .worth__grid .partner-logo{--logo-h:24px;--logo-zone:84px;padding:var(--space-8)}

  /* ---- Storied Originals (1812:74449): dark box inset 16 at the sides, 40 above and below, radius md, 32/16 padding; Desktop dark
     header; two columns of 280 (24 apart) centered: a column of two horizontals next to a vertical, twice ---- */
  /* Storied Originals (Figma 1734:82870): dark box inset 16 in a 40 / 16 section, 32 / 16 inside, radius md; as it scrolls in, the box
     grows to the full width (inset, outer space and radius go to 0: --p from js/site.js), like the desktop band, without pinning.
     Picks: rows of [two horizontal cards | one vertical card], columns 374 / 272, 32 apart, 24 between rows */
  .home .originals-stage{--q:calc(1 - var(--p,0));padding:calc(var(--space-40) * var(--q)) calc(var(--space-16) * var(--q))}
  .home .originals{padding:var(--space-32) var(--space-16);border-radius:calc(var(--radius-md) * var(--q))}
  .home .originals__inner{width:auto;max-width:680px;margin-inline:auto}
  .home .originals__grid{display:grid;grid-template-columns:minmax(0,374fr) minmax(0,272fr);justify-content:center;gap:var(--space-24) var(--space-32);margin-top:var(--space-40)}
  .home .originals__col{display:flex;flex-direction:column;gap:var(--space-24)}
  .home .originals__grid .video-card--vertical{height:auto}
  .home .originals__grid .video-card--vertical .video-card__thumb{flex:none;aspect-ratio:9/16;min-height:0}
  .home .originals__grid .video-card__title{-webkit-line-clamp:2}
  .home .originals .video-card__meta-row{min-height:32px}   /* Prompt 31: the ⋮ (32) sets the row, as on desktop and phones (Figma 2255:147079: cards 288 / 560) */
  /* The Originals spotlight is not part of the tablet frame */
  .home .orig-spot{display:none}

  /* ---- Fresh Off the Press (1812:74462): 40 padding, header without eyebrow, compact cards two across (16 apart) 28 below ---- */
  .home #fresh{padding:var(--space-40) 0}
  .home .fresh__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16);margin-top:var(--space-28)}

  /* ---- Signed out: Follow Topics (Figma "Homepage / Tablet — v3" 1734:82818): 20/32/40 padding; "We cover" and "Written by"
     (22/26) each on its own centered line with a Compact-height chip (36: 24px image, 12/16 label, 26px Follow), 28 apart; 18/28 line;
     two 40px buttons sharing the width ---- */
  .home .follow-banner{margin-top:0;min-height:0;padding:var(--space-20) 0 var(--space-40)}
  .home .follow-banner__headline{flex-wrap:wrap;column-gap:var(--space-8);row-gap:14px;font:var(--text-mobile-3xl)}   /* the line break is an empty flex line, so 14 + 14 = 28 */
  .home .follow-banner__break{flex-basis:100%;height:0}
  .home .follow-banner__comma{display:none}
  .home .follow-banner .rotator{height:36px}
  .home .follow-banner .follow-item{height:36px;min-width:72px;padding:var(--space-8) var(--space-16) var(--space-8) var(--space-12);gap:var(--space-12)}
  .home .follow-banner .follow-item__img{width:24px;height:24px;margin-right:calc(-1 * var(--space-8))}
  .home .follow-banner .follow-item__label{font:var(--text-xs)}
  .home .follow-banner .follow-btn{height:26px;padding:3px var(--space-16)}
  .home .follow-banner__copy{margin-top:var(--space-20);font:var(--text-lg);color:var(--text-primary)}
  .home .follow-banner__actions{margin-top:var(--space-20)}
  .home .follow-banner__actions .btn{flex:1 1 0;height:40px;min-height:40px;padding:var(--space-8) var(--space-16);font:var(--text-xs)}

  /* ---- Signed out: Members Perks · Mobile (1735:59685): 24/32/40 padding + 16 inside; 120px visual (radius 24, 30%) first; 12/16
     eyebrow, 24/28 title, 14/20 lead; Accordion Item · Mobile (72 min, 10/16 padding, 32px icon square, 14/18 title, 36px toggle,
     13/18 body indented 56), 4 apart; full-width Create free account, "Sign in" as a 13/18 text link. Tap only (no autoplay). ---- */
  .home .members>.divider{display:none}
  .home .members .wrap{width:calc(100% - 2 * var(--space-48))}
  .home .members__grid{grid-template-columns:minmax(0,1fr);gap:14px;padding:var(--space-40) 0 var(--space-56)}
  .home .members__col{gap:14px}
  .home .members__visual{order:-1;max-width:none;aspect-ratio:auto;height:120px;border-radius:var(--radius-xl);opacity:.3;box-shadow:var(--shadow-card-rest)}
  .home .members__visual img{object-position:50% 18%}   /* member pictures (2026-10-26): show the top of the phone screen in the 120 strip */
  .home .members__head{gap:var(--space-8)}
  .home .members__head .section-header__eyebrow{font:var(--text-xs)}
  .home .members__head .section-header__title{font:var(--text-mobile-4xl)}
  .home .members__lead{margin:0;max-width:200px;font:var(--text-sm)}
  .home .members .acc{max-width:none;gap:var(--space-12)}
  .home .members .acc__items{gap:var(--space-4)}
  .home .members .acc-item{padding:var(--space-10) var(--space-16)}
  .home .members .acc-item__head{gap:var(--space-12);min-height:44px}
  .home .members .acc-item__icon{width:32px;height:32px}
  .home .members .acc-item__title{font:var(--text-card-title-sm)}
  .home .members .acc-item__toggle{width:36px;height:36px}
  .home .members .acc-item__body{margin-top:var(--space-8);padding-left:var(--space-56);font:var(--text-mobile-sm)}
  .home .members .acc__footer{flex-direction:column;align-items:stretch;gap:var(--space-16);text-align:center}
  .home .members .acc__footer .btn--primary{width:100%;height:48px}
  .home .members .acc__footer .btn--secondary{height:auto;min-height:0;padding:0;border:0;background:none;box-shadow:none;font:var(--text-mobile-sm);color:var(--text-primary)}
  .home .members .acc__footer .btn--secondary:hover{text-decoration:underline;text-underline-offset:3px}
}