/*
 * Save a Playa case study (/saveaplaya), page-scoped styles.
 *
 * Rebuilt 2026-09-22 from the Claude Design "saveaplaya-case-study" artefact,
 * then recoloured in the site's own palette: cosmic black ink on warm white,
 * an off-white band for what we built, the blue-to-black gradient of the
 * project heroes behind the quote, and hot pink as the single accent on the
 * eyebrows and the platform links. Deep blue carries the links. The mock is
 * set in Save a Playa's commercial brand faces (Sofia Pro, Perfectly
 * Nineties, Portuguesa); the page is typeset instead in the site's own faces,
 * Dunbar Tall for headings and labels, IvyPresto for the figures and the pull
 * quote, Coco Sharp for body copy.
 *
 * The page keeps the site's global header and footer parts, so the "proud to
 * have worked with" strip in the mock is not repeated here: the footer part
 * already carries it.
 */

/* ---------- Tokens ---------- */
.saveaplaya-page {
	/* Site palette (theme.json): cosmic black, off white, warm white, white,
	   hot pink, light pink, deep blue, neon sky. */
	--sap-paper:   #F4F0ED;                 /* warm white, the page ground */
	--sap-white:   #FFFFFF;
	--sap-ink:     #090B0D;                 /* cosmic black */
	--sap-deep:    #090B0D;
	--sap-deepest: #000000;
	--sap-band:    #F4F4F4;                 /* off white, the what-we-built band */
	--sap-accent:  #E388B8;                 /* hot pink, eyebrows and platform links */
	--sap-accent-soft: #F9BAEA;             /* light pink */
	--sap-link:    #024DB9;                 /* deep blue */
	--sap-sky:     #92B9F2;                 /* neon sky */
	--sap-line:    rgba(9, 11, 13, .15);
	--sap-line-strong: #090B0D;
	--sap-muted:   #4A4E53;
	--sap-subtle:  #7C8085;

	--sap-font-head: var(--wp--preset--font-family--dunbar-tall, "Dunbar Tall", sans-serif);
	--sap-font-body: var(--wp--preset--font-family--coco-sharp, "Coco Sharp", sans-serif);
	--sap-font-display: var(--wp--preset--font-family--ivypresto, "IvyPresto Display", Georgia, serif);

	background: var(--sap-paper);
	color: var(--sap-ink);
	font-family: var(--sap-font-body);
}

/* Core's flow gap would add margins between the sections and inside every
   group; each section owns its spacing here. */
.saveaplaya-page :where(.is-layout-flow, .is-layout-constrained) > *,
.saveaplaya-page.is-layout-flow > * { margin-block: 0; }

/* ---------- Layout primitives ---------- */
.sap-section { padding: 88px 0; box-sizing: border-box; }
.sap-section--tight { padding-top: 80px; }
.sap-wrap { width: 80%; max-width: none; margin: 0 auto; }
.sap-wrap--split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 64px; align-items: start; }

/* ---------- Type ---------- */
body .saveaplaya-page h1.sap-hero__title {
	font-family: var(--sap-font-head);
	font-weight: 700;
	/* Dunbar Tall sets wider than the mock's Sofia Pro, so the display size
	   tops out lower to keep the headline on three lines at desktop. */
	font-size: clamp(34px, 3.4vw, 44px);
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--sap-ink);
	margin: 0;
	text-wrap: pretty;
}
body .saveaplaya-page h2.wp-block-heading,
body .saveaplaya-page h2 {
	font-family: var(--sap-font-head);
	font-weight: 700;
	font-size: 31px;
	line-height: 1.2;
	color: var(--sap-ink);
	margin: 0;
	text-wrap: pretty;
}
body .saveaplaya-page h3.wp-block-heading,
body .saveaplaya-page h3 {
	font-family: var(--sap-font-head);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	color: var(--sap-ink);
	margin: 0;
}
.saveaplaya-page p { font-size: 16px; line-height: 1.45; color: var(--sap-ink); margin: 0; }
.saveaplaya-page a { color: var(--sap-link); }

/* Caps labels: the eyebrow above each section, in the accent green. */
.saveaplaya-page p.sap-eyebrow,
.sap-eyebrow {
	font-family: var(--sap-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--sap-accent);
	margin: 0;
	line-height: 1.3;
}

