/* ==========================================================================
   SCROLL CARDS
   A pinned row of cards that open one at a time as the page scrolls.

   Modes (chosen by CSS, read by JS):
     x       horizontal accordion   (> 767px wide)
     y       vertical accordion     (<= 767px wide)
     static  plain grid             (short screens, reduced motion, no JS, Bricks builder)

   Everything outside [data-sc-mode="x"] / [data-sc-mode="y"] is the static grid,
   so the section still works if the script never runs.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Settings — change these per breakpoint, per page, or per instance
   -------------------------------------------------------------------------- */

.scroll-cards {
  --sc-mode: x;                 /* read by JS; see media queries below */

  --sc-inactive: 12.5rem;       /* inactive card width (x) or height (y) */
  --sc-active-min: 2.5;           /* open card is at least this many times a
                                   closed card's width (or height on mobile) */
  --sc-visible: 3.35;           /* inactive cards visible beside the active one.
                                   The decimal part is how much of the next
                                   hidden card peeks in at the edge. */
  --sc-gap: 1.25rem;            /* space between cards */
  --sc-max-h: 62.5rem;          /* tallest the card row can get (1000px) */
  --sc-pad-y: 2.5rem;           /* space above/below inside the pinned screen */
  --sc-top: 0rem;               /* set to your header height if it becomes sticky */
  --sc-radius: var(--btn-radius-l);
  --sc-radius-active: var(--btn-radius-xl);

  --sc-accent: #e0604c;         /* progress bar fill */
  --sc-track: var(--col-line-time);  /* progress bar background */
  --sc-ink: var(--col-text-light);               /* text on cards */
  --sc-card-bg: var(--col-bg-dark);        /* shows while images load */

  --sc-pad-x-card: 1.5rem;      /* inner padding of a card */
  --sc-title-min: var(--heading-h4);     /* title size on an inactive card */
  --sc-title-max: var(--heading-h2);         /* title size on the active card */
}

/* Tablet: fewer, narrower inactive cards so the active one has room for text */
@media (max-width: 1000px) {
  .scroll-cards {
    --sc-inactive: 10rem;
    --sc-visible: 1.4;
    --sc-gap: 1rem;
  }
}

/* Mobile (landscape and portrait): switch to the vertical accordion */
@media (max-width: 767px) {
  .scroll-cards {
    --sc-mode: y;
    --sc-inactive: 4.25rem;     /* now a HEIGHT: the collapsed strip */
    --sc-visible: 1.6;
    --sc-gap: 0.625rem;
    --sc-pad-y: 1.5rem;
    --sc-pad-x-card: 1.125rem;
    --sc-title-min: 1rem;
    --sc-title-max: 1.5rem;
  }
}

/* Too short to pin anything (phones held sideways), or the visitor asked for
   less motion: plain grid. Keep this block LAST so it wins. */
@media (max-height: 500px), (prefers-reduced-motion: reduce) {
  .scroll-cards { --sc-mode: static; }
}


/* --------------------------------------------------------------------------
   2. Static grid (default — also what you see inside the Bricks builder)
      Selectors start with .scroll-cards so they outrank Bricks' own element
      defaults (.brxe-block, .brxe-image …) no matter which loads first.
   -------------------------------------------------------------------------- */

.scroll-cards .scroll-cards__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--sc-gap);
}

.scroll-cards .scroll-card {
  --open: 1;                    /* 0 = collapsed, 1 = fully open (JS scrubs this) */
  --progress: 0;                /* 0–1 fill of the progress bar (JS) */

  position: relative;
  isolation: isolate;           /* keeps the image/overlay layers inside the card */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 26rem;
  border-radius: var(--sc-radius);
  background: var(--sc-card-bg);
  color: var(--sc-ink);
}

/* The photo fills the card behind everything */
.scroll-cards .scroll-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Darkening layer: an overall dim that fades as the card opens,
   plus a bottom gradient so text stays readable on any photo */
.scroll-cards .scroll-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.35) 45%, rgb(0 0 0 / 0) 75%),
    rgb(0 0 0 / calc(0.4 - 0.3 * var(--open)));
  pointer-events: none;
}

.scroll-cards .scroll-card__body {
  padding: var(--sc-pad-x-card);
  padding-bottom: calc(var(--sc-pad-x-card) + 0.5rem);  /* room for the progress bar */
}

.scroll-cards .scroll-card__title {
  margin: 0;
  font-size: calc(var(--sc-title-min) + (var(--sc-title-max) - var(--sc-title-min)) * var(--open));
  line-height: 1.15;
  text-wrap: balance;
  color: inherit;
}

.scroll-cards .scroll-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
/* Space between title and description. A margin (not padding) so a
   collapsed card can shrink this block all the way to 0. */
.scroll-cards .scroll-card__content > :first-child {
  margin-top: 0.875rem;
}

.scroll-cards .scroll-card__desc {
  margin: 0;
  max-width: 40rem;
  line-height: 1.55;
  color: inherit;
}

