/* components/project-layout-simple/project-layout-simple.css
 *
 * "Simple" project layout — minimal input, AI-assisted. A single centered
 * reading column that stays polished even when a project has only Problem +
 * Solution. Ported from the portable Hovee's case-study template, re-keyed
 * onto the mvc design tokens (--mvc-color-*, --mvc-space-*, --mvc-radius-*)
 * so it re-themes per client with zero edits here.
 *
 * Every section is optional and self-skips in the PHP, so the CSS only has
 * to style whatever renders — no empty-state rules needed.
 */

.mvc-pl-simple {
	color: var(--mvc-color-text, #1f2937);
}

.mvc-pl-simple img {
	max-width: 100%;
	display: block;
}

.mvc-pl-simple .mvc-pl-simple__section-title {
	color: var(--mvc-color-heading, var(--mvc-color-text, #111827));
	line-height: 1.15;
	text-wrap: balance;
	margin: 0 0 var(--mvc-space-4, 1.25rem);
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
}

/* ── 1. Hero ──────────────────────────────────────────────────────────────
   Copy + optional photo. Two-column when a hero image exists, single
   centered column when it doesn't (the sparse-content case). */
.mvc-pl-simple__hero {
	background: linear-gradient(
		135deg,
		var(--color-primary, var(--mvc-color-primary, #1e40af)) 0%,
		var(--color-primary-dark, var(--mvc-color-primary, #172e6e)) 100%
	);
	color: var(--color-on-primary, #ffffff);
	padding: clamp(2.5rem, 6vw, 5rem) 0;
}

/* Hero copy sits on the primary background — force the on-primary color
   family so tokens that would otherwise resolve to dark body text stay
   readable. Breadcrumbs are handled by their own component; nudge them too. */
.mvc-pl-simple__hero .mvc-pl-simple__title,
.mvc-pl-simple__hero .mvc-pl-simple__lede,
.mvc-pl-simple__hero .mvc-pl-simple__service,
.mvc-pl-simple__hero .mvc-breadcrumbs,
.mvc-pl-simple__hero .mvc-breadcrumbs * {
	color: var(--color-on-primary, #ffffff);
}
.mvc-pl-simple__hero .mvc-pl-simple__eyebrow {
	color: var(--color-on-primary, #ffffff);
	opacity: 0.85;
}
.mvc-pl-simple__hero .mvc-pl-simple__lede {
	opacity: 0.92;
}
.mvc-pl-simple__hero .mvc-pl-simple__service a {
	color: var(--color-on-primary, #ffffff);
	text-decoration-color: color-mix(in srgb, var(--color-on-primary, #fff) 60%, transparent);
}

.mvc-pl-simple__hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mvc-space-6, 2rem);
	align-items: center;
}

.mvc-pl-simple__hero--has-image .mvc-pl-simple__hero-inner {
	grid-template-columns: 1fr 1.15fr;
}

.mvc-pl-simple__eyebrow {
	color: var(--mvc-color-accent, #2563eb);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.8rem;
	margin: 0 0 var(--mvc-space-2, 0.5rem);
}

.mvc-pl-simple__title {
	color: var(--mvc-color-heading, var(--mvc-color-text, #111827));
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	line-height: 1.2;
	text-wrap: balance;
	margin: 0 0 var(--mvc-space-3, 0.75rem);
}

.mvc-pl-simple__lede {
	color: var(--mvc-color-text-muted, #4b5563);
	font-size: 1.1rem;
	line-height: 1.55;
	margin: 0 0 var(--mvc-space-3, 0.75rem);
	max-width: 42rem;
}

.mvc-pl-simple__service {
	color: var(--mvc-color-text-muted, #6b7280);
	font-size: 0.95rem;
	margin: 0 0 var(--mvc-space-4, 1.25rem);
}

.mvc-pl-simple__service a {
	color: var(--mvc-color-accent, #2563eb);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mvc-pl-simple__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mvc-space-3, 0.75rem);
}

/* The hero sits on the dark primary gradient, so the ghost "Call Now" button
   (transparent + dark text by default) reads dark-on-dark. Restyle it as a
   white-outline / white-text button here — !important is required to beat
   utilities.css `.mvc-btn--ghost { color: ... !important }`. */
.mvc-pl-simple__hero .mvc-pl-simple__ctas .mvc-btn--ghost {
	color: var(--color-on-primary, #ffffff) !important;
	border-color: color-mix(in srgb, var(--color-on-primary, #fff) 70%, transparent) !important;
	background: transparent;
}
.mvc-pl-simple__hero .mvc-pl-simple__ctas .mvc-btn--ghost:hover {
	color: var(--color-primary, var(--mvc-color-primary, #1e40af)) !important;
	background: var(--color-on-primary, #ffffff);
	border-color: var(--color-on-primary, #ffffff) !important;
}

.mvc-pl-simple__hero-media {
	border-radius: var(--mvc-radius-lg, 12px);
	overflow: hidden;
	aspect-ratio: 5 / 4;
	box-shadow: var(--mvc-shadow-lg, 0 20px 50px -12px rgba(0, 0, 0, 0.35));
}

.mvc-pl-simple__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 860px) {
	.mvc-pl-simple__hero--has-image .mvc-pl-simple__hero-inner {
		grid-template-columns: 1fr;
	}
	.mvc-pl-simple__hero-media {
		max-width: 30rem;
	}
}

/* ── Body sections: single centered reading column ────────────────────────
   The whole point of this layout — 2–3 short paragraphs read as a finished
   page, not a half-empty grid. Alternating background bands give rhythm. */
.mvc-pl-simple__section {
	padding: clamp(2.25rem, 5vw, 3.75rem) 0;
}

.mvc-pl-simple__section--alt {
	background: var(--color-primary-subtle, var(--mvc-color-surface-2, #f8fafc));
}

/* Solution section — a deeper blue (primary) band with light text, so it
   reads as the "here's how we fixed it" highlight moment of the page. */
.mvc-pl-simple__section--solution {
	background: linear-gradient(
		135deg,
		var(--color-primary, var(--mvc-color-primary, #1e40af)) 0%,
		var(--color-primary-dark, var(--mvc-color-primary, #172e6e)) 100%
	);
	color: var(--color-on-primary, #ffffff);
}
.mvc-pl-simple__section--solution .mvc-pl-simple__section-title,
.mvc-pl-simple__section--solution .mvc-pl-simple__prose .mvc-wysiwyg,
.mvc-pl-simple__section--solution .mvc-pl-simple__prose .mvc-wysiwyg * {
	color: var(--color-on-primary, #ffffff);
}
.mvc-pl-simple__section--solution .mvc-pl-simple__prose .mvc-wysiwyg a {
	text-decoration-color: color-mix(in srgb, var(--color-on-primary, #fff) 60%, transparent);
}

.mvc-pl-simple__prose {
	max-width: 46rem;
}

/* ── Project Photos slider: wider than the reading column (~75%) ──────────
   The gallery component renders its own .mvc-container; neutralize that
   inner container here so the slider fills this wider wrap instead of
   snapping back to the narrow reading width. */
.mvc-pl-simple__gallery-wrap {
	width: 75%;
	max-width: 75rem;
	margin-inline: auto;
}
.mvc-pl-simple__gallery-wrap .mvc-gallery,
.mvc-pl-simple__gallery-wrap .mvc-gallery > .mvc-container {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}
.mvc-pl-simple__gallery-title {
	text-align: center;
}
@media (max-width: 860px) {
	.mvc-pl-simple__gallery-wrap {
		width: 100%;
	}
}

.mvc-pl-simple__prose .mvc-wysiwyg {
	color: var(--mvc-color-text, #374151);
	font-size: 1.05rem;
	line-height: 1.7;
}

.mvc-pl-simple__prose .mvc-wysiwyg > * + * {
	margin-top: 1em;
}

/* ── 2. Quick Answer (AEO) ────────────────────────────────────────────────
   Quotable answer + optional key-takeaways rail. Two columns on desktop,
   stacks on mobile. */
.mvc-pl-simple__qa-inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--mvc-space-6, 2rem);
	align-items: start;
	max-width: 62rem;
}

.mvc-pl-simple__qa-text {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--mvc-color-text, #374151);
	margin: 0;
	max-width: 40rem;
}

.mvc-pl-simple__takeaways {
	background: var(--mvc-color-surface, #ffffff);
	border: 1px solid var(--mvc-color-border, rgba(0, 0, 0, 0.08));
	border-radius: var(--mvc-radius-lg, 12px);
	padding: var(--mvc-space-4, 1.25rem);
}

.mvc-pl-simple__takeaways h3 {
	color: var(--mvc-color-accent, #2563eb);
	text-transform: uppercase;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	margin: 0 0 var(--mvc-space-3, 0.75rem);
}

.mvc-pl-simple__takeaways ul {
	margin: 0;
	padding-left: 1.35rem;
	list-style: disc outside;
}

.mvc-pl-simple__takeaways li {
	display: list-item;
	list-style: disc outside;
	margin-bottom: 0.6rem;
	padding-left: 0.15rem;
	line-height: 1.5;
	color: var(--mvc-color-text, #374151);
}

.mvc-pl-simple__takeaways li::marker {
	color: var(--mvc-color-accent, #2563eb);
}

@media (max-width: 780px) {
	.mvc-pl-simple__qa-inner {
		grid-template-columns: 1fr;
	}
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.mvc-pl-simple__faq {
	display: grid;
	gap: 0.75rem;
}

.mvc-pl-simple__faq-item {
	background: var(--mvc-color-surface, #ffffff);
	border: 1px solid var(--mvc-color-border, rgba(0, 0, 0, 0.08));
	border-radius: var(--mvc-radius, 8px);
	padding: 0.9rem 1.1rem;
}

.mvc-pl-simple__section--alt .mvc-pl-simple__faq-item {
	background: var(--mvc-color-surface, #ffffff);
}

.mvc-pl-simple__faq-item summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--mvc-color-heading, var(--mvc-color-text, #111827));
}

.mvc-pl-simple__faq-answer {
	margin-top: 0.6rem;
	color: var(--mvc-color-text, #374151);
	line-height: 1.6;
}

/* ── Related projects ─────────────────────────────────────────────────── */
.mvc-pl-simple__related {
	padding: clamp(2.5rem, 5vw, 3.75rem) 0;
}

.mvc-pl-simple__related-more {
	margin: var(--mvc-space-6, 2rem) 0 0;
	text-align: center;
}

.mvc-pl-simple__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--mvc-color-accent, #2563eb);
	text-decoration: none;
}

.mvc-pl-simple__view-all:hover,
.mvc-pl-simple__view-all:focus-visible {
	text-decoration: underline;
}

.mvc-pl-simple__view-all span {
	transition: transform 0.15s ease;
}

.mvc-pl-simple__view-all:hover span {
	transform: translateX(3px);
}