/*
 * Modular slider: white band with a title, a main image carousel with an
 * offset dark navigation panel behind it, a grayed-out teaser of the NEXT
 * slide on the opposite side and a description below the main image. Ported
 * from the Gutenberg block's style.scss and reworked to the
 * design/ErgoStil Modul Furniture Slider.png layouts.
 *
 * MOBILE-FIRST (refactor per PLAN_MOBILE.md): the base rules are the phone
 * state (< 576px) and the larger breakpoints only restore/enlarge via
 * min-width queries. Verified pixel-equivalent at 375/768/1250 except for the
 * two listed mobile bug fixes:
 *   B1 - the nav row (buttons + counter) is wider than the 38%-wide dark
 *        panel on phones, so the white chevrons hung outside the panel over
 *        the white background (invisible). The panel now has a 160px minimum
 *        band width below 992px; growing it is safe because it extends
 *        UNDER the image (z-index 0 behind carousel-inner's 1).
 *   B2 - the description ran underneath the panel's hanging band (opaque,
 *        z-index 0 over the static text): the band was anchored with
 *        `bottom: -60px` to .carousel, whose phone box also contains the
 *        non-floated description, so the text could never outgrow it. The
 *        band height is now derived from the image height (hangs exactly
 *        60px below it) and the description starts 8px below the band.
 *
 * - layout-left:  dark panel hangs out on the LEFT of the main image (its
 *                 band with the controls sits 95px below the image), teaser
 *                 on the right, heading left aligned, description right
 *                 aligned under the main image.
 * - layout-right: mirrored: panel right, teaser left, heading right aligned,
 *                 description left aligned.
 *
 * The dark panel is a child of .carousel (the theme JS resolves the
 * target-less controls and the counter through closest('.carousel')) and
 * sticks out of it; .slide-stage only reserves the padding space for that
 * overflow.
 *
 * The Belgrade theme styles .carousel-control-* globally (absolute
 * positioning, 15% width, faded opacity, icon filter) and Bootstrap sets the
 * black chevron icons. The resets below restore inline static buttons inside
 * the dark panel.
 */

.ergostil-modular-slider {
  /* One shared image height so the carousel and the teaser line up. Phone
     first; wider screens get taller images in the min-width queries. */
  --ms-img-h: 220px;
  padding: 60px 0;
  background-color: #fff;
}

.ergostil-modular-slider .slider-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ergostil-modular-slider .slider-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Heading: small, letter-spaced, aligned to the dark panel side and to the
   main column edge (the panel hangs past it on desktop). */
.ergostil-modular-slider .slider-content h2 {
  margin: 0;
  padding-right: 24px;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #313131;
}

.ergostil-modular-slider.layout-right .slider-content h2 {
  text-align: right;
}

.ergostil-modular-slider.layout-left .slider-content h2 {
  padding-right: 0;
  padding-left: 24px;
}

/* Row: main column (carousel + description) next to the teaser. Phones stack
   the columns (the teaser drops below the main column). */
.ergostil-modular-slider .slider-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.ergostil-modular-slider .slider-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.ergostil-modular-slider .slider-side {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}

/* The DOM keeps the main column first for accessibility; on desktop
   layout-right shows the teaser on the left, on phones it stays below. */
.ergostil-modular-slider.layout-right .slider-side {
  order: 1;
}

/* Teaser frame: fixed size box (same height as the carousel image) that
   crops the next slide's image to a narrow vertical slice - only about half
   of the picture is visible, like the design. */
.ergostil-modular-slider .side-frame {
  position: relative;
  overflow: hidden;
  height: var(--ms-img-h);
}

/* All teaser copies are stacked; the active one fades in. */
.ergostil-modular-slider .side-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ergostil-modular-slider .side-slide.is-active {
  opacity: 1;
}

.ergostil-modular-slider .side-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The teaser is the next slide, grayed out (grayscale + half opacity over
     the white band, like the washed-out look in the design). */
  filter: grayscale(1);
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .ergostil-modular-slider .side-slide {
    transition: none;
  }
}

/* Stage: reserves padding space for the dark panel sticking out. On phones
   (B2 fix) the reserved 60px band moves from the stage's padding-bottom to
   the description's margin-top, so the text starts BELOW the band; only a
   small gap stays under the description. */
.ergostil-modular-slider.layout-left .slide-stage {
  padding: 0 0 8px 24px;
}

.ergostil-modular-slider.layout-right .slide-stage {
  padding: 0 24px 8px 0;
}

/* The main image must paint above the dark panel (Bootstrap positions
   .carousel-inner; z-index stacks it over the panel's z-index 0). */
.ergostil-modular-slider .carousel-inner {
  position: relative;
  z-index: 1;
  border-radius: 0;
}

.ergostil-modular-slider .carousel-item img {
  display: block;
  width: 100%;
  height: var(--ms-img-h);
  object-fit: cover;
}

/* Offset dark panel behind the main image. Phones (B1 fix): the band gets a
   160px minimum width so the nav row (44px buttons + counter + 20px gaps =
   ~148px) always fits inside it; the extra width hides under the image.

   B2 fix: the band must hang exactly 60px below the IMAGE, so its height is
   derived from --ms-img-h instead of `bottom: -60px`. The panel is anchored
   to .carousel, whose box on phones also contains the (non-floated)
   description - `bottom` would drag the band down after the text and paint
   over its first characters. Desktop re-anchors with top/bottom (the
   description floats out of the flow there, so the carousel box = image). */
