/*
 * Products (HANDOFF §4 P.1–P.6, §5.8; Figma 29:3894 / 35:2022). Reworked on 5 October 2026, when DEKEN ended: the family
 * index, the four families and the packshot cards are gone (CLAUDE.md, Decisions). The hero is in hero.css (.hero--compact).
 */

/* P.2–P.3 The offer: the H2 and its text beside a 4:3 photo (a placeholder slot until the client sends the photo).
   Below 1024 stacked, the text first, 32 apart; from 1024 the text in columns 1–5 and the photo in 7–12, and the other
   way round in the second section (.offer--reverse: the photo in 1–6, the text in 8–12). */
.offer {
	row-gap: var(--space-32);
	align-items: center;
}

.offer > * {
	grid-column: 1 / -1;
}

.offer__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

.offer__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.offer__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.offer__photo > .slot {
	width: 100%;
	height: 100%;
}

@media (min-width: 1024px) {
	.offer__text {
		grid-column: 1 / span 5;
		grid-row: 1;
	}

	.offer__photo {
		grid-column: 7 / -1;
		grid-row: 1;
	}

	.offer--reverse .offer__text {
		grid-column: 8 / -1;
	}

	.offer--reverse .offer__photo {
		grid-column: 1 / span 6;
	}
}

/* Under the packaged cement's text (from the former CEM II/B-LL 42,5R page): "Packaging" and "Standards and certificates" (H3 over text or
   badges), 32 apart, 24 after the text. */
.offer__parts {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	gap: var(--space-32);
	margin-top: var(--space-8);
	container: offer-parts / inline-size;
}

.offer__part {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* Standards and certificates: three white badges, 16 apart (compact when stacked; at least 128 tall in a row): the title (Button style) and its line (Small, Slate), 8
   apart, 24 in. In a row where the column gives each one room for "CERTIFICATES", stacked otherwise. */
.badges {
	display: grid;
	gap: var(--space-16);
	margin: 0;
}

@container offer-parts (width >= 34rem) {
	.badges {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.badge {
		min-height: var(--space-128);
		padding: var(--space-24);
	}
}

.badge {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-16) var(--space-24);
	background: var(--color-white);
}

.badge__line {
	color: var(--color-slate);
}

/* P.6 Closing band: Ink, the text (Lead, white) over "Contact us", centred, 32 apart; Figma 96 above and below on
   desktop, 72 on phones. The text spans 7 columns (Figma 760), so it wraps as in Figma. Phones: the button full
   width (Figma). */
.closing {
	padding-block: min(var(--space-section), var(--space-96));
	background: var(--color-ink);
}

.closing__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-32);
	text-align: center;
}

.closing__button {
	align-self: stretch;
}

@media (min-width: 768px) {
	.closing__text {
		max-width: calc((100% - (var(--grid-columns-tablet) - 1) * var(--grid-gutter)) / var(--grid-columns-tablet) * 7 + 6 * var(--grid-gutter));
	}

	.closing__button {
		align-self: center;
	}
}

@media (min-width: 1024px) {
	.closing__text {
		max-width: calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) * 7 + 6 * var(--grid-gutter));
	}
}

/* P.2 Bulk cement (15 October 2026): the H2 and its text, then the four ways of delivering it as cards, two across from
   768 (stacked below), the grid's gutter apart, 48 under the text. Each card is white like the terminal cards: the 4:3
   picture (a silent loop or a still), then the title (H3), 24 in. A loop's poster is the picture; the video fades in over
   it once it plays (clips.js) and its pause button, the hero's, sits at the bottom right. */
.deliveries__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	max-width: 45rem;
}

.deliveries {
	display: grid;
	gap: var(--grid-gutter);
	margin: var(--space-48) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.deliveries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.clip {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--color-white);
}

.delivery__body {
	padding: var(--space-24);
}

.clip__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.clip__poster,
.clip__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.clip__video {
	opacity: 0;
	transition: opacity var(--motion-reveal-duration) var(--motion-ease);
}

.clip.is-playing .clip__video {
	opacity: 1;
}


.clip__control {
	position: absolute;
	right: var(--space-16);
	bottom: var(--space-16);
	width: var(--video-control-size);
	height: var(--video-control-size);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.clip__control[hidden] {
	display: none;
}

.clip__icon {
	width: 100%;
	height: 100%;
}

.clip__icon--play,
.clip.is-paused .clip__icon--pause {
	display: none;
}

.clip.is-paused .clip__icon--play {
	display: block;
}