/* Catalog teaser (home page): white section in the spirit of the printed catalog. Text and links on the left,
   the catalog mockup over a taupe block that runs to the right screen edge. Mobile-first. */

.iw-ctlg {
	--iw-ctlg-drift: 40px; /* mockup parallax travel, see script.js */
	overflow: hidden;
	background: var(--iw-color-bg);
}

.iw-ctlg__inner {
	display: grid;
	gap: var(--iw-space-12);
	padding: var(--iw-space-16) 0;
}

/* Text */
.iw-ctlg__text {
	display: grid;
	justify-items: start;
	gap: var(--iw-space-4);
	padding: 0 var(--iw-gutter);
}

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

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

.iw-ctlg__title {
	margin: 0;
	color: var(--iw-color-brown);
	font-size: var(--iw-text-h2);
	line-height: var(--iw-leading-tight);
}

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

.iw-ctlg__intro {
	max-width: 34rem;
	margin: 0;
	color: var(--iw-color-ink-soft);
	font-size: var(--iw-text-lg);
}

/* Actions */
.iw-ctlg__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--iw-space-4) var(--iw-space-8);
	margin-top: var(--iw-space-4);
}

/* Scoped so Elementor's ".elementor a" rules do not win */
.iw-ctlg .iw-ctlg__button {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 var(--iw-space-8);
	border-radius: var(--iw-radius);
	background: var(--iw-color-primary);
	color: var(--iw-color-on-primary);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.iw-ctlg .iw-ctlg__button:hover {
	background: var(--iw-color-primary-dark);
}

.iw-ctlg .iw-ctlg__download {
	padding: var(--iw-space-1) 0;
	color: var(--iw-color-brown);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--iw-color-taupe);
	text-decoration-thickness: 1px;
	text-underline-offset: 8px;
	transition: text-decoration-color 0.15s ease;
}

.iw-ctlg .iw-ctlg__download:hover {
	text-decoration-color: var(--iw-color-primary);
}

.iw-ctlg__meta {
	margin: 0;
	color: var(--iw-color-ink-muted);
	font-size: var(--iw-text-sm);
	font-variant-numeric: lining-nums;
}

/* Mockup over the taupe block */
.iw-ctlg__visual {
	position: relative;
	padding: var(--iw-space-8) var(--iw-gutter) var(--iw-space-8) 0;
}

.iw-ctlg__visual::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 22%;
	background: var(--iw-color-taupe);
	opacity: 0.45;
}

.iw-ctlg__mockup {
	position: relative;
	display: block;
	transform: translate3d(0, var(--iw-shift, 0), 0);
	transition: filter 0.4s ease;
}

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

.iw-ctlg__mockup img {
	filter: drop-shadow(0 24px 40px rgb(28 22 18 / 22%));
}

@media (hover: hover) {
	.iw-ctlg__mockup:hover {
		filter: brightness(1.03);
	}
}

/* Reveal (script.js adds is-armed to the section and is-in to the text and the visual as they come into view).
   The block slides in from the right, the mockup rises after it, the text and contents fade in one by one. */
@media (prefers-reduced-motion: no-preference) {
	.iw-ctlg.is-armed .iw-ctlg__text > * {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.iw-ctlg.is-armed .iw-ctlg__visual::before {
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
	}

	.iw-ctlg.is-armed .iw-ctlg__mockup picture,
	.iw-ctlg.is-armed .iw-ctlg__mockup > img {
		opacity: 0;
		transform: translateY(48px) rotate(-1.5deg);
		transition: opacity 0.9s ease 0.45s, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s;
	}

	.iw-ctlg.is-armed .iw-ctlg__text.is-in > * {
		opacity: 1;
		transform: none;
	}

	.iw-ctlg.is-armed .iw-ctlg__visual.is-in::before {
		transform: none;
	}

	.iw-ctlg.is-armed .iw-ctlg__visual.is-in .iw-ctlg__mockup picture,
	.iw-ctlg.is-armed .iw-ctlg__visual.is-in .iw-ctlg__mockup > img {
		opacity: 1;
		transform: none;
	}

	.iw-ctlg__text.is-in > :nth-child(2) { transition-delay: 0.08s; }
	.iw-ctlg__text.is-in > :nth-child(3) { transition-delay: 0.16s; }
	.iw-ctlg__text.is-in > :nth-child(4) { transition-delay: 0.3s; }
	.iw-ctlg__text.is-in > :nth-child(5) { transition-delay: 0.4s; }
}

/* Text left, the mockup right; the block reaches the right screen edge, the mockup crosses its left edge */
@media (min-width: 1024px) {
	.iw-ctlg {
		--iw-ctlg-edge: max(var(--iw-gutter), calc((100vw - var(--iw-container)) / 2 + var(--iw-gutter)));
	}

	.iw-ctlg__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: 0;
		padding: var(--iw-space-24) 0;
	}

	.iw-ctlg__text {
		padding: 0 var(--iw-space-12) 0 var(--iw-ctlg-edge);
	}

	.iw-ctlg__visual {
		align-self: stretch;
		display: flex;
		align-items: center;
		padding: var(--iw-space-16) var(--iw-ctlg-edge) var(--iw-space-16) 0;
	}

	.iw-ctlg__visual::before {
		top: calc(var(--iw-space-24) * -1);
		bottom: calc(var(--iw-space-24) * -1);
		left: 30%;
	}

	.iw-ctlg__mockup {
		width: 100%;
	}
}