/* =========================================================================
   SUMBRA — Solution page (Cortinas reference implementation)
   Reuses every Phase 1 token/component. Only defines what's genuinely new:
   Changing Needs, Decision Logic, Possibilities, Materials, Process labels.
   Header/Footer/Hero/Buttons/Project cards/Final CTA are all Phase 1
   components, unmodified.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero — modest measure increase for Solution pages only (their H1s run
   longer than the homepage's). Homepage Hero itself is untouched.
   ------------------------------------------------------------------------- */
.sumbra-sol-hero .sumbra-h1 { max-width: 13ch; line-height: 0.96; }
.sumbra-sol-hero .sumbra-link-arrow { padding: 13px 0; }

/* -------------------------------------------------------------------------
   Changing Needs
   ------------------------------------------------------------------------- */
.sumbra-sol-needs { padding-block: 42px; }
.sumbra-sol-needs__grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 40px;
	align-items: end;
}
.sumbra-sol-needs__copy .sumbra-h2 {
	max-width: 16ch;
	font-size: clamp(1.9rem, 1.55rem + 2vw, 3.1rem);
	margin-bottom: 16px;
}
.sumbra-sol-needs__eyebrow { margin-bottom: var(--sumbra-space-sm); }
.sumbra-sol-needs__media { max-width: 370px; justify-self: end; }
.sumbra-sol-needs__media .sumbra-media__img,
.sumbra-sol-needs__media .sumbra-placeholder,
.sumbra-sol-needs__media .sumbra-temp-photo { aspect-ratio: 4/5; }
@media (max-width: 900px) {
	.sumbra-sol-needs__grid { grid-template-columns: 1fr; align-items: start; }
	.sumbra-sol-needs__media { max-width: 240px; justify-self: start; }
}

/* -------------------------------------------------------------------------
   Decision Logic + Possibilities — one continuous section. The statement
   introduces the responses directly below it (moderate gap, not a full
   section break), and only the first Possibility gets the large
   half-width treatment — the rest form a compact supporting grid instead
   of repeating the same spacious row five times. This is what actually
   compresses the section: smaller images for supporting items, not
   tighter spacing around oversized ones.
   ------------------------------------------------------------------------- */
.sumbra-sol-decision__inner { max-width: 62ch; margin-bottom: 24px; }

.sumbra-sol-possibility {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--sumbra-space-xl);
	align-items: center;
	padding-bottom: var(--sumbra-space-lg);
	border-bottom: 1px solid var(--sumbra-lino);
	margin-bottom: var(--sumbra-space-lg);
}
.sumbra-sol-possibility__media .sumbra-media__img,
.sumbra-sol-possibility__media .sumbra-placeholder,
.sumbra-sol-possibility__media .sumbra-temp-photo { aspect-ratio: 16/10; }
.sumbra-sol-possibility__title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: clamp(1.8rem, 1.5rem + 1vw, 2.5rem);
	margin: 0 0 var(--sumbra-space-xs);
	color: var(--sumbra-carbon);
}
.sumbra-sol-possibility .sumbra-body { max-width: 46ch; margin-bottom: 0; }

/* Compact grid for the remaining possibilities — small image, title
   directly beneath it (tight proximity), short copy. Auto-fits 2–4
   columns depending on viewport and item count, so 3, 4 or 6 remaining
   items all resolve cleanly without an orphaned last row at typical
   desktop widths. */
/* Possibilities grid: explicit column counts at each range (not auto-fit,
   which silently drops columns when gaps don't leave room — see the
   Process fix below for why that matters). Every card keeps the SAME
   internal vertical layout (image full-width → title → body) at every
   width; only the number of columns changes. */
.sumbra-sol-possibilities__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sumbra-space-lg) var(--sumbra-space-md);
}
.sumbra-sol-possibility-compact__media .sumbra-media__img,
.sumbra-sol-possibility-compact__media .sumbra-placeholder,
.sumbra-sol-possibility-compact__media .sumbra-temp-photo { aspect-ratio: 4/3; }
.sumbra-sol-possibility-compact__title {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2;
	margin: var(--sumbra-space-xs) 0 6px;
	color: var(--sumbra-carbon);
}
.sumbra-sol-possibility-compact__body {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--sumbra-piedra);
	margin: 0;
}

