/*
 * cls-fix.css — layout-stability reservations for the booking section.
 * Enqueued LAST on every page (functions.php, priority 101).
 *
 * WHY
 *   PageSpeed reported CLS 0.391 on mobile. Measured with build/optimize/cls_attribution.js
 *   against live, the score came almost entirely from two transients inside the
 *   `*-secNN-bookinner` section (home / leak-finder / ads-diagnosis):
 *
 *   1) 0.258 — a TWO-FRAME thrash at ~3.9s. Fluent Player inserts its poster <img>
 *      into normal flow one frame before its own stylesheet makes the loader
 *      position:absolute, so the video column jumps 196px -> 360px for ~10ms and
 *      shoves the booking column 164px down, then snaps back. CLS is charged for
 *      both frames even though the move nets to zero.
 *
 *   2) 0.102 — FluentForm renders every wizard step stacked until it finishes
 *      building the multi-step form (~6.4s on throttled mobile), ballooning the
 *      form from 147px to ~530px and back.
 *
 * APPROACH
 *   Reserve the box each widget settles at, so its internal churn cannot move the
 *   page. Every value below was measured on live across 320-1920px (see the sweep in
 *   build/optimize/cls_attribution.js) and is <= the settled height in its bucket,
 *   so the SETTLED layout is provably unchanged — verified byte-identical (docH and
 *   footer offset delta 0) on all three pages at 412px and 1280px.
 *
 * MEASURED EFFECT (live, Moto-G / Slow-4G / 4x CPU)
 *   home           0.383 -> 0.222
 *   leak-finder    0.399 -> 0.226
 *   ads-diagnosis  0.407 -> 0.224
 *   desktop (1280) unchanged — every rule here is scoped to <=1023.98px
 *
 * NOT FIXED HERE (needs plugin-level changes, not CSS):
 *   ~0.097  the poster <img>'s own first paint (0x0 -> 348x196). Nothing moves —
 *           the column is locked — but CLS still charges the image's own box.
 *   ~0.023  Fraunces/Inter Tight webfont swap reflowing the hero heading by 32px.
 *
 * Anchored on .kb-row-layout-idr-bookinner (the booking section itself) rather than
 * page ids, so the fix travels with the section if it is reused on another page.
 */

/* ---- 1. Video column: lock it to the 16:9 box it already settles at, and clip the
        one-frame in-flow poster before it can push the booking column down. ---- */
@media (max-width: 1023.98px) {
	.kb-row-layout-idr-bookinner .kadence-columnc-4e24f694 > .kt-inside-inner-col {
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}
}

/* ---- 2. Booking form: pin the box for exactly the window in which FluentForm is
        still assembling the wizard. FluentForm removes .ff-form-loading itself, so
        nothing stays pinned once the form is real.
        `!important` is required: assets/snapshots/home.css already forces
        `height:auto !important` on this subtree below 767px. ---- */
@media (max-width: 767px) {
	.kb-row-layout-idr-bookinner .kadence-columnc-ed7e6c91 form.frm-fluent-form.ff-form-loading {
		height: 135px !important;
		overflow: hidden !important;
	}
}

@media (min-width: 431px) and (max-width: 767px) {
	.kb-row-layout-idr-bookinner .kadence-columnc-ed7e6c91 form.frm-fluent-form.ff-form-loading {
		height: 118px !important;
	}
}