/* Reserves this panel's 100vh slot in the section's normal flow — its own
   height stays fixed regardless of whether the pin box inside is currently
   position: fixed or static, so the page's total scroll length is always
   correct. See index.tsx for why this isn't done with position: sticky. */
.cc_llcvgyda_1DPtO50GeJ .story-panel {
  position: relative;
  height: 100vh;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__pin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 2rem 1.5rem;
  counter-increment: story-panel;
  background-color: var(--4BzdyajXuX, #ffffff);
  /* Matches the reference site exactly: its sticky-pinned section carries
     this same top border on every panel, including the first — simple
     `border-top`, not tied to the image's own height (spans the full box
     edge to edge regardless of the padding above). */
  border-top: 1px solid var(--ggXmQeec6D, #e5e5e5);
}

/* Stacking-cards effect (matches the reference site): while its wrapper's
   100vh slot spans the viewport, the pin box switches to position: fixed —
   full-viewport and, being later in DOM order with an opaque background,
   painted over the previous (also fixed) panel with no gap. Its border
   (above) is part of this same box, so it stays fully visible for the
   whole time this panel is current instead of flickering. */
.cc_llcvgyda_1DPtO50GeJ .story-panel__pin--active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
}

/* Vertical divider between the media and content halves, spanning the
   panel's full height (independent of padding, same reasoning as above). */
.cc_llcvgyda_1DPtO50GeJ .story-panel__pin::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ggXmQeec6D, #e5e5e5);
}

.cc_llcvgyda_1DPtO50GeJ .story-panel--reverse .story-panel__media {
  order: 2;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel--reverse .story-panel__content {
  order: 1;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__media {
  aspect-ratio: 4 / 5;
  max-height: 100%;
  overflow: hidden;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__content {
  max-width: 32rem;
  justify-self: center;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__index::before {
  content: counter(story-panel, decimal-leading-zero);
  display: block;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__description {
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1.6;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__description p {
  margin: 0 0 1em;
}

.cc_llcvgyda_1DPtO50GeJ .story-panel__description p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .cc_llcvgyda_1DPtO50GeJ .story-panel {
    /* No stacking/cover effect on mobile — panels flow normally. */
    height: auto;
  }

  .cc_llcvgyda_1DPtO50GeJ .story-panel__pin, .cc_llcvgyda_1DPtO50GeJ .story-panel__pin--active {
    /* Force static even if a stale --active class lingers from a resize
       down from desktop mid-scroll. */
    position: static;
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    overflow: visible;
    padding: 3rem 1.25rem;
    row-gap: 1.5rem;
  }

  .cc_llcvgyda_1DPtO50GeJ .story-panel__media, .cc_llcvgyda_1DPtO50GeJ .story-panel__content {
    order: initial !important;
  }

  .cc_llcvgyda_1DPtO50GeJ .story-panel__pin::after {
    /* The divider only makes sense against the desktop side-by-side
       layout — on mobile panels just flow normally. */
    content: none;
  }

  .cc_llcvgyda_1DPtO50GeJ .story-panel__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: none;
  }
}