/* ==========================================================================
   Palm Estate - inner pages
   --------------------------------------------------------------------------
   Sections that belong to one inner page each. Enqueued only on the pages
   that use them (see functions.php). The page band, dividers, buttons and
   the stats band and team grid these pages reuse live in components.css and
   sections.css.

   01 About: the story
   02 About: ownership and experience
   03 FAQ
   04 Contact: the map
   ========================================================================== */


/* 01 About: the story ====================================================== */

/* Cream, following the Forest page band. The eyebrow and heading sit to the
   left of the copy from lg; stacked below that. */
.story {
	background-color: var(--pe-bg);
	color: var(--pe-text);
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-3xl);
}

.story__inner {
	display: grid;
	gap: var(--space-xl);
	padding-top: var(--space-xl);
}

@media (min-width: 1024px) {
	.story__inner {
		grid-template-columns: 2fr 3fr;
		column-gap: var(--space-3xl);
		align-items: start;
	}
}

/* A short Bronze rule leads into the eyebrow, as the team section's does. */
.story__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--pe-accent-on-light);
}

.story__eyebrow::before {
	content: "";
	width: var(--space-md);
	height: var(--hairline);
	background-color: var(--pe-accent);
}

.story__title {
	margin-top: var(--space-sm);
	font-size: var(--fs-2xl);
	line-height: var(--lh-snug);
}

.story__title em {
	color: var(--pe-accent-on-light);
	font-style: italic;
}

.story__body {
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
}


/* 02 About: ownership and experience ======================================= */

/*
 * Forest, closing the page: a centred heading, then the two houses side by
 * side with a Bronze hairline between them. One ground for both halves, so
 * the footer's single Forest arc beneath matches all the way across.
 */
.split {
	position: relative;
	background-color: var(--pe-bg-dark);
	color: var(--pe-text-on-dark);
	padding-bottom: var(--space-4xl);
}

.split__header {
	max-width: var(--measure-narrow);
	margin-inline: auto;
	padding-top: var(--space-xl);
	text-align: center;
}

.split__title {
	margin-top: var(--space-md);
	font-size: var(--fs-3xl);
	line-height: var(--lh-snug);
	text-wrap: balance;
}

.split__title em {
	font-style: italic;
}

.split__halves {
	display: grid;
	gap: var(--space-2xl);
	margin-top: var(--space-3xl);
}

.split__name {
	margin-top: var(--space-sm);
	font-size: var(--fs-2xl);
	line-height: var(--lh-snug);
}

.split__body {
	margin-top: var(--space-md);
	max-width: 40ch;
	color: color-mix(in srgb, var(--pe-cream) 80%, transparent);
	line-height: var(--lh-loose);
	text-wrap: pretty;
}

.split__cta {
	margin-top: var(--space-lg);
}

/* Side by side from md. The rule is a border on the second half only, so it
   never runs off either end; the padding keeps the copy off it. */
@media (min-width: 768px) {
	.split__halves {
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	.split__half:first-child {
		padding-right: var(--space-2xl);
	}

	.split__half + .split__half {
		padding-left: var(--space-2xl);
		border-left: var(--hairline) solid var(--pe-rule-accent);
	}
}


/* 03 FAQ =================================================================== */

/*
 * Questions grouped by service on Cream, each group an accordion. One answer
 * open at a time (faq.js); the height eases through a grid-row transition,
 * which is the one way to animate to an unknown height in CSS alone.
 */
.faq {
	background-color: var(--pe-bg);
	color: var(--pe-text);
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-section);
}

.faq > .container {
	padding-top: var(--space-lg);
}

.faq__group + .faq__group {
	margin-top: var(--space-3xl);
}

/* A short Bronze rule leads into the eyebrow, as elsewhere on Cream. */
.faq__group-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	color: var(--pe-accent-on-light);
}

.faq__group-eyebrow::before {
	content: "";
	width: var(--space-md);
	height: var(--hairline);
	background-color: var(--pe-accent);
}

.faq__group-title {
	margin-top: var(--space-sm);
	font-size: var(--fs-2xl);
	line-height: var(--lh-snug);
}

/* Still asking ------------------------------------------------------------- */

.faq__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-3xl);
	padding-top: var(--space-lg);
	border-top: var(--hairline) solid var(--pe-rule);
}

.faq__more-text {
	max-width: 36ch;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
}


/* 04 Contact: the map ====================================================== */

/* Forest, continuing the contact block above; the footer's arc follows. */
.contact-map {
	background-color: var(--pe-bg-dark);
	color: var(--pe-text-on-dark);
	padding-bottom: var(--space-section);
}

.contact-map__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-md) var(--space-xl);
	margin-bottom: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: var(--hairline) solid var(--pe-rule-on-dark);
}

.contact-map__title {
	font-size: var(--fs-2xl);
	line-height: var(--lh-snug);
}

.contact-map__address {
	color: color-mix(in srgb, var(--pe-cream) 80%, transparent);
	font-style: normal;
	line-height: var(--lh-base);
}

@media (min-width: 768px) {
	.contact-map__address {
		text-align: right;
	}
}

.contact-map__frame {
	aspect-ratio: 16 / 7;
	overflow: hidden;
	border: var(--hairline) solid var(--pe-rule-on-dark);
	background-color: var(--pe-surface-dark);
}

.contact-map__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Bronze on Forest: 7.45:1. */
.contact-map__link {
	display: inline-block;
	margin-top: var(--space-sm);
	color: var(--pe-accent);
}


/* The Palm's plan behind the contact page --------------------------------- */

