/* Tribute Plaques page: the opening, sample plaques, how it works and the
   order form, on one backdrop running the full width of the window.
   Everything sits under .mtp-page so theme heading and list styles, which
   carry more weight than a single class, cannot reach it. The fonts are in
   fonts.css; a font or background chosen in the settings arrives as these
   same custom properties on the .mtp-page element. */

/* 100vw includes the scrollbar; clear-header.js supplies its width as
   --mtp-scrollbar. Until it has, the backdrop overhangs by that much.
   Clipping on <body> does not stop the window scrolling sideways; clipping
   on <html> does, and unlike "hidden" it leaves the pinned header working. */
html:has(.mtp-page) { overflow-x: clip; }

.mtp-page {
	--mtp-ink: #232323;
	--mtp-text: #555;
	--mtp-gold: #c9a84c;
	--mtp-gold-text: #7a5f17;
	--mtp-paper: #f6f5f2;
	--mtp-serif: "MTP Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--mtp-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
	/* Drawn height of the backdrop photo (clouds: 1024 × 571), so its fade
	   always finishes before the photo does and never leaves an edge. */
	--mtp-cloud-w: max(100vw, 1180px);
	--mtp-cloud-h: calc(var(--mtp-cloud-w) * var(--mtp-cloud-ratio, .5576));

	position: relative;
	width: calc(100vw - var(--mtp-scrollbar, 0px));
	margin-left: calc(50% - 50vw + var(--mtp-scrollbar, 0px) / 2);
	background:
		linear-gradient(to bottom, rgba(246, 245, 242, 0) 0, rgba(246, 245, 242, 0) calc(var(--mtp-cloud-h) * .4), var(--mtp-paper) calc(var(--mtp-cloud-h) * .96)),
		var(--mtp-backdrop, url("../images/showcase/clouds.webp")) center top / var(--mtp-cloud-w) auto no-repeat,
		var(--mtp-paper);
	color: var(--mtp-text);
}
.mtp-page--no-backdrop { background: var(--mtp-paper); }

/* A text font chosen in the settings; otherwise the theme's stays. */
.mtp-page--text-font,
.mtp-page--text-font p,
.mtp-page--text-font li,
.mtp-page--text-font input,
.mtp-page--text-font select,
.mtp-page--text-font textarea { font-family: var(--mtp-text-font); }

/* The order form's labels, price and button follow the label font. */
.mtp-page .mtp-form { --mtp-head: var(--mtp-sans); }
.mtp-page .mtp-price,
.mtp-page .woocommerce.mtp-page-form form.cart button.single_add_to_cart_button.button.alt { font-family: var(--mtp-sans); }
.mtp-page *,
.mtp-page *::before,
.mtp-page *::after { box-sizing: border-box; }

.mtp-page .mtp-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ── Opening ───────────────────────────────────────────────────────────── */

.mtp-page .mtp-hero { padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 6vw, 88px); }
.mtp-page .mtp-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.mtp-page .mtp-eyebrow {
	margin: 0 0 22px;
	font: 500 12px/1.4 var(--mtp-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mtp-gold-text);
}

.mtp-page .mtp-hero__title {
	margin: 0 0 24px;
	padding: 0;
	font-family: var(--mtp-serif);
	font-size: clamp(36px, 4.4vw, 56px);
	font-weight: 500;
	font-style: normal;
	line-height: 1.08;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--mtp-ink);
}
.mtp-page .mtp-hero__title--pair {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.mtp-page .mtp-hero__title-line {
	display: block;
	font-size: clamp(34px, 4.2vw, 54px);
	line-height: 1.08;
	letter-spacing: -.02em;
}
.mtp-page .mtp-hero__amp {
	font-style: italic;
	font-weight: 500;
	color: var(--mtp-gold-text);
	padding: 0 .06em 0 0;
}

.mtp-page .mtp-hero__lede {
	max-width: 30em;
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--mtp-text);
}

