/*
 * Landing page sections (patterns/landing-*.php): layout that holds with or without motion.
 * Scroll-driven motion lives in landing-motion.css, which only the front end loads.
 *
 * The round arch of Taq-e Bostan is the page's one shape: the hero's window (motifs/taq-arch.svg),
 * the category niches, and the Makers' frames. A niche's top is two corner radii far larger than it,
 * which the browser scales down to half its width: a true semicircle at any size or aspect ratio. Logical properties only; the few physical values
 * (mask positions, clip insets) are mirrored under [dir="rtl"].
 */

@property --portal {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.handcraft-section {
	padding-block: var(--wp--preset--spacing--70);
}

.handcraft-section h2 {
	margin-block: 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

/* Hero ------------------------------------------------------------------------------------------ */

.handcraft-hero {
	position: relative;
}

/*
 * The hero is Taq-e Bostan: a rock-cut iwan (images/hero-taq.svg) standing on a Persepolis stair
 * frieze of Immortals (images/hero-immortals.svg), over a star-and-cross tiling from Shiraz floors.
 * The cover fills the stage but is masked to the iwan's round arch (motifs/taq-arch.svg).
 * --portal (0 → 1) opens the arch until it covers the stage (the 3D entrance and pointer tilt
 * are in landing-motion.css). The arch's width, height, centre, and base line are measured in the
 * stage's container units; the façade is drawn around a niche of exactly that shape, 1.6 times its
 * width and 1.4 times its height, so it tracks the arch as it opens.
 */
.handcraft-hero__stage {
	--frieze: clamp(5rem, 16cqh, 8.5rem);
	--fold: 0rem;
	--ground: calc(var(--frieze) + var(--fold));
	--h0: min(calc((100cqh - var(--ground) - 1.5rem) / 1.4), 40rem);
	--w0: calc(var(--h0) * 0.6);
	--x0: 72cqw;
	--b0: calc(100cqh - var(--ground));
	position: relative;
	isolation: isolate;
	block-size: max(36rem, calc(100svh - 5rem));
	overflow: hidden;
	container-type: size;
}

[dir="rtl"] .handcraft-hero__stage {
	--x0: 28cqw;
}

.handcraft-hero__stage::before,
.handcraft-hero__cover {
	--w: calc(var(--w0) + (300cqw - var(--w0)) * var(--portal));
	--h: calc(var(--h0) + (300cqh - var(--h0)) * var(--portal));
	--x: calc(var(--x0) + (50cqw - var(--x0)) * var(--portal));
	--b: calc(var(--b0) + (100cqh - var(--b0)) * var(--portal));
	position: absolute;
	inset: 0;
}

/* The carved façade around the arch; it fades as the arch opens. */
.handcraft-hero__stage::before {
	content: "";
	z-index: 1;
	background: url(../images/hero-taq.svg) no-repeat;
	background-size: calc(var(--w) * 1.6) calc(var(--h) * 1.4);
	background-position: calc(var(--x) - var(--w) * 0.8) calc(var(--b) - var(--h) * 1.4);
	opacity: calc(1 - 3 * var(--portal));
}

/*
 * The hoopoe, the shop's namesake, perches on the façade by the merlon nearest the words and looks
 * toward them: on the first merlon facing left in English, on the last facing right in Persian.
 * Its size and place are fractions of the façade art (960 × 1400, merlon tops at y 108), taken at
 * the arch's resting size. ::before is the perched bird; ::after is the same bird in flight, which
 * takes over when the visitor scrolls and it flies off (landing-motion.css). --flight is the
 * direction it flies: toward the words.
 */
.handcraft-hero .handcraft-hero__hoopoe {
	--flight: 1;
	position: absolute;
	inset: 0;
	z-index: 5;
	margin: 0;
	pointer-events: none;
}

[dir="rtl"] .handcraft-hero .handcraft-hero__hoopoe {
	--flight: -1;
}

.handcraft-hero__hoopoe::before,
.handcraft-hero__hoopoe::after {
	content: "";
	position: absolute;
	top: calc(var(--b0) - var(--h0) * 1.4336);
	left: calc(var(--x0) - var(--w0) * 0.7127);
	inline-size: calc(var(--w0) * 0.2566);
	block-size: calc(var(--h0) * 0.147);
	background: url(../images/hoopoe-facing-left.svg) center / contain no-repeat;
}

/* Spread wings need more room than a folded bird: the flying one is drawn larger, about the perch. */
.handcraft-hero__hoopoe::after {
	top: calc(var(--b0) - var(--h0) * 1.4636);
	left: calc(var(--x0) - var(--w0) * 0.7627);
	inline-size: calc(var(--w0) * 0.36);
	block-size: calc(var(--h0) * 0.2);
	background-image: url(../images/hoopoe-flying-left.svg);
	opacity: 0;
}

[dir="rtl"] .handcraft-hero__hoopoe::before,
[dir="rtl"] .handcraft-hero__hoopoe::after {
	left: calc(var(--x0) + var(--w0) * 0.456);
	background-image: url(../images/hoopoe.svg);
}

[dir="rtl"] .handcraft-hero__hoopoe::after {
	left: calc(var(--x0) + var(--w0) * 0.406);
	background-image: url(../images/hoopoe-flying.svg);
}

/* Khatam tiling, in Nasir-ol-Molk rose, across the sand ground above the frieze. */
.handcraft-hero__stage::after {
	content: "";
	position: absolute;
	inset: 0 0 var(--ground);
	z-index: 0;
	background-color: var(--wp--preset--color--rose);
	mask: url(../motifs/khatam.svg) 50% 0 / 72px 72px repeat;
	opacity: 0.16;
}

/*
 * The Immortals march toward the arch, so they turn round when it moves to the other side.
 * --fold is the part of the stage below the first screen (landing-motion.css); the stair's
 * plinth fills it, so the procession is in full view on arrival.
 */
.handcraft-hero .handcraft-hero__frieze {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	block-size: var(--ground);
	margin: 0;
	background: url(../images/hero-immortals.svg) 0 0 / auto var(--frieze) repeat-x;
	background-color: var(--wp--preset--color--sandstone);
}

[dir="rtl"] .handcraft-hero .handcraft-hero__frieze {
	scale: -1 1;
}

.handcraft-hero .handcraft-hero__cover {
	z-index: 2;
	margin: 0;
	mask-image: url(../motifs/taq-arch.svg);
	mask-repeat: no-repeat;
	mask-size: var(--w) var(--h);
	mask-position: calc(var(--x) - var(--w) / 2) calc(var(--b) - var(--h));
}

/* The pieces lie on the carpet; they are their own layer so motion can lift them off it. */
.handcraft-hero .handcraft-hero__pieces {
	z-index: 3;
}

.handcraft-hero__cover img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.handcraft-hero__copy {
	position: absolute;
	z-index: 4;
	inset-block: 0 var(--ground);
	inset-inline-start: clamp(1.25rem, 6cqw, 7rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: min(46cqw, 40rem);
}

.handcraft-hero .handcraft-hero__title {
	margin: 0;
	font-size: clamp(2.5rem, 5.6cqw, 5.5rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--shiraz);
	text-wrap: balance;
}

html:lang(fa) .handcraft-hero .handcraft-hero__title {
	font-weight: 850;
	line-height: 1.4;
	letter-spacing: 0;
}

.handcraft-hero__lede {
	margin: 0;
	max-inline-size: 32rem;
	font-size: var(--wp--preset--font-size--large);
	color: color-mix(in srgb, var(--wp--preset--color--shiraz) 85%, var(--wp--preset--color--sand));
}

.handcraft-hero__actions {
	margin-block-start: var(--wp--preset--spacing--20);
}

.handcraft-hero .is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	color: var(--wp--preset--color--shiraz);
}

.handcraft-hero .is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--rose);
	background-color: transparent;
	color: var(--wp--preset--color--rose);
}

