/* =====================================================================
   Search results page — Search handoff, all breakpoints (2026-10-22).
   Desktop 1491:49452 All · 1492:63302 Stories · 1492:63830 No results.
   Tablet 1819:17594 All · 1821:18416 Filters · 1853:78806 Stories · 1853:78930 People · 1853:79126 Empty tab · 1853:79429 No matches.
   Phone 1538:71479 All · 1538:71989 Filters · 1857:79189 … 1857:79549.
   Components: Tab item Underline (tab-item.css), Select (select.css), Checkbox, Filter Chip (filter-chip.css), Topic card Row,
   Story Card List, Video Card, Event Card, Empty State, Button Secondary XS / Small.
   ===================================================================== */
.srp{--srp-max:1200px;--srp-gut:max(var(--space-24),calc((100% - var(--srp-max)) / 2));padding-top:118px;min-height:60vh}
.srp__head,.srp__tabs,.srp__filters,.srp__chips,.srp__content,.srp__none{box-sizing:border-box;padding-inline:var(--srp-gut)}
.srp-copy--sm{display:none}

/* App / Search Field: tablet + phone only (desktop searches from the navbar) */
.srp-field{display:none}

/* header (1491:49497): eyebrow, Storica 36/40 uppercase, count text-base */
.srp__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);padding-top:var(--space-56);padding-bottom:var(--space-32)}
.srp__eyebrow{margin:0;font:var(--text-xs);color:var(--text-secondary)}   /* Figma 1491:49452: "Search results", 12/16, sentence case */
.srp__title{margin:0;font:var(--text-4xl);letter-spacing:0;text-transform:uppercase;color:var(--text-primary);overflow-wrap:anywhere}
.srp__count{margin:0;font:var(--text-base);color:var(--text-secondary)}
/* no results: Did you mean (Filter Chip, active) + Or try (Filter Chips with trending icon) — 1492:63996 / 1492:64002 */
.srp__dym{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);font:var(--text-base);color:var(--text-secondary);margin-top:var(--space-2)}
.srp__dym-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.srp__dym[hidden],.srp__try[hidden]{display:none}
.srp__try{align-items:center}
.srp__try-label{font:var(--text-sm);color:var(--text-secondary);margin-right:var(--space-4)}

/* scope tabs (Tab item · Underline, 1491:49501): full-width rule, sticky under the navbar, shadow once stuck */
.srp__bar{position:sticky;top:var(--srp-stick,106px);z-index:20;background:var(--surface-background);transition:box-shadow .2s}
.srp__bar[hidden]{display:none}
.srp__bar.is-stuck{box-shadow:0 6px 12px -6px rgba(20,18,15,.14)}
.srp__sentinel{display:block;height:0}
.srp__tabs{width:100%}

/* filter row (1491:49547): FILTER · Sport / League / Date Selects · Staff picks · SORT · Select */
.srp__filters{display:flex;align-items:center;gap:var(--space-12);padding-top:var(--space-20);padding-bottom:var(--space-20)}
.srp__filters[hidden]{display:none}
.srp__flabel{font:var(--text-xs);color:var(--text-secondary)}   /* "Filter" / "Sort", sentence case (Figma Filter_Row) */
.srp__spacer{flex:1}
.srp-dd{flex:none;width:160px;min-width:0;gap:0}
.srp-dd .select__control{height:40px}
.srp-dd.is-filled .select__control{border-color:var(--border-strong)}
.srp-dd .select__control:disabled{cursor:not-allowed}
.srp-dd__menu{min-width:200px;right:auto}
.srp-dd__menu--end{left:auto;right:0}
.srp-dd__opt:focus{outline:none;background:var(--surface-background)}
.srp__staff{display:inline-flex;margin-left:var(--space-8)}
.srp__mfilters{display:none}
/* active filters (desktop): removable Filter Chips + Clear all */
.srp__chips{align-items:center;padding-bottom:var(--space-8);margin-top:calc(-1 * var(--space-8))}
.srp__chips[hidden]{display:none}
.srp__clear-link{padding:0 var(--space-4);border:0;background:none;cursor:pointer;font:var(--text-xs);color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px}
.srp__clear-link:hover{color:var(--text-primary)}
/* the sheet only exists under 1024 */

