/**
 * MP Blocks - MP Slider front styles (block internally named "mp_video_slider" for backward-compatibility)
 *
 * @author    Maxime Potier <contact@maximepotier.fr>
 * @copyright 2026 Maxime Potier
 * @license   Commercial - All rights reserved
 */

.mpbl-slider {
  position: relative;
  width: 100%;
}

/* Clips the sliding track. Kept as a separate inner element (no padding) so
   that, in the "contained" layout, the slider's horizontal gutter lives on
   .mpbl-slider (outside this clip) while the clip happens exactly at the
   content edge. Otherwise overflow:hidden on the padded .mpbl-slider clips at
   its PADDING box, letting the next slide peek through the gutter on mobile. */
.mpbl-viewport {
  overflow: hidden;
  width: 100%;
}

/* "Layout: contained" setting - boxes the whole slider (background media
   included, not just the text) within the site's standard container width,
   instead of the default edge-to-edge full-bleed background. Mirrors the
   theme's own .container rule (fluid + 15px gutters below 1420px, capped at
   1400px above it - see themes/cartzilla/_dev/css/helpers/_variables.scss
   $container-max-widths/$grid-breakpoints) so the slider lines up with the
   rest of the page. */
.mpbl-slider--contained {
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 1420px) {
  .mpbl-slider--contained {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.mpbl-track {
  display: flex;
  width: 100%;
  will-change: transform;
}

.mpbl-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 992px) {
  .mpbl-slide {
    min-height: 560px;
  }
}

.mpbl-slide-media {
  position: absolute;
  inset: 0;
  background-color: #0f172a;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.mpbl-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

/* Hidden as soon as the video player fires onReady (see
   mp-blocks-video-slider.js) - kept in the DOM until then, stacked *above*
   the iframe via z-index, purely as an instant-paint fallback while the
   YouTube API/iframe is still loading (no flash of empty content). No
   artificial delay is added on top of that: a brief native YouTube chrome
   flash on first load is preferred over hiding the video's own content
   behind the poster for several seconds. */
.mpbl-slide.mpbl-video-playing .mpbl-poster {
  opacity: 0;
}

.mpbl-video-embed {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* 16:9 oversized iframe technique to emulate object-fit: cover, since
   YouTube iframes don't support object-fit natively. */
.mpbl-video-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 16:9 wide enough to always cover a 16:9-or-taller box */
  height: 56.25vw; /* 9:16 tall enough to always cover a narrower box */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

/* Sits between the background media (image/video) and the text, its color
   and opacity are set inline per-slide (see the "Display an overlay..."
   settings and MpVideoSlider::buildOverlayStyle()). Two coverage areas are
   possible ("Overlay coverage area" setting):
   - .mpbl-overlay--slider: covers the whole slide (image/video area) - lives
     inside .mpbl-slide-media, sized via inset:0 against it.
   - .mpbl-overlay--text: covers only the text box - lives inside
     .mpbl-slide-inner (which needs position:relative, see below), sized via
     inset:0 against it, and painted behind the text thanks to z-index:-1. */
.mpbl-overlay {
  position: absolute;
  pointer-events: none;
}

.mpbl-overlay--slider {
  inset: 0;
  /* Must beat .mpbl-poster/.mpbl-video-embed (z-index 2/1) - both live in the
     same stacking context as this element (.mpbl-slide-media has no z-index
     of its own, so it doesn't isolate its children). Tied at z-index:2 with
     .mpbl-poster, DOM order (this overlay is painted after it) settles the
     tie in the overlay's favor, so it still sits below the text content
     (.mpbl-slide-content, also z-index:2 but later in the DOM). */
  z-index: 2;
}

.mpbl-overlay--text {
  inset: 0;
  z-index: -1;
  /* MP style (2026-08-10, client request "border-radius quand la zone
     couverte par l'overlay est text") - design system token rather than a
     hardcoded px value, consistent with every other panel/card surface
     (lfdp-tokens.css --lfdp-radius-*). radius-lg (8px) is the "card/panel"
     size, matching this box's role (a text panel, not a small inline tag/
     button, which use radius-sm/radius-md - see .mp-tag-red/.mp-tag-blue and
     .lfdp-btn in _custom.scss / lfdp-components.css). */
  border-radius: var(--lfdp-radius-lg, 8px);
}

.mpbl-slide-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 2.5rem 1.5rem;
  color: #fff;
}

/* Text box takes half of the content area's width, and is anchored either
   to the left or the right edge (from the center) depending on the
   per-slide "Text position" setting. `position: relative` is required so
   an "Overlay coverage area: text" overlay can be sized against it. */
.mpbl-slide-inner {
  position: relative;
  box-sizing: border-box;
  width: 50%;
  min-width: 260px;
  margin-left: 1.5rem;
}

/* Adds breathing room around the text when the overlay is scoped to the
   text box ("Overlay coverage area: text"), so the overlay reads as a
   padded card instead of a rectangle hugging the text edges. */
.mpbl-slide-inner--padded {
  padding: 1.5rem 1.75rem;
}

.mpbl-slide-content--right {
  justify-content: flex-end;
}

.mpbl-slide-content--right .mpbl-slide-inner {
  margin-left: 0;
  margin-right: 1.5rem;
}

/* Client request (2026-08-10): on mobile the text box should use the full
   slide width instead of being capped at 50% and offset - more room for
   the title/description/price on narrow screens. */
@media (max-width: 767.98px) {
  .mpbl-slide-inner,
  .mpbl-slide-content--right .mpbl-slide-inner {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  .mpbl-slide-inner {
    /* Client request (2026-08-10): shrink-to-fit the text content instead
       of a fixed 50% box - min-width (above) still guards against the
       inner text collapsing on short titles. .mpbl-slide-content is a flex
       container, so an auto-width item naturally sizes to its content
       (wrapping as needed) without overflowing. */
    width: auto;
    margin-left: 4.5rem;
  }

  .mpbl-slide-content--right .mpbl-slide-inner {
    margin-left: 0;
    margin-right: 4.5rem;
  }
}

/* Keep the slide content area aligned with the site's global .container
   once it switches from fluid to a centered fixed max-width (same
   breakpoint/values as the theme: 1420px viewport, 1400px container).
   Constraining .mpbl-slide-content itself (instead of only offsetting
   .mpbl-slide-inner) means its left AND right edges naturally match
   .container's edges, so both the "left" and "right" text positions stay
   aligned - without this, a full-bleed slider drifts out of alignment with
   the rest of the page on large screens or when the browser is zoomed out.
   Adjust the two values below if the theme's container breakpoint/max-width
   ever changes. */
@media (min-width: 1420px) {
  .mpbl-slide-content {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* The slider itself is already boxed to the container width (see
     .mpbl-slider--contained above), so the text no longer needs its own
     virtual container - it should simply fill the (already boxed) slide. */
  .mpbl-slider--contained .mpbl-slide-content {
    max-width: 100%;
  }
}

/* Title/subtitle/description already inherit white from .mpbl-slide-content
   (color:#fff, further up). The declaration is repeated here (client request
   "par défaut ... doit être #fff") so each element states its own default
   explicitly rather than relying on inheritance - a merchant-typed Quill
   HTML tag with no color of its own still falls back to this, and it also
   protects against any future stylesheet setting a color on a bare <p>/
   <span> with higher specificity than the ancestor rule. Per-slide free-text
   HTML (editor field) can still override it with its own inline color, same
   as before. */
.mpbl-subtitle {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.mpbl-title {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0.75rem;
}

/* Title/subtitle now accept HTML (editor field) - the WYSIWYG wraps content
   in a <p> by default, which would otherwise add its own browser-default
   margin on top of .mpbl-title/.mpbl-subtitle's own margin-bottom. */
.mpbl-title p,
.mpbl-subtitle p {
  margin: 0;
}

@media (min-width: 992px) {
  .mpbl-title {
    font-size: 2.5rem;
  }
}

.mpbl-description {
  font-size: 1rem;
  color: #fff;
  opacity: 0.95;
  margin-bottom: 1rem;
}

/* Old/new price pair, side by side (price_old/price_new settings). Started
   from the product card's own price pair (lfdp-components.css ".lfdp-
   product-card .lfdp-price"/".lfdp-price-old" - accent red current price,
   muted struck-through old one), sizes then multiplied on client request
   from that original base (old price 1.1rem, new price 1.75rem) - x1.5 for
   the old price, x2 for the new one, restoring the "new price stands out
   more" hierarchy of the original convention (a first pass had doubled the
   OLD price instead, making it bigger than the new one - corrected here). */
.mpbl-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

/* MP style (2026-08-10, client requests) - only the strike-through line
   itself is red (text-decoration-color): turning the whole old price red
   would give it the exact same color as the current price right next to it
   (.mpbl-price, accent red), losing the "old vs new" contrast this pair
   exists for. Text itself is solid white + bold + x1.5 the original 1.1rem
   (was also rgba(255,255,255,0.65) + regular weight) - client request "prix
   barré en blanc + en gras + taille x1.5". */
.mpbl-price-old {
  font-size: 1.65rem;
  font-weight: 700;
  color: #fff;
  text-decoration-color: var(--lfdp-color-accent, #C00E1C);
}

/* Client request "le nouveau prix en gras + taille x2" (x2 the original
   1.75rem, was already bold/accent red) then reduced twice: "légèrement"
   (3.5rem -> 3rem) then "-0.5rem" (3rem -> 2.5rem). */
.mpbl-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--lfdp-color-accent, #C00E1C);
}

.mpbl-cta {
  margin: 0;
}

/* The CTA is a design system button (`lfdp-btn` + `lfdp-btn-accent`/
   `lfdp-btn-primary`, see mp_video_slider.tpl / the btn_color setting), so
   every visual property it used to hardcode - padding, radius, font weight,
   colors, transition - is removed here rather than fought with a compound
   selector: `.mpbl-btn` is a single-class selector, exactly as specific as
   `.lfdp-btn`/`.lfdp-btn-accent`, so leaving stale properties would make the
   result depend on stylesheet load order. Same reasoning as `.mpcta-btn`
   (mp-blocks-cta.css). Only `text-decoration: none` is kept: the design
   system doesn't reset it and this is an `<a>`. */
.mpbl-btn {
  text-decoration: none;
}

.mpbl-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mpbl-arrow:hover,
.mpbl-arrow:focus {
  background: #fff;
}

.mpbl-arrow--prev {
  left: 1rem;
}

.mpbl-arrow--next {
  right: 1rem;
}

@media (min-width: 992px) {
  .mpbl-arrow--prev {
    left: 1.75rem;
  }

  .mpbl-arrow--next {
    right: 1.75rem;
  }
}

.mpbl-dots {
  position: absolute;
  z-index: 3;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.mpbl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mpbl-dot--active,
.mpbl-dot:hover,
.mpbl-dot:focus {
  background: #fff;
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .mpbl-track {
    transition: none !important;
  }
}

/* ==========================================================================
   Below 992px: full-bleed + scale model of the desktop composition
   (client requests 2026-08-12: "préserver le ratio desktop en version
   mobile, ajuster les tailles de texte en conséquence", then "fullwidth et
   non boxed sous 992px" + "augmente la taille des textes de 1,5x")
   ==========================================================================
   Until now the slide kept a FIXED height on small screens (min-height:420px
   above), so its shape flipped from landscape to portrait as the viewport
   narrowed: 1340x560 (2.39:1) on desktop vs 330x420 (0.79:1) on an iPhone.
   The background image, sized with `cover`, was therefore cropped to a
   completely different framing than the one the merchant composes in
   PrettyBlocks.

   Fix: give the slide the desktop aspect-ratio and express EVERY length of
   the composition as a percentage of the slide's own width (`cqw`), so the
   whole thing shrinks as one - like scaling down an image.

   REFERENCE (recompute everything below if either number changes) - the
   desktop rendering at >=1420px, where the container is capped. The slide is
   NOT 1370px wide: the homepage zone sits in `.container > .row > .col`, and
   this theme zeroes `.row`'s negative margins and `.col`'s padding (see the
   bundle: `.row{margin-left:0;margin-right:0}`, `.col{padding-left:0;
   padding-right:0}`), so only `.container`'s own 15px gutter applies, on top
   of `.mpbl-slider--contained`'s 15px. Hence slide = 1400 - 30 - 30 =
   **1340 x 560px**, ratio 67/28 (2.393:1), and **1cqw = 13.4px of the
   desktop design**.

   TEXT x2.25 (client requests, two passes: "augmente la taille des textes de
   1,5x" then "encore augmenter sensiblement"). Only the type is multiplied,
   from the desktop base: 40px title -> 90px -> 90/13.4 = 6.716cqw, 16px
   subtitle/description/button -> 36px -> 2.687cqw, 26.4px struck price ->
   59.4px -> 4.433cqw. The button's padding, radius and border follow the same
   x2.25 (a button's box is driven by its type: 1x padding around 2.25x text
   would squeeze it).

   HOW THE ROOM WAS FOUND - x1.5 already filled ~78% of the slide, so this
   second pass could not come from the type alone. Two levers, both applying
   to mobile only, were used instead of touching the ratio:
   - vertical spacing is *compressed* below its proportional value (content
     padding 2.985cqw -> 1.2cqw, inter-line margins roughly halved). It was
     already deliberately left at 1x while the type grew; now it shrinks.
   - leading is tightened (title 1.2 -> 1.1, subtitle/description/button
     inherit 1.5 from `body` -> 1.25/1.35/1.2, price row -> 1.15). At 10-26px
     the 1.5 leading inherited from body is pure waste, it exists for long
     body copy.
   Net effect: the type is 50% larger than the previous pass while the fill
   ratio stays around 83%.

   HEIGHT +25% (client request, 4th pass) - the saturation described below
   left no room, so the ratio itself had to give: `aspect-ratio` is now
   **67/35 = 1.914:1**, i.e. the desktop 67/28 divided by 1.25.

   ⚠️ WHAT THAT COSTS: the box is no longer a strict scale model of the
   desktop shape - it is 25% taller than the desktop ratio. The TYPE and the
   text offsets are still strictly width-proportional (`cqw`), so the
   composition still scales, but the background image is cropped slightly less
   wide than on desktop. That was the accepted trade for breathing room; the
   reference numbers above (1340 x 560, 1cqw = 13.4px) are unchanged, only the
   height multiplier moved.

   WHY IT WAS NEEDED: the text box is half the slide (client request, see
   .mpbl-slide-inner below), which halves the available text width and pushes
   both slides' titles onto two lines. At the strict ratio the stack needed
   ~97% of the height on the slide without a price row and ~101% on the one
   with it - the second one was clipping. At 67/35 those drop to ~78% and
   ~81%.

   Resulting numbers: on a 390px-wide phone the slide is ~204px tall (was 163)
   with a ~26px title and ~10.5px body text; 360px -> 188px; 430px -> 225px;
   768px tablet -> ~401px with a ~52px title.

   `min-height: min-content` stays regardless: it is the no-clipping safety
   net for merchant-typed text, not a consequence of the ratio.

   `cqw` needs `container-type` on an ancestor, hence the `@supports` guard:
   a browser without container queries (pre-Chrome 105 / Safari 16) skips
   that part and keeps the previous fixed-height rendering, instead of
   applying the aspect-ratio to full-size text and clipping it. The
   full-bleed rules below stay outside the guard - they don't need cqw. */
@media (max-width: 991.98px) {
  /* Edge-to-edge below 992px, whatever the "Layout" setting: the slider
     escapes the ancestor `.container`'s gutter instead of just dropping its
     own. `calc(50% - 50vw)` resolves to exactly minus that gutter (50% of
     the parent's content width minus half the viewport), so it self-corrects
     if the theme's container padding ever changes - unlike a hardcoded
     `margin: 0 -15px`. Safe here because it is scoped to touch widths, where
     scrollbars are overlays and 100vw doesn't overshoot. */
  .mpbl-slider {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .mpbl-slider--contained {
    padding-left: 0;
    padding-right: 0;
  }

  @supports (container-type: inline-size) {
    .mpbl-slide {
      /* `container-type` makes 1cqw = 1% of this element's width for
         everything inside it.

         `min-height` must be redeclared to defeat the 420px floor set above,
         which would otherwise win over the aspect-ratio height. `min-content`
         rather than `0`: in the block axis it resolves to the content height,
         so the slide is max(ratio height, content height). The ratio is
         therefore honoured whenever the text fits, and a slide whose text
         does NOT fit grows by a few pixels instead of being clipped by the
         `overflow: hidden` above. That safety net matters here because the
         composition is saturated (see the fill ratios above) and the text is
         merchant-typed: a slightly longer title must never truncate.
         `.mpbl-track` is a flex row, so all slides then share the tallest
         height and the slider stays rectangular.

         `aspect-ratio` is the desktop 67/28 DIVIDED BY 1.25 (client request
         "+25% de la hauteur actuelle", 4th pass): 28 x 1.25 = 35, hence
         67/35 = 1.914:1. See the header comment for what that costs in
         fidelity. */
      container-type: inline-size;
      min-height: min-content;
      aspect-ratio: 67 / 35;
    }

    /* Horizontal padding is 0 on the desktop reference (see the 1420px
       block above), the text is offset by .mpbl-slide-inner's margin only.
       Vertical padding is COMPRESSED, not proportional (2.985cqw would be the
       faithful value) - see "HOW THE ROOM WAS FOUND" above. */
    .mpbl-slide-content {
      padding: 1.2cqw 0;
    }

    /* Half of the slide (client request 2026-08-12) - the base rule's own
       `width: 50%`, restored here because it is overridden twice further up:
       by the 767.98px rule (`width: 100%`) and by the >=992px one
       (`width: auto`, shrink-to-fit). `min-width` is dropped on purpose: it
       only existed to keep a shrink-to-fit box from collapsing on a short
       title, and the width is definite again.

       Which EDGE the box hugs comes from the per-slide "Text position"
       setting: `.mpbl-slide-content--right` already flips the flex container
       to `justify-content: flex-end` in the base rules (not media-scoped), so
       only the 72px offset has to be swapped from one side to the other -
       exactly like the >=992px block does. */
    .mpbl-slide-inner {
      width: 50%;
      margin-left: 5.373cqw;
      margin-right: 0;
    }

    .mpbl-slide-content--right .mpbl-slide-inner {
      margin-left: 0;
      margin-right: 5.373cqw;
    }

    .mpbl-slide-inner--padded {
      padding: 1.2cqw 2.09cqw;
    }

    .mpbl-overlay--text {
      border-radius: 0.597cqw;
    }

    .mpbl-subtitle {
      font-size: 2.687cqw;
      line-height: 1.25;
      margin-bottom: 0.4cqw;
    }

    .mpbl-title {
      font-size: 6.716cqw;
      line-height: 1.1;
      margin-bottom: 0.6cqw;
    }

    .mpbl-description {
      font-size: 2.687cqw;
      line-height: 1.35;
      margin-bottom: 0.8cqw;
    }

    /* The description is merchant-typed HTML: its <p> carry the theme's own
       16px bottom margin, which would stay at full size and wreck the
       proportions of a scaled-down box. */
    .mpbl-description p {
      margin-top: 0;
      margin-bottom: 0.8cqw;
    }

    .mpbl-price-row {
      gap: 0.716cqw;
      line-height: 1.15;
      margin: 0 0 0.8cqw;
    }

    .mpbl-price-old {
      font-size: 4.433cqw;
    }

    .mpbl-price {
      font-size: 6.716cqw;
    }

    /* Compound selector on purpose: `.mpbl-btn` alone ties with the design
       system's `.lfdp-btn` (padding/font-size/radius/border live there), and
       a tie between two stylesheets is settled by load order. */
    .mpbl-cta .mpbl-btn {
      gap: 0.672cqw;
      padding: 2.015cqw 4.701cqw;
      font-size: 2.687cqw;
      line-height: 1.2;
      border-width: 0.168cqw;
      border-radius: 1.007cqw;
    }

    /* [rouge]/[bleu]/[blanc] shortcode tags (MpVideoSlider::$tagShortcodes ->
       .mp-tag-red/.mp-tag-blue/.mp-tag-white, styled in the theme's _custom.scss) hardcode
       an 8px horizontal padding and a 4px radius. Those are sized for 16px
       desktop copy: left alone they would look like chunky blocks around the
       10px body text of a scaled-down slide. Same x2.25 as the type they wrap,
       so the padding keeps its 50%-of-font-size ratio at every width.
       `!important` is required to beat the theme's own `!important` paddings -
       the compound selector already wins on specificity. */
    .mpbl-slide-inner .mp-tag-red,
    .mpbl-slide-inner .mp-tag-blue,
    .mpbl-slide-inner .mp-tag-white {
      padding-left: 1.343cqw !important;
      padding-right: 1.343cqw !important;
      border-radius: 0.672cqw;
    }

    /* Navigation controls are deliberately NOT part of the scale model.
       Proportionally they would measure 12px (arrows) and 3px (dots) on a
       phone, and this slider has no swipe support while autoplay is off in
       the block settings: those two controls are the only way to reach the
       other slides, so they must stay tappable (24px is the WCAG 2.2 AA
       minimum target size). They are still reduced from their 44px/10px
       desktop size so they don't dominate a ~163px-tall slide. */
    .mpbl-arrow {
      width: 28px;
      height: 28px;
    }

    .mpbl-arrow svg {
      width: 16px;
      height: 16px;
    }

    .mpbl-arrow--prev {
      left: 0.5rem;
    }

    .mpbl-arrow--next {
      right: 0.5rem;
    }

    .mpbl-dots {
      bottom: 0.4rem;
      gap: 5px;
    }

    .mpbl-dot {
      width: 6px;
      height: 6px;
    }
  }
}