/* Shown only once the arch has opened (landing-motion.css). */
.handcraft-hero__caption {
	display: none;
}

@media (max-width: 781px) {
	.handcraft-hero__stage,
	[dir="rtl"] .handcraft-hero__stage {
		/*
		 * Below the words, standing on the frieze, in whatever height the words leave: the words'
		 * length changes with the language and the phone, so assets/js/hero.js measures where they
		 * end (--copy-end, from the stage's top; 22rem without it). From the frieze up, the façade
		 * and the hoopoe perched on it take 1.53 of --h0, plus a 1.25rem gap under the buttons.
		 * The façade is 0.96 of --h0 wide.
		 */
		--frieze: 4.5rem;
		--h0: max(5rem, min(calc((100cqh - var(--ground) - var(--copy-end, 22rem) - 1.25rem) / 1.53), 92cqw));
		--x0: 50cqw;
		block-size: max(42rem, calc(100svh - 4.5rem));
	}

	.handcraft-hero__copy {
		inset-block: var(--wp--preset--spacing--50) auto;
		inset-inline: 1.25rem;
		justify-content: flex-start;
		inline-size: auto;
	}

	.handcraft-hero .handcraft-hero__title {
		font-size: clamp(2.1rem, 9.5cqw, 3rem);
	}

	.handcraft-hero__lede {
		font-size: var(--wp--preset--font-size--medium);
	}

	.handcraft-hero__actions {
		gap: var(--wp--preset--spacing--20);
	}

	.handcraft-hero__actions .wp-block-button__link {
		padding-inline: 1.1em;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Short phones: the words take a step down so the façade keeps room to stand below them. */
@media (max-width: 781px) and (max-height: 700px) {
	.handcraft-hero .handcraft-hero__title {
		font-size: clamp(1.75rem, 8cqw, 2.25rem);
	}

	.handcraft-hero__lede {
		font-size: var(--wp--preset--font-size--small);
	}

	.handcraft-hero__copy {
		gap: var(--wp--preset--spacing--30);
	}
}

/* Category arcade -------------------------------------------------------------------------------- */

/* Its top edge is a row of arch tops, rising over the bottom of the hero. */
.handcraft-landing > .handcraft-arcade {
	--edge: clamp(2rem, 4.5vw, 3.75rem);
	position: relative;
	z-index: 2;
	margin-block-start: calc(-1 * var(--edge));
	padding-block-start: calc(var(--edge) + var(--wp--preset--spacing--60));
	mask:
		url(../motifs/arcade.svg) 0 0 / calc(2 * var(--edge)) var(--edge) repeat-x,
		linear-gradient(#000 0 0) 0 var(--edge) / 100% 100% no-repeat;
}

.handcraft-arcade__tile {
	position: relative;
}

/* A round-arched picture inside an ochre guard. */
.wp-block-image.handcraft-arch {
	margin: 0;
	padding: 0.45rem 0.45rem 0;
	background-color: var(--wp--preset--color--ochre);
	border-start-start-radius: 100vmax;
	border-start-end-radius: 100vmax;
	transition: background-color 0.4s ease;
}

.wp-block-image.handcraft-arch img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-start-start-radius: 100vmax;
	border-start-end-radius: 100vmax;
}

.handcraft-arcade__tile h3 {
	margin-block: var(--wp--preset--spacing--30) 0;
	font-size: var(--wp--preset--font-size--large);
}

.handcraft-arcade__tile h3 a {
	color: inherit;
	text-decoration: none;
}

/* The whole niche is the link. */
.handcraft-arcade__tile h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.handcraft-arcade__tile p {
	margin-block: var(--wp--preset--spacing--10) 0;
	color: var(--wp--preset--color--umber);
}

.handcraft-arcade__tile:is(:hover, :focus-within) .handcraft-arch {
	background-color: var(--wp--preset--color--shiraz);
}

.handcraft-arcade__tile:is(:hover, :focus-within) h3 a {
	color: var(--wp--preset--color--carpet-red);
}

/* New arrivals: a shelf that scrolls sideways ---------------------------------------------------- */

.handcraft-arrivals {
	position: relative;
}

/* A girih band where the sand shelf meets the arcade. */
.handcraft-arrivals::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: var(--wp--custom--motif-band);
	background-color: var(--wp--preset--color--rose);
	mask: url(../motifs/girih.svg) repeat-x center / auto 100%;
}

.handcraft-arrivals h2 {
	margin-block-end: 0;
}

.handcraft-arrivals .handcraft-shelf .wc-block-product-template {
	--shelf-inset: max(var(--wp--style--root--padding-left, 1.5rem), calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2));
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block: 0 var(--wp--preset--spacing--30);
	padding-inline: var(--shelf-inset);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scroll-padding-inline: var(--shelf-inset);
	scrollbar-color: var(--wp--preset--color--ochre) transparent;
	scrollbar-width: thin;
}

