/* =========================================================
   Card Slider (Elementor Extra widget: ee-media-card-slider)
   Cards visible, gap, shape and colors are set from the widget
   (the --* variables below); breakpoints come from Elementor's
   responsive controls.
   ========================================================= */

.ee-media-card-slider {
  --ee-cs-per-view: 3;
  --ee-cs-gap: 16px;
  --ee-cs-ratio: 1 / 1;
  --ee-cs-radius: 8px;
  --ee-cs-accent: #8b1c1c;
  --ee-cs-arrow-size: 50px;
  --ee-cs-arrow-icon: 20px;
  --ee-cs-arrow-inset: 16px;
  --ee-cs-arrow-bg: #fff;
  --ee-cs-arrow-color: #1d2a3a;
  --ee-cs-dots-gap: 22px;
  --ee-cs-dash-w: 16px;
  --ee-cs-dash-active-w: 40px;
  --ee-cs-dash-h: 8px;
  --ee-cs-dash-gap: 8px;
  --ee-cs-dash-color: #f1dfdf;
  --ee-cs-dash-hover: #e3bcbc;
  --ee-cs-dash-active: #24314d;
  --ee-cs-dot-hit: 22px;
  --ee-cs-blurb-bg: #24314d;
  --ee-cs-blurb-text: #fff;
  --ee-cs-btn-bg: #df241b;
  --ee-cs-btn-text: #fff;
  --ee-cs-btn-hover: #a81b14;
  --ee-cs-caption-bg: rgba(0, 0, 0, 0.6);
  --ee-cs-text-gap: 12px;
  --ee-cs-play-bg: #fff;
  --ee-cs-play: #df241b;
  position: relative;
  width: 100%;
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
}
/* Fallback cards-per-view; the widget's "Cards Visible" setting overrides these */
@media (max-width: 1024px) {
  .ee-media-card-slider {
    --ee-cs-per-view: 2;
    --ee-cs-arrow-size: 44px;
    --ee-cs-arrow-icon: 18px;
    --ee-cs-arrow-inset: 12px;
    --ee-cs-dash-w: 14px;
    --ee-cs-dash-active-w: 34px;
    --ee-cs-dash-gap: 7px;
  }
}
@media (max-width: 767px) {
  .ee-media-card-slider {
    --ee-cs-per-view: 1;
    --ee-cs-arrow-size: 38px;
    --ee-cs-arrow-icon: 16px;
    --ee-cs-arrow-inset: 10px;
    --ee-cs-dots-gap: 16px;
    --ee-cs-dot-hit: 20px;
    --ee-cs-dash-w: 12px;
    --ee-cs-dash-active-w: 28px;
    --ee-cs-dash-h: 7px;
    --ee-cs-dash-gap: 6px;
  }
}

.ee-media-card-slider__viewport { overflow: hidden; touch-action: pan-y; cursor: grab; width: 100%; }
.ee-media-card-slider__viewport.ee-is-dragging { cursor: grabbing; }

.ee-media-card-slider__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ee-cs-gap);
  perspective: 1200px;
  will-change: transform;
  margin: 0;
  padding: 0;
}

/* Each slide is a column so its card can grow to the row's height:
   cards are at least --ee-cs-ratio tall, and a blurb with more text makes the row taller. */
.ee-media-card-slider__slide {
  position: relative;
  flex: 0 0 calc((100% - (var(--ee-cs-per-view) - 1) * var(--ee-cs-gap)) / var(--ee-cs-per-view));
  width: calc((100% - (var(--ee-cs-per-view) - 1) * var(--ee-cs-gap)) / var(--ee-cs-per-view));
  display: flex;
  flex-direction: column;
  margin: 0;
  will-change: transform, opacity;
}

.ee-media-card-slider .ee-media-card-slider__card {
  position: relative;
  flex: 1 0 auto;
  display: block;
  width: 100%;
  aspect-ratio: var(--ee-cs-ratio);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ee-cs-radius);
  overflow: hidden;
  background: #e9e4e1;
  color: inherit;
  text-decoration: none;
  font: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

/* ---------- image ---------- */
.ee-media-card-slider .ee-media-card-slider__card--image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ---------- video ----------
   The card holds a play button that covers it (opens the popup) and,
   beside it, the caption panel (title, description, optional link). */
