/* =========================================================
   SECTION — Story carousel (COLLINS arts-culture pattern)
   A horizontal scroll track of mixed portrait/landscape story
   cards. Native CSS scroll-snap — sideways scroll, snaps to
   cards, zero input lag, no library. Self-contained .sc-*.
   ========================================================= */

.sc-carousel {
  display: flex;
  gap: var(--space-row-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(24px, calc((100vw - var(--shell)) / 2));
  padding-bottom: var(--space-row-md);
  margin-inline: calc(-1 * max(24px, calc((100vw - var(--shell)) / 2)));
  padding-inline: max(24px, calc((100vw - var(--shell)) / 2));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--page-fg), transparent 70%) transparent;
}

.sc-carousel::-webkit-scrollbar {
  height: 6px;
}

.sc-carousel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--page-fg), transparent 75%);
  border-radius: var(--radius-pill);
}

.sc-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(258px, 26vw, 360px);
}

.sc-card[data-layout="landscape"] {
  width: clamp(420px, 46vw, 668px);
}

.sc-media {
  margin: 0;
  aspect-ratio: 362 / 452;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--page-fg), transparent 88%);
}

.sc-card[data-layout="landscape"] .sc-media {
  aspect-ratio: 668 / 452;
}

.sc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slower) var(--ease);
}

.sc-card:hover .sc-media img,
.sc-card:focus-within .sc-media img {
  transform: scale(1.04);
}

.sc-content {
  display: flex;
  flex-direction: column;
  gap: var(--radius-xs);
  margin-top: var(--space-row-sm);
}

.sc-content a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-card-sm);
  letter-spacing: var(--tracking-heading-soft);
  line-height: var(--leading-heading);
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-hover-fast) var(--ease);
}

.sc-content a:hover,
.sc-content a:focus-visible {
  color: var(--pr-rocket);
}

.sc-content p {
  margin: 0;
  font-size: var(--type-small);
  opacity: 0.62;
  line-height: var(--leading-body-tight);
}

/* Drag-scroll affordance hint */
.sc-hint {
  display: flex;
  align-items: center;
  gap: var(--space-row-xs);
  margin-top: var(--space-row-sm);
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  opacity: 0.45;
}