/*
 * Materials slider: a card (material image over a light #f5f5f5 caption box)
 * laid out on top of an offset dark panel that carries the prev/next controls
 * and the "1/N" counter, with an optional brand logo row. Two layouts:
 *
 * - layout-left:  dark panel behind the card's top-left, controls in the dark
 *                 band BELOW the card, logo above, image above caption.
 * - layout-right: dark panel behind the card's top-right, controls in the dark
 *                 band ABOVE the card, logo below (right aligned), caption
 *                 above the image (column-reverse).
 *
 * 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.
 *
 * Bootstrap and the base theme style .carousel-control-* globally as an
 * absolutely positioned, half-transparent overlay spanning 15% of the slide;
 * here the controls live in the dark panel, so that chrome is reset below.
 *
 * MOBILE-FIRST (PLAN_MOBILE.md Phase 1): the base block below is the PHONE
 * (<=575px) cascade — the old @media (max-width: 991px) and (max-width: 575px)
 * blocks are folded into it in their original order. @media (min-width: 576px)
 * restores the 576-991px value(s) that the old max-575 block changed, and
 * @media (min-width: 992px) restores the desktop values the old max-991 block
 * changed. Rendered geometry is unchanged at every width.
 */

/* Root. */
.ergostil-materials-slider {
  padding: 60px 0;
  background-color: #fff;
}

/* Logo row + slider stage stacked vertically (the logo moves above/below the
   stage depending on the layout). */
.ergostil-materials-slider .materials-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.ergostil-materials-slider .brand-section {
  width: 100%;
}

.ergostil-materials-slider .brand-section .brand-logo {
  display: block;
  max-width: 280px;
  height: auto;
}

/* layout-left: logo above the stage (DOM order already does this). */
.ergostil-materials-slider.layout-left .brand-section {
  margin-bottom: 20px;
}

/* layout-right: stage first, logo last and right aligned. */
.ergostil-materials-slider.layout-right .brand-section {
  order: 2;
  text-align: right;
  margin-top: 12px;
}

.ergostil-materials-slider.layout-right .brand-section .brand-logo {
  margin-left: auto;
}

/* Stage: ~60% of the container (matches the design), aligned to the panel
   side. The padding reserves room for the dark panel sticking out. */
.ergostil-materials-slider .slide-stage {
  width: 60%;
}

.ergostil-materials-slider.layout-left .slide-stage {
  margin-right: auto;
  padding: 45px 0 95px 45px;
}

.ergostil-materials-slider.layout-right .slide-stage {
  margin-left: auto;
  padding: 95px 45px 45px 0;
}

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

/* Offset dark panel behind the card; width is relative to the card and the
   negative offsets match the design's 45px offset / 95px control band. */
.ergostil-materials-slider .dark-panel {
  position: absolute;
  z-index: 0;
  background-color: #2d2d3f;
}

/* Offset dark panel behind the card; width is relative to the card and the
   negative offsets match the design's 45px offset / 95px control band. The
   140px floor pins the control fit at narrow widths (PLAN_MOBILE Phase 2):
   the controls row needs ~120px, so the panel can never squeeze it below an
   ~10px side margin even when the card is narrower than ~255px. Where 55%
   already exceeds 140px (every viewport >= ~375px) the floor is a no-op and
   the rendering is exactly 55%. */
.ergostil-materials-slider.layout-left .dark-panel {
  top: -45px;
  left: -45px;
  bottom: -95px;
  width: max(55%, 140px);
}

.ergostil-materials-slider.layout-right .dark-panel {
  top: -95px;
  right: -45px;
  bottom: -45px;
  width: max(55%, 140px);
}

/* Controls row inside the dark panel, centred in the band that sticks out of
   the card (below the card for layout-left, above it for layout-right). */
