/* client-overrides.css — Alibaba Market & Grille (alibaba)
 *
 * Per-client CSS only. `static-overrides.css` is a verbatim copy of the shared
 * fleet template and is re-synced on every adoption refresh — anything written
 * there is destroyed. This file is auto-linked by `wp-build-page.py` (it emits the
 * <link> only when this file exists) and loads AFTER static-overrides.css, so it
 * wins on source order at equal specificity.
 *
 * ---------------------------------------------------------------------------
 * 1. Flag carousel — restore the live slide geometry (gap-aware slide width)
 * ---------------------------------------------------------------------------
 * Measured at the home gate (probes/alibaba-carousel.mjs), 1440px viewport:
 *
 *                     live      rebuild   delta
 *   widget            114px     168px     +54
 *   slide (first)     115px     158px     +37   <- the cause
 *
 * Every element below the carousel was shifted down by exactly +54px, and nothing
 * else on the page differed. Two rules combine to produce it:
 *
 *   (a) Elementor's OWN stylesheet caps an un-initialised carousel's slides at
 *         .elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide
 *           { max-width: calc(100% / var(--e-image-carousel-slides-to-show, 3)) }
 *       That is 1267/8 = 158.4px here. It divides by the slide COUNT but never
 *       subtracts the gutters, because live it is a placeholder — Swiper is about
 *       to overwrite it with explicit pixel widths that do account for
 *       `spaceBetween`. On a static rebuild Swiper never runs, so the placeholder
 *       IS the final answer. And because it is a `max-width`, it silently beats the
 *       shared template's `width: 240px !important` — `!important` does not help a
 *       `width` that a `max-width` is clamping.
 *
 *   (b) The shared strip then adds its own `gap` on top of slides already sized to
 *       fill 100%, so the row overflows by (N-1) x gap and each slide is too wide
 *       for the space it actually gets.
 *
 * The source configures `slides_to_show: 8` with `image_spacing_custom: 50px`
 * (tablet 5 / 25px, mobile 3). Subtracting the gutters reproduces live exactly:
 *   (1267 - 7x50) / 8 = 114.6px  ->  live measures 115px  ✓
 *   ( 343 - 2x25) / 3 =  97.7px  ->  live measures  97px  ✓
 *
 * Written against `--e-image-carousel-slides-to-show` (Elementor already sets it
 * per breakpoint: 8 / 5 / 3) rather than hard-coded counts, so only the gutter
 * value is client-specific. The general form of this belongs in the shared
 * template — logged to process-learning/INBOX.md 2026-08-26 as a PREVENT, since
 * ANY carousel with a configured image spacing is over-wide by (N-1)xgap today.
 */
.elementor-widget-image-carousel {
  --ym-carousel-gap: 50px;
  /* Operator call at the home gate: advance every 2s. The source stores 1500ms;
   * read against the rendered strip that felt fast, and the flags are the kind of
   * detail a visitor reads rather than glances at. The shared template falls back
   * to the source value when this var is unset, so this is the only place the
   * client's pace is recorded. */
  --ym-carousel-autoplay-ms: 2000;
}

.elementor-widget-image-carousel .swiper,
.elementor-widget-image-carousel .swiper-container,
.elementor-widget-image-carousel .swiper-wrapper {
  gap: var(--ym-carousel-gap) !important;
  /* The shared template reserves 8px under the track for scrollbar clearance.
   * Live has no such gutter, so it reads as pure extra height on the widget.
   * Measured: 8px -> widget 168px, 0 -> 114px, which is live exactly. */
  padding-bottom: 0 !important;
}

/* Restore live's box model inside the slide.
 *
 * With the track padding gone the widget came out 6px SHORT of live at every
 * viewport (-6px at 1440 and at 390 alike) — a constant, which is the tell that it
 * is a font-derived inline-baseline gap rather than a layout error. Live's slide is
 * `display:block` holding a `display:inline` <img>, so each slide is 121px around a
 * 115px flag: the 6px is the descender space under an inline replaced element.
 *
 * The shared template makes the slide `display:flex` and the image `display:block`,
 * which removes it. Reverting BOTH is what matters and the order is not optional —
 * a flex container blockifies its children, so `display:inline` on the image is
 * silently computed back to `block` unless the slide stops being a flex container
 * first. Reproducing live's own two declarations gets the gap back at any font
 * size, which hard-coding `padding-bottom: 6px` would not. */
.elementor-widget-image-carousel .swiper-slide {
  display: block !important;
}
.elementor-widget-image-carousel .swiper-slide img {
  display: inline !important;
}

.elementor-widget-image-carousel .swiper-slide {
  --ym-n: var(--e-image-carousel-slides-to-show, 3);
  flex: 0 0 calc((100% - (var(--ym-n) - 1) * var(--ym-carousel-gap)) / var(--ym-n)) !important;
  width: calc((100% - (var(--ym-n) - 1) * var(--ym-carousel-gap)) / var(--ym-n)) !important;
  /* Defeat Elementor's gap-blind clamp described above. Without this the
   * flex-basis is honoured and then immediately clamped back to 100%/N. */
  max-width: none !important;
}

/* The shared template pins images to a 240px swatch box. These are 193x193 flags
 * shown 8-up, so they must fill their (much smaller) slot instead. `contain` is
 * kept from the shared rule — it is the non-destructive default and these are
 * square, so contain and cover render identically here. */
.elementor-widget-image-carousel .swiper-slide img {
  width: 100% !important;
  max-height: none !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  .elementor-widget-image-carousel { --ym-carousel-gap: 25px; }
}