/*
Theme Name: Extra Child (e-GMAT)
Template: Extra
Version: 1.0.0
Description: e-GMAT customizations carried over from direct Extra edits. See audit/custom-code-map.md in the project repo.
*/

/* ---------------------------------------------------------------------------
 * FIX: Ultimate Blocks 3.5.8 How-To step images (Phase 3, 29 Jul 2026)
 *
 * UB 2.5.3 sized step images with `.ub_howto-step-image{width:100%}`.
 * 3.5.8 added, inside @media (min-width:768px):
 *   .ub_howto-step-display .ub_howto-step .ub_howto-step-image{width:var(--ub-howto-image-width)}
 * and its render callback (src/blocks/how-to/block.php) emits that variable
 * INLINE on each <li class="ub_howto-step"> from $stepPic['width']. Content saved
 * before 3.5.8 has no stored width, so it falls back to 200px — article
 * screenshots with a 750px natural width rendered at 200px, shrinking pages by
 * up to 2,477px. Mobile (<768px) was unaffected.
 *
 * `!important` is required: an author rule must beat an inline custom property.
 * TRADE-OFF: this also overrides per-step widths chosen in the editor for NEW
 * content. `how-to` is used on only 4 posts, so setting the width on those posts
 * in the editor is a valid alternative that keeps the editor control working.
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.ub_howto-step-display .ub_howto-step,
	.ub_howto-section-display .ub_howto-section .ub_howto-step {
		--ub-howto-image-width: 100% !important;
	}
}

/* ---------------------------------------------------------------------------
 * FIX: Ultimate Blocks 3.5.8 button spacing (Phase 3, 29 Jul 2026)
 * 2.5.3 stylesheet: .ub-button-container{...padding:10px 0;margin:20px 0}
 * 3.5.8 stylesheet: .ub-buttons .ub-button-container{max-width:100%;display:flex}
 *
 * Restore the PADDING ONLY. Do NOT restore `margin:20px 0`: although 2.5.3's stylesheet
 * declares it, the site's own CSS overrides it, so live's computed container margin is 0/0
 * (measured). 3.5.8 also adds a `.wp-block-ub-button` wrapper carrying its own 20px margins,
 * so restoring the margin double-counted spacing and made QA ~26px TALLER per button —
 * +107px on a 4-button post, +157px on a 6-button post. With padding only, 4 test posts
 * (incl. both former mismatches) are byte-identical to live. `button` is in 741 posts.
 * ------------------------------------------------------------------------- */
.ub-buttons .ub-button-container {
	padding: 10px 0;
}

/* ---------------------------------------------------------------------------
 * FIX (part 2): Ultimate Blocks 3.5.8 How-To *yield* image (29 Jul 2026)
 * The first fix covered step images only. 3.5.8 sizes the yield image through a
 * separate selector — `.ub_howto-yield .ub_howto-yield-image-container, .ub_howto-yield img`
 * — also driven by --ub-howto-image-width, emitted inline by block.php (line ~332,
 * $finalImageWidth). Found on gmat-reschedule-gmat-cancel: yield image rendered
 * 650x255 in QA vs 841x330 on live. Step images were already correct at 799px.
 * ------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.ub_howto-yield,
	.ub_howto-yield .ub_howto-yield-image-container {
		--ub-howto-image-width: 100% !important;
	}
}
/* ---------------------------------------------------------------------------
 * FIX: Ultimate Blocks 3.5.8 image-slider upscale + CROP  (7 Aug 2026)
 *
 * 3.5.8 combines three things that together crop and blow up every slide:
 *   1. its stylesheet sets `width:100%` on slide images -> box = 841px content width
 *   2. its markup adds an INLINE `style="height:Npx"` per slider (a value stored in
 *      the block that 2.5.3 ignored): 425, 371 and 500 across our 10 posts
 *   3. `object-fit:cover` -> the image scales to FILL that box; the overflow is cut off
 *
 * Measured live -> new box before this fix:
 *   756x425 -> 841x425   (7 b-school profile posts)  ~10% of height cropped
 *   741x600 -> 841x371   (e-gmats-last-mile-push)    ~46% of height cropped
 *   402x500 -> 841x500   (gmat-710-to-740)           ~52% cropped, 2.09x upscale
 * These are text-bearing infographic slides, so the crop removes real content.
 *
 * `height:auto` is the crux, and `!important` is mandatory: an inline style beats any
 * normal stylesheet rule, and only an !important stylesheet declaration outranks it.
 *
 * NOTE: the QA doc's candidate rule touched only `width`, which happens to be correct
 * for the 425 and 500 sliders but leaves e-gmats-last-mile-push at 458x371 vs live's
 * 741x600. Overriding height is what makes this universal.
 *
 * Acceptance test: slide images must read 756x425 / 741x600 / 402x500 again.
 * Open question for the browser: the container carries `min-height:460px`, so the
 * 425-height sliders may leave ~35px of dead space.
 * ------------------------------------------------------------------------ */
.ub_image_slider .swiper-slide > img,
.ub_image_slider .swiper-slide > picture > img,
.ub_image_slider .swiper-slide figure > img,
.ub_image_slider .swiper-slide figure > picture > img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}