/*
 * One Forest ground for the whole page - band, block and map are transparent
 * here - with the island's plan drawing across it at low strength, large and
 * partly off the right edge, like a watermark. The drawing is a mask, so it
 * is painted in Cream rather than shipped in a colour; and a second, soft
 * mask sweeps down over it on arrival so it appears from the crescent to the
 * trunk. Under prefers-reduced-motion it is simply there.
 */
.contact-page {
	/* A light technical grid on the Forest, the listings' grid in Cream:
	   a fine line every 5rem, a firmer one every four. */
	--grid-minor: color-mix(in srgb, var(--pe-cream) 1.75%, transparent);
	--grid-major: color-mix(in srgb, var(--pe-cream) 3%, transparent);

	/* The arc into the footer, cut from this ground so the grid runs into
	   the curve: the footer's lg divider keeps the space (footer.php). */
	--page-arc-h: clamp(4.5rem, 10vw, 12rem);

	position: relative;
	z-index: 1;
	overflow: clip; /* clip, not hidden: hidden would make this the sticky backdrop's scroller */
	padding-bottom: var(--page-arc-h);
	margin-bottom: calc(-1 * var(--page-arc-h));
	background-color: var(--pe-bg-dark);
	background-image:
		linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
		linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
	background-size: 20rem 20rem, 20rem 20rem, 5rem 5rem, 5rem 5rem;
	background-position: center top;
	-webkit-mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,106.7 960,106.7 1440,0 Z'/%3E%3C/svg%3E");
	mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,106.7 960,106.7 1440,0 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% calc(100% - var(--page-arc-h) + 1px), 100% var(--page-arc-h);
	mask-size: 100% calc(100% - var(--page-arc-h) + 1px), 100% var(--page-arc-h);
	-webkit-mask-position: top, bottom;
	mask-position: top, bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.contact-page > .page-band,
.contact-page > .contact,
.contact-page > .contact-map {
	position: relative;
	z-index: 1;
	background-color: transparent;
}

/* A viewport-high backdrop that stays put while the page scrolls past it.
   The backdrop is a layer over the whole of the page's ground, taking no
   space; the plan is sticky inside it, so it holds at the top of the screen
   and is pushed up with the layer's end, never reaching the footer. Its own
   proportion for width, shifted half its width off the right edge so the
   left half of the island is always whole on screen. */
.contact-page__backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.contact-page__plan {
	position: sticky;
	top: 0;
	height: 100svh;
	width: calc(100svh * 1207 / 1253);
	margin-left: auto;
	transform: translateX(50%);
	background-color: var(--pe-cream);
	opacity: 0.022;
	pointer-events: none;
	-webkit-mask-image:
		url("../images/palm-plan.png"),
		linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
	mask-image:
		url("../images/palm-plan.png"),
		linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
	-webkit-mask-size: contain, 100% 130%;
	mask-size: contain, 100% 130%;
	-webkit-mask-position: center, top;
	mask-position: center, top;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	animation: contact-reveal 2.6s var(--ease) both;
	animation-delay: 800ms;
}

/* The sweep: the soft gradient grows from nothing to past the foot. */
@keyframes contact-reveal {
	from {
		-webkit-mask-size: contain, 100% 0%;
		mask-size: contain, 100% 0%;
	}
	to {
		-webkit-mask-size: contain, 100% 130%;
		mask-size: contain, 100% 130%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-page__plan {
		animation: none;
	}
}

/* The grid on About's Cream ----------------------------------------------- */

/*
 * The technical grid the listings carry, on About's two Cream stretches, the
 * story and the team, running into every curve: the story tucks under the
 * band's arc and draws its own arc down into the stats band (whose Cream arc
 * in is then painted Forest, keeping only its space); the team tucks under
 * the stats band's arc out; the split's arc up lies over the team's foot.
 */
.about {
	--grid-minor: color-mix(in srgb, var(--pe-ink) 3.5%, transparent);
	--grid-major: color-mix(in srgb, var(--pe-ink) 6.5%, transparent);
	--band-arc-h: clamp(2.5rem, 5vw, 5rem);           /* the page band's, components.css */
	--stats-arc-h: clamp(1.25rem, 1.75vw, 2.75rem);   /* the stats band's, sections.css */
}

.about .page-band {
	position: relative;
	z-index: 2;
}

.about .story,
.about .team {
	position: relative;
	z-index: 1;
	background-image:
		linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
		linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
	background-size: 20rem 20rem, 20rem 20rem, 5rem 5rem, 5rem 5rem;
	background-position: center top;
}

.about .story {
	overflow: clip;
	margin-top: calc(-1 * var(--band-arc-h));
	padding-top: calc(var(--space-2xl) + var(--band-arc-h));
	padding-bottom: calc(var(--space-3xl) + var(--stats-arc-h));
	margin-bottom: calc(-1 * var(--stats-arc-h));
	-webkit-mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,106.7 960,106.7 1440,0 Z'/%3E%3C/svg%3E");
	mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C480,106.7 960,106.7 1440,0 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% calc(100% - var(--stats-arc-h) + 1px), 100% var(--stats-arc-h);
	mask-size: 100% calc(100% - var(--stats-arc-h) + 1px), 100% var(--stats-arc-h);
	-webkit-mask-position: top, bottom;
	mask-position: top, bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* The story draws the Cream arc into the stats band; the band's own keeps
   the space, painted in the band's colour. */
.about .stats > .stats__arc {
	color: var(--pe-forest);
}

.about .stats__outro {
	position: relative;
	z-index: 2;
	background-color: transparent;
}

.about .team {
	margin-top: calc(-1 * var(--stats-arc-h));
	padding-top: calc(clamp(var(--space-xl), 6vw, var(--space-3xl)) + var(--stats-arc-h));
}

.about .split {
	z-index: 2;
}