.ee-media-card-slider .ee-media-card-slider__video-trigger,
.ee-media-card-slider .ee-media-card-slider__video-trigger:hover,
.ee-media-card-slider .ee-media-card-slider__video-trigger:focus {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;   /* themes give buttons a hover background */
  color: inherit;
  font: inherit;
  box-shadow: none;
  cursor: pointer;
}
/* inset ring: the card's rounded, clipped edge would cut off an outside one */
.ee-media-card-slider .ee-media-card-slider__video-trigger:focus-visible {
  outline: 3px solid var(--ee-cs-accent);
  outline-offset: -3px;
}
.ee-media-card-slider__thumb {
  position: absolute;
  inset: 0;
  display: block;
}
.ee-media-card-slider__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: transform 0.4s ease;
}
.ee-media-card-slider__card--video:hover .ee-media-card-slider__thumb img,
.ee-media-card-slider__video-trigger:focus-visible .ee-media-card-slider__thumb img { transform: scale(1.04); }

.ee-media-card-slider__play {
  position: absolute;
  z-index: 3; /* stays above the caption on small cards */
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ee-cs-play-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ee-media-card-slider__play svg { width: 26px; height: 26px; fill: var(--ee-cs-play); transition: fill 0.2s ease; }
.ee-media-card-slider__card--video:hover .ee-media-card-slider__play,
.ee-media-card-slider__video-trigger:focus-visible .ee-media-card-slider__play {
  background: var(--ee-cs-play);
  transform: translate(-50%, -50%) scale(1.08);
}
.ee-media-card-slider__card--video:hover .ee-media-card-slider__play svg,
.ee-media-card-slider__video-trigger:focus-visible .ee-media-card-slider__play svg { fill: var(--ee-cs-play-bg); }

/* ---------- text panel: title + description (+ button on blurbs) ----------
   Same box on video and blurb cards. .ee-is-filled adds the see-through
   background: always on video cards, per the "Text Background" setting on blurbs. */
.ee-media-card-slider__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ee-cs-text-gap);
  box-sizing: border-box;
  width: 100%;
  padding: 32px 28px;
  color: var(--ee-cs-blurb-text);
  text-align: left;
  white-space: normal;
}
.ee-media-card-slider__panel.ee-is-filled {
  background: var(--ee-cs-caption-bg);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* on video cards the panel sits at the bottom, over the thumbnail; clicks on
   it fall through to the play button underneath, except on the link */
.ee-media-card-slider__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}
.ee-media-card-slider__caption .ee-media-card-slider__btn { pointer-events: auto; }
/* keep the caption from covering the video: clamp long text */
.ee-media-card-slider .ee-media-card-slider__caption .ee-media-card-slider__heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ee-media-card-slider .ee-media-card-slider__caption .ee-media-card-slider__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- blurb ---------- */
.ee-media-card-slider .ee-media-card-slider__card--blurb {
  overflow: visible;   /* lets a long blurb grow taller than --ee-cs-ratio */
  background-color: var(--ee-cs-blurb-bg);
  background-size: cover;
  background-position: center;
  color: var(--ee-cs-blurb-text);
  user-select: text;
  -webkit-user-select: text;
}
/* overlay over the background image (color set per card) */
.ee-media-card-slider__card--blurb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* positions the panel top / middle / bottom (Blurb Cards → Vertical Position) */
.ee-media-card-slider__blurb-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  height: 100%;
}
/* round the panel's corners with the card on the side it touches */
.ee-media-card-slider__card--blurb .ee-media-card-slider__panel.ee-is-filled { border-radius: 0 0 var(--ee-cs-radius) var(--ee-cs-radius); }
.ee-media-card-slider__valign-flex-start .ee-media-card-slider__card--blurb .ee-media-card-slider__panel.ee-is-filled { border-radius: var(--ee-cs-radius) var(--ee-cs-radius) 0 0; }
.ee-media-card-slider__valign-center .ee-media-card-slider__card--blurb .ee-media-card-slider__panel.ee-is-filled { border-radius: 0; }
.ee-media-card-slider__caption { border-radius: 0 0 var(--ee-cs-radius) var(--ee-cs-radius); }
/* ---------- title + description: same on blurb and video cards ---------- */
.ee-media-card-slider .ee-media-card-slider__heading {
  display: block;
  margin: 0;
  color: inherit;
  font-family: 'Bitter', serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: normal;
}
.ee-media-card-slider .ee-media-card-slider__text {
  display: block;
  margin: 0;
  color: inherit;
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}
.ee-media-card-slider__text > :first-child { margin-top: 0; }
.ee-media-card-slider__text > :last-child { margin-bottom: 0; }
.ee-media-card-slider__text a { color: inherit; text-decoration: underline; }
.ee-media-card-slider .ee-media-card-slider__btn {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--ee-cs-btn-bg);
  color: var(--ee-cs-btn-text);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-size: 16px;
  font-family: 'Bitter';
}
.ee-media-card-slider .ee-media-card-slider__btn:hover,
.ee-media-card-slider .ee-media-card-slider__btn:focus-visible { background: var(--ee-cs-btn-hover); color: var(--ee-cs-btn-text); }

