/* Pack layout recipes. Tokens come from body.trdsp-pack-* + CSS variables. */

body.trdsp-has-pack {
	--trdsp-bg: var(--trdsp-pack-bg, #f0f0f1);
	--trdsp-text: var(--trdsp-pack-text, #1d2327);
	--trdsp-accent: var(--trdsp-pack-accent, #1f6b4a);
	--trdsp-muted: var(--trdsp-pack-muted, #50575e);
	--trdsp-card: #fff;
	--trdsp-radius: 10px;
	--trdsp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--trdsp-display: var(--trdsp-font);
	background: var(--trdsp-bg);
	color: var(--trdsp-text);
	font-family: var(--trdsp-font);
}

body.trdsp-has-pack .trdsp-theme-shell,
body.trdsp-has-pack .trdsp-theme-main {
	background: transparent;
}

body.trdsp-has-pack .wp-block-button__link {
	background: var(--trdsp-accent);
	color: #fff;
	border-radius: var(--trdsp-radius);
}

body.trdsp-has-pack .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--trdsp-accent);
	border: 2px solid var(--trdsp-accent);
}

body.trdsp-has-pack .trdsp-theme-hero h1,
body.trdsp-has-pack .trdsp-theme-cta h2 {
	font-family: var(--trdsp-display);
}

body.trdsp-font-grotesk { --trdsp-font: "Avenir Next", "Segoe UI", sans-serif; --trdsp-display: "Avenir Next", "Segoe UI", sans-serif; }
body.trdsp-font-humanist { --trdsp-font: "Trebuchet MS", "Lucida Grande", sans-serif; --trdsp-display: "Trebuchet MS", sans-serif; }
body.trdsp-font-condensed { --trdsp-font: "Arial Narrow", "Helvetica Neue", sans-serif; --trdsp-display: "Arial Narrow", sans-serif; letter-spacing: 0.01em; }
body.trdsp-font-serif-display { --trdsp-font: Georgia, "Times New Roman", serif; --trdsp-display: Georgia, serif; }
body.trdsp-font-slab { --trdsp-font: "Rockwell", "Courier New", serif; --trdsp-display: "Rockwell", serif; }
body.trdsp-font-news { --trdsp-font: "Palatino Linotype", Palatino, serif; --trdsp-display: "Palatino Linotype", serif; }
body.trdsp-font-mono-accent { --trdsp-font: "Segoe UI", sans-serif; --trdsp-display: "SFMono-Regular", Menlo, Consolas, monospace; }
body.trdsp-font-rounded { --trdsp-font: "Trebuchet MS", "Gill Sans", sans-serif; --trdsp-display: "Trebuchet MS", sans-serif; }

body.trdsp-radius-sharp { --trdsp-radius: 0; }
body.trdsp-radius-soft { --trdsp-radius: 12px; }
body.trdsp-radius-pill { --trdsp-radius: 999px; }

body.trdsp-header-solid .trdsp-theme-header {
	background: #1d2327;
	color: #f0f0f1;
	position: sticky;
	top: 0;
	z-index: 20;
}

body.trdsp-header-transparent .trdsp-theme-header {
	background: transparent;
	color: var(--trdsp-text);
	position: absolute;
	left: 0;
	right: 0;
	z-index: 20;
}

body.trdsp-header-transparent .trdsp-theme-header a {
	color: inherit;
}

body.trdsp-header-ruled .trdsp-theme-header {
	background: var(--trdsp-bg);
	color: var(--trdsp-text);
	border-bottom: 1px solid var(--trdsp-muted);
}

body.trdsp-header-ruled .trdsp-theme-header a {
	color: inherit;
}

body.trdsp-pattern-grain .trdsp-theme-hero::before,
body.trdsp-pattern-grid .trdsp-theme-hero::before,
body.trdsp-pattern-wash .trdsp-theme-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

body.trdsp-pattern-grain .trdsp-theme-hero {
	position: relative;
}

body.trdsp-pattern-grain .trdsp-theme-hero::before {
	opacity: 0.12;
	background-image: radial-gradient(var(--trdsp-muted) 0.6px, transparent 0.7px);
	background-size: 3px 3px;
}

body.trdsp-pattern-grid .trdsp-theme-hero {
	position: relative;
}

body.trdsp-pattern-grid .trdsp-theme-hero::before {
	opacity: 0.18;
	background-image:
		linear-gradient(var(--trdsp-muted) 1px, transparent 1px),
		linear-gradient(90deg, var(--trdsp-muted) 1px, transparent 1px);
	background-size: 48px 48px;
}

body.trdsp-pattern-wash .trdsp-theme-hero {
	position: relative;
}

body.trdsp-pattern-wash .trdsp-theme-hero::before {
	background: linear-gradient(135deg, color-mix(in srgb, var(--trdsp-accent) 28%, transparent), transparent 60%);
}

body.trdsp-has-pack .trdsp-theme-cards .wp-block-column,
body.trdsp-has-pack .trdsp-theme-reviews,
body.trdsp-has-pack .trdsp-theme-cta,
body.trdsp-has-pack .trdsp-theme-service-list {
	border-radius: var(--trdsp-radius);
}

body.trdsp-has-pack .trdsp-theme-reviews,
body.trdsp-has-pack .trdsp-theme-service-list,
body.trdsp-has-pack .trdsp-theme-cta {
	margin: 2.5rem auto;
	max-width: 920px;
	padding: 1.5rem 1.25rem;
}

body.trdsp-has-pack .trdsp-theme-reviews {
	background: color-mix(in srgb, var(--trdsp-accent) 10%, var(--trdsp-bg));
	font-size: 1.25rem;
	font-family: var(--trdsp-display);
}

body.trdsp-has-pack .trdsp-theme-service-list ul {
	margin: 0;
	padding-left: 1.2rem;
}

body.trdsp-has-pack .trdsp-theme-cta {
	background: var(--trdsp-accent);
	color: #fff;
	text-align: center;
}

body.trdsp-has-pack .trdsp-theme-cta .wp-block-button__link {
	background: #fff;
	color: var(--trdsp-text);
}

body.trdsp-has-pack .trdsp-theme-footer {
	margin-top: 0;
}

/* 1 hero-split */
body.trdsp-pack-hero-split .trdsp-theme-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2rem;
	align-items: center;
	min-height: 62vh;
	padding: 6rem 8vw 3rem;
}

body.trdsp-pack-hero-split .trdsp-theme-hero::after {
	content: "";
	min-height: 280px;
	background:
		linear-gradient(160deg, var(--trdsp-accent), color-mix(in srgb, var(--trdsp-text) 55%, var(--trdsp-accent))),
		repeating-linear-gradient(-20deg, transparent, transparent 18px, rgba(255,255,255,.08) 18px, rgba(255,255,255,.08) 19px);
	border-radius: var(--trdsp-radius);
}

body.trdsp-pack-hero-split .trdsp-theme-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: 0 8vw 2rem;
}

