/* `scrolling-content` — one row per panel, copy on one side and a square picture on the other.
 *
 * Transcribed from the theme's own `scrolling-content.css` (fetched into `reference/theme/`, mined
 * rather than shipped) and checked against the rendered page at 1440:
 *
 *   container        `display: grid; gap: 30px` -> `1fr 1fr` and `gap: 50px` from 768
 *   content cell     `display: flex; flex-direction: column; justify-content: center`,
 *                    `padding-right: 30px` from 1068 — which is the 607px measure inside a 637px
 *                    column that the live page reports
 *   wide picture     `display: none` below 768; `position: sticky; top: 20px` above it
 *   narrow picture   the other way round, inside the text cell, `display: none` from 768
 *   pictures         637x637, `border-radius: var(--block-border-radius)`
 *   badge            the theme's `.inline-badge`, dot included
 *
 * The page's ground is dark and the copy is white; the panel variants keep the same two-palette
 * arrangement the multicolumn rows use, because a section that can sit on a light surface should
 * say so in one place.
 */

.scrolling-content-section {
  /* The spacing is a margin on the inner element, so the wrapper has to hold it — the lesson the
     video and FAQ wrappers taught on the B1 page. */
  display: flow-root;
}

.scrolling-content--spacing-both {
  margin-top: var(--section-spacing-mobile);
  margin-bottom: var(--section-spacing-mobile);
}

.scrolling-content--spacing-top-only {
  margin-top: var(--section-spacing-mobile);
}

.scrolling-content--spacing-bottom-only {
  margin-bottom: var(--section-spacing-mobile);
}

.scrolling-content--panel-light {
  background: var(--surface-tile-light);
  color: var(--color-specs-value);
}

.scrolling-content--panel-dark {
  background: var(--color-product-card-bg);
  color: var(--color-heading);
}

.scrolling-content__heading {
  margin: 0 0 40px;
}

.scrolling-content__container {
  display: grid;
  gap: 30px;
  position: relative;
}

/* The two cells are pinned to their columns, and the `image_first` container is allowed to backfill.
   Auto-placement alone cannot do this: the cursor never moves backwards, so a text cell placed in
   column 2 leaves column 1 of its row empty and every following cell shifts down one — 361px of
   error on the middle section. Pinning the columns without `dense` swaps which cell is stranded
   rather than fixing the pairing; `dense` lets the picture drop into the hole its row's text left.

   `order` is the wrong tool here and was tried: it reorders placement globally, so six images with
   `order: -1` are placed before all six texts and pair with each other instead. */
.scrolling-content__content {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scrolling-content__image {
  grid-column: 2;
  display: none;
}

.scrolling-content__container--image-first {
  grid-auto-flow: row dense;
}

.scrolling-content__container--image-first .scrolling-content__content {
  grid-column: 2;
}

.scrolling-content__container--image-first .scrolling-content__image {
  grid-column: 1;
}

.scrolling-content__content-image {
  display: block;
  margin-bottom: 30px;
}

.scrolling-content__content-image img,
.scrolling-content__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--scrolling-radius, var(--block-border-radius));
}

/* Measured: 34px/42px/600 — the `h3` step. Set here rather than with a heading class, so the outline
   can use the element that fits and the size stays a decision of this component. */
.scrolling-content__title {
  margin: 0 0 20px;
  font-size: var(--type-h3);
  line-height: var(--type-h3-lh);
  font-weight: var(--font-body-bold-weight);
  color: inherit;
}

.scrolling-content__body {
  color: inherit;
}

.scrolling-content__body p {
  margin: 0 0 1rem;
}

.scrolling-content__body p:last-child {
  margin-bottom: 0;
}

.scrolling-content__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: var(--type-small);
  color: var(--color-accent);
  text-decoration: none;
}

.scrolling-content__cta:hover {
  color: var(--color-accent-hover);
}

.scrolling-content__cta-icon svg {
  width: 6px;
  height: 10px;
}

/* The badge, transcribed from the theme: a 30px pill with room on the left for a 6px dot. The
   padding is not a mistake — `::before` sits in it. */
.inline-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 30px;
  margin-bottom: 20px;
  padding: 8px 15px 8px 30px;
  border-radius: 15px;
  background: var(--badge-bg, var(--color-accent));
  color: var(--badge-text, var(--color-heading));
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 500;
  white-space: nowrap;
}

.inline-badge::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--badge-text, var(--color-heading));
}

/* ------------------------------------------------------------------- breakpoints */
@media (min-width: 48em) {
  .scrolling-content--spacing-both {
    margin-top: var(--section-spacing-desktop);
    margin-bottom: var(--section-spacing-desktop);
  }

  .scrolling-content--spacing-top-only {
    margin-top: var(--section-spacing-desktop);
  }

  .scrolling-content--spacing-bottom-only {
    margin-bottom: var(--section-spacing-desktop);
  }

  .scrolling-content__container {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }

  /* The wide picture is the sticky one, and the narrow one goes away. */
  .scrolling-content__image {
    display: block;
    position: sticky;
    left: 0;
    /* Measured 100px on the live page: the theme writes `top: 20px` and adds the header's own
       height, and the live header row is 80px at this width. */
    top: calc(var(--header-row-height-lg, 80px) + 20px);
    align-self: start;
  }

  .scrolling-content__content-image {
    display: none;
  }
}

@media (min-width: 1068px) {
  .scrolling-content__content {
    padding-right: 30px;
  }
}

/* Upstream's `swipe-on-mobile`: below 768 the rows become a horizontal snap strip, each cell sized
   by `--mobile-swipe-width`. Same behaviour, built from the strip this site already uses. */
@media (max-width: 47.99em) {
  .scrolling-content__container--swipe {
    grid-auto-flow: column;
    grid-auto-columns: minmax(85%, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    align-items: start;
  }

  .scrolling-content__container--swipe::-webkit-scrollbar {
    display: none;
  }

  .scrolling-content__container--swipe .scrolling-content__content {
    grid-column: auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Only the text cell is a strip item on a phone: the wide picture is hidden there anyway. */
  .scrolling-content__container--swipe .scrolling-content__image {
    display: none;
  }
}