/* ==========================================================================
   HIMPEL Pair — two labelled pictures side by side
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-pair. Nothing here targets the theme,
   WooCommerce, or any global element.
   ========================================================================== */

.himpel-pair {
	--himpel-primary: #0b7347;
	--himpel-primary-dark: #095c39;
	--himpel-secondary: #f3f4ea;
	--himpel-white: #ffffff;
	--himpel-dark: #121212;

	position: relative;
	z-index: 2;
	width: auto;

	/* Written by himpel-bleed.js when a theme container holds this section. */
	margin-left: var(--himpel-bleed-l, 0px);
	margin-right: var(--himpel-bleed-r, 0px);

	background-color: var(--hpr-bg, var(--himpel-white));
	box-sizing: border-box;
}

.himpel-pair *,
.himpel-pair *::before,
.himpel-pair *::after {
	box-sizing: border-box;
}

.himpel-pair__inner {
	width: 100%;
	max-width: var(--hpr-max, 1340px);
	margin: 0 auto;
	padding: var(--hpr-py-d, 80px) var(--hpr-px-d, 40px);
}

/* ==========================================================================
   Top — the words
   ========================================================================== */

.himpel-pair__head {
	text-align: center;
}

/* The pill the home and about pages use, to the pixel. */
.himpel-pair__eyebrow {
	display: inline-flex;
	align-items: center;

	margin: 0 0 var(--hpr-eyebrow-gap, 16px);
	padding: var(--hpr-pill-pad, 8px 18px);

	border: 1px solid var(--hpr-pill-border, rgba(18, 18, 18, 0.18));
	border-radius: 100px;

	color: var(--hpr-pill-color, var(--himpel-dark));
	font-size: var(--hpr-pill-size, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.himpel-pair__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 9px;
	border-radius: 50%;
	background-color: var(--himpel-primary);
}

.himpel-pair__title {
	margin: 0;
	color: var(--hpr-title-color, var(--himpel-dark));
	font-size: var(--hpr-title-d, 34px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.himpel-pair__desc {
	/* A measure, centred: full-width centred prose is very hard to read back. */
	max-width: var(--hpr-desc-max, 820px);
	margin: var(--hpr-desc-top, 14px) auto 0;

	color: var(--hpr-text-color, #4f5a55);
	font-size: var(--hpr-text-size, 15px);
	line-height: 1.75;
}

.himpel-pair__desc p {
	margin: 0 0 1em;
}

.himpel-pair__desc p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Bottom — the two pictures
   ========================================================================== */

.himpel-pair__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hpr-gap, 24px);
	margin-top: var(--hpr-grid-top, 40px);
}

.himpel-pair--single .himpel-pair__grid {
	grid-template-columns: minmax(0, 1fr);
}

.himpel-pair__panel {
	position: relative;
	margin: 0;

	border-radius: var(--hpr-radius, 18px);
	background-color: var(--himpel-secondary);
	overflow: hidden;

	aspect-ratio: var(--hpr-ratio, 1.25);
}

.himpel-pair .himpel-pair__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	/*
	 * A slow settle back to its own size on hover, so the picture opening up is
	 * one movement with the label leaving rather than two separate events.
	 */
	transform: scale(1.03);
	transition: transform 0.7s ease;
}

/*
 * The scrim, now an even veil rather than a gradient from the foot. The label
 * sits in the middle of the picture, so what it needs is the whole frame taken
 * down a stop — a gradient would leave the word floating on the one part of the
 * photograph that was not darkened.
 */
.himpel-pair__panel::after {
	content: "";
	position: absolute;
	inset: 0;

	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--hpr-scrim, 0.42)) 0%,
		rgba(0, 0, 0, calc(var(--hpr-scrim, 0.42) * 0.62)) 100%
	);

	transition: opacity 0.45s ease;
	pointer-events: none;
}

/*
 * The caption: the word, a hairline, and — where there is one — a sentence,
 * centred together on the picture.
 *
 * Centred as a block rather than pinned to the middle of the panel, so a panel
 * with a sentence and one without still read as a pair: both blocks sit on the
 * same centre line and grow either side of it.
 */
.himpel-pair .himpel-pair__caption {
	position: absolute;
	z-index: 2;
	inset: var(--hpr-label-inset, 24px);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	color: var(--himpel-white);

	/*
	 * The section class is repeated on these three rules for one reason: a
	 * figcaption, a heading and a paragraph are all things a theme likes to
	 * style, and a single class would lose to anything of theirs carrying a
	 * class plus an element. Nothing on this site does today — but where this
	 * block sits is the whole design of it, so it is not left to chance.
	 */
	text-align: center;

	transition: opacity 0.45s ease, transform 0.45s ease;
	pointer-events: none;
}

.himpel-pair .himpel-pair__label,
.himpel-pair .himpel-pair__label-desc {
	text-align: center;
}

/*
 * The type itself is left alone: this is a real heading, and it takes the size,
 * weight and family the theme gives every other one. Only what the picture
 * demands is set here — white, centred, no margin — plus the rule beneath,
 * which is what turns a word floating on a photograph into something placed
 * there.
 */