.mtp-page .mtp-hero__points {
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}
.mtp-page .mtp-hero__points li {
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 24px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mtp-ink);
}
.mtp-page .mtp-hero__points li::before {
	content: "";
	position: absolute;
	top: .55em;
	left: 2px;
	width: 7px;
	height: 7px;
	border: 1px solid var(--mtp-gold);
	transform: rotate(45deg);
}

.mtp-page .mtp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	margin: 0;
}
.mtp-page a.mtp-button,
.mtp-page a.mtp-button:visited {
	display: inline-block;
	padding: 19px 36px;
	background: var(--mtp-ink);
	color: #fff;
	font: 500 12px/1.2 var(--mtp-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	transition: background-color .25s, color .25s;
}
.mtp-page a.mtp-button:hover,
.mtp-page a.mtp-button:focus-visible {
	background: var(--mtp-gold);
	color: var(--mtp-ink);
}
.mtp-page a.mtp-button:focus-visible {
	outline: 2px solid var(--mtp-ink);
	outline-offset: 3px;
}
.mtp-page a.mtp-button--ghost,
.mtp-page a.mtp-button--ghost:visited {
	background: transparent;
	color: var(--mtp-ink);
	box-shadow: inset 0 0 0 1px var(--mtp-ink);
}
.mtp-page a.mtp-button--ghost:hover,
.mtp-page a.mtp-button--ghost:focus-visible {
	background: var(--mtp-ink);
	color: #fff;
	box-shadow: none;
}
.mtp-page .mtp-hero__price {
	font-family: var(--mtp-serif);
	font-size: 24px;
	font-style: italic;
	color: var(--mtp-ink);
}
.mtp-page .mtp-hero__price .woocommerce-Price-amount { font-style: normal; }
.mtp-page .mtp-hero__price--split {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	font-size: 20px;
}
/* "plus tax & shipping": true, but it must not shout next to the price. */
.mtp-page .mtp-hero__price-note {
	display: block;
	margin-top: 2px;
	font: 400 13px/1.3 var(--mtp-sans);
	font-style: normal;
	letter-spacing: .02em;
	color: var(--mtp-text);
}

/* ── Sample plaques, laid like prints on a table ───────────────────────── */

.mtp-page .mtp-collage {
	position: relative;
	margin: 0;
	padding: 0;
	aspect-ratio: 10 / 9;
}
.mtp-page .mtp-collage__item {
	position: absolute;
	margin: 0;
	padding: 10px;
	background: #fff;
	box-shadow: 0 28px 60px -18px rgba(25, 25, 25, .34), 0 2px 8px rgba(25, 25, 25, .06);
	transform: rotate(var(--mtp-tilt, 0deg));
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
}
.mtp-page .mtp-collage__item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	aspect-ratio: inherit;
}
.mtp-page .mtp-collage__item--1 { top: 0; right: 0; width: 74%; aspect-ratio: 4 / 3; z-index: 1; }
.mtp-page .mtp-collage__item--2 { left: 0; bottom: 14%; width: 50%; aspect-ratio: 4 / 3; z-index: 2; }
.mtp-page .mtp-collage__item--3 { right: 5%; bottom: 0; width: 30%; aspect-ratio: 1 / 1; z-index: 3; }
/* The other two prints cover the featured one's lower edge. */
.mtp-page .mtp-collage--3 .mtp-collage__item--1 .mtp-collage__caption { display: none; }

