/* ==========================================================================
   Gertrudes — homepage hero row balance (2026-08-31)
   Loaded by common/header.twig after stylesheet.css, so equal-specificity
   rules win by source order.

   The layout builder's first row (admin widget class "slider-group") pairs
   the nivo hero slider (col-md-9) with the "Static Top Store2" promo block
   (col-md-3, .pt-block.static-sidebar). The promo image is portrait
   (1080x1350) while the hero is ~2.9:1 landscape, so at desktop widths the
   right column always ran taller than the slider — the row's bottom edges
   never lined up.

   Fix: at md+ the sub-row becomes a flex row whose height is driven by the
   SLIDER alone. The static block's column is the flex sibling; its content
   is taken out of normal flow (absolute, inset to the Bootstrap gutter) so
   it contributes no intrinsic height, then the image cover-fills whatever
   height the slider establishes. Crop is centered; the 2x2 composite loses
   a little of its outer edge, never a whole tile.

   Scoped with :has(> .static-sidebar): in a browser without :has() support
   the block simply keeps its current (unbalanced) natural height — nothing
   breaks. Below 992px the columns stack full-width and none of this
   applies.

   NOTE for the admin team: the cleanest end state is still a promo image
   exported at the row's real ratio (~0.97:1 for a 1920x650 hero at 9:3 —
   e.g. 1080x1114); this CSS makes any ratio sit flush in the meantime.
   ========================================================================== */

@media (min-width: 992px) {
	.slider-group .sub-row {
		display: flex;
		align-items: stretch;
	}

	/* Bootstrap 3's .row clearfix pseudos become flex items and eat a slice
	   of the first column's width — remove them inside the flex context. */
	.slider-group .sub-row::before,
	.slider-group .sub-row::after {
		display: none;
	}

	.slider-group .sub-row > .sub-col {
		float: none;
	}

	/* The static block's column: content leaves normal flow so the slider
	   alone sets the row height. 15px = the Bootstrap 3 column gutter. */
	.slider-group .sub-row > .sub-col:has(> .static-sidebar) {
		position: relative;
	}

	.slider-group .sub-row > .sub-col:has(> .static-sidebar) > .static-sidebar {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 15px;
		right: 15px;
		margin-bottom: 0; /* stylesheet.css:46 adds 30px */
	}

	/* stylesheet.css:43 makes .image / .image > a inline-block; turn the
	   whole chain into full-height blocks so the img can cover-fill. */
	.slider-group .static-sidebar .image,
	.slider-group .static-sidebar .image > a {
		display: block;
		height: 100%;
		width: 100%;
	}

	.slider-group .static-sidebar .image a img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}