/* ==========================================================================
   4 Slider Block — Frontend Styles
   Layout: [peek] [full] [full] [peek] — 2 equal full slides, centre gap
   Mobile (<=767px) is overridden separately at the bottom: [peek][FULL][peek]
   — one centred full slide with peeking edges (see media query below).
   ========================================================================== */

:root {
  --fsb-divider:    #101946;
  --fsb-arrow-bg:   #E1C595;
  --fsb-arrow-color:#101946;
  --fsb-height:     clamp(320px, 52vw, 560px);
  --fsb-gap:        24px;
  --fsb-arrow-size: 52px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Wrapper ──────────────────────────────────────────────── */
.four-slider-block-wrap {
  position: relative;
  background-color: var(--fsb-divider);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.four-slider-block-wrap.is-initialized {
  opacity: 1;
}

/* ─── Slick list / track ───────────────────────────────────── */
.four-slider-block-wrap .slick-list {
  overflow: hidden;
}

/* NOTE: no flex override here — Slick's variableWidth mode positions
   slides itself via inline transforms; forcing flex fights that. */

/* ─── Every slide — gap via padding (no borders) ───────────── */
.four-slider-block-wrap .fsb-slide {
  box-sizing: border-box;
  padding: 0 calc(var(--fsb-gap) / 2);
}

/* ─── Image container (DESKTOP / TABLET default) ─────────────────
   Height is fixed (same for every slide); width is intentionally
   NOT set here — it's left to size naturally to the image's own
   aspect ratio at that fixed height (see img rule below). This is
   what keeps portrait vs. landscape images from being cropped or
   stretched into a uniform box.
   This is overridden on mobile (<=767px) further down, where Slick
   gives each slide a fixed width instead (variableWidth: false). */
.four-slider-block-wrap .fsb-slide-inner {
  position: relative;
  height: var(--fsb-height);
  display: inline-block;
  overflow: hidden;
  outline: none;
  line-height: 0; /* remove inline-block baseline gap */
}

.four-slider-block-wrap .fsb-slide-inner img {
  display: block;
  height: 100%;
  width: auto;       /* preserves the image's native aspect ratio */
  max-width: none;
  object-fit: cover; /* safety net only — with width:auto this rarely crops */
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* ─── Arrows — gold circles, CSS chevrons ──────────────────── */
.four-slider-block-wrap .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--fsb-arrow-bg);
  color: var(--fsb-arrow-color);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.four-slider-block-wrap .slick-arrow::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border: solid var(--fsb-arrow-color);
  border-width: 0 2px 2px 0;
}

.four-slider-block-wrap .slick-arrow:hover,
.four-slider-block-wrap .slick-arrow:focus-visible {
  background-color: #f0e4bc;
  outline: none;
}

.four-slider-block-wrap .slick-prev {
  left: 5%;
}

.four-slider-block-wrap .slick-prev::before {
  transform: rotate(135deg);
  margin-left: 17px;
}

.four-slider-block-wrap .slick-next {
  right: 5%;
  left: auto;
}

.four-slider-block-wrap .slick-next::before {
  transform: rotate(-45deg);
  margin-right: 17px;
}

.four-slider-block-wrap .slick-arrow.slick-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ─── Responsive ───────────────────────────────────────────── */

/* Tablet — unchanged, still uses the desktop variableWidth filmstrip,
   just with smaller height/gap/arrow tokens. */
@media (max-width: 1024px) {
  :root {
    --fsb-height:     clamp(280px, 48vw, 480px);
    --fsb-gap:        20px;
    --fsb-arrow-size: 48px;
  }
}

/* Phones — new centerMode layout.
   frontend.js switches Slick to centerMode + variableWidth:false at this
   same 767px breakpoint, so the rules below only need to make the image
   fill whatever fixed-width slot Slick now gives each slide. */
@media (max-width: 767px) {
  :root {
    --fsb-height:     clamp(450px, 62vw, 450px);
    --fsb-gap:        16px;
    --fsb-arrow-size: 44px;
  }

  /* Slide now gets a fixed width from Slick (via centerPadding) instead
     of sizing itself to the image's aspect ratio, so it needs to be a
     block that actually fills that width. */
  .four-slider-block-wrap .fsb-slide-inner {
    display: block;
    width: 100%;
  }

  /* Image fills and crops to the fixed slot (cover), since it can no
     longer just size itself freely like on desktop. */
  .four-slider-block-wrap .fsb-slide-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .four-slider-block-wrap .slick-arrow {
    display: none !important;
  }
}