/* Four to six prints fill the frame as a grid, not scattered gaps. */
.mtp-page .mtp-collage--4,
.mtp-page .mtp-collage--5,
.mtp-page .mtp-collage--6 {
	aspect-ratio: 3 / 2;
	display: grid;
	gap: 12px;
}
.mtp-page .mtp-collage--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.mtp-page .mtp-collage--5 {
	grid-template-columns: 1.15fr 1fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.mtp-page .mtp-collage--5 .mtp-collage__item--1 { grid-row: 1 / 3; }
.mtp-page .mtp-collage--6 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.mtp-page .mtp-collage--4 .mtp-collage__item,
.mtp-page .mtp-collage--5 .mtp-collage__item,
.mtp-page .mtp-collage--6 .mtp-collage__item {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	bottom: auto;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	aspect-ratio: auto;
	padding: 8px;
	--mtp-tilt: 0deg;
	transform: none;
}
.mtp-page .mtp-collage--4 .mtp-collage__item img,
.mtp-page .mtp-collage--5 .mtp-collage__item img,
.mtp-page .mtp-collage--6 .mtp-collage__item img {
	aspect-ratio: auto;
	height: 100%;
}
.mtp-page .mtp-collage--4 .mtp-collage__caption,
.mtp-page .mtp-collage--5 .mtp-collage__caption,
.mtp-page .mtp-collage--6 .mtp-collage__caption { display: none; }

/* Positions saved from WooCommerce → Tribute Plaques → Opening photos. */
.mtp-page .mtp-collage--placed {
	aspect-ratio: 3 / 2;
	display: block;
	position: relative;
}
.mtp-page .mtp-collage--placed .mtp-collage__item {
	position: absolute;
	top: auto;
	right: auto;
	left: auto;
	bottom: auto;
	min-width: 0;
	min-height: 0;
	aspect-ratio: auto;
	padding: 8px;
	transform: rotate(var(--mtp-tilt, 0deg));
}
.mtp-page .mtp-collage--placed .mtp-collage__item img {
	aspect-ratio: auto;
	height: 100%;
}

/* Mouse only: a tap on a phone would leave the print lifted. */
@media (hover: hover) {
	.mtp-page .mtp-collage__item:hover {
		transform: translateY(-6px) rotate(var(--mtp-tilt, 0deg));
		box-shadow: 0 36px 70px -18px rgba(25, 25, 25, .38), 0 2px 8px rgba(25, 25, 25, .06);
	}
}

.mtp-page .mtp-collage__caption {
	display: block;
	padding: 9px 2px 0;
	font: 500 10px/1.3 var(--mtp-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	/* Dark enough to read: 10px grey on paper has to clear 4.5:1. */
	color: #6b6b6b;
}

.mtp-page .mtp-collage__note {
	position: absolute;
	top: 4px;
	left: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--mtp-serif);
	font-size: 19px;
	font-style: italic;
	color: var(--mtp-text);
}
.mtp-page .mtp-collage__note::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--mtp-gold);
}

/* A shorter list still looks composed. */
.mtp-page .mtp-collage--1 { aspect-ratio: auto; }
.mtp-page .mtp-collage--1 .mtp-collage__item--1 { position: relative; width: 100%; }
.mtp-page .mtp-collage--1 .mtp-collage__note { position: static; margin-top: 14px; }
.mtp-page .mtp-collage--2 { aspect-ratio: 10 / 8; }
.mtp-page .mtp-collage--2 .mtp-collage__item--2 { bottom: 0; }

/* ── Urn and plaque columns ────────────────────────────────────────────── */

.mtp-page .mtp-offers { padding: 0 0 clamp(40px, 5vw, 72px); }
.mtp-page .mtp-offers__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 32px);
}
.mtp-page .mtp-offer {
	margin: 0;
	padding: 36px 32px 32px;
	background: rgba(255, 255, 255, .82);
	border-top: 1px solid rgba(201, 168, 76, .7);
}
.mtp-page .mtp-offer__photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}
.mtp-page .mtp-offer__photos--1 { grid-template-columns: minmax(0, 1fr); }
.mtp-page .mtp-offer__photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mtp-page .mtp-offer__photos li {
	margin: 0;
	padding: 4px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(35, 35, 35, .08);
}
.mtp-page .mtp-offer__photos img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: #eceae4;
}
.mtp-page .mtp-offer__photos--1 img { aspect-ratio: 4 / 3; }
.mtp-page .mtp-offer__title {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--mtp-serif);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--mtp-ink);
}
.mtp-page .mtp-offer__text {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--mtp-text);
}
.mtp-page .mtp-offer__price {
	margin: 0 0 22px;
	font-family: var(--mtp-serif);
	font-size: 22px;
	font-style: italic;
	color: var(--mtp-ink);
}
.mtp-page .mtp-offer__price .woocommerce-Price-amount { font-style: normal; }
.mtp-page .mtp-offer__cta { margin: 0; }

