/* Production (O nama page): dark section, statement left, schematic of the plant right
   (dimension line + three lines of boards), three facts under both columns. Mobile-first. */

.iw-prod {
	background: var(--iw-color-espresso);
	color: var(--iw-color-on-ink);
}

.iw-prod__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--iw-space-12);
	max-width: var(--iw-container);
	margin: 0 auto;
	padding: var(--iw-space-16) var(--iw-gutter);
}

/* Header */
.iw-prod__header {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var(--iw-space-4);
}

.iw-prod__kicker {
	display: flex;
	align-items: center;
	gap: var(--iw-space-4);
	margin: 0;
	color: var(--iw-color-taupe-light);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.iw-prod__kicker::before {
	content: "";
	flex: none;
	width: 40px;
	height: 2px;
	background: var(--iw-color-primary);
}

.iw-prod__title {
	margin: 0;
	color: var(--iw-color-on-ink);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	line-height: var(--iw-leading-tight);
	letter-spacing: -0.02em;
}

.iw-prod__title-accent {
	display: block;
	color: var(--iw-color-taupe);
}

.iw-prod__intro {
	max-width: 32rem;
	margin: 0;
	color: rgb(255 255 255 / 80%);
	font-size: var(--iw-text-lg);
}

.iw-prod__text {
	max-width: 32rem;
	margin: 0;
	color: rgb(255 255 255 / 65%);
}

/* Plan: dimension line over three lines of boards */
.iw-prod__plan {
	display: flex;
	flex-direction: column;
	gap: var(--iw-space-6);
	padding: var(--iw-space-6);
	border: 1px solid rgb(255 255 255 / 15%);
}

.iw-prod__dim {
	position: relative;
	flex: none;
	height: 1px;
	margin: var(--iw-space-3) 0;
	background: rgb(255 255 255 / 40%);
	transform-origin: center;
}

.iw-prod__dim::before,
.iw-prod__dim::after {
	content: "";
	position: absolute;
	top: -6px;
	width: 1px;
	height: 13px;
	background: rgb(255 255 255 / 40%);
}

.iw-prod__dim::before { left: 0; }
.iw-prod__dim::after { right: 0; }

.iw-prod__dim-label {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0 var(--iw-space-4);
	background: var(--iw-color-espresso);
	color: var(--iw-color-taupe-light);
	font-size: var(--iw-text-sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	font-variant-numeric: lining-nums;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.iw-prod__lines {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--iw-space-4);
}

.iw-prod__line {
	display: flex;
	flex: 1;
	gap: 4px;
	min-height: 40px;
}

.iw-prod__board {
	flex: 1;
	background: rgb(255 255 255 / 22%);
}

/* The last board of every line is the finished product */
.iw-prod__board:last-child {
	background: var(--iw-color-primary);
}

/* Photo band */
.iw-prod__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--iw-color-brown);
}

.iw-prod__media picture,
.iw-prod__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.iw-prod__media img {
	object-fit: cover;
}

