/* ==========================================================================
   Sally's Piano - layout blocks
   Loaded after site.css. Gives page content a visual rhythm so pages do not
   read as one long column of text.
   ========================================================================== */

.sp-img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.sp-section { padding: 4.5rem 0; }
.sp-section--tight { padding: 3rem 0; }
.sp-section--tint { background: var(--sp-cream-deep); }
.sp-section--flush { padding: 0; }

.sp-section__head { max-width: 44rem; margin: 0 auto 2.75rem; text-align: center; }
.sp-section__head h2 { margin: 0.5rem 0 0.75rem; }
.sp-section__head p { margin: 0; color: var(--sp-ink-soft); }

.sp-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sp-accent);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.sp-hero { padding: 4.5rem 0 3.5rem; }
.sp-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}
.sp-hero__title { margin: 0.75rem 0 1.1rem; }
.sp-hero__lede { font-size: 1.2rem; color: var(--sp-ink-soft); max-width: 34rem; }
.sp-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.sp-hero__media img { border-radius: 4px; object-fit: cover; aspect-ratio: 16 / 11; }

/* Facts strip under the hero */
.sp-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 3.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--sp-line);
}
.sp-fact__k { font-family: var(--sp-serif); font-size: 1.5rem; line-height: 1.15; }
.sp-fact__v { font-size: 0.85rem; color: var(--sp-muted); }

/* --------------------------------------------------------------------------
   Split (image + text)
   -------------------------------------------------------------------------- */
.sp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: center;
}
.sp-split__media img { border-radius: 4px; object-fit: cover; }
.sp-split--reverse .sp-split__media { order: 2; }
.sp-split__body h2 { margin-top: 0.4rem; }

/* --------------------------------------------------------------------------
   Photo band - full bleed strip of images
   -------------------------------------------------------------------------- */
.sp-band {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}
.sp-band--four { grid-template-columns: repeat(4, 1fr); }
.sp-band .sp-band__item { position: relative; overflow: hidden; }
.sp-band img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.sp-band--wide img { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.sp-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.sp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sp-line);
	border-radius: 4px;
	overflow: hidden;
}
.sp-card img { aspect-ratio: 4 / 3; object-fit: cover; }
.sp-card__body { padding: 1.4rem 1.4rem 1.6rem; }
.sp-card__body h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.sp-card__body p { margin: 0; color: var(--sp-ink-soft); font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.sp-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	counter-reset: sp-step;
}
.sp-step { position: relative; padding-top: 2.75rem; }
.sp-step::before {
	counter-increment: sp-step;
	content: counter(sp-step);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--sp-serif);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--sp-accent-soft);
}
.sp-step h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.sp-step p { margin: 0; color: var(--sp-ink-soft); font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   Feature grid
   -------------------------------------------------------------------------- */
.sp-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.75rem 2.5rem;
}
.sp-feature { border-top: 1px solid var(--sp-line); padding-top: 1.15rem; }
.sp-feature__t { font-family: var(--sp-serif); font-size: 1.1rem; margin: 0 0 0.35rem; }
.sp-feature p { margin: 0; color: var(--sp-ink-soft); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Quotes
   -------------------------------------------------------------------------- */
.sp-quotes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 2.5rem;
}
.sp-quote { margin: 0; padding-left: 1.25rem; border-left: 2px solid var(--sp-accent-soft); }
.sp-quote p { margin: 0 0 0.6rem; color: var(--sp-ink-soft); }
.sp-quote cite { font-style: normal; font-size: 0.9rem; color: var(--sp-muted); }

/* --------------------------------------------------------------------------
   FAQ (native details, no JS)
   -------------------------------------------------------------------------- */
.sp-faq { max-width: 46rem; margin: 0 auto; }
.sp-faq details { border-bottom: 1px solid var(--sp-line); }
.sp-faq summary {
	cursor: pointer;
	padding: 1.1rem 0;
	font-family: var(--sp-serif);
	font-size: 1.1rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; color: var(--sp-accent); font-size: 1.3rem; line-height: 1; }
.sp-faq details[open] summary::after { content: "\2013"; }
.sp-faq .sp-faq__body { padding: 0 0 1.25rem; color: var(--sp-ink-soft); }
.sp-faq .sp-faq__body p { margin: 0 0 0.75rem; }

/* --------------------------------------------------------------------------
   Call to action band
   -------------------------------------------------------------------------- */
.sp-cta {
	background: var(--sp-ink);
	color: var(--sp-cream);
	border-radius: 4px;
	padding: 3.25rem 2rem;
	text-align: center;
}
.sp-cta h2 { color: var(--sp-cream); margin: 0 0 0.6rem; }
.sp-cta p { color: #d9d2c7; max-width: 34rem; margin: 0 auto 1.75rem; }
.sp-cta .sp-btn { background: var(--sp-cream); color: var(--sp-ink); border-color: var(--sp-cream); }
.sp-cta .sp-btn:hover { background: transparent; color: var(--sp-cream); }

/* --------------------------------------------------------------------------
   Responsive
   The design is built mobile first: a single column is the default and the
   multi-column layouts only switch on once there is room for them.
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
	.sp-hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
	.sp-hero__media { order: -1; }
	.sp-split { grid-template-columns: 1fr; gap: 2rem; }
	.sp-split--reverse .sp-split__media { order: 0; }
	.sp-cards { grid-template-columns: 1fr; }
	.sp-steps { grid-template-columns: 1fr; gap: 1.75rem; }
	.sp-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
	.sp-section { padding: 3rem 0; }
	.sp-section--tight { padding: 2.25rem 0; }
	.sp-hero { padding: 1.5rem 0 2rem; }
	.sp-hero__lede { font-size: 1.1rem; }
	.sp-hero__media img { aspect-ratio: 4 / 3; }
	.sp-hero__cta { flex-direction: column; align-items: stretch; }
	.sp-hero__cta .sp-btn { text-align: center; padding: 0.95rem 1.25rem; }
	.sp-facts { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
	.sp-fact__k { font-size: 1.25rem; }
	.sp-quotes { grid-template-columns: 1fr; gap: 1.5rem; }
	.sp-band { grid-template-columns: 1fr 1fr; }
	/* hiding the odd one out only makes sense for the 3-up band */
	.sp-band:not(.sp-band--four) .sp-band__item:last-child { display: none; }
	.sp-band--four { grid-template-columns: 1fr 1fr; }
	.sp-features { gap: 1.25rem; }
	.sp-cta { padding: 2.25rem 1.25rem; border-radius: 0; }
	.sp-cta .sp-btn { display: block; text-align: center; padding: 0.95rem 1.25rem; }
	.sp-section__head { margin-bottom: 1.75rem; }
	/* horizontal only - a shorthand here would wipe the header's vertical padding */
	.sp-wrap { padding-left: 1.15rem; padding-right: 1.15rem; }
	.sp-page-head { margin: 2.25rem 0 1.75rem; }
	body { font-size: 1rem; }
}

/* Full-bleed photo bands only make sense once there is width for them. */
@media (max-width: 26rem) {
	.sp-band { grid-template-columns: 1fr; }
	.sp-band:not(.sp-band--four) .sp-band__item:last-child { display: block; }
}