/**
 * Gallery index pages — the image + name cards.
 *
 * Each card is an Elementor image widget followed by an image-box widget whose
 * description is the gallery name; the pale blue block is that widget's own
 * background. Its bottom padding had been set by hand per card (7%, 14%, 21%) to
 * try to make the blocks finish level, which cannot hold: the padding is a
 * percentage of the card width, and the names wrap onto one or two lines
 * depending on the viewport. The result was a ragged row of blue blocks.
 *
 * This lets the card stretch instead: the name block takes whatever height is
 * left in the row and centres the name inside it, so every blue block in a row
 * starts and ends on the same line whatever the name length.
 *
 * Loaded only on the gallery pages (body.wrc-gallery-page, see functions.php).
 */

/* ==========================================================================
 * Content width
 *
 * The card grids are Elementor "full width" containers, so wrc-container.css
 * deliberately leaves them alone and they ran edge to edge — while the intro
 * above them, a boxed container, was already capped at the shared 1650px. The
 * page therefore had two different content widths, and neither matched About Us.
 *
 * This gives the grids the geometry a standardised boxed section has. A boxed
 * section is full width with `--wrc-gutter` of padding and an inner wrapper
 * capped at `--wrc-content-width`; a full container has no inner wrapper, so the
 * cap goes on the container itself and the gutter is added to it — which works
 * out to the same content box, `min( 100% - 2 × gutter, 1650px )`, centred.
 *
 * `margin-left`/`margin-right` rather than the shorthand: Elementor drives the
 * vertical margins off `--margin-top` and those are the page author's spacing.
 * ========================================================================== */

body.wrc-gallery-page .elementor[data-elementor-type="wp-page"] > .e-con.e-con-full {
	max-width: min( 100%, calc( var( --wrc-content-width ) + 2 * var( --wrc-gutter ) ) );
	margin-left: auto;
	margin-right: auto;
	padding-left: var( --wrc-gutter );
	padding-right: var( --wrc-gutter );
	box-sizing: border-box;
}

/* ==========================================================================
 * The "Gallery" heading block
 *
 * The heading and its subtitle sit in a two-column row: a 70% column with the
 * heading, a 30% one with the gallery name. Some pages carry 30px of left
 * padding on that first column and some do not — World Oceans Day and Cofimvaba
 * do, the roadshow page and 2024 do not — so the word "Gallery" started 30px
 * inside the photographs beneath it on some pages and flush with them on others.
 *
 * Zeroing it puts every gallery heading on the same line as its images, which is
 * what the pages without the padding already did. The 30% column keeps its own
 * padding: that one is 30px everywhere, including on the reference page.
 *
 * `:has()` is what makes this safe — it picks out the column that actually holds
 * the heading rather than every first container on the page. Browsers without it
 * simply keep today's indent.
 * ========================================================================== */

body.wrc-gallery-page .elementor[data-elementor-type="wp-page"] > .e-con.e-con-boxed .e-con:first-child:has( > .elementor-widget-heading ) {
	padding-left: 0;
	padding-inline-start: 0;
}

/* ==========================================================================
 * Subtitle colour
 *
 * The gallery name under the heading was grey on some pages, black on Event
 * Galleries and left at the theme default on the rest. Grey is the colour the
 * roadshow and Cofimvaba pages use and the one this settles on.
 *
 * This outranks Elementor's per-page colour without !important: its rule is
 * three classes, this is three classes plus two element names.
 * ========================================================================== */

body.wrc-gallery-page .elementor-widget-heading h6.elementor-heading-title {
	color: #66777D;
}

body.wrc-gallery-page .e-grid > .e-con,
body.wrc-gallery-page .e-grid > .e-con > .e-con {
	height: 100%;
}

body.wrc-gallery-page .e-grid .elementor-widget-image-box {
	/* !important: Elementor writes the per-card padding inline in the page CSS. */
	padding: 18px 20px !important;
	min-height: 86px;
	display: flex !important;
	flex: 1 1 auto !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

body.wrc-gallery-page .e-grid .elementor-widget-image-box .elementor-image-box-wrapper {
	width: 100%;
}

body.wrc-gallery-page .e-grid .elementor-image-box-description {
	margin: 0;
}

/* The photo above it should not leave a sliver of page showing through. */
body.wrc-gallery-page .e-grid .elementor-widget-image img {
	display: block;
	width: 100%;
}

@media ( max-width: 767px ) {

	body.wrc-gallery-page .e-grid .elementor-widget-image-box {
		min-height: 0;
		padding: 14px 16px !important;
	}
}

/* ==========================================================================
 * Galleries index — full-bleed cover cards
 *
 * The content-width block at the top of this file is right for the individual
 * gallery pages, where the photo grid shares a column with the gallery heading
 * and has to line up with it. On the index (page 68651) the two cover cards
 * *are* the page, and they are meant to run from edge to edge of the window.
 *
 * Scoped to the card grid rather than to every full-width container on the
 * page, so the banner above it keeps the gutter its breadcrumb and title need.
 * ========================================================================== */

body.page-id-68651 .elementor[data-elementor-type="wp-page"] > .e-con.e-con-full.e-grid {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}