/* =====================================================================
 * qqf — Infographie front-end fixes served outside the webpack pipeline
 * =====================================================================
 *
 * READ THIS FIRST.
 *
 * This file is *not* compiled from the SASS sources in
 * `resources/assets/sass/`. It is a plain CSS file, uploaded by FTP
 * and enqueued in PHP alongside the compiled `infographies.css`. It
 * exists because the current maintainer of the site cannot run
 * `npm run prod` locally, and reshipping the whole `static/` bundle
 * is off the table — every rebuild would rewrite `manifest.json` and
 * force a coordinated redeploy of every hashed asset.
 *
 * The rules below are patches that would normally live in:
 *   - `resources/assets/sass/blocks/_sectionEqual.sass`
 *   - `resources/assets/sass/blocks/_sectionHotspots.sass`
 *
 * When you (future developer) do have the Node/webpack toolchain
 * working and can rebuild, please MIGRATE these rules into those
 * SASS files and delete this CSS + the PHP loader
 * (`app/config/wp/infographie-fixes-css.php`). That is the canonical
 * location; this file is a temporary shelter.
 *
 * Loading order and specificity — how this is designed to win:
 *   - Enqueued at priority 1000 with an explicit dependency on
 *     `base-camp-styles-infographies`, so it is printed AFTER the
 *     compiled `infographies.css` and after any inline styles that
 *     might be attached to that handle.
 *   - Selectors match the specificity that would result from the
 *     equivalent nested SASS, so cascade order alone decides — no
 *     `!important` used anywhere in this file, by design.
 *   - Cache busted with `filemtime()` in the PHP loader.
 *
 * Scope — where this is loaded:
 *   - Only on single infographies and integrations
 *     (is_singular('infographie') || is_singular('integrations')).
 *   - The `integrations` CPT renders `single-infographie.twig` with
 *     the linked infographie's content (single-integrations.php:15),
 *     so both scopes matter.
 * =====================================================================
 */


/* ---------------------------------------------------------------------
 * 1) Section Equal — text position modes (`above` / `over` / `below`)
 * ---------------------------------------------------------------------
 * The `over` mode is implicit: no modifier class is emitted for it, so
 * the compiled overlay CSS in `infographies.css` stays in charge.
 * Existing blocks that have no stored value render *identically* to
 * before — this file adds nothing to their DOM.
 *
 * Rules apply symmetrically to both columns: the left "from" box
 * (`.sectionEqual-ctt-box`) directly, and the right "result" reveal
 * panel (`.sectionEqual-ctt-box-result`) inside its own box. The
 * right-side interrogation panel (question mark + button) lives in
 * `.sectionEqual-ctt-box-interogation` and is deliberately untouched.
 *
 * The `order` property (rather than reshuffling the Twig) preserves
 * the DOM order that `animEqual()` in `infographie.js:537-548`
 * traverses via `.parent().parent().find('.js-equal-result')`.
 *
 * `min-height: 0` on the image slot is what actually lets flex shrink
 * it below its intrinsic size; without it, a large image would push
 * the flex parent to overflow the section.
 * --------------------------------------------------------------------- */

/* The stacking container for each column: for the left "from" side
   it is `.sectionEqual-ctt-box` directly; for the right "result"
   side it is `.sectionEqual-ctt-box-result` (the reveal panel
   inside the right-side box, positioned absolutely and given a full
   flex-column layout of its own). `justify-content: center` glues
   the image+text pair to the vertical middle of the column, so the
   group reads consistently whether or not a media is present, and
   in symmetry with the noMedia column (which centers its text
   alone). */
.sectionEqual.text-pos-above .sectionEqual-ctt-box,
.sectionEqual.text-pos-above .sectionEqual-ctt-box-result,
.sectionEqual.text-pos-below .sectionEqual-ctt-box,
.sectionEqual.text-pos-below .sectionEqual-ctt-box-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sectionEqual.text-pos-above .sectionEqual-ctt-box-ctt,
.sectionEqual.text-pos-below .sectionEqual-ctt-box-ctt {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    height: auto;
    width: 100%;
}