.handcraft-arrivals .handcraft-shelf .wc-block-product-template > li {
	flex: 0 0 clamp(13rem, 22vw, 17rem);
	inline-size: auto;
	margin: 0;
	scroll-snap-align: start;
}

.handcraft-shelf .wc-block-components-product-image img {
	aspect-ratio: 1;
	object-fit: cover;
}

/* Made to order ---------------------------------------------------------------------------------- */

/* The Shiraz band carries the same khatam tiling as the hero, in rose. */
.handcraft-landing > .handcraft-mto {
	position: relative;
	isolation: isolate;
}

.handcraft-landing > .handcraft-mto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--rose);
	mask: url(../motifs/khatam.svg) 50% 0 / 72px 72px repeat;
	opacity: 0.14;
	pointer-events: none;
}

.handcraft-mto__lede {
	max-inline-size: 38rem;
	margin-block-end: 0;
	color: color-mix(in srgb, var(--wp--preset--color--parchment) 86%, transparent);
}

.handcraft-mto .handcraft-mto__steps {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--60);
	counter-reset: handcraft-step;
}

/* The cord the steps are strung on, level with the centre of each medallion. */
.handcraft-mto__steps::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 2.75rem;
	block-size: 16px;
	translate: 0 -50%;
	background-color: var(--wp--preset--color--ochre);
	mask: url(../motifs/cord.svg) 0 50% / 40px 16px repeat-x;
}

