/* =========================================================================
   SUMBRA — Project Detail (Casa Ita Surf reference implementation)
   Reuses all Phase 1/2.1 tokens and components. Deliberately more
   photographic/immersive than the Solution page — the hero uses a full
   image with overlaid text (flat scrim, same technique already approved
   on the homepage's Solutions tiles) rather than a split two-column hero.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero — immersive photo, overlaid text, restrained metadata bar below.
   ------------------------------------------------------------------------- */
.sumbra-proj-hero__media {
	position: relative;
	aspect-ratio: 5/1;
	min-height: 220px;
	max-height: 400px;
	overflow: hidden;
}
.sumbra-proj-hero__media .sumbra-media__img,
.sumbra-proj-hero__media .sumbra-placeholder,
.sumbra-proj-hero__media .sumbra-temp-photo {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}
/* Flat single-colour scrim (not a gradient) for text legibility — same
   technique already used and approved on the homepage's Solutions tiles.
   Kept deliberately light so the photograph still dominates. */
.sumbra-proj-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--sumbra-carbon);
	opacity: 0.28;
	z-index: 1;
}
.sumbra-proj-hero__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 48px var(--sumbra-gutter) 40px;
}
.sumbra-proj-hero__text .sumbra-eyebrow--light { margin-bottom: var(--sumbra-space-xs); }
.sumbra-proj-hero__text .sumbra-h1--light { max-width: 14ch; margin-bottom: var(--sumbra-space-sm); }
.sumbra-proj-hero__thesis {
	color: var(--sumbra-marfil);
	max-width: 46ch;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
	margin: 0;
}
.sumbra-proj-hero__meta-bar { background-color: var(--sumbra-carbon); }
.sumbra-proj-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sumbra-space-sm) var(--sumbra-space-md);
	padding-block: var(--sumbra-space-xs);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sumbra-lino);
}
@media (max-width: 700px) {
	.sumbra-proj-hero__media { aspect-ratio: auto; min-height: 58vh; max-height: none; }
	.sumbra-proj-hero__text { padding: 32px var(--sumbra-gutter) 28px; }
}

/* -------------------------------------------------------------------------
   La situación / Resultado — a held editorial statement (lede), not a
   two-column layout. Photography carries most of the section's weight.
   ------------------------------------------------------------------------- */
.sumbra-proj-situation__lede {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-style: normal;
	font-size: 1.9rem;
	font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
	line-height: 1.35;
	color: var(--sumbra-carbon);
	max-width: 46ch;
	margin: 0;
}
.sumbra-proj-result__media { margin-bottom: var(--sumbra-space-lg); }
.sumbra-proj-result__media .sumbra-media__img,
.sumbra-proj-result__media .sumbra-placeholder,
.sumbra-proj-result__media .sumbra-temp-photo { aspect-ratio: 16/9; }
.sumbra-proj-result__main {
	font-family: var(--sumbra-font-display);
	font-weight: 500;
	font-style: normal;
	font-size: 1.9rem;
	font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
	line-height: 1.35;
	color: var(--sumbra-carbon);
	max-width: 46ch;
	margin: 0 0 var(--sumbra-space-sm);
}
.sumbra-proj-result__supporting {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sumbra-piedra);
	max-width: 52ch;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Lo que vimos — Carbón interruption (same device as Materials/POV
   elsewhere on the site — a held dark moment, not a generic dark section).
   ------------------------------------------------------------------------- */
.sumbra-proj-observation { background-color: var(--sumbra-carbon); padding-block: 56px; }
.sumbra-proj-observation__inner { max-width: 680px; }
.sumbra-proj-observation__inner .sumbra-h2 { margin-bottom: 0; }
@media (max-width: 700px) {
	.sumbra-proj-observation { padding-block: var(--sumbra-space-lg); }
}

/* -------------------------------------------------------------------------
   La decisión
   ------------------------------------------------------------------------- */
.sumbra-proj-decision__grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: var(--sumbra-space-xl);
	align-items: start;
}
.sumbra-proj-decision__copy { padding-top: var(--sumbra-space-lg); }
.sumbra-proj-decision__copy .sumbra-h2 { max-width: 14ch; }
.sumbra-proj-decision__media .sumbra-media__img,
.sumbra-proj-decision__media .sumbra-placeholder,
.sumbra-proj-decision__media .sumbra-temp-photo { aspect-ratio: 3/4; }
@media (max-width: 900px) {
	.sumbra-proj-decision__grid { grid-template-columns: 1fr; gap: var(--sumbra-space-md); }
	.sumbra-proj-decision__copy { padding-top: 0; }
}

/* -------------------------------------------------------------------------
   Detalles — quiet, restrained list. Not a specification table.
   ------------------------------------------------------------------------- */
.sumbra-proj-details__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sumbra-space-md) var(--sumbra-space-lg);
	max-width: 980px;
}
.sumbra-proj-details__list li {
	padding-bottom: var(--sumbra-space-sm);
	border-bottom: 1px solid var(--sumbra-lino);
}
.sumbra-proj-details__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sumbra-piedra);
	margin-bottom: 4px;
}
.sumbra-proj-details__value {
	display: block;
	font-size: 1.05rem;
	color: var(--sumbra-carbon);
}

/* -------------------------------------------------------------------------
   Galería — editorial sequence, count-driven. Wide items span the full
   row; others sit two-up. No fixed thumbnail grid.
   ------------------------------------------------------------------------- */
.sumbra-proj-gallery__single .sumbra-media__img { width: 100%; height: auto; display: block; }
.sumbra-proj-gallery__pair {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--sumbra-space-md);
	align-items: start;
}
.sumbra-proj-gallery__pair .sumbra-media__img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.sumbra-proj-gallery__sequence {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sumbra-space-md) var(--sumbra-space-md);
	align-items: start;
}
.sumbra-proj-gallery__item--wide { grid-column: 1 / -1; margin-block: var(--sumbra-space-md); }
.sumbra-proj-gallery__item .sumbra-media__img { width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.sumbra-proj-gallery__item--wide .sumbra-media__img { aspect-ratio: 16/9; object-fit: cover; height: 100%; }
@media (max-width: 700px) {
	.sumbra-proj-gallery__pair { grid-template-columns: 1fr; }
	.sumbra-proj-gallery__sequence { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Relacionado
   ------------------------------------------------------------------------- */
.sumbra-proj-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sumbra-space-xl);
}
.sumbra-proj-related__list { display: flex; flex-direction: column; gap: var(--sumbra-space-sm); }

/* -------------------------------------------------------------------------
   Conversion bridge — identical restrained treatment to the Solution
   page's bridge.
   ------------------------------------------------------------------------- */
.sumbra-proj-bridge { padding-block: 40px; }
.sumbra-proj-bridge__inner {
	padding-top: var(--sumbra-space-md);
	border-top: 1px solid var(--sumbra-lino);
	display: flex;
	flex-direction: column;
	gap: var(--sumbra-space-sm);
	max-width: 640px;
}
.sumbra-proj-bridge__inner p {
	margin: 0;
	color: var(--sumbra-carbon);
	font-family: var(--sumbra-font-display);
	font-size: 1.35rem;
	line-height: 1.35;
}