/* 2 hero-fullbleed */
body.trdsp-pack-hero-fullbleed .trdsp-theme-hero {
	min-height: 78vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 8rem 8vw 3.5rem;
	background:
		linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
		linear-gradient(120deg, var(--trdsp-accent), var(--trdsp-text));
	color: #fff;
}

body.trdsp-pack-hero-fullbleed .trdsp-theme-hero h1 {
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	max-width: 14ch;
}

body.trdsp-pack-hero-fullbleed.trdsp-header-transparent .trdsp-theme-header,
body.trdsp-pack-hero-fullbleed.trdsp-header-transparent .trdsp-theme-header a {
	color: #fff;
}

body.trdsp-pack-hero-fullbleed .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: #fff;
}

/* 3 hero-editorial */
body.trdsp-pack-hero-editorial .trdsp-theme-hero {
	padding: 7rem 10vw 2rem;
	border-bottom: 8px solid var(--trdsp-accent);
}

body.trdsp-pack-hero-editorial .trdsp-theme-hero h1 {
	font-size: clamp(3rem, 8vw, 5.5rem);
	line-height: 0.95;
	max-width: 16ch;
}

body.trdsp-pack-hero-editorial .trdsp-theme-cards .wp-block-column {
	border: 0;
	border-top: 3px solid var(--trdsp-accent);
	background: transparent;
	border-radius: 0;
}

/* 4 studio-minimal */
body.trdsp-pack-studio-minimal .trdsp-theme-hero {
	padding: 8rem 12vw 3rem;
	text-align: center;
}

body.trdsp-pack-studio-minimal .trdsp-theme-hero h1 {
	font-weight: 500;
	letter-spacing: -0.03em;
}

body.trdsp-pack-studio-minimal .trdsp-theme-cards .wp-block-column {
	background: transparent;
	border: 0;
	text-align: center;
}

body.trdsp-pack-studio-minimal .trdsp-theme-trust {
	letter-spacing: 0.28em;
}

/* 5 magazine */
body.trdsp-pack-magazine .trdsp-theme-hero {
	padding: 5rem 6vw 1rem;
	column-count: 2;
	column-gap: 3rem;
}

body.trdsp-pack-magazine .trdsp-theme-hero h1 {
	column-span: all;
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	border-bottom: 1px solid var(--trdsp-text);
	padding-bottom: 0.6rem;
}

body.trdsp-pack-magazine .trdsp-theme-cards {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 0;
	border-top: 1px solid var(--trdsp-text);
}