/* The progress bar is added by the script and only shown in the scroll modes
   (see section 3), so the static grid never shows it */
.scroll-cards .scroll-card__progress {
  display: none;
  position: absolute;
  inset: auto 0 0 0;
  height: 0.5rem;
  background: var(--sc-track);
  opacity: clamp(0, calc((var(--open) - 0.6) / 0.4), 1);
  pointer-events: none;
}
.scroll-cards .scroll-card__progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sc-accent);
  transform: scaleX(var(--progress));
  transform-origin: left center;
}


/* --------------------------------------------------------------------------
   3. Shared scroll-mode styles (x and y)
   -------------------------------------------------------------------------- */

.scroll-cards:is([data-sc-mode="x"], [data-sc-mode="y"]) {
  /* JS sets --sc-steps (cards, with the last one counted as a fraction) and
     --sc-step (vh per card).
     The extra height is the distance you scroll while the cards stay pinned. */
  height: calc(100svh - var(--sc-top) + var(--sc-steps, 0) * var(--sc-step, 85) * 1svh);
  padding-block: 0;
}

/* The pinned screen. IMPORTANT: no ancestor of this element may have
   overflow: hidden, or sticky silently stops working. Use overflow: clip. */
:is([data-sc-mode="x"], [data-sc-mode="y"]) .scroll-cards__sticky {
  position: sticky;
  top: var(--sc-top);
  height: calc(100svh - var(--sc-top));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sc-pad-y);
  flex-wrap: nowrap;
}

/* The window the cards slide behind. clip (not hidden) matters: a "hidden"
   box can still be scrolled by focus or find-in-page, which would knock the
   cards out of position. A "clip" box can't. */
:is([data-sc-mode="x"], [data-sc-mode="y"]) .scroll-cards__viewport {
  flex: 1 1 auto;
  min-height: 0;
  max-height: var(--sc-max-h);
  overflow: clip;
}

:is([data-sc-mode="x"], [data-sc-mode="y"]) .scroll-cards__track {
  display: flex;
  flex-direction: row;          /* Bricks Blocks default to column: undo that */
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--sc-gap);
  height: 100%;
  will-change: transform;
}

:is([data-sc-mode="x"], [data-sc-mode="y"]) .scroll-card {
  flex: 0 0 auto;
  min-height: 0;
  /* Corners follow how open the card is, so they change with the scroll */
  border-radius: calc(var(--sc-radius) + (var(--sc-radius-active) - var(--sc-radius)) * var(--open));

}

:is([data-sc-mode="x"], [data-sc-mode="y"]) .scroll-card__progress {
  display: block;
}

/* Inactive cards are clickable (the script scrolls to them) */
:is([data-sc-mode="x"], [data-sc-mode="y"]) .scroll-card:not(.is-active) {
  cursor: pointer;
}
:is([data-sc-mode="x"], [data-sc-mode="y"]) .scroll-card:not(.is-active):hover::before {
  background-color: rgb(0 0 0 / 0.1);
}

/* Description + CTA: height grows from 0 to its natural height (--content-h,
   measured by JS) and fades in during the second half of the opening. */
:is([data-sc-mode="x"], [data-sc-mode="y"]) .scroll-card__content {
  height: calc(var(--content-h, 0px) * var(--open));
  overflow: hidden;
  opacity: clamp(0, calc((var(--open) - 0.55) / 0.45), 1);
  box-sizing: border-box;
}

/* Keyboard focus is always visible, even on dark photos */
.scroll-cards .scroll-card :focus-visible {
  outline: 3px solid var(--sc-accent);
  outline-offset: 3px;
}



/* --------------------------------------------------------------------------
   4. Horizontal mode only
   -------------------------------------------------------------------------- */

[data-sc-mode="x"] .scroll-card {
  height: 100%;
  /* width is set inline by JS */
}

/* Lock the text block to the ACTIVE card's width so the words never re-wrap
   while a card is opening or closing. The card's overflow clips the rest. */
[data-sc-mode="x"] .scroll-card__body {
  width: var(--sc-active, 40rem);
  max-width: none;              /* don't let the narrow card squeeze the text */
  flex-shrink: 0;
  box-sizing: border-box;
}

/* The title wraps to the card's CURRENT width (cqi = 1% of the card's width),
   so a narrow card shows its full title over two or three lines. */
[data-sc-mode="x"] .scroll-card {
  container-type: inline-size;
}
[data-sc-mode="x"] .scroll-card__title {
  max-width: calc(100cqi - 2 * var(--sc-pad-x-card));
}


/* --------------------------------------------------------------------------
   5. Vertical mode only
   -------------------------------------------------------------------------- */

[data-sc-mode="y"] .scroll-cards__track {
  flex-direction: column;
}

[data-sc-mode="y"] .scroll-card {
  width: 100%;
  /* height is set inline by JS */
}

[data-sc-mode="y"] .scroll-card__body {
  padding-block: 1rem calc(1rem + 0.5rem);
}

[data-sc-mode="y"] .scroll-card__desc {
  font-size: 0.9375rem;
}