/* content groups (1491:49571): 56 between groups, header → cards 20, cards 24 apart */
.srp__content,.srp__none{display:flex;flex-direction:column;gap:var(--space-56);padding-top:var(--space-24);padding-bottom:var(--space-96);outline:none}
.srp__none[hidden]{display:none}
.srp__content:empty{display:none}
.srp-group{display:flex;flex-direction:column;gap:var(--space-20);min-width:0}
.srp-group__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)}
.srp-group__title{margin:0;font:var(--text-2xl);letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary)}
.srp-see{flex:none;padding-inline:var(--space-8)}
.srp-group__count{flex:none;font:var(--text-xs);color:var(--text-secondary)}
.srp-grid{display:grid;gap:var(--space-24);align-items:stretch}
.srp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.srp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.srp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.srp-grid>*{min-width:0;width:auto}
.srp-grid .topic-card{min-height:116px}
.srp-grid--4 .wp-open .video-card--vertical{aspect-ratio:9/14}
.srp-grid .event-card{height:100%}
.series-result .video-card__title a{color:inherit;text-decoration:none}
/* Show more + "You've seen 9 of N" (1492:63302) */
.srp-more{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);margin-top:calc(-1 * var(--space-16))}
.srp-more__bar{display:block;width:200px;height:2px;background:var(--border-default);border-radius:2px;overflow:hidden}
.srp-more__bar span{display:block;height:100%;background:var(--text-primary)}
.srp-more__txt{font:var(--text-xs);color:var(--text-secondary)}
/* Empty State: empty tab / no matches with filters (tablet 1853:79126 / 1853:79429; not drawn on desktop) */
.srp-empty.empty-state{max-width:none;padding:var(--space-40) 0 var(--space-80);gap:var(--space-12)}
.srp-empty .empty-state__icon{width:64px;height:64px;padding:var(--space-6);color:var(--text-secondary)}
.srp-empty .empty-state__icon svg{width:40px;height:40px}
.srp-empty .empty-state__title{font:var(--text-2xl);letter-spacing:.08em}
.srp-empty .empty-state__body{font:var(--text-base)}
/* No matches with filters: copy centered, "Clear all filters" left-aligned (Figma 1853:79429, answer 23d) */
.srp-empty .btn{align-self:flex-start;margin-top:var(--space-12);height:40px;padding:var(--space-8) var(--space-16);font-size:12px;line-height:16px}

@media (max-width:1100px) and (min-width:1024px){
  .srp-grid--4,.srp-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srp-dd{width:136px}
}

/* =====================================================================
   Tablet + phone (≤1023): App / Search Field, "Results for", tabs, Filters button + Sort Select, App / List Headers,
   Topic card Row (2 columns on tablet, 1 on phone), Story Card List, video + game rails, bottom-sheet filters.
   ===================================================================== */