/* Desktop-only. The mobile SASS already gives `-imgParent` a fixed
   200px height, which normalises viewBox-only SVG rendering — we
   keep that intact.

   In stacked mode on desktop, we want `-imgParent` to size to its
   image content (so the image + text pair centers as a compact
   group via `justify-content: center` on the flex-column parent).
   `flex: 0 1 auto` + `min-height: 0` allows shrinking without
   growing; `height: auto` breaks the `height: 100%` cascade from
   the theme's SASS on this selector, otherwise `flex-basis: auto`
   picks up the 100% and pins imgParent back to the full column
   height (65vh).

   Breaking the height:100% cascade means `.sectionEqual-ctt-box-img`
   and the inline `height: 100%` on <picture> also fall back to
   auto, so the <img>'s `height: 100%` (from SASS) would resolve to
   its intrinsic dimensions — which for a viewBox-only SVG is
   browser-default (300×150 in Chrome/Firefox, or aspect-based in
   modern browsers). The second rule below gives the <img> explicit
   sizing with a definite viewport-based cap so any image type —
   raster, SVG with width/height attrs, SVG with only a viewBox —
   renders at a predictable size, preserving aspect ratio through
   auto width/height with max constraints. 40vh leaves comfortable
   room for the caption text within the 65vh section. */
@media only screen and (min-width: 1026px) {
    .sectionEqual.text-pos-above .sectionEqual-ctt-box-imgParent,
    .sectionEqual.text-pos-below .sectionEqual-ctt-box-imgParent {
        flex: 0 1 auto;
        min-height: 0;
        height: auto;
    }

    .sectionEqual.text-pos-above .sectionEqual-ctt-box-img img,
    .sectionEqual.text-pos-below .sectionEqual-ctt-box-img img {
        height: auto;
        width: auto;
        max-height: 40vh;
        max-width: 100%;
    }
}

.sectionEqual.text-pos-above .sectionEqual-ctt-box .sectionEqual-ctt-box-ctt,
.sectionEqual.text-pos-above .sectionEqual-ctt-box-result .sectionEqual-ctt-box-ctt {
    order: 1;
}
.sectionEqual.text-pos-above .sectionEqual-ctt-box .sectionEqual-ctt-box-imgParent,
.sectionEqual.text-pos-above .sectionEqual-ctt-box-result .sectionEqual-ctt-box-imgParent {
    order: 2;
}

.sectionEqual.text-pos-below .sectionEqual-ctt-box .sectionEqual-ctt-box-imgParent,
.sectionEqual.text-pos-below .sectionEqual-ctt-box-result .sectionEqual-ctt-box-imgParent {
    order: 1;
}
.sectionEqual.text-pos-below .sectionEqual-ctt-box .sectionEqual-ctt-box-ctt,
.sectionEqual.text-pos-below .sectionEqual-ctt-box-result .sectionEqual-ctt-box-ctt {
    order: 2;
}

/* Column without media — collapse the empty image slot. The twig
   emits `.sectionEqual-noMedia` on the from-side outer box
   (`.sectionEqual-ctt-box`) or on the result-side reveal panel
   (`.sectionEqual-ctt-box-result`), per column, whenever both
   `image` and `animation.url` are absent from that column's media
   clone. Only takes effect in stacked modes; `over` default is
   untouched. The vertical centering of the remaining text is
   already provided by the `justify-content: center` on the
   flex-column parent above — no dedicated centering rule needed
   here. */
.sectionEqual.text-pos-above .sectionEqual-noMedia .sectionEqual-ctt-box-imgParent,
.sectionEqual.text-pos-below .sectionEqual-noMedia .sectionEqual-ctt-box-imgParent {
    display: none;
}


/* ---------------------------------------------------------------------
 * 2) Section Image Hotspots — custom marker `<img>` sizing
 * ---------------------------------------------------------------------
 * Editors can upload a custom marker image per hotspot (or a fallback
 * per block). The rendered `<img>` has no CSS width, so an SVG
 * exported with only a `viewBox` (no width/height attributes) is laid
 * out as 0×0 by the browser — the marker exists in the DOM but is
 * invisible. Confirmed cause on infographie 44608.
 *
 * We pin an explicit width to match the visual footprint of the
 * default inline SVG marker (30×44 in the twig), with `height: auto`
 * so any SVG's viewBox preserves its aspect ratio. On mobile the
 * default marker is shrunk to 20 px wide via SASS
 * `.sectionHotspots-marquer-svg svg { width: 20px }`; the same
 * behaviour is reproduced for `<img>` markers here.
 *
 * `display: block` prevents the inline-image baseline sliver.
 * --------------------------------------------------------------------- */

.sectionHotspots-marquer-svg img {
    width: 44px;
    height: auto;
    display: block;
}

@media only screen and (max-width: 1025px) {
    .sectionHotspots-marquer-svg img {
        width: 20px;
    }
}