.handcraft-mto__step {
	position: relative;
	padding-block-start: 7rem;
	counter-increment: handcraft-step;
}

.handcraft-mto__step::before {
	content: "";
	position: absolute;
	inset-block-start: -0.25rem;
	inset-inline-start: 0;
	inline-size: 5.25rem;
	aspect-ratio: 120 / 136;
	background-color: var(--wp--preset--color--ochre);
	mask: url(../motifs/medallion.svg) center / contain no-repeat;
}

.handcraft-mto__step::after {
	content: counter(handcraft-step);
	position: absolute;
	inset-block-start: 1.2rem;
	inset-inline-start: 1.125rem;
	display: grid;
	place-items: center;
	inline-size: 3rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--wp--preset--color--shiraz);
	font-family: var(--wp--custom--font--heading);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--ochre);
}

html:lang(fa) .handcraft-mto__step::after {
	content: counter(handcraft-step, persian);
}

.handcraft-mto__step h3 {
	margin: 0;
}

.handcraft-mto__step p {
	margin-block: var(--wp--preset--spacing--20) 0;
}

.handcraft-mto .handcraft-mto__note {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--parchment) 30%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--parchment) 82%, transparent);
}

@media (max-width: 781px) {
	.handcraft-mto__steps::before {
		display: none;
	}
}

/* Meet the Makers -------------------------------------------------------------------------------- */

.handcraft-makers .handcraft-makers__lede {
	margin-block: calc(-1 * var(--wp--preset--spacing--30)) var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--umber);
}