body.trdsp-pack-magazine .trdsp-theme-cards .wp-block-column {
	border: 0;
	border-right: 1px solid var(--trdsp-text);
	border-radius: 0;
	background: transparent;
}

/* 6 industrial-band */
body.trdsp-pack-industrial-band .trdsp-theme-header {
	background: var(--trdsp-accent);
	color: #fff;
}

body.trdsp-pack-industrial-band .trdsp-theme-header a {
	color: #fff;
}

body.trdsp-pack-industrial-band .trdsp-theme-hero {
	padding: 3rem 0 0;
}

body.trdsp-pack-industrial-band .trdsp-theme-hero h1 {
	background: var(--trdsp-text);
	color: var(--trdsp-bg);
	padding: 1.5rem 8vw;
	margin: 0;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	text-transform: uppercase;
}

body.trdsp-pack-industrial-band .trdsp-theme-hero > p,
body.trdsp-pack-industrial-band .trdsp-theme-hero .wp-block-buttons {
	padding: 1.25rem 8vw;
}

body.trdsp-pack-industrial-band .trdsp-theme-cards .wp-block-column {
	border-radius: 0;
	border: 4px solid var(--trdsp-text);
}

/* 7 stacked-rail */
body.trdsp-pack-stacked-rail .trdsp-theme-main {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2rem;
	padding: 5rem 6vw;
}

body.trdsp-pack-stacked-rail .trdsp-theme-hero {
	grid-column: 1;
	padding: 0;
	position: sticky;
	top: 5rem;
}

body.trdsp-pack-stacked-rail .trdsp-theme-cards,
body.trdsp-pack-stacked-rail .trdsp-theme-trust,
body.trdsp-pack-stacked-rail .trdsp-theme-reviews,
body.trdsp-pack-stacked-rail .trdsp-theme-service-list,
body.trdsp-pack-stacked-rail .trdsp-theme-cta {
	grid-column: 2;
}

/* 8 service-ledger */
body.trdsp-pack-service-ledger .trdsp-theme-hero {
	padding: 5rem 8vw 1rem;
}

body.trdsp-pack-service-ledger .trdsp-theme-cards {
	display: block;
	padding: 0 8vw;
}

body.trdsp-pack-service-ledger .trdsp-theme-cards .wp-block-column {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border: 0;
	border-bottom: 1px solid var(--trdsp-muted);
	background: transparent;
	border-radius: 0;
	padding: 1rem 0;
}

/* 9 photo-band */
body.trdsp-pack-photo-band .trdsp-theme-hero {
	padding: 6rem 8vw 2rem;
}

body.trdsp-pack-photo-band .trdsp-theme-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

body.trdsp-pack-photo-band .trdsp-theme-cards .wp-block-column {
	min-height: 260px;
	border: 0;
	border-radius: 0;
	color: #fff;
	background:
		linear-gradient(180deg, transparent, rgba(0,0,0,.65)),
		linear-gradient(45deg, var(--trdsp-accent), var(--trdsp-text));
}

body.trdsp-pack-photo-band .trdsp-theme-cards .wp-block-column p {
	color: rgba(255,255,255,.85);
}

/* 10 dusk-overlay */
body.trdsp-pack-dusk-overlay {
	background: #111;
	color: #f4f1ea;
	--trdsp-card: #1b1b1b;
}

body.trdsp-pack-dusk-overlay .trdsp-theme-hero {
	min-height: 70vh;
	padding: 8rem 8vw 3rem;
	background:
		radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--trdsp-accent) 40%, transparent), transparent 40%),
		#111;
}

body.trdsp-pack-dusk-overlay .trdsp-theme-cards .wp-block-column {
	background: #1b1b1b;
	border-color: #2a2a2a;
	color: #f4f1ea;
}

body.trdsp-pack-dusk-overlay .trdsp-theme-header,
body.trdsp-pack-dusk-overlay .trdsp-theme-footer {
	background: #0b0b0b;
}

/* 11 cream-gallery */
body.trdsp-pack-cream-gallery .trdsp-theme-hero {
	padding: 6rem 8vw 2rem;
	background: color-mix(in srgb, var(--trdsp-bg) 80%, #fff6e8);
}

body.trdsp-pack-cream-gallery .trdsp-theme-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	padding: 0 8vw;
}

body.trdsp-pack-cream-gallery .trdsp-theme-cards .wp-block-column {
	box-shadow: 0 18px 40px rgba(40, 30, 16, 0.08);
	border: 0;
	padding-top: 2rem;
}

body.trdsp-pack-cream-gallery .trdsp-theme-cards .wp-block-column h3 {
	color: var(--trdsp-accent);
}

/* 12 ink-panel */
body.trdsp-pack-ink-panel .trdsp-theme-hero {
	margin: 4rem 6vw 0;
	padding: 3rem;
	background: var(--trdsp-text);
	color: var(--trdsp-bg);
	border-radius: var(--trdsp-radius);
}