.ergostil-materials-slider .slider-controls {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.ergostil-materials-slider.layout-left .slider-controls {
  bottom: 32px;
}

.ergostil-materials-slider.layout-right .slider-controls {
  top: 33px;
}

/* Reset the theme/Bootstrap .carousel-control-* chrome: the controls are
   static elements in the dark panel, not an absolute overlay over the slide.
   filter: none drops the framework's icon filter so the icon rules below own
   the colour. The 7px padding grows the 30px icon to a 44px tap target and
   the -7px margin cancels it in the flex row, so the visible spacing and the
   row width stay unchanged. */
.ergostil-materials-slider .slider-controls .carousel-control-prev,
.ergostil-materials-slider .slider-controls .carousel-control-next {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  height: auto;
  flex: none;
  padding: 7px;
  margin: -7px;
  opacity: 1;
  filter: none;
  cursor: pointer;
}

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

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

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

/* Material card: image over the light caption box (flipped for layout-right). */
.ergostil-materials-slider .material-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #fff;
}

.ergostil-materials-slider.layout-right .material-card {
  flex-direction: column-reverse;
}

.ergostil-materials-slider .material-card .material-image {
  position: relative;
  overflow: hidden;
}

.ergostil-materials-slider .material-card .material-image img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.ergostil-materials-slider .material-card .material-info {
  padding: 30px 32px 44px;
  background-color: #f5f5f5;
}

.ergostil-materials-slider .material-info h4 {
  margin: 0 0 22px;
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #111;
}

/* Two lines with an ellipsis, exactly like the design's clipped paragraph. */
.ergostil-materials-slider .material-info p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Below 992px (old max-991 block, now folded into the phone base cascade):
   the stage spans the full width and the panel offsets shrink. These are the
   <=991px values; the >=992px desktop values are restored in the
   min-width: 992 block at the end of the file. */
.ergostil-materials-slider .slide-stage {
  width: 100%;
}

.ergostil-materials-slider.layout-left .slide-stage {
  padding: 24px 0 60px 24px;
}

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

.ergostil-materials-slider.layout-left .dark-panel {
  top: -24px;
  left: -24px;
  bottom: -60px;
}

.ergostil-materials-slider.layout-right .dark-panel {
  top: -60px;
  right: -24px;
  bottom: -24px;
}

.ergostil-materials-slider.layout-left .slider-controls {
  bottom: 16px;
}

.ergostil-materials-slider.layout-right .slider-controls {
  top: 17px;
}

.ergostil-materials-slider .material-card .material-image img {
  height: 200px;
}

.ergostil-materials-slider .material-card .material-info {
  padding: 24px 24px 32px;
}

.ergostil-materials-slider .slider-controls {
  gap: 20px;
}

/* Below 576px (old max-575 block): shorter material images — the last
   override in the phone base cascade. */
.ergostil-materials-slider .material-card .material-image img {
  height: 170px;
}

/* 576-991px: the old max-575 override no longer applies, so the image height
   must be restored to the 200px this range showed before the conversion.
   Every other phone value already equals the 576-991px value (it came from
   the old max-991 block folded into the base), so nothing else is repeated
   here. */
@media (min-width: 576px) {
  .ergostil-materials-slider .material-card .material-image img {
    height: 200px;
  }
}

/* >=992px (desktop): restore the original base-cascade values that the old
   max-991 block overrode below 992px. Same selectors, same values as the
   rules above; source order (base -> 576 -> 992) makes them win again. */
@media (min-width: 992px) {
  .ergostil-materials-slider .slide-stage {
    width: 60%;
  }

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

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

  .ergostil-materials-slider.layout-left .dark-panel {
    top: -45px;
    left: -45px;
    bottom: -95px;
  }

  .ergostil-materials-slider.layout-right .dark-panel {
    top: -95px;
    right: -45px;
    bottom: -45px;
  }

  .ergostil-materials-slider.layout-left .slider-controls {
    bottom: 32px;
  }

  .ergostil-materials-slider.layout-right .slider-controls {
    top: 33px;
  }

  .ergostil-materials-slider .material-card .material-image img {
    height: 250px;
  }

  .ergostil-materials-slider .material-card .material-info {
    padding: 30px 32px 44px;
  }

  .ergostil-materials-slider .slider-controls {
    gap: 28px;
  }
}