.handcraft-maker .handcraft-arch {
	max-inline-size: 20rem;
}

.handcraft-maker h3 {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.handcraft-maker .handcraft-maker__craft {
	margin-block: 0;
	font-weight: 600;
	color: var(--wp--preset--color--carpet-red);
}

.handcraft-maker p:last-child {
	max-inline-size: 22rem;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Staggered like the rows of a carpet's field. */
@media (min-width: 782px) {
	.handcraft-makers__row > .handcraft-maker:nth-child(2) {
		margin-block-start: var(--wp--preset--spacing--70);
	}
}

/* Process story: a sideways strip of steps ------------------------------------------------------- */

.handcraft-process__stage {
	overflow-x: auto;
	scroll-snap-type: inline mandatory;
	scrollbar-color: var(--wp--preset--color--ochre) transparent;
}

.handcraft-process__track {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	inline-size: max-content;
	padding-inline: clamp(1.25rem, 6vw, 7rem);
	counter-reset: handcraft-process;
}

.handcraft-process__track > * {
	margin-block: 0;
}

.handcraft-process__intro {
	flex: 0 0 min(82vw, 26rem);
}

.handcraft-process__intro p {
	color: var(--wp--preset--color--shiraz);
}

.handcraft-process__step {
	flex: 0 0 min(82vw, 32rem);
	scroll-snap-align: center;
	counter-increment: handcraft-process;
}

.handcraft-process__step .wp-block-image {
	margin: 0;
}

.handcraft-process__step img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.5rem;
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--ochre) 80%, transparent);
	outline-offset: -12px;
}

.handcraft-process__step h3 {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin-block: var(--wp--preset--spacing--40) 0;
}

.handcraft-process__step h3::before {
	content: counter(handcraft-process);
	font-size: 0.8em;
	color: color-mix(in srgb, var(--wp--preset--color--shiraz) 60%, transparent);
}

html:lang(fa) .handcraft-process__step h3::before {
	content: counter(handcraft-process, persian);
}

.handcraft-process__step p {
	max-inline-size: 28rem;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Trust bar -------------------------------------------------------------------------------------- */

.handcraft-trust .handcraft-trust__frame {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.handcraft-trust__item {
	position: relative;
	padding-inline-start: 3.25rem;
}

.handcraft-trust__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.1rem;
	inset-inline-start: 0;
	inline-size: 2.25rem;
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--rose-deep);
	mask: var(--icon) center / contain no-repeat;
}

.handcraft-trust__item--seal { --icon: url(../icons/seal.svg); }
.handcraft-trust__item--card { --icon: url(../icons/card.svg); }
.handcraft-trust__item--parcel { --icon: url(../icons/parcel.svg); }
.handcraft-trust__item--return { --icon: url(../icons/return.svg); }

/* The Enamad seal itself, above the words that describe it. */
.handcraft-trust__item .handcraft-enamad-badge {
	margin-block-end: var(--wp--preset--spacing--20);
}

.handcraft-enamad__seal {
	display: block;
	width: 5.5rem;
	height: auto;
}

.handcraft-trust__item h3 {
	margin: 0;
}

.handcraft-trust__item p {
	margin-block: var(--wp--preset--spacing--10) 0;
	color: var(--wp--preset--color--umber);
}

/* Instagram -------------------------------------------------------------------------------------- */

.handcraft-landing > .handcraft-instagram {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(1.4 * var(--wp--preset--spacing--70));
}

/* A carpet medallion behind the invitation. */
.handcraft-instagram::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	inline-size: min(56rem, 150vw);
	block-size: calc(min(56rem, 150vw) * 136 / 120);
	margin: auto;
	background-color: var(--wp--preset--color--ochre);
	mask: url(../motifs/medallion.svg) center / contain no-repeat;
	opacity: 0.18;
}

.handcraft-instagram h2 {
	font-size: var(--wp--preset--font-size--display);
}