body.trdsp-pack-ink-panel .trdsp-theme-hero .wp-block-button__link {
	background: var(--trdsp-accent);
}

body.trdsp-pack-ink-panel .trdsp-theme-hero .is-style-outline .wp-block-button__link {
	color: var(--trdsp-bg);
	border-color: var(--trdsp-bg);
}

body.trdsp-pack-ink-panel .trdsp-theme-cards {
	padding: 2rem 6vw;
}

/* Real trade photography (files in assets/photos/{trade}/). */
body.trdsp-has-photos .trdsp-theme-photo-band {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	min-height: 48vh;
	margin: 0;
}

body.trdsp-has-photos .trdsp-theme-photo {
	min-height: 280px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

body.trdsp-has-photos .trdsp-theme-photo--hero {
	background-image: var(--trdsp-pack-hero);
}

body.trdsp-has-photos .trdsp-theme-photo--1 {
	background-image: var(--trdsp-pack-card-1);
}

body.trdsp-has-photos .trdsp-theme-photo--2 {
	background-image: var(--trdsp-pack-card-2);
}

body.trdsp-has-photos .trdsp-theme-photo--3 {
	background-image: var(--trdsp-pack-card-3);
}

body.trdsp-has-photos.trdsp-pack-hero-split .trdsp-theme-hero::after {
	background: var(--trdsp-pack-hero) center / cover no-repeat;
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

body.trdsp-has-photos.trdsp-pack-hero-fullbleed .trdsp-theme-hero {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.62)),
		var(--trdsp-pack-hero) center / cover no-repeat;
}

body.trdsp-has-photos.trdsp-pack-dusk-overlay .trdsp-theme-hero {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(17, 17, 17, 0.78)),
		var(--trdsp-pack-hero) center / cover no-repeat;
}

body.trdsp-has-photos.trdsp-pack-ink-panel .trdsp-theme-hero {
	background:
		linear-gradient(160deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.28)),
		var(--trdsp-pack-hero) center / cover no-repeat;
	color: #fff;
}

body.trdsp-has-photos.trdsp-pack-cream-gallery .trdsp-theme-hero,
body.trdsp-has-photos.trdsp-pack-studio-minimal .trdsp-theme-hero,
body.trdsp-has-photos.trdsp-pack-hero-editorial .trdsp-theme-hero,
body.trdsp-has-photos.trdsp-pack-magazine .trdsp-theme-hero,
body.trdsp-has-photos.trdsp-pack-service-ledger .trdsp-theme-hero,
body.trdsp-has-photos.trdsp-pack-stacked-rail .trdsp-theme-hero,
body.trdsp-has-photos.trdsp-pack-industrial-band .trdsp-theme-hero {
	background-image: none;
}

body.trdsp-has-photos.trdsp-pack-photo-band .trdsp-theme-cards .wp-block-column:nth-child(1) {
	background:
		linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68)),
		var(--trdsp-pack-card-1) center / cover no-repeat;
}

body.trdsp-has-photos.trdsp-pack-photo-band .trdsp-theme-cards .wp-block-column:nth-child(2) {
	background:
		linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68)),
		var(--trdsp-pack-card-2) center / cover no-repeat;
}

body.trdsp-has-photos.trdsp-pack-photo-band .trdsp-theme-cards .wp-block-column:nth-child(3) {
	background:
		linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68)),
		var(--trdsp-pack-card-3) center / cover no-repeat;
}

body.trdsp-has-photos.trdsp-pack-cream-gallery .trdsp-theme-cards .wp-block-column::before {
	content: "";
	display: block;
	height: 170px;
	margin: -1.25rem -1.25rem 1rem;
	background: var(--trdsp-pack-card-1) center / cover no-repeat;
}

body.trdsp-has-photos.trdsp-pack-cream-gallery .trdsp-theme-cards .wp-block-column:nth-child(2)::before {
	background-image: var(--trdsp-pack-card-2);
}

body.trdsp-has-photos.trdsp-pack-cream-gallery .trdsp-theme-cards .wp-block-column:nth-child(3)::before {
	background-image: var(--trdsp-pack-card-3);
}

@media (max-width: 800px) {
	body.trdsp-pack-hero-split .trdsp-theme-hero,
	body.trdsp-pack-magazine .trdsp-theme-hero,
	body.trdsp-pack-stacked-rail .trdsp-theme-main,
	body.trdsp-pack-hero-split .trdsp-theme-cards,
	body.trdsp-pack-photo-band .trdsp-theme-cards,
	body.trdsp-pack-cream-gallery .trdsp-theme-cards,
	body.trdsp-has-photos .trdsp-theme-photo-band {
		display: block;
		grid-template-columns: 1fr;
	}
}