/* Breakpoints and proportions taken from 2.1's featured-collections-2:
   - 1150px and up: copy 40% / cards 60%, side by side, 6rem apart
   - below 1150px: stacked, 1.25rem apart
   - below 750px: the card row scrolls sideways, one card per snap at 60vw */

.story-collections {
  background-color: rgb(var(--color-background));
}

.story-collections__carousel {
  display: block;
  position: relative;
}

.story-collections__track {
  display: flex;
  margin: 0;
  padding: 0;
}

/* SHOPLINE wraps every section block in its own <div id="shopline-block-...">, so that wrapper is
   the carousel's flex child, not the slide. The slide width has to be set on it. */
.story-collections__track > *:has(> .story-collections__slide) {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.story-collections__slide {
  min-width: 0;
}

.story-collections__slide-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}

.story-collections__copy {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  min-width: 0;
}

.story-collections__title {
  margin: 0;
}

.story-collections__cards {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

/* Each card is wrapped in its own block <div> too, so the row's flex sizing goes on the wrapper
   and the card just fills it. */
.story-collections__cards > *:has(> .story-collections__card) {
  flex: 1 1 0;
  min-width: 0;
}

.story-collections__card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
  height: 100%;
  position: relative;
}

.story-collections__card-media {
  aspect-ratio: var(--story-collections-ratio, 1 / 1);
  overflow: hidden;
}

.story-collections__card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The link covers the card without wrapping the text, as in 2.1. */
.story-collections__card-link {
  position: absolute;
  inset: 0;
}

.story-collections__arrows {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.story-collections__arrow {
  align-items: center;
  background-color: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.2);
  border-radius: 50%;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  display: flex;
  height: 40px;
  width: 40px;
  justify-content: center;
}

.story-collections__arrow[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.story-collections__arrow--prev svg {
  transform: rotate(180deg);
}

@media screen and (min-width: 1150px) {
  .story-collections__slide-inner {
    flex-direction: row;
    gap: 6rem;
  }

  .story-collections__copy {
    flex: 0 0 calc(40% - 6rem);
  }

  .story-collections__cards {
    flex: 1 1 60%;
  }

  .story-collections__arrows {
    margin-top: 0;
    position: absolute;
    inset-block-start: calc(50% - 20px);
    inset-inline: -3%;
    justify-content: space-between;
    pointer-events: none;
  }

  .story-collections__arrow {
    pointer-events: auto;
  }
}

@media screen and (max-width: 749px) {
  .story-collections__cards {
    justify-content: flex-start;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
  }

  .story-collections__cards > * {
    flex-basis: 60vw;
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}