/* ── How it works ──────────────────────────────────────────────────────── */

.mtp-page .mtp-steps { padding: clamp(32px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }

.mtp-page .mtp-section-title {
	margin: 0 0 44px;
	padding: 0;
	font-family: var(--mtp-serif);
	font-size: clamp(34px, 3.8vw, 50px);
	font-weight: 500;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: var(--mtp-ink);
}
.mtp-page .mtp-section-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin: 20px auto 0;
	background: var(--mtp-gold);
}

.mtp-page .mtp-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mtp-step;
}
.mtp-page .mtp-steps__list li {
	margin: 0;
	padding: 36px 32px 34px;
	background: rgba(255, 255, 255, .82);
	border-top: 1px solid rgba(201, 168, 76, .7);
	counter-increment: mtp-step;
}
.mtp-page .mtp-steps__list li::before {
	content: counter(mtp-step, decimal-leading-zero);
	display: block;
	margin: 0 0 14px;
	font-family: var(--mtp-serif);
	font-size: 36px;
	font-style: italic;
	line-height: 1;
	color: var(--mtp-gold-text);
}
.mtp-page .mtp-steps__list h3 {
	margin: 0 0 10px;
	padding: 0;
	font: 500 13px/1.4 var(--mtp-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mtp-ink);
}
.mtp-page .mtp-steps__list p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mtp-text);
}

/* ── The order form ────────────────────────────────────────────────────── */

.mtp-page .mtp-order { padding: clamp(24px, 4vw, 48px) 0 clamp(72px, 9vw, 120px); }
.mtp-page .mtp-order-head {
	max-width: 820px;
	margin: 0 auto 40px;
	text-align: center;
	/* Clear of the pinned header when "Design your plaque" jumps here. */
	scroll-margin-top: 120px;
}
.mtp-page .mtp-order-head .mtp-section-title { margin-bottom: 18px; }
.mtp-page .mtp-order-head p {
	margin: 0;
	font-family: var(--mtp-serif);
	font-size: 21px;
	font-style: italic;
	line-height: 1.5;
	color: var(--mtp-text);
}
/* ── Smaller screens ───────────────────────────────────────────────────── */

@media (max-width: 960px) {
	.mtp-page .mtp-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.mtp-page .mtp-hero__text { max-width: 640px; }
	.mtp-page .mtp-collage { max-width: 680px; width: 100%; margin: 8px auto 0; }
	.mtp-page .mtp-offers__grid,
	.mtp-page .mtp-steps__list { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; gap: 18px; }
}

@media (max-width: 600px) {
	.mtp-page .mtp-wrap { padding: 0 20px; }
	.mtp-page .mtp-hero__lede { font-size: 17px; }
	.mtp-page .mtp-collage__item { padding: 6px; }
	.mtp-page .mtp-collage__caption { display: none; }
	/* No room beside the top print, so the label goes underneath. */
	.mtp-page .mtp-collage { margin-bottom: 40px; }
	.mtp-page .mtp-collage__note { top: calc(100% + 14px); font-size: 17px; }
	.mtp-page .mtp-steps__list li { padding: 28px 24px 26px; }
	.mtp-page a.mtp-button { width: 100%; text-align: center; }
	.mtp-page .mtp-order-head p { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.mtp-page .mtp-collage__item,
	.mtp-page a.mtp-button { transition: none; }
	.mtp-page .mtp-collage__item:hover { transform: rotate(var(--mtp-tilt, 0deg)); }
}

@media (forced-colors: active) {
	.mtp-page .mtp-hero__points li::before,
	.mtp-page .mtp-section-title::after { background: CanvasText; border-color: CanvasText; }
}