/*!
 * featured-blog-slider.css v3.6.0
 * Featured-blog carousel layered on Swiper. Full-width cards that bleed the
 * next one in from the edge, dimmed-inactive / active-opacity, and a controls
 * strip of thin CSS-keyframe fill bars + round arrows. Owns the Sestek look
 * only — Swiper's own CSS (swiper-bundle.min.css) handles track layout and
 * slidesPerView:"auto" sizing, so load it BEFORE this file.
 *
 * Colours, radii, card internals → design in Webflow Designer / RC Structure.
 *
 * Drives: js/components/featured-blog-slider.js
 * https://github.com/roicool/sestek
 */

[data-fbslider] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--6, 1.5rem);
  --fbslider-card-w: 100%;
  /* Brand fill — RC Structure token, falls back to the brand pink. */
  --fbslider-accent: var(--brand-primary--500, #EC008C);
  --fbslider-track-bg: var(--brand-primary--100, rgba(0, 0, 0, 0.08));
  /* Depth-focus tuning — active card pops, neighbours recede. */
  --fbslider-inactive-opacity: 0.45;
  --fbslider-inactive-scale: 0.9;
  --fbslider-inactive-blur: 2.5px;
  --fbslider-inactive-saturate: 0.85;
  /* Soft, two-layer shadow — a close contact shadow + a wide ambient one,
     both low-opacity, so the active card lifts subtly instead of dramatically. */
  --fbslider-active-shadow:
    0 2px 8px -4px rgba(0, 0, 0, 0.08),
    0 18px 40px -20px rgba(0, 0, 0, 0.18);
}

/* ── Viewport / track ─────────────────────────────────────────────── */
/* Override Swiper's overflow:hidden so the next card bleeds in from the edge.
   Higher specificity than .swiper, so no !important needed. */
[data-fbslider] [data-fbslider-viewport] {
  overflow: visible;
  width: 100%;
}

/* Full-bleed: break out of a max-width container so cards can peek past it. */
[data-fbslider][data-fbslider-bleed] [data-fbslider-viewport] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Swiper sets the transition DURATION inline (from `speed`) but leaves the
   timing function to CSS — give the track an expo-out curve so each advance
   glides out fast and eases long into the snap (the "snappy yet soft" feel). */
[data-fbslider] .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Cards (depth focus) ──────────────────────────────────────────── */
/* slidesPerView:"auto" reads each slide's width, so set it explicitly.
   Inactive cards recede — scaled down, dimmed, softly blurred + desaturated —
   so the active card reads as the in-focus subject. Transform/filter are GPU
   composited, so only the 2–3 on-screen neighbours pay any cost. */
[data-fbslider] [data-fbslider-card] {
  width: var(--fbslider-card-w);
  height: auto;
  opacity: var(--fbslider-inactive-opacity);
  transform: scale(var(--fbslider-inactive-scale));
  filter: blur(var(--fbslider-inactive-blur)) saturate(var(--fbslider-inactive-saturate, 1));
  transform-origin: center center;
  /* Layered timing: opacity resolves first, colour/crispness next, and the
     soft shadow trails well behind (delay) so the active card visibly
     "develops" into focus rather than snapping. Tuned to span the ~1s slide
     transition so the stagger is actually felt. */
  transition:
    opacity 0.55s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s ease 0.08s,
    box-shadow 1s ease 0.15s;
  border-radius: var(--fbslider-radius, 1rem);
  -webkit-user-drag: none;
}

[data-fbslider] [data-fbslider-card].swiper-slide-active {
  opacity: 1;
  filter: none;
  box-shadow: var(--fbslider-active-shadow);
  /* Settle: scale in with a hair of overshoot, like an image easing into
     place. Plays each time a card becomes active — transform is driven by the
     animation here; opacity/filter/shadow by the transition above. */
  animation: fbslider-settle 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Keyframe starts at the default inactive scale (0.9) for a seamless handoff
   from the resting state, overshoots a touch, then settles to 1. */
@keyframes fbslider-settle {
  0%   { transform: scale(0.9); }
  58%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

[data-fbslider-card] img {
  -webkit-user-drag: none;
}

/* ── Controls strip (JS-populated: dots + arrows) ─────────────────── */
.fbslider-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing--4, 1rem);
}

.fbslider-dots {
  display: flex;
  align-items: center;
  gap: var(--spacing--2, 0.5rem);
  flex: 1;
}

.fbslider-dot {
  flex: 1 1 0;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: var(--radius--full, 9999px);
  background: var(--fbslider-track-bg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

/* The fill — its scaleX is set by JS each frame from Swiper's autoplay clock
   (1−progress) and reset on slide change. A short transition smooths the
   per-frame steps and the reset, so it reads as a clean sweep on every device
   regardless of how the slide changed (click / arrow / drag / auto). */
.fbslider-dot__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--fbslider-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.12s linear;
}

/* ── Arrows ───────────────────────────────────────────────────────── */
.fbslider-arrows {
  display: flex;
  align-items: center;
  gap: var(--spacing--2, 0.5rem);
  flex-shrink: 0;
}

/* Ghost arrows — no border/fill at rest; a soft tint blooms on hover and the
   icon nudges in its travel direction. Modern, weightless. */
.fbslider-arrow {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius--full, 9999px);
  border: 0;
  background: transparent;
  color: var(--color-text--base, #0a0a0a);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.fbslider-arrow svg {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.fbslider-arrow:hover {
  background: rgba(0, 0, 0, 0.06);
}
.fbslider-arrow--prev:hover svg { transform: translateX(-2px); }
.fbslider-arrow--next:hover svg { transform: translateX(2px); }

.fbslider-arrow:active {
  transform: scale(0.92);
}

.fbslider-arrow:focus-visible {
  outline: 2px solid var(--fbslider-accent);
  outline-offset: 2px;
}

.fbslider-arrow:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-fbslider] [data-fbslider-card] { transition: none; }
  [data-fbslider] [data-fbslider-card].swiper-slide-active {
    animation: none;
    transform: scale(1);
  }
  .fbslider-dot__fill { transition: none; }
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .fbslider-arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
}