/*! TOPIC SLIDER (Figma 5638:7865) — the same slider mechanics as the row — copied verbatim from the demo's app.css lines 2321–2341 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

/* no surface, so no radius — see the note on .feeder */
.topic-slider{display:flex;flex-direction:column;gap:var(--grid-row-gap-snug);min-width:0;}
.topic-slider__list{display:flex;gap:var(--sp-x-loose);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;}
.topic-slider__list > ip-card-topic{position:relative;flex:1 0 var(--feeder-item-min);min-width:var(--feeder-item-min);scroll-snap-align:start;}/* drawn in the gap, like the feeder's — never as padding on the card */


.topic-slider__list > ip-card-topic + ip-card-topic::before{content:"";position:absolute;inset-block:0;inset-inline-start:calc(var(--sp-x-loose) / -2);border-inline-start:var(--bw-thin) dotted var(--border-hairline);}
ip-card-topic{display:block;--feeder-item-min:186px;}
.card-topic__link{display:flex;flex-direction:column;gap:var(--grid-row-gap-snug);text-decoration:none;text-align:center;}/* a circle, not a rounded square: the shape is the component, not a radius —
   which is why this is 50% and NOT radius/pill (14px in boker/ham) */


.card-topic__media{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:50%;}
.card-topic__media img{display:block;width:100%;height:100%;object-fit:cover;}
.card-topic__title{display:block;font:var(--ts-display-sm);letter-spacing:var(--ts-display-sm-ls);color:var(--content-primary);}
.card-topic__description{display:block;font:var(--ts-headline-xs);color:var(--content-primary);}