.saveaplaya-page p.sap-micro {
	font-family: var(--sap-font-body);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sap-subtle);
	margin: 0;
	line-height: 1.45;
}

/* ---------- Buttons ---------- */
.saveaplaya-page .wp-block-button__link {
	font-family: var(--sap-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 12px 25px;
	line-height: 24px;
	border-radius: 10px;
	border: 2px solid var(--sap-ink);
	background: var(--sap-ink);
	color: var(--sap-white);
	text-decoration: none;
}
.saveaplaya-page .wp-block-button__link:hover { background: var(--sap-link); border-color: var(--sap-link); color: var(--sap-white); }
.saveaplaya-page .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sap-ink);
	border-color: var(--sap-ink);
}
.saveaplaya-page .is-style-outline .wp-block-button__link:hover { border-color: var(--sap-link); background: transparent; color: var(--sap-link); }
.saveaplaya-page .wp-block-buttons { gap: 14px; }

/* ---------- Hero ---------- */
.sap-hero { padding-top: 88px; padding-bottom: 0; }
.sap-hero .sap-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.sap-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; min-width: 0; }
.sap-hero__copy .wp-block-buttons { gap: 12px; }
.sap-hero__copy .wp-block-button__link { padding: 12px 18px; letter-spacing: 1.5px; }
.saveaplaya-page p.sap-hero__lead { font-size: 20px; line-height: 1.45; color: var(--sap-ink); max-width: 52ch; }
.saveaplaya-page p.sap-hero__stack { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sap-muted); }
.sap-hero__shot { min-width: 0; background: var(--sap-white); border: 2px solid var(--sap-line-strong); border-radius: 10px; padding: 16px; box-shadow: none; }
.sap-hero__shot img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--sap-white); }

/* ---------- Numbers ---------- */
.sap-numbers { padding-bottom: 0; }
.sap-numbers__label { border-top: 1px solid var(--sap-line); padding-top: 20px; display: flex; justify-content: center; }
.sap-numbers__grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;
	background: var(--sap-line-strong);
	border: 2px solid var(--sap-line-strong);
	border-radius: 10px;
	overflow: hidden;
}
.sap-stat { background: var(--sap-white); padding: 34px 28px; display: flex; flex-direction: column; gap: 12px; }
.saveaplaya-page p.sap-stat__value {
	font-family: var(--sap-font-display);
	font-size: clamp(34px, 4.2vw, 49px);
	line-height: 1.05;
	color: var(--sap-ink);
}
.saveaplaya-page p.sap-stat__label { font-size: 14px; line-height: 1.45; color: var(--sap-muted); }
.sap-numbers__note { margin-top: 18px; }

/* ---------- The challenge ---------- */
.sap-challenge__copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; max-width: 720px; }

/* ---------- What we built ---------- */
.sap-built {
	margin-top: 88px;
	background: var(--sap-band);
	border-top: 2px solid var(--sap-line-strong);
	border-bottom: 2px solid var(--sap-line-strong);
}
.sap-head--center { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.sap-built__grid {
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 20px;
}
.sap-card {
	background: var(--sap-white);
	border: 2px solid var(--sap-line-strong);
	border-radius: 10px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: none;
}
.saveaplaya-page p.sap-card__kind {
	font-family: var(--sap-font-body);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sap-subtle);
}
.saveaplaya-page p.sap-card__body { font-size: 14px; line-height: 1.45; color: var(--sap-muted); }
.sap-card--deep { background: var(--sap-deep); border-color: var(--sap-deep); box-shadow: none; }
.saveaplaya-page .sap-card--deep p.sap-card__body { color: #D9DBDE; }
body .saveaplaya-page .sap-card--deep h3 { color: var(--sap-paper); }
.saveaplaya-page .sap-card--deep p.sap-card__kind { color: var(--sap-accent); }
.sap-card__more {
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--sap-font-head);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}
.saveaplaya-page a.sap-card__more { color: var(--sap-accent); }
.saveaplaya-page a.sap-card__more:hover { color: var(--sap-accent-soft); }