@media (max-width: 900px) {
	.sumbra-sol-decision__inner { margin-bottom: 20px; }
	.sumbra-sol-possibility { grid-template-columns: 1fr; gap: var(--sumbra-space-md); }
	/* Tablet AND mobile both use a 2-column grid — each card fills its
	   full cell width, stacked vertically inside (no nested layout). */
	.sumbra-sol-possibilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   Real Project Proof — content-count-aware, no reserved geometry for
   absent content:
   1 project  = single wide feature
   2 projects = balanced side-by-side pair (equal weight, matched aspect —
                this is what fixes the tall-dominant/short-secondary gap)
   3 projects = asymmetric dominant + secondary rhythm (homepage pattern)
   ------------------------------------------------------------------------- */
.sumbra-sol-proof__single { max-width: 720px; }
.sumbra-sol-proof__single .sumbra-media__img,
.sumbra-sol-proof__single .sumbra-placeholder { aspect-ratio: 16/9; }

.sumbra-sol-proof__pair {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--sumbra-space-xl);
}
.sumbra-sol-proof__pair .sumbra-media__img,
.sumbra-sol-proof__pair .sumbra-placeholder { aspect-ratio: 4/5; }
.sumbra-sol-proof__pair .sumbra-project-card__title { margin-top: var(--sumbra-space-sm); }
@media (max-width: 700px) {
	.sumbra-sol-proof__pair { grid-template-columns: 1fr; gap: var(--sumbra-space-lg); }
	.sumbra-sol-proof__pair a:nth-child(2) .sumbra-media__img,
	.sumbra-sol-proof__pair a:nth-child(2) .sumbra-placeholder { aspect-ratio: 4/3; }
}

/* -------------------------------------------------------------------------
   Materials — tactile, Carbón interruption (matches the POV treatment
   used on the homepage: a dark held moment, not a generic dark section).
   ------------------------------------------------------------------------- */
.sumbra-sol-proof { padding-top: 32px; padding-bottom: 36px; }
.sumbra-sol-proof .sumbra-section__head { margin-bottom: 32px; }

/* Conversion bridge: a quiet editorial prompt after Project Proof, using
   the existing secondary-action system — not a new CTA component. */
.sumbra-sol-proof__bridge {
	margin-top: var(--sumbra-space-lg);
	padding-top: var(--sumbra-space-md);
	border-top: 1px solid var(--sumbra-lino);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sumbra-space-sm) var(--sumbra-space-md);
}
.sumbra-sol-proof__bridge p { margin: 0; color: var(--sumbra-piedra); max-width: 46ch; }

.sumbra-sol-materials { background-color: var(--sumbra-carbon); margin-top: 22px; }
.sumbra-sol-materials__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
}
.sumbra-sol-materials__media .sumbra-media__img,
.sumbra-sol-materials__media .sumbra-placeholder,
.sumbra-sol-materials__media .sumbra-temp-photo { height: 100%; min-height: 420px; aspect-ratio: auto; }
.sumbra-sol-materials__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px var(--sumbra-panel-pad);
}
.sumbra-sol-materials__copy .sumbra-h2 { max-width: 12ch; }
@media (max-width: 900px) {
	.sumbra-sol-materials__grid { grid-template-columns: 1fr; }
	.sumbra-sol-materials__media .sumbra-media__img,
	.sumbra-sol-materials__media .sumbra-placeholder,
	.sumbra-sol-materials__media .sumbra-temp-photo { min-height: 300px; }
}

/* -------------------------------------------------------------------------
   Process — same numbered-list treatment as the homepage, wider measure
   since this section stands alone rather than sharing a panel with POV.
   ------------------------------------------------------------------------- */
.sumbra-sol-process__steps {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sumbra-space-md) var(--sumbra-space-md);
	max-width: none;
	margin-top: var(--sumbra-space-md);
}
.sumbra-sol-process__steps li {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	border-bottom: 1px solid var(--sumbra-lino);
	padding-bottom: var(--sumbra-space-sm);
}
.sumbra-sol-process__steps .sumbra-process__num { font-size: 1.85rem; }
.sumbra-sol-process__steps li span:last-child { font-size: 1.05rem; }
.sumbra-sol-process__intro { max-width: 52ch; color: var(--sumbra-piedra); margin: var(--sumbra-space-sm) 0 0; }
@media (max-width: 1100px) and (min-width: 701px) {
	.sumbra-sol-process__steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.sumbra-sol-process__steps { grid-template-columns: 1fr 1fr; gap: var(--sumbra-space-md); }
}

/* -------------------------------------------------------------------------
   Final CTA — scoped to Solution pages only via the .sumbra-solution
   wrapper (the homepage has no such wrapper, so its identical-ID button
   is completely unaffected). Only padding changes; colour/contrast/
   specificity fix stays global and untouched.
   ------------------------------------------------------------------------- */
.sumbra-solution #sumbra-cta-final { padding-left: 34px; padding-right: 34px; }