/* ===== Section/Stories — highlighted story + card carousel ===== */
.stories { background:var(--c-1); padding-block:72px; }
.stories__container { display:flex; flex-direction:column; gap:var(--gap-head-content); }  /* 48 */

/* Shared meta row (category • date) */
.stories__meta { display:flex; align-items:center; gap:var(--sp-2); }
.stories__cat { font-weight:500; font-size:12px; line-height:1.5; text-transform:uppercase; color:var(--c-12); white-space:nowrap; }
.stories__sep { flex:none; width:1px; height:12px; background:var(--c-7); }
.stories__date { font-weight:700; font-size:12px; line-height:1.5; color:var(--c-11); white-space:nowrap; }

/* --- Highlighted story --- */
.stories__highlight {
  display:flex; gap:var(--sp-2); height:512px; overflow:hidden;
  background:var(--c-2); border:var(--border-1) solid var(--c-4); border-radius:24px; padding:var(--sp-2);
}
.stories__highlight-media {
  position:relative; flex:1 1 0; min-width:0; height:100%;
  border:var(--border-1) solid var(--c-3); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:0 0 4px var(--shadow-color);
}
.stories__highlight-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stories__highlight-text {
  flex:none; width:480px; display:flex; flex-direction:column; justify-content:flex-end; gap:40px; padding:var(--sp-4);
}
.stories__highlight-top { flex:1 1 0; min-height:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.stories__highlight-title { font-weight:500; font-size:32px; line-height:1.2; letter-spacing:-0.04em; color:var(--c-12); text-wrap:balance; }

.stories__learn { align-self:flex-end; gap:var(--sp-1); padding-right:10px; }   /* Figma text-frame is items-end → right-aligned, auto width */
.stories__chev { width:16px; height:16px; flex:none; }
.stories__chev path { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* --- Carousel --- */
.stories__carousel { display:flex; flex-direction:column; gap:var(--gap-content); }  /* 24 */
.stories__viewport {
  background:var(--c-3); border:var(--border-1) solid var(--c-4); border-radius:24px;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-inline:var(--sp-2);
  box-shadow:inset 0 0 4px var(--shadow-color); scrollbar-width:none;
}
.stories__viewport::-webkit-scrollbar { display:none; }
.stories__row { display:flex; gap:var(--sp-2); padding:var(--sp-2); width:max-content; }

.story-card {
  flex:none; width:320px; scroll-snap-align:start;
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--c-1); border:var(--border-1) solid var(--c-4); border-radius:var(--radius-2xl); padding:var(--sp-2);
  box-shadow:0 0 4px var(--shadow-color);
}
.story-card__media {
  position:relative; width:100%; aspect-ratio:1600 / 900;
  border:var(--border-1) solid var(--c-3); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 0 4px var(--shadow-color);
}
.story-card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story-card__text { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); }
.story-card__title {
  font-weight:500; font-size:16px; line-height:1.5; color:var(--c-12); min-height:48px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Footer (pagination + arrows) */
.stories__footer { display:flex; align-items:center; justify-content:space-between; width:100%; }
.stories__dots { display:flex; align-items:center; gap:var(--sp-2); }
.stories__dot { width:8px; height:8px; border-radius:var(--radius-full); background:var(--c-5); }
.stories__dot.is-active { background:var(--c-11); }
.stories__arrows { display:flex; gap:var(--sp-2); }

/* --- Mobile --- */
@media (max-width:1023px) {
  .stories { padding-block:48px; }
  /* highlight stacks: media (3/2) on top, text below */
  .stories__highlight { flex-direction:column; height:auto; }
  .stories__highlight-media { width:100%; aspect-ratio:3/2; height:auto; flex:none; }   /* Figma 300/200 */
  .stories__highlight-text { width:100%; padding:var(--sp-4); }
  .stories__highlight-top { flex:none; }          /* fix flex-basis:0 collapse in the column */
  .stories__highlight-title { font-size:24px; }    /* SV Mobile Section Heading */
  /* cards carousel: fixed 272px */
  .story-card { width:286px; }
}