.ergostil-modular-slider .dark-panel {
  position: absolute;
  z-index: 0;
  top: 24px;
  height: calc(var(--ms-img-h) + 60px - 24px);
  width: max(38%, 160px);
  background-color: #2d2d3f;
}

.ergostil-modular-slider.layout-left .dark-panel {
  left: -24px;
}

.ergostil-modular-slider.layout-right .dark-panel {
  right: -24px;
}

/* Controls row centred in the dark band below the main image. The 16px
   bottom offset plus the 44px row equals the 60px overhang, so the row's top
   edge lands exactly on the image bottom inside the band. */
.ergostil-modular-slider .slider-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Reset the global carousel-control chrome so the controls sit inline in the
   dark panel instead of floating over the images. `filter: none` matters: the
   theme applies its icon filter to the whole control button, which would
   otherwise recolour the white icons below. The padding grows the hit area
   to a 44px touch target without changing the visible chevron. */
.ergostil-modular-slider .slider-nav .carousel-control-prev,
.ergostil-modular-slider .slider-nav .carousel-control-next {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  height: auto;
  flex: none;
  padding: 7px;
  opacity: 1;
  filter: none;
  cursor: pointer;
}

.ergostil-modular-slider .slider-nav .carousel-control-prev:hover,
.ergostil-modular-slider .slider-nav .carousel-control-prev:focus,
.ergostil-modular-slider .slider-nav .carousel-control-next:hover,
.ergostil-modular-slider .slider-nav .carousel-control-next:focus {
  opacity: 1;
}

/* The Belgrade theme already ships the chevron white (fill="#fff"), so no
   invert here; filter: none guards against a parent filter (e.g.
   .carousel-dark) inverting the white glyph. The 30x30 box renders the glyph
   ~12x26 like the design. */
.ergostil-modular-slider .slider-nav .carousel-control-prev-icon,
.ergostil-modular-slider .slider-nav .carousel-control-next-icon {
  background-color: transparent;
  width: 30px;
  height: 30px;
  filter: none;
}

.ergostil-modular-slider .slider-nav .slider-counter {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

/* Description under the main image (B2 fix). Phones: full width, no float;
   the 68px top margin starts the text 8px below the dark band (image height
   + 60px overhang + 8px gap), clear of the paint-over. */
.ergostil-modular-slider .slider-description {
  width: 100%;
  margin: 68px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: #999;
}

/*
 * Tablet: taller images.
 */
@media (min-width: 576px) {
  .ergostil-modular-slider {
    --ms-img-h: 300px;
  }
}

/*
 * Desktop: the original design layout - taller images, the panel hangs 45px
 * to the side and 95px below, the description sits 60% wide beside the band
 * on the opposite side of the panel, teaser beside the main column.
 */
@media (min-width: 992px) {
  .ergostil-modular-slider {
    --ms-img-h: 400px;
  }

  .ergostil-modular-slider .slider-content h2 {
    padding-right: 45px;
  }

  .ergostil-modular-slider.layout-left .slider-content h2 {
    padding-right: 0;
    padding-left: 45px;
  }

  .ergostil-modular-slider .slider-row {
    flex-direction: row;
    gap: 26px;
  }

  .ergostil-modular-slider .slider-main {
    width: auto;
  }

  .ergostil-modular-slider .slider-side {
    flex: 0 0 26%;
    width: auto;
  }

  .ergostil-modular-slider.layout-right .slider-side {
    order: -1;
  }

  .ergostil-modular-slider.layout-left .slide-stage {
    padding: 0 0 95px 45px;
  }

  .ergostil-modular-slider.layout-right .slide-stage {
    padding: 0 45px 95px 0;
  }

  .ergostil-modular-slider .dark-panel {
    top: 35px;
    /* Height must go back to auto: with top+bottom+height set the bottom
       offset would be ignored and the band would keep the phone height. */
    height: auto;
    bottom: -95px;
    width: 38%;
  }

  .ergostil-modular-slider.layout-left .dark-panel {
    left: -45px;
  }

  .ergostil-modular-slider.layout-right .dark-panel {
    right: -45px;
  }

  .ergostil-modular-slider .slider-nav {
    bottom: 32px;
    gap: 28px;
  }

  .ergostil-modular-slider .slider-nav .carousel-control-prev,
  .ergostil-modular-slider .slider-nav .carousel-control-next {
    /* Keep the 44px touch target at desktop too (the phone padding is not
       reset); the -7px margin cancels it in the wider 28px-gap row so the
       visible spacing is unchanged. */
    padding: 7px;
    margin: -7px;
  }

  /* The description clears the band by sitting beside it: 60% wide, floated
     to the side opposite the panel. */
  .ergostil-modular-slider .slider-description {
    width: 60%;
    margin: 20px 0 0;
  }

  .ergostil-modular-slider.layout-left .slider-description {
    margin-left: auto;
    float: right;
  }

  .ergostil-modular-slider.layout-right .slider-description {
    margin-right: auto;
    float: left;
  }
}