/* ==========================================================================
   HIMPEL Caption cards — a row of tall pictures with their words on them
   --------------------------------------------------------------------------
   The image pair's panel, four across: a veil over the photograph, a heading at
   the top of it and a sentence at the foot, and both of them — veil included —
   clearing away when the reader reaches for the card.

   Everything is scoped under .himpel-cards. Nothing targets the theme,
   WooCommerce, or any global element.
   ========================================================================== */

.himpel-cards {
	--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(--hcd-bg, var(--himpel-white));
	box-sizing: border-box;
}

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

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

/* ==========================================================================
   Top container — pill and heading on the left, copy on the right
   ========================================================================== */

.himpel-cards__head {
	display: grid;
	grid-template-columns: var(--hcd-head-cols, minmax(0, 1fr) minmax(0, 1fr));
	gap: var(--hcd-gap, 24px);
	align-items: start;
}

/*
 * With no copy on the right there is nothing for a second column to hold, and
 * an empty half would only push the heading into a narrower measure than the
 * design asks for. The heading keeps its own cap instead.
 */
.himpel-cards--no-desc .himpel-cards__head {
	grid-template-columns: minmax(0, 1fr);
}

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

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

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

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

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

.himpel-cards__title {
	margin: 0;
	padding: 0;

	/* Inherits the Liquid theme's heading typography; only the scale is ours. */
	color: var(--hcd-title-color, var(--himpel-dark));
	font-size: var(--hcd-title-d, 34px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
	max-width: var(--hcd-title-mw, 20ch);
	overflow-wrap: break-word;
	text-wrap: balance;
}

.himpel-cards__desc {
	margin: 0;
	color: var(--hcd-desc-color, rgba(18, 18, 18, 0.72));
	font-size: var(--hcd-text-size, 15px);
	line-height: 1.75;
	max-width: var(--hcd-desc-max, 52ch);
}

.himpel-cards__desc p {
	margin: 0;
}

.himpel-cards__desc p + p {
	margin-top: 12px;
}

/* ==========================================================================
   Bottom container — the cards
   ========================================================================== */

.himpel-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--hcd-cols, 4), minmax(0, 1fr));
	gap: var(--hcd-gap, 24px);
	margin-top: var(--hcd-grid-top, 48px);
}

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

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

	/* A shape, not a height, so a card holds its proportions at any width. */
	aspect-ratio: var(--hcd-ratio, 0.62);
}

/*
 * The section class twice over, so this outweighs WooCommerce's
 * ".woocommerce-page img { height: auto }" on a product page — under that rule
 * a picture that has not loaded yet computes to no height at all.
 */
.himpel-cards .himpel-cards__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

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

/* <picture> is an inline box around the image; it needs the card's height. */
.himpel-cards__card picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The veil. An even one rather than a gradient from the foot: there is writing
 * at both ends of this card, so darkening only the bottom would leave the
 * heading sitting on whatever the photograph happened to be doing up there.
 */
.himpel-cards__card::after {
	content: "";
	position: absolute;
	inset: 0;

	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--hcd-scrim, 0.46)) 0%,
		rgba(0, 0, 0, calc(var(--hcd-scrim, 0.46) * 0.72)) 100%
	);

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

/*
 * The words: heading at the top, sentence at the foot, and the photograph
 * between them. space-between is what puts the picture's own subject in the
 * clear middle of the card rather than behind a block of text.
 */
.himpel-cards .himpel-cards__caption {
	position: absolute;
	z-index: 2;
	inset: var(--hcd-caption-inset, 22px);

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;

	color: var(--himpel-white);

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

/*
 * 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, no margin.
 *
 * The section class is repeated because 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.
 */
.himpel-cards .himpel-cards__label {
	margin: 0;
	padding: 0;
	color: inherit;
	line-height: 1.25;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.himpel-cards .himpel-cards__text {
	margin: 0;
	color: inherit;
	font-size: var(--hcd-caption-size, 14px);
	line-height: 1.6;
	opacity: 0.92;
}

.himpel-cards .himpel-cards__text p {
	margin: 0;
}

.himpel-cards .himpel-cards__text p + p {
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Clearing a card
   --------------------------------------------------------------------------
   The words and the veil go, and the picture settles back to its own size. The
   heading says what the card is; once the reader has it, it is only in front of
   the thing it names.

   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-cards__card.is-selected .himpel-cards__caption {
	opacity: 0;
	transform: translateY(8px);
}

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

.himpel-cards__card.is-selected .himpel-cards__img {
	transform: scale(1);
}

/* A card that answers a tap should look like one. */
.himpel-cards.is-tappable .himpel-cards__card {
	cursor: pointer;
}

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

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

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

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

.himpel-cards.is-revealing .himpel-cards__eyebrow,
.himpel-cards.is-revealing .himpel-cards__title,
.himpel-cards.is-revealing .himpel-cards__desc,
.himpel-cards.is-revealing .himpel-cards__card {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-cards.is-revealing .himpel-cards__eyebrow,
	.himpel-cards.is-revealing .himpel-cards__title,
	.himpel-cards.is-revealing .himpel-cards__desc,
	.himpel-cards.is-revealing .himpel-cards__card {
		opacity: 1;
	}

	.himpel-cards .himpel-cards__img {
		transform: none;
		transition: none;
	}

	.himpel-cards .himpel-cards__caption,
	.himpel-cards__card::after {
		transition: opacity 0.2s ease;
	}
}

/* Only ever seen by an editor. */
.himpel-cards__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-cards__inner {
		padding: var(--hcd-py-t, 60px) var(--hcd-px-t, 20px);
	}

	/*
	 * The top container stacks: two columns of text at this width leaves the
	 * heading about four words across.
	 */
	.himpel-cards__head {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hcd-gap-t, 16px);
	}

	.himpel-cards__title {
		font-size: var(--hcd-title-t, 28px);
		max-width: 24ch;
	}

	.himpel-cards__desc {
		max-width: 100%;
	}

	/*
	 * Two across, not four. Four cards on a tablet would be about 170px wide
	 * each — narrower than the heading written on them.
	 *
	 * The card turns square here, which is also where <picture> swaps to the
	 * squarer crop: the two breakpoints are the same 1024px on purpose.
	 */
	.himpel-cards__grid {
		grid-template-columns: repeat(var(--hcd-cols-t, 2), minmax(0, 1fr));
		gap: var(--hcd-gap-t, 16px);
		margin-top: var(--hcd-grid-top-t, 32px);
	}

	.himpel-cards__card {
		aspect-ratio: var(--hcd-ratio-t, 1);
	}
}

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

	.himpel-cards__eyebrow {
		margin-bottom: var(--hcd-eyebrow-gap-m, 14px);
		font-size: var(--hcd-pill-size-m, 13px);
	}

	.himpel-cards__title {
		font-size: var(--hcd-title-m, 24px);
		max-width: 100%;
	}

	/* One across: two cards on a phone leaves each about 165px wide. */
	.himpel-cards__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hcd-gap-m, 14px);
		margin-top: var(--hcd-grid-top-m, 26px);
	}

	.himpel-cards__card {
		aspect-ratio: var(--hcd-ratio-m, 1);
		border-radius: var(--hcd-radius-m, 14px);
	}

	.himpel-cards .himpel-cards__caption {
		inset: var(--hcd-caption-inset-m, 18px);
	}
}