/* ── Carousel Nav — external prev/next controls for a Divi Group Carousel ──
   Pairs with inc/carousel-nav.php ([carousel_nav]) and js/carousel-nav.js.
   The box tint per instance comes from --cnav-bg, set by the shortcode.
   The chevron is one LEFT-pointing path; next mirrors it with scaleX(-1). */

.cnav {
  --cnav-bg     : var(--light-blue);
  --cnav-ink    : var(--black);
  --cnav-gap    : 1rem;
  --cnav-w      : 6.25rem;
  --cnav-h      : 3rem;

  display    : inline-flex;
  align-items: center;
  gap        : var(--cnav-gap);
}

.cnav__btn {
  box-sizing     : border-box;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : var(--cnav-w);
  height         : var(--cnav-h);
  padding        : 0;
  border         : 3px solid var(--cnav-ink);
  border-radius  : 0.625rem;
  background     : var(--cnav-bg);
  color          : var(--cnav-ink);
  cursor         : pointer;
  /* Divi's global button reset can hand buttons a font stack and shadow. */
  box-shadow     : none;
  appearance     : none;
  transition     : background-color 0.2s ease, color 0.2s ease;
}

.cnav__chev {
  display: block;
  width  : 0.75rem;
  height : 1.5rem;
  /* overflow visible so the 3px miter stroke isn't clipped by the viewBox */
  overflow: visible;
}

.cnav__btn--next .cnav__chev { transform: scaleX(-1); }

/* Hover / focus — invert fill and ink. */
.cnav__btn:hover,
.cnav__btn:focus-visible {
  background: var(--cnav-ink);
  color     : var(--cnav-bg);
}

.cnav__btn:focus-visible {
  outline       : 2px solid var(--cnav-ink);
  outline-offset: 2px;
}

/* No disabled state — the carousel loops, so prev/next always act. */

@media (prefers-reduced-motion: reduce) {
  .cnav__btn { transition: none; }
}

/* ── Carousel geometry — flush end cards ───────────────────────────
   Widens the track by one gap and pulls it back half a gap, so the
   per-card margin leaves no strip at the row ends; the container clips
   the overhang. Keep 1.5rem in sync with the builder's Carousel Groups
   margin (0.75rem each side). */
.et_pb_group_carousel_track {
  width         : calc(100% + 1.5rem);
  margin-inline : -0.75rem;
}


/* ── Carousel card hover — cross-fade to red ─────────────────────────────
   Opt-in: add the CSS class `card-hover-fill` to a Group Carousel card.
   Leave the card's hover Background EMPTY in the builder — Divi's per-post
   CSS wins and its one-frame image swap flashes the section through.
   `position: absolute` is required, or the ::before becomes a flex item and
   eats one of the card's gaps. */

.card-hover-fill { position: relative; }

.card-hover-fill::before {
  content        : "";
  position       : absolute;
  inset          : 0;
  border-radius  : inherit;   
  background-color: var(--darker-red);
  opacity        : 0;
  pointer-events : none;
  transition     : opacity 200ms ease-out;    /* hover-out */
}

/* Don't add z-index — it would bury the text under the overlay. */
.card-hover-fill:hover::before,
.card-hover-fill:focus-within::before {
  opacity    : 1;
  transition : opacity 300ms ease-in-out;     /* hover-in */
}

/* :hover sticks after a tap on touch devices — keep the photo there. */
@media (hover: none) {
  .card-hover-fill::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card-hover-fill::before,
  .card-hover-fill:hover::before { transition-duration: 1ms; }
}