@media (max-width:1023px){
  .srp{--srp-gut:var(--space-32);padding-top:var(--sp-nav-h,120px)}
  .srp-copy--lg{display:none}.srp-copy--sm{display:inline}
  /* App / Search Field (1819:17597): 56 tall, back 24, search 22, 15/22 query, gold caret, divider */
  .srp-field{display:flex;align-items:center;gap:var(--space-12);box-sizing:border-box;height:57px;padding:0 var(--srp-gut);border-bottom:1px solid var(--border-subtle)}
  .srp-field__back{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:calc(-1 * var(--space-8));color:var(--text-primary);border-radius:var(--radius-full)}
  .srp-field__back svg,.srp-field__icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .srp-field__icon{color:var(--text-primary)}
  .srp-field__input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;font:var(--text-mobile-lg);color:var(--text-primary);caret-color:var(--accent-default);-webkit-appearance:none;appearance:none}
  .srp-field__input:focus{outline:none}
  .srp-field__input::-webkit-search-cancel-button{display:none}
  .srp-field__input::placeholder{color:var(--text-placeholder)}
  .srp-field .nav__search-clear{width:32px;height:32px}
  .srp-field__back:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-accent)}

  .srp__head{padding-top:var(--space-20);padding-bottom:var(--space-8);gap:var(--space-4)}
  .srp__eyebrow,.srp__title-pre{display:none}
  .srp__title{font:var(--text-mobile-4xl);letter-spacing:0}   /* Figma Results Header: Storica Bold 24/28 (tablet and phone) */
  .srp__count{font:var(--text-mobile-sm)}
  .srp.is-empty .srp__head{gap:var(--space-8)}
  .srp__dym{font:var(--text-mobile-sm)}

  .srp__bar{top:var(--srp-stick,0px)}
  .srp__tabs{gap:var(--space-24);padding-inline:var(--srp-gut)}
  .srp__tabs .tab-item{font:var(--text-sm)}   /* Tab item 14/20 (selected Semibold) */
  .srp__tabs .tab-item[aria-selected="true"]{font-weight:600}
  .srp__tabs .tab-item__count{font:var(--text-xs-semibold)}

  /* Filters button (Button Secondary Small) + Sort Select 168×44 */
  .srp__filters{padding-top:var(--space-8);padding-bottom:var(--space-8);gap:var(--space-12)}
  .srp__flabel,.srp__filters>.srp-dd:not(.srp-dd--sort),.srp__staff{display:none}
  .srp__mfilters{display:inline-flex}
  .srp__mfilters .btn__icon{width:16px;height:16px}
  .srp-dd--sort{width:168px}
  .srp-dd--sort .select__control{height:44px;font:var(--text-mobile-lg)}
  /* applied filters under the Filter Row: removable Filter Chips + Clear all (mobile filtering standard, 2026-10-23); one line, scrolls sideways */
  .srp__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:0;padding-top:var(--space-4);padding-bottom:var(--space-8)}
  .srp__chips::-webkit-scrollbar{display:none}
  .srp__chips .srp__clear-link{flex:none;font:var(--text-mobile-xs)}

  .srp__content,.srp__none{gap:var(--space-32);padding-top:var(--space-20);padding-bottom:var(--space-64)}
  .srp-group{gap:var(--space-16)}
  .srp-see__n{display:none}   /* App / List Header link reads "See all" (Figma 1819:17594, 1538:71479); desktop keeps the count */
  /* App / List Header: 11/14 label (+0.44) and a 12/16 text link */
  .srp-group__head{min-height:22px}
  .srp-group__title{font:var(--text-mobile-label);letter-spacing:.44px;color:var(--text-secondary)}
  .srp-see,.srp-group__count{height:auto;min-height:24px;padding:0;border:0;background:none;box-shadow:none;font:var(--text-mobile-xs);color:var(--text-secondary)}
  .srp-see:hover{color:var(--text-primary);background:none}
  .srp-see{min-height:22px}
  /* (card sizes: see the Topic card / Story Card List / Event Card blocks below) cards as drawn in the tablet / phone results (Figma 1819:17594, 1538:71479): Topic card Row title Storica 14/18 (74 tall); Story Card
     List content gap 2 (111); game card = Event Card · Device=Mobile with 4 between tags, title, City • Time and the Button group (152) */

  /* Teams & people: Topic card Row, 2 columns on tablet */
  .srp-grid{gap:var(--space-16)}
  .srp-grid--ents{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .srp-grid--ents .topic-card{min-height:0;padding:var(--space-10) var(--space-12);border-color:var(--border-subtle);box-shadow:var(--shadow-card)}
  .srp-grid--ents .topic-card__media{border:0;background:var(--badge-neutral-bg)}
  .srp-grid--ents .topic-card__content{gap:var(--space-2)}
  .srp-grid--ents .topic-card__title{font:var(--text-card-title-sm);-webkit-line-clamp:2}   /* Storica 14/18 (Figma Topic card in the results) */
  .srp-grid--ents :is(.topic-card__sub,.topic-card__meta){font:var(--text-xs)}
  .srp-grid--ents .topic-card__actions>.btn--secondary:not(.topic-card__follow){display:none}

  /* Stories: Story Card List, one per row (162×91 image, badge, 2-line title, author, ⋮) */
  .srp-grid--stories,.srp-grid--newsletter,.srp-grid--series{grid-template-columns:1fr}
  .srp-grid--stories{grid-auto-rows:auto;row-gap:var(--space-16)}
  .srp-grid--stories .story-card:not(.story-card--main){flex-direction:row;align-items:center;gap:var(--space-12);padding:var(--space-8);min-height:0;
    background:var(--card-bg-default);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
  .srp-grid--stories .story-card .story-card__media{flex:none;width:162px;height:91px;aspect-ratio:auto;border-radius:var(--radius-md)}
  .srp-grid--stories .story-card .story-card__content{flex:1 1 0;height:auto;padding:0;gap:var(--space-4);min-height:0;background:transparent;box-shadow:none;min-width:0;border:0;gap:var(--space-2)}
  .srp-grid--stories .story-card .story-card__title{font:var(--text-card-title-sm);-webkit-line-clamp:2}   /* Storica 14/18 */
  .srp-grid--stories .story-card .badge{min-height:20px;padding:var(--space-2) var(--space-8);font:var(--text-xxs)}
  .srp-grid--stories .story-card .author__avatar{width:20px;height:20px}
  .srp-grid--stories .story-card :is(.author__name,.story-card__meta){font:var(--text-xs)}
  .srp-grid--stories .story-card .story-card__meta{display:none}   /* Story Card List (tablet + phone frames): author only */

  /* Videos + games: rails (Video Card 280; Event Card Device=Mobile 300) from the gutter */
  .srp-grid--videos:not(.srp-grid--tab),.srp-grid--games:not(.srp-grid--tab),.srp-grid--watch:not(.srp-grid--tab){display:flex;gap:var(--space-16);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--srp-gut);
    margin-inline:calc(-1 * var(--srp-gut));padding:var(--space-2) var(--srp-gut) var(--space-8);scrollbar-width:none;overscroll-behavior-x:contain}
  .srp-grid--videos:not(.srp-grid--tab)::-webkit-scrollbar,.srp-grid--games:not(.srp-grid--tab)::-webkit-scrollbar,.srp-grid--watch:not(.srp-grid--tab)::-webkit-scrollbar{display:none}
  .srp-grid--videos:not(.srp-grid--tab)>*{flex:0 0 280px;scroll-snap-align:start}
  .srp-grid--games:not(.srp-grid--tab)>*{flex:0 0 300px;scroll-snap-align:start}
  .srp-grid--watch:not(.srp-grid--tab)>*{flex:0 0 200px;scroll-snap-align:start}
  .srp-grid--videos.srp-grid--tab,.srp-grid--watch.srp-grid--tab{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srp-grid--games.srp-grid--tab{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Event Card · Device=Mobile: badge row, title, place · day · time, actions (no date column) */
  .srp-grid--games .event-card{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4);padding:var(--space-16);height:auto}   /* Event info gap 4 (Figma 152) */
  .srp-grid--games :is(.event-card__date,.event-card__divider,.event-card__media){display:none}
  .srp-grid--games .event-card__content{display:contents}
  .srp-grid--games .event-card__tags-row{min-height:32px}
  .srp-grid--games .event-card__meta{gap:var(--space-8)}
  .srp-grid--games .event-card__meta>.badge{min-height:20px;padding:var(--space-2) var(--space-8);font:var(--text-xxs)}
  .srp-grid--games .event-card__meta>.badge--person{display:none}
  .srp-grid--games .event-card__title{font:var(--text-card-title-sm);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* Storica 14/18 */
  .srp-grid--games .event-card__actions{padding-top:0}
  .srp-grid--games .event-card__mmeta{display:block;font:var(--text-xs);color:var(--card-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Show more results: Button Secondary Small, full width */
  .srp-more{margin-top:0;align-items:stretch;text-align:center}
  .srp-more__btn{width:100%}
  .srp-more__bar{align-self:center}
  .srp-more--all{margin-top:calc(-1 * var(--space-8))}

  .srp-empty.empty-state{padding:var(--space-32) 0 var(--space-64)}
  .srp-empty .empty-state__title{font:var(--text-mobile-3xl);letter-spacing:.04em}
  .srp-empty .empty-state__body{font:var(--text-mobile-sm)}

  /* ---------- Filters sheet (1821:18416): full-width bottom sheet, radius 24 on top ---------- */
}
@media (min-width:600px) and (max-width:1023px){
}

/* phone (≤599): 16 gutter, single-column Topic cards, tabs 20 apart */
@media (max-width:599px){
  .srp{--srp-gut:var(--space-16);--srp-stick:0px;padding-top:0}   /* app screen: no web navbar above the App / Search Field (Figma 1538:71479) */
  .srp__head{padding-top:var(--space-8);padding-bottom:var(--space-8)}   /* Results Header 8 / 16 (tablet 20 / 32) */
  .srp__tabs .tab-item{font:var(--text-base)}   /* 14/20 on phones (text-sm is 13/18 in the Mobile mode) */
  .srp__tabs{gap:var(--space-20)}
  .srp-dd--sort{width:168px}
  .srp-grid--ents,.srp-grid--videos.srp-grid--tab,.srp-grid--games.srp-grid--tab,.srp-grid--watch.srp-grid--tab{grid-template-columns:1fr}
  .srp-grid--stories .story-card .story-card__media{width:162px;height:91px}
  .srp-grid--games:not(.srp-grid--tab)>*{flex-basis:300px}
}
@media (prefers-reduced-motion:reduce){.srp__bar{transition:none!important}}

/* (outside desktop the query span and × stay hidden) */
.nav__search-q,.nav__search-x{display:none}
/* Navbar · State=Search on the results page (Figma 1491:49452 Search_Field): the navbar Search button becomes a 268×40 pill field with the
   query, 16 icon, 12/16 value and a 14 ×; 1px text/primary border on white (Dark: border/strong, soft, per Isabel's dark-mode rule).
   Clicking it opens the panel with the query; × opens it empty. Desktop only (tablet / phone have the App / Search Field row). */
@media (min-width:1024px){
  body:has([data-search-page]) .nav__search.has-q{width:268px;height:40px;justify-content:flex-start;gap:var(--space-12);padding:0 var(--space-8) 0 var(--space-12);
    border:1px solid var(--text-primary);border-radius:var(--radius-full);background:var(--surface-default);box-shadow:none}
  :root[data-theme="dark"] body:has([data-search-page]) .nav__search.has-q{border-color:var(--border-strong)}
  body:has([data-search-page]) .nav__search.has-q .btn__icon{width:16px;height:16px}
  body:has([data-search-page]) .nav__search.has-q .btn__label{display:none}
  body:has([data-search-page]) .nav__search.has-q .nav__search-q{display:block;flex:1;min-width:0;font:var(--text-xs);text-align:left;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav__search-x,.nav__search-q{display:none}
  body:has([data-search-page]) .nav__search.has-q .nav__search-x{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);color:var(--text-secondary)}
  body:has([data-search-page]) .nav__search.has-q .nav__search-x:hover{color:var(--text-primary);background:var(--button-nav-secondary-bg-hover)}
  .nav__search-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
}
/* Desktop results story cards (Figma 1492:63302 / 1491:49452: Story Card Size=Default 384×332 in a 3-column grid, 24 / 32 apart):
   16/20 Storica title, Small badge, 12/16 author + read time (+ date: standing rule), content 8/16 padding and 8 gap. Image stays 16:9 (Figma draws 190). */
@media (min-width:1024px){
  .srp-grid--stories{column-gap:var(--space-24);row-gap:var(--space-32)}
  .srp-grid--stories .story-card__content{padding:var(--space-8) var(--space-16);gap:var(--space-8)}
  .srp-grid--stories .story-card__title{font:var(--text-card-title)}
  .srp-grid--stories .story-card .badge{min-height:20px;padding:var(--space-2) var(--space-8);font:var(--text-xxs)}
  .srp-grid--stories .story-card :is(.author__name,.story-card__meta){font:var(--text-xs)}
}

/* Filters sheet (Figma App / Filters Sheet in 1538:71989 / tablet 1821:18416), universal floating sheet (Isabel's rule): inset 8 on phones
   (374 of 390) and the 32 page gutter on tablet, 8 from the bottom, radius 24 on every corner, 8/16/24/16 padding, 20 between blocks;
   title 24/28; no "Clear all" in the title row (the footer has it); groups = 11/14 label + chips 10 below, chips 14/20 with 8/16 padding,
   8 apart; Staff picks row 40 with 12 sides; footer 4 on top, two 48 buttons 12 apart */
@media (max-width:1023px){
}
@media (max-width:599px){
}