/* Save with EPB Cards - C8001 */

/* Match the main nav's fluid width (component/static/component/css/navigation_update/navigation_update.css)
   continuously from 1026px up, not just at one breakpoint, so the card row's outer edges track
   the logo/language-switcher edges throughout the resize instead of snapping to match only at
   1920px: fixed 3rem side padding from 1026px, then capped at a 1824px-wide content area beyond
   1920px (same two-tier shape the nav itself uses). The column gap is linearly interpolated from
   its original 2rem at 1026px up to 11.25rem/180px at 1920px (then frozen) rather than scaled
   from a straight 0-based vw value, which grows too fast in the low-to-mid range and squeezes
   the cards narrower than the CTA button inside needs to stay on one line. */
@media (min-width: 1026px) {
  .container.c8001-container {
    max-width: none;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .c8001-cards-grid {
    column-gap: calc(2rem + (100vw - 1026px) * 0.1655);
  }

  /* Swiper's base stylesheet sets `.swiper { display: block }` with no media
     query, and it loads after Tailwind's bundle, so it wins the specificity
     tie against `lg:hidden` at every width. Override it here (this file loads
     after swiper@11.1.css per C8001's Media class) so the carousel actually
     hides once the desktop grid takes over. */
  .js__c8001-carousel {
    display: none;
  }
}

@media (min-width: 1920px) {
  .container.c8001-container {
    padding-left: calc((100vw - 1824px) / 2);
    padding-right: calc((100vw - 1824px) / 2);
  }

  .c8001-cards-grid {
    column-gap: 11.25rem;
  }
}

/* The richtext filter wraps the headline in its own <p>, and the global
   `p { font-weight: 300 }` base style sets that directly on the child,
   overriding the font-medium weight inherited from .c8001-headline. */
.c8001-headline p {
  font-weight: inherit;
}

.c8001-cta .btn-cta {
    width: auto;
    border-radius: 4px;
}

/* Stretched-link: the CTA is the real anchor; its ::before fills the nearest
   positioned ancestor, which is .card-overlay__content — itself already
   stretched to cover the full card (inset: 0) via card_overlay.css.
   Uses ::before (not ::after) because .btn-cta already uses ::after for its
   arrow icon — sharing a pseudo-element with that rule merges their
   properties onto one box instead of applying independently. */
.c8001-card .stretched-link::before {
  position: absolute;
  inset: 0;
  content: "";
  cursor: pointer;
}

.c8001-card .card-overlay__image img {
  transition: transform 0.5s ease;
}

.c8001-card .card-overlay__scrim {
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.c8001-card:hover .card-overlay__image img {
  transform: scale(1.06);
}

.c8001-card:hover .card-overlay__scrim {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .c8001-card .card-overlay__image img,
  .c8001-card .card-overlay__scrim {
    transition: none;
  }

  .c8001-card:hover .card-overlay__image img {
    transform: none;
  }
}

/* Mobile carousel prev/next arrows (component/carousel/centered.html). Swiper's
   navigation module toggles `swiper-button-disabled` (and the native `disabled`
   attribute, since these are <button> elements) once there are no more slides
   in that direction — that's also what blocks the click, not any CSS here.
   Yellow means there's more to see that way; grey means there isn't. */
.c8001-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 3rem;
  border-radius: 0.5rem;
  background-color: #ffcc5b;
}

.c8001-carousel-btn--back {
  margin-right: 0.75rem;
}

.c8001-carousel-btn--next {
  margin-left: 0.75rem;
}

.c8001-carousel-btn.swiper-button-disabled {
  background-color: #e7e7e7;
  cursor: not-allowed;
}