/* Facts */
.iw-prod__facts {
	display: grid;
	gap: var(--iw-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.iw-prod__fact {
	position: relative;
	padding-top: var(--iw-space-6);
}

/* Rule as a pseudo element, so it can be drawn in from the left */
.iw-prod__fact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgb(255 255 255 / 20%);
	transform-origin: left center;
}

.iw-prod__fact-label {
	margin: 0 0 var(--iw-space-2);
	color: var(--iw-color-on-ink);
	font-size: var(--iw-text-h4);
}

.iw-prod__fact-text {
	max-width: 24rem;
	margin: 0;
	color: rgb(255 255 255 / 70%);
}

/* Reveal (script.js adds is-armed to the section, then is-in to the section, the photo band and the facts
   as each comes into view): the dimension line draws in and boards fill each line from left to right, one
   line after another; the photo opens; the fact rules draw in. */
@media (prefers-reduced-motion: no-preference) {
	.iw-prod.is-armed .iw-prod__dim,
	.iw-prod.is-armed .iw-prod__fact::before {
		transform: scaleX(0);
		transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
	}

	.iw-prod.is-armed .iw-prod__dim-label,
	.iw-prod.is-armed .iw-prod__fact > * {
		opacity: 0;
		transition: opacity 0.7s ease 0.5s;
	}

	.iw-prod.is-armed .iw-prod__board {
		opacity: 0;
		transform: scaleY(0.2);
		transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.iw-prod.is-in .iw-prod__dim,
	.iw-prod.is-armed .iw-prod__facts.is-in .iw-prod__fact::before {
		transform: none;
	}

	.iw-prod.is-in .iw-prod__dim-label,
	.iw-prod.is-armed .iw-prod__facts.is-in .iw-prod__fact > * {
		opacity: 1;
	}

	.iw-prod.is-in .iw-prod__board {
		opacity: 1;
		transform: none;
		transition-delay: calc(0.5s + var(--iw-i) * 60ms);
	}

	.iw-prod.is-in .iw-prod__line:nth-child(2) .iw-prod__board { transition-delay: calc(0.8s + var(--iw-i) * 60ms); }
	.iw-prod.is-in .iw-prod__line:nth-child(3) .iw-prod__board { transition-delay: calc(1.1s + var(--iw-i) * 60ms); }
	.iw-prod.is-in .iw-prod__line:nth-child(4) .iw-prod__board { transition-delay: calc(1.4s + var(--iw-i) * 60ms); }
	.iw-prod.is-in .iw-prod__line:nth-child(5) .iw-prod__board { transition-delay: calc(1.7s + var(--iw-i) * 60ms); }
	.iw-prod.is-in .iw-prod__line:nth-child(6) .iw-prod__board { transition-delay: calc(2s + var(--iw-i) * 60ms); }

	/* Photo: a cover in the section colour pulls away, the photo settles from a slight zoom. The band is
	   observed on its own (script.js), so it opens when it is actually on screen. */
	.iw-prod.is-armed .iw-prod__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--iw-color-espresso);
		transform-origin: right center;
		transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
	}

	.iw-prod.is-armed .iw-prod__media img {
		transform: scale(1.1);
		transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.iw-prod.is-armed .iw-prod__photo.is-in .iw-prod__media::after {
		transform: scaleX(0);
	}

	.iw-prod.is-armed .iw-prod__photo.is-in .iw-prod__media img {
		transform: none;
	}

	.iw-prod__facts.is-in .iw-prod__fact:nth-child(1)::before,
	.iw-prod__facts.is-in .iw-prod__fact:nth-child(1) > * { transition-delay: 0.1s; }
	.iw-prod__facts.is-in .iw-prod__fact:nth-child(2)::before,
	.iw-prod__facts.is-in .iw-prod__fact:nth-child(2) > * { transition-delay: 0.3s; }
	.iw-prod__facts.is-in .iw-prod__fact:nth-child(3)::before,
	.iw-prod__facts.is-in .iw-prod__fact:nth-child(3) > * { transition-delay: 0.5s; }
}

@media (min-width: 768px) {
	.iw-prod__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--iw-space-8);
	}

	.iw-prod__plan {
		padding: var(--iw-space-8);
	}
}

@media (min-width: 1024px) {
	.iw-prod__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--iw-space-8);
		row-gap: var(--iw-space-16);
		padding: var(--iw-space-24) var(--iw-gutter);
	}

	/* Header and plan share one row and end on the same line: the lines stretch to the height of the text. */
	.iw-prod__header {
		grid-column: 1 / span 6;
		grid-row: 1;
	}

	.iw-prod__plan {
		grid-column: 8 / span 5;
		grid-row: 1;
	}

	.iw-prod__photo {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.iw-prod__media {
		aspect-ratio: 21 / 9;
	}

	.iw-prod__facts {
		grid-column: 1 / -1;
		grid-row: 3;
		gap: var(--iw-space-12);
	}
}