.ee-media-card-slider .ee-media-card-slider__card:focus-visible,
.ee-media-card-slider .ee-media-card-slider__btn:focus-visible {
  outline: 3px solid var(--ee-cs-accent);
  outline-offset: 2px;
}

/* ---------- arrows ---------- */
.ee-media-card-slider .ee-media-card-slider__arrow {
  position: absolute;
  top: calc((100% - var(--ee-cs-dots-gap) - var(--ee-cs-dot-hit) - 8px) / 2);   /* centre on the cards, not the dots */
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  place-items: center;
  width: var(--ee-cs-arrow-size);
  height: var(--ee-cs-arrow-size);
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  background: var(--ee-cs-arrow-bg);
  color: var(--ee-cs-arrow-color);
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ee-media-card-slider:not(:has(.ee-media-card-slider__dots)) .ee-media-card-slider__arrow { top: 50%; }
@media (hover: hover) {
  .ee-media-card-slider .ee-media-card-slider__arrow:hover { background: var(--ee-cs-arrow-color); color: var(--ee-cs-arrow-bg); }
}
.ee-media-card-slider .ee-media-card-slider__arrow:focus-visible { outline: 3px solid var(--ee-cs-accent); outline-offset: 2px; }
.ee-media-card-slider__arrow svg { width: var(--ee-cs-arrow-icon); height: var(--ee-cs-arrow-icon); display: block; }
.ee-media-card-slider .ee-media-card-slider__prev { left: var(--ee-cs-arrow-inset); }
.ee-media-card-slider .ee-media-card-slider__next { right: var(--ee-cs-arrow-inset); }

/* ---------- dots: pills; the active one grows longer and darker ---------- */
.ee-media-card-slider__dots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ee-cs-dash-gap);
  max-width: 100%;
  margin: var(--ee-cs-dots-gap) auto 0;
  padding: 0 10px;
  box-sizing: border-box;
}
.ee-media-card-slider .ee-media-card-slider__dots button {
  position: relative;
  flex: 0 1 var(--ee-cs-dash-w);
  width: auto;
  min-width: 8px;
  height: var(--ee-cs-dot-hit);
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: flex-basis 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ee-media-card-slider__dots button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--ee-cs-dash-h);
  margin-top: calc(var(--ee-cs-dash-h) / -2);
  border-radius: 999px;
  background: var(--ee-cs-dash-color);
  transition: background-color 0.3s ease;
}
.ee-media-card-slider .ee-media-card-slider__dots button[aria-current="true"] { flex-basis: var(--ee-cs-dash-active-w); cursor: default; }
.ee-media-card-slider__dots button[aria-current="true"]::after { background: var(--ee-cs-dash-active); }
@media (hover: hover) {
  .ee-media-card-slider__dots button:not([aria-current="true"]):hover::after { background: var(--ee-cs-dash-hover); }
}
.ee-media-card-slider .ee-media-card-slider__dots button:focus-visible { outline: 2px solid var(--ee-cs-accent); outline-offset: 2px; }
.ee-media-card-slider .ee-media-card-slider__dots button:focus:not(:focus-visible) { outline: none; }

.ee-media-card-slider__empty {
  padding: 24px;
  border: 1px dashed #c9c9c9;
  text-align: center;
  color: #7a7a7a;
}

@media (prefers-reduced-motion: reduce) {
  .ee-media-card-slider__dots button,
  .ee-media-card-slider__dots button::after,
  .ee-media-card-slider__thumb img,
  .ee-media-card-slider__play { transition: none; }
}