/* =====================================================
   Edzorb Law · "The Edzorb difference" section
   Six story cards.

   Phone (up to 600px): cards are stacked. Each card sticks
   under the header while the next one slides over it.
   Tablet / desktop (601px and up): a carousel, 2 cards in
   view on tablet, 3 on desktop.
   ===================================================== */

.difference {
  --header-height: 62px;
  padding: 40px 0;
  background: #fff;
  scroll-margin-top: 62px;
}

/* ---------- Phone: stacked cards (default) ----------
   IMPORTANT: no parent of .reason-card may use overflow
   (hidden / auto / scroll) on a phone, or "sticky" stops working. */
.reason-carousel {
  position: relative;
  margin-top: 22px;
}

.reason-card {
  position: sticky;
  /* header height + a small gap + 12px per card, so the edge of every
     card underneath stays visible like a deck of cards */
  top: calc(var(--header-height) + 14px + var(--index) * 12px);
  margin-bottom: 28px;
  padding: 14px 14px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px -16px rgba(1, 50, 78, .55);
}

/* picture frame: the art keeps its own proportions, no cropping */
.reason-art {
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--sky);
}

.reason-art img {
  width: auto;
  max-width: 100%;
  max-height: 46vh;
  border-radius: 22px;
}

.reason-eyebrow {
  display: block;
  margin: 16px 6px 4px;
}

.reason-title {
  margin: 0 6px 6px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}

.reason-text {
  margin: 0 6px;
  font-size: 15px;
  color: var(--muted);
}

/* arrows and dots are only for the carousel */
.reason-carousel .carousel-btn,
.carousel-dots.reason-dots {
  display: none;
}

/* ---------- Tablet and desktop (601px and up): carousel ---------- */
@media (min-width: 601px) {
  .difference {
    padding: 40px 0;
  }

  .reason-carousel .carousel-btn {
    display: grid;
  }

  .carousel-dots.reason-dots {
    display: flex;
  }

  .reason-track {
    display: flex;
    gap: 24px;
    margin: 0 -4px;
    padding: 8px 4px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
  }

  .reason-track::-webkit-scrollbar {
    display: none;
  }

  /* 2 cards in view on tablet */
  .reason-card {
    position: static;
    flex: 0 0 calc((100% - 24px) / 2);
    margin-bottom: 0;
    scroll-snap-align: start;
    box-shadow: none;
  }

  /* .reason-art img {
    width: 100%;
    max-height: none;
  } */

  .reason-title {
    font-size: 22px;
  }

}

/* ---------- Desktop (961px and up): 3 cards in view ---------- */
@media (min-width: 961px) {
  .difference {
    padding: 40px 0;
  }

  .reason-carousel {
    margin-top: 30px;
  }

  .reason-card {
    flex-basis: calc((100% - 48px) / 3);
  }

}

/* small phones: a little less header height */
@media (max-width: 425px) {
  .difference {
    --header-height: 58px;
  }
}