/* ---------- Quote ---------- */
.sap-quote { background: linear-gradient(180deg, #024DB9 0%, #090B0D 100%); padding: 96px 0; }
.sap-quote .sap-wrap { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; max-width: 1000px; }
.sap-quote__seal { width: 76px; height: 76px; display: block; opacity: .9; }
.sap-quote .wp-block-image { margin: 0; }
.saveaplaya-page blockquote.sap-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--sap-font-display);
	font-size: clamp(25px, 3.4vw, 39px);
	line-height: 1.2;
	color: var(--sap-paper);
	text-wrap: pretty;
}
.saveaplaya-page p.sap-quote__name {
	font-family: var(--sap-font-head);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sap-paper);
}
.saveaplaya-page p.sap-quote__role {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sap-accent);
	margin-top: 6px;
}
.sap-quote__seal { filter: none; }

/* ---------- The seat ---------- */
.sap-offer { background: var(--sap-white); border-top: 2px solid var(--sap-line-strong); border-bottom: 2px solid var(--sap-line-strong); }
.saveaplaya-page .sap-offer p.sap-offer__lead { max-width: 60ch; color: var(--sap-muted); }
.sap-offer__grid {
	margin: 48px auto 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 900px;
}
.sap-plan {
	background: var(--sap-white);
	border: 2px solid var(--sap-line-strong);
	border-radius: 10px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: none;
}
.sap-plan--featured { border-color: var(--sap-link); box-shadow: 0 8px 24px rgba(2, 77, 185, .14); }
.saveaplaya-page p.sap-plan__kind {
	font-family: var(--sap-font-body);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sap-muted);
}
.saveaplaya-page .sap-plan--featured p.sap-plan__kind { color: var(--sap-ink); }
.saveaplaya-page p.sap-plan__price { font-family: var(--sap-font-display); font-size: 39px; line-height: 1; color: var(--sap-ink); }
.saveaplaya-page p.sap-plan__per { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sap-subtle); }
.sap-plan__rule { height: 1px; background: var(--sap-line); }
.sap-plan__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sap-plan__list li { font-size: 14px; line-height: 1.45; color: var(--sap-muted); }
.sap-plan--featured .sap-plan__list li { color: var(--sap-ink); }
.saveaplaya-page p.sap-offer__note { margin: 24px auto 0; max-width: 780px; text-align: center; font-size: 12px; line-height: 1.45; color: var(--sap-muted); }
.sap-offer__cta { margin-top: 36px; }
.sap-offer__cta .wp-block-buttons { justify-content: center; }

/* ---------- Questions ---------- */
.sap-faq__head { display: flex; flex-direction: column; gap: 12px; }
body .saveaplaya-page .sap-faq__head h2 { font-size: 25px; }
.sap-faq__list { min-width: 0; max-width: 780px; border-top: 1px solid var(--sap-line); }
.saveaplaya-page .sap-faq__list details { border-bottom: 1px solid var(--sap-line); }
.saveaplaya-page .sap-faq__list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	font-family: var(--sap-font-head);
	font-size: 16px;
	font-weight: 500;
	color: var(--sap-ink);
	cursor: pointer;
	list-style: none;
}
.saveaplaya-page .sap-faq__list summary::-webkit-details-marker { display: none; }
.saveaplaya-page .sap-faq__list summary::after {
	content: "+";
	flex: none;
	font-size: 18px;
	line-height: 1;
	color: var(--sap-accent);
}
.saveaplaya-page .sap-faq__list details[open] summary::after { content: "\2212"; }
.saveaplaya-page .sap-faq__list details p { margin: 0; padding: 0 0 22px; font-size: 15px; line-height: 1.45; color: var(--sap-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.sap-built__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sap-numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.sap-hero .sap-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.sap-wrap--split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sap-offer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.sap-section { padding: 56px 0; }
	.sap-hero { padding-top: 48px; }
	.sap-built { margin-top: 56px; }
	.sap-quote { padding: 64px 0; }
	.sap-built__grid, .sap-numbers__grid { grid-template-columns: minmax(0, 1fr); }
	.saveaplaya-page .wp-block-button, .saveaplaya-page .wp-block-button__link { width: 100%; }
}