.himpel-pair__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hpr-label-gap, 14px);

	margin: 0;
	color: inherit;
}

.himpel-pair__label::after {
	content: "";
	width: var(--hpr-rule-w, 52px);
	height: 1px;
	background-color: rgba(255, 255, 255, 0.75);
}

/*
 * A measure, because this sits over a photograph: a line of white text running
 * the full width of the panel has no left edge to come back to, and the picture
 * changes underneath it the whole way across.
 */
.himpel-pair__label-desc {
	max-width: var(--hpr-caption-max, 46ch);
	margin: var(--hpr-caption-top, 14px) 0 0;

	color: inherit;
	font-size: var(--hpr-caption-size, 14px);
	line-height: 1.65;
	opacity: 0.92;
}

/*
 * Clearing a panel: the label and the scrim go, and the picture settles back to
 * its own size. The word says which panel this is, and once the reader has it,
 * it is only in the way of the thing it labels.
 *
 * Two ways in, one appearance. On a mouse it is hover, guarded by a hover query
 * because a touch screen fires hover once on tap and then keeps it. On a touch
 * screen it is .is-selected, which the script toggles on tap — so a tablet and a
 * phone get the same reveal by the gesture they actually have, rather than
 * nothing at all.
 */
.himpel-pair__panel.is-selected .himpel-pair__caption {
	opacity: 0;
	transform: translateY(8px);
}

.himpel-pair__panel.is-selected::after {
	opacity: 0;
}

.himpel-pair__panel.is-selected .himpel-pair__img {
	transform: scale(1);
}

/* A panel that answers a tap should look like one. */
.himpel-pair.is-tappable .himpel-pair__panel {
	cursor: pointer;
}

@media (hover: hover) {
	.himpel-pair__panel:hover .himpel-pair__caption,
	.himpel-pair__panel:focus-within .himpel-pair__caption {
		opacity: 0;
		transform: translateY(8px);
	}

	.himpel-pair__panel:hover::after,
	.himpel-pair__panel:focus-within::after {
		opacity: 0;
	}

	.himpel-pair__panel:hover .himpel-pair__img,
	.himpel-pair__panel:focus-within .himpel-pair__img {
		transform: scale(1);
	}
}

/* ==========================================================================
   Animation
   ========================================================================== */

.himpel-pair.is-revealing .himpel-pair__eyebrow,
.himpel-pair.is-revealing .himpel-pair__title,
.himpel-pair.is-revealing .himpel-pair__desc,
.himpel-pair.is-revealing .himpel-pair__panel {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-pair.is-revealing .himpel-pair__eyebrow,
	.himpel-pair.is-revealing .himpel-pair__title,
	.himpel-pair.is-revealing .himpel-pair__desc,
	.himpel-pair.is-revealing .himpel-pair__panel {
		opacity: 1;
	}

	.himpel-pair .himpel-pair__img {
		transform: none;
		transition: none;
	}
}

/* Only ever seen by an editor. */
.himpel-pair__notice {
	margin: 0;
	padding: 16px 20px;
	border: 1px dashed #b9c2bd;
	border-radius: 8px;
	background-color: #f6f7f5;
	color: #55605a;
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================================================
   Responsive — breakpoints mirror Elementor's defaults
   ========================================================================== */

/* --- Tablet: up to 1024px --- */
@media (max-width: 1024px) {
	.himpel-pair__inner {
		padding: var(--hpr-py-t, 60px) var(--hpr-px-t, 20px);
	}

	.himpel-pair__title {
		font-size: var(--hpr-title-t, 28px);
	}

	.himpel-pair__grid {
		gap: var(--hpr-gap-t, 16px);
		margin-top: var(--hpr-grid-top-t, 32px);
	}

	.himpel-pair__panel {
		aspect-ratio: var(--hpr-ratio-t, 0.95);
	}

	.himpel-pair__caption {
		--hpr-label-inset: 20px;
		--hpr-rule-w: 46px;
		--hpr-caption-size: 13px;
	}
}

/* --- Mobile: up to 767px --- */
@media (max-width: 767px) {
	.himpel-pair__inner {
		padding: var(--hpr-py-m, 40px) var(--hpr-px-m, 15px);
	}

	.himpel-pair__title {
		font-size: var(--hpr-title-m, 24px);
	}

	/*
	 * One above the other. Side by side, each picture is about 170px across on a
	 * phone — too small to see what the pair is meant to show, which is the whole
	 * point of putting them together.
	 */
	.himpel-pair__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hpr-gap-m, 12px);
		margin-top: var(--hpr-grid-top-m, 24px);
	}

	.himpel-pair__panel {
		aspect-ratio: var(--hpr-ratio-m, 1.15);
		border-radius: var(--hpr-radius-m, 14px);
	}

	.himpel-pair__caption {
		--hpr-label-inset: 16px;
		--hpr-rule-w: 42px;
		--hpr-label-gap: 10px;
		--hpr-caption-top: 10px;
		--hpr-caption-size: 12px;
		--hpr-caption-max: 44ch;
	}
}