/* ==========================================================================
   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;
	}
}

/* ==========================================================================
   Gertrudes — full-width hero (2026-09-10)

   Follows the admin change that drops the portrait promo block from the
   first Layout Composer row and widens the slider's sub-column from
   col-md-9 to col-md-12. Everything above stays in place but goes inert:
   its rules are scoped with :has(> .static-sidebar), and with no static
   block in the row there is nothing for them to match — so this file is
   safe whether or not the admin edit has been made yet.

   Nothing here forces a height or an aspect ratio. The nivo slider sizes
   itself from the slide's natural ratio, and its transition slices are
   built at that same natural height (jquery.nivo.slider.js:20-21) — a CSS
   crop would make the slices disagree with the still image mid-animation.
   The hero's proportions are therefore a function of the uploaded artwork:
   at the new full width the slide renders ~1170px wide on desktop, so the
   source images want to be ~1920px wide, and their height sets how tall
   the band reads on every viewport.
   ========================================================================== */

/* Phone: the hero is the first thing under the announcement bar and now the
   only thing in its row, so it runs edge to edge. Dropping the container
   gutter and the Bootstrap column padding returns ~30px of image width —
   about 8% on a 375px screen — which is exactly the space the portrait
   block used to take from it further down the page. */
@media (max-width: 767px) {
	.slider-group {
		padding-top: 0;
	}

	.slider-group > .container {
		padding-left: 0;
		padding-right: 0;
	}

	.slider-group > .container > .row,
	.slider-group .sub-row {
		margin-left: 0;
		margin-right: 0;
	}

	.slider-group .main-col,
	.slider-group .sub-col {
		padding-left: 0;
		padding-right: 0;
	}

	/* stylesheet.css:220 rounds the slider's corners; pointless once the
	   band touches both screen edges. */
	.slider-group .slider-container {
		border-radius: 0;
	}
}