/* media.css — photo panels, with brand-tone panels as the fallback.
   Photography arrived 2026-09-08 (self-hosted, see docs/IMAGE-CREDITS.md). A panel
   holding an <img class="gnt-media__img"> shows the photograph; a panel without one
   keeps the original brand-tone treatment carrying the mark at low opacity, which is
   still the correct state for any slot with no photograph of its own — the team
   headshot in particular, where a stock face would misrepresent a named person.

   The gradient stays underneath as the colour shown while the image loads, so a slow
   connection sees brand colour rather than a white hole. */

.gnt-media {
	position: relative;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-accent-mist);
	background-image: linear-gradient(135deg, var(--color-accent-mist) 0%, var(--color-accent-sky) 100%);
}

.gnt-media::after {
	content: "";
	position: absolute;
	width: 42%;
	aspect-ratio: 1.141;
	background: var(--gnt-mark) center / contain no-repeat;
	opacity: 0.13;
}

/* The photograph. Absolute rather than a block image so it cannot change the panel's
   height: every panel's size comes from its aspect-ratio class, and the image fills
   whatever that produces. Sits below .gnt-cta__frame::after and
   .gnt-bandcard__media::after, so both scrims keep working over it. */
.gnt-media__img,
.gnt-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* No transition: these are static panels and a fade would fight
	   prefers-reduced-motion for no benefit. */
}

/* With a photograph present the watermark reads as dirt on the lens, so drop it.
   :has() rather than a second class on every call site, which would be one more
   thing to keep in sync by hand. */
.gnt-media:has(.gnt-media__img)::after,
.gnt-media:has(img)::after { content: none; }

/* Tonal variants so repeated panels down the page do not read as one texture. */
.gnt-media--sky   { background-image: linear-gradient(135deg, var(--color-accent-sky) 0%, var(--color-accent-mist) 100%); }
.gnt-media--sand  { background-image: linear-gradient(135deg, var(--color-accent-sand) 0%, var(--color-accent-mist) 100%); }
.gnt-media--brand { background-image: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-dark) 100%); }

/* On the brand-coloured panels the black mark disappears, so use the white one. */
.gnt-media--brand::after { background-image: var(--gnt-mark-inverse); opacity: 0.16; }

/* Aspect ratios, taken from the frame. */
.gnt-media--hero   { aspect-ratio: 1920 / 533.33; min-height: 260px; max-height: 640px; }
.gnt-media--card   { aspect-ratio: 692 / 327.42; }
.gnt-media--square { aspect-ratio: 1 / 1; }
.gnt-media--cta    { aspect-ratio: 1920 / 576; min-height: 320px; }
.gnt-media--fill   { position: absolute; inset: 0; height: 100%; }

@media (max-width: 767px) {
	.gnt-media--cta { aspect-ratio: 3 / 2; min-height: 220px; }
}

/* Full-bleed panels do not round: the hero and the CTA band run to the page edge, and
   a radius there reads as a floating card rather than as a band. */
.gnt-media--hero,
.gnt-media--cta,
.gnt-media--fill {
	border-radius: 0;
}

/* The watermark is a fallback for a panel with no photograph — the team headshot
   slot in particular, where a stock face would misrepresent a named person. Against
   the new ink ramp it needs to be fainter than it was, or it reads as a defect. */
.gnt-media::after { opacity: 0.09; }
.gnt-media--brand::after { opacity: 0.13; }