/* =====================================================================
   Topics index (Figma section "Topics" 1419:35190; frames 1419:35191,
   1420:35752, 1421:90, 1421:392).
   Hero (Hero_Lead_Row 1424:51973): title block left, animated column of
   Topic card Rows right (389px, aligned to the 1200px content grid),
   white→transparent gradient over the top 278px, hero clipped at 616px.
   Body: "Find your favorites" header (label left, 560px search right),
   sections in 2-column rows — 16px header→list and between rows,
   48px between sections. Search runs in place: chips + grouped results.
   ===================================================================== */
.topics{background:var(--surface-background)}

/* ---------- Hero ---------- */
.topics__hero{position:relative;height:616px;overflow:hidden}
.topics__hero-in{position:absolute;left:56px;top:318px;max-width:842px;display:flex;flex-direction:column;gap:var(--space-12)}
.topics__title{margin:0;font:var(--text-7xl);color:var(--text-primary)}
.topics__lead{margin:0;font:var(--text-lg);color:var(--text-secondary)}

.topics__anim{position:absolute;top:0;bottom:0;width:389px;right:max(var(--space-24),calc((100% - 1200px)/2))}
.topics__anim-track{display:flex;flex-direction:column;gap:var(--space-24);will-change:transform}
.topics__anim .topic-card{flex:none}
.topics__fade{position:absolute;top:0;left:0;right:0;height:278px;background:linear-gradient(var(--surface-background),transparent);pointer-events:none}

/* ---------- Body ---------- */
.topics__body{padding:var(--space-64) 0 var(--space-96)}
.topics__wrap{width:min(1200px,100% - 2*var(--space-24));margin-inline:auto}

/* Find your favorites header (1428:52788): label left, 560px search field right */
.topics__find{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24)}
.topics__find-label{margin:0;font:var(--text-lg);color:var(--text-secondary)}
.topics__search{box-sizing:border-box;display:flex;align-items:center;gap:var(--space-12);width:560px;max-width:100%;height:44px;padding:0 var(--space-16);
  background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:border-color .2s,box-shadow .2s}
.topics__search:focus-within{border-color:var(--accent-default);box-shadow:var(--shadow-focus-ring-accent)}
.topics__search svg{flex:none;width:18px;height:18px;color:var(--text-secondary)}
.topics__search input{flex:1;min-width:0;border:0;outline:0;background:none;font:var(--text-sm);color:var(--text-primary)}
.topics__search input::placeholder{color:var(--text-placeholder)}
.topics__search input::-webkit-search-cancel-button{display:none}
.topics__clear[hidden]{display:none}
.topics__clear{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;padding:0;background:none;
  color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm)}
.topics__clear:hover{color:var(--text-primary)}
.topics__clear:focus-visible{outline:0;box-shadow:var(--shadow-focus-ring-accent)}
.topics__clear svg{width:16px;height:16px}

/* Type filter chips (search state, 1428:52836): Filter Chip row, 8px gaps, 12px under the field */
.topics__chips{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-12)}

/* ---------- Sections ---------- */
.topics__section{margin-top:var(--space-48)}
.topics__section .section-header{margin-bottom:var(--space-16)}
.topics__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
/* "See all N" / "See N more" (Button Secondary Small) below the list, left-aligned */
.topics__more{margin-top:var(--space-16)}
.topics__section [hidden]{display:none}

/* ---------- Empty state + popular topics (1421:392) ---------- */
.topics__empty{margin-top:var(--space-48)}
.topics__empty .empty-state{position:static}

/* Tablet keeps 2 columns (Row Mobile cards fit at 332); phones get one column (2026-10-25) */
@media (max-width:599px){
  .topics__grid{grid-template-columns:minmax(0,1fr)}
}
/* Tablet (2215:101326, Prompt 20): hero 400 tall under the navbar, intro 270 wide at the bottom left (title 48, lead), the animated
   column 389 wide on the right; body 40 top, label over a full-width search, sections 40 apart, cards 334 (12 / 16 apart),
   See all centred. Phone (2217:49463): hero hugs (24 top, title 40/44, lead), one row of 360 cards drifting left, divider,
   search, one column of cards 8 apart, sections 40 apart. Formats are not drawn on tablet / phone. */
@media (max-width:1023px){
  .topics__find{flex-direction:column;align-items:stretch;gap:0}
  .topics__search{width:100%}
  .topics__section{margin-top:var(--space-40)}
  .topics__more{display:flex;justify-content:center}
  .topics__section[data-group="format"]{display:none}
}
@media (min-width:600px) and (max-width:1023px){
  .topics__hero{height:400px}
  .topics__hero-in{left:var(--space-32);top:206px;width:270px;gap:var(--space-12)}
  .topics__title{font:var(--text-mobile-8xl)}
  .topics__lead{font:var(--text-sm)}
  .topics__anim{right:var(--space-32);width:389px;top:-218px;bottom:auto;height:calc(100% + 218px)}
  .topics__fade{height:200px}
  .topics__body{padding:var(--space-40) 0 var(--space-64)}
  .topics__find-label{font:var(--text-lg);text-transform:none;color:var(--text-secondary);min-height:28px}
  .topics__grid{gap:var(--space-16) var(--space-12)}
}
@media (max-width:599px){
  .topics__hero{height:auto;overflow:hidden;padding:var(--space-24) 0}
  .topics__hero-in{position:static;padding:0 var(--space-16);gap:var(--space-16)}
  .topics__title{font:var(--text-mobile-7xl)}
  .topics__lead{font:var(--text-mobile-base)}
  .topics__anim{position:relative;top:auto;bottom:auto;right:auto;width:auto;margin-top:var(--space-20);padding-left:var(--space-16);overflow:hidden}
  .topics__anim-track{flex-direction:row;width:max-content}
  .topics__anim .topic-card{width:360px}
  .topics__fade{display:none}
  .topics__body{padding:var(--space-24) 0 var(--space-48)}
  .topics__wrap{width:calc(100% - 2 * var(--space-16))}
  .topics__find-label{display:none}
  .topics__grid{gap:var(--space-8)}
  .topics__section .section-header{margin-bottom:var(--space-12)}
}
@media (prefers-reduced-motion:reduce){
  .topics__anim-track{transform:none !important}
}
/* Tablet margins: 32px (680 content at 744), tablet-mobile-responsive-decisions */
@media (min-width:600px) and (max-width:1023px){
  .topics__wrap{width:min(1200px,100% - 2*var(--space-32))}
  .topic__hero{padding-inline:var(--space-32)}
  .topics__hero-in{padding-inline:var(--space-32)}
}