/* ===================================================================
	 Hosting page — photos embedded via masks, datacenter atmosphere
	 =================================================================== */

/* Base treatment for every hosted photo: monochrome, dimmed, seamless. */
.hosting-shot img,
.page-hero__dc-bg img {
	filter: grayscale(1) brightness(0.5) contrast(1.05);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* <picture> wrappers must fill their slot so the img can cover-fit */
.hosting-shot picture,
.page-hero__dc-bg picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------
	 Hero — masked background photo (dissolves into the page)
	 ------------------------------------------------------------------- */

.page-hero--hosting {
}

.page-hero__dc-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.page-hero__dc-bg img {
	opacity: 0.45;
	object-position: 50% 30%;
	-webkit-mask-image:
		linear-gradient(to bottom, transparent 0%, #000 30%, #000 62%, transparent 100%),
		radial-gradient(90% 90% at 30% 20%, #000 20%, transparent 75%);
	mask-image:
		linear-gradient(to bottom, transparent 0%, #000 30%, #000 62%, transparent 100%),
		radial-gradient(90% 90% at 30% 20%, #000 20%, transparent 75%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Photo slightly lags the scroll for depth (progressive enhancement). */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.page-hero__dc-bg img {
			animation: hosting-hero-drift 1s linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}
@keyframes hosting-hero-drift {
	from { transform: scale(1.08) translateY(3%); }
	to   { transform: scale(1.16) translateY(-3%); }
}

.host-specs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	margin-block-start: var(--space-xl);
	padding-block-start: var(--space-lg);
	border-block-start: 1px solid var(--color-line);
}
.host-spec { display: grid; gap: var(--space-2xs); align-content: start; }
.host-spec__k { font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.host-spec__v { font-size: var(--step-lg); font-weight: 500; letter-spacing: -0.02em; }
.host-spec__d { color: var(--color-fg-muted); font-size: var(--step-xs); }

@media (max-width: 1100px) {
	.host-specs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
	.host-specs { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------
	 Intro — editorial two-column with a tall masked portrait
	 ------------------------------------------------------------------- */

.hosting-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(var(--space-lg), 4vw + 1rem, var(--space-2xl));
	align-items: center;
}

/* Shared figure defaults */
.hosting-shot {
	position: relative;
	margin: 0;
	overflow: hidden;
}

/* Vertical fade: the portrait dissolves into the page, no frame */
.hosting-shot--tall img {
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
}

/* The one accent moment: a warm glow rising through the portrait */
.hosting-shot--tall::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(60% 45% at 50% 85%, var(--color-accent-soft), transparent 70%);
	mix-blend-mode: screen;
}

/* Captions: mono, numbered, sitting on the photo's dark floor */
.hosting-shot__caption {
	position: absolute;
	inset-block-end: var(--space-sm);
	inset-inline-start: var(--space-sm);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-fg-muted);
	background: color-mix(in srgb, var(--color-bg) 72%, transparent);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	padding: 0.45em 0.9em;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.hosting-shot__caption span {
	color: var(--color-accent);
	font-weight: 600;
}

/* -------------------------------------------------------------------
	 "Sur place" — staggered gallery collage
	 ------------------------------------------------------------------- */

.hosting-place { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }

.hosting-place__head {
	display: grid;
	gap: var(--space-sm);
	margin-block-end: var(--space-lg);
}
.hosting-place__head h2 {
	font-size: var(--step-2xl);
	font-weight: 500;
	letter-spacing: -0.03em;
}
.hosting-place__head h2 em {
	color: var(--color-accent);
	font-style: italic;
	font-weight: 400;
}

.hosting-place__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-md);
}

/* Wide establishing shot spans the row */
.hosting-place__a { grid-column: 1 / 8; }
.hosting-place__a img { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }

/* Colocation shot, pushed down for the stagger */
.hosting-place__b {
	grid-column: 8 / 13;
	margin-block-start: var(--space-2xl);
}
.hosting-place__b img { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }

/* Corridor starts a second row, offset right */
.hosting-place__c {
	grid-column: 2 / 7;
	margin-block-start: calc(-1 * var(--space-lg));
}
.hosting-place__c img { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }

/* Facts panel completes the second row, aligned with the stagger */
.hosting-facts {
	grid-column: 8 / 13;
	margin-block-start: var(--space-2xl);
	align-self: stretch;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 55%),
		var(--color-bg-raised);
	display: grid;
	gap: var(--space-sm);
	align-content: start;
}
.hosting-facts__title {
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-fg-dim);
}
.hosting-facts ul {
	display: grid;
	gap: var(--space-2xs);
}
.hosting-facts li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: var(--step-xs);
	color: var(--color-fg);
	padding-block: var(--space-2xs);
	border-block-end: 1px dashed var(--color-line);
}
.hosting-facts li:last-child { border-block-end: 0; }
.hosting-facts .k {
	color: var(--color-fg-dim);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--step-2xs);
	padding-block-start: 0.15em;
}

/* Radial dissolve on gallery shots so edges melt into the dark page */
.hosting-place__a img,
.hosting-place__b img,
.hosting-place__c img {
	-webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 98%);
	mask-image: radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 98%);
}

/* Hover: gentle zoom + focus (the mask keeps it contained) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hosting-place__a img,
	.hosting-place__b img,
	.hosting-place__c img {
		transform: scale(1.02);
		transition: transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
	}
	.hosting-place__a:hover img,
	.hosting-place__b:hover img,
	.hosting-place__c:hover img {
		transform: scale(1.07);
		filter: grayscale(1) brightness(0.62) contrast(1.05);
	}
}

/* Scroll parallax on the gallery shots */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.hosting-place__a img,
		.hosting-place__b img,
		.hosting-place__c img {
			animation: hosting-shot-drift 1s linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}
@keyframes hosting-shot-drift {
	from { object-position: 50% 38%; }
	to   { object-position: 50% 62%; }
}

/* -------------------------------------------------------------------
	 CTA — dimmed photo band behind the closing pitch
	 ------------------------------------------------------------------- */

.hosting-cta {
	position: relative;
	overflow: hidden;
	padding-block: clamp(4rem, 3rem + 5vw, 7rem);
	text-align: center;
}

.hosting-cta .cta__inner { position: relative; z-index: 1; }

/* -------------------------------------------------------------------
	 Responsive
	 ------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.hosting-place__a { grid-column: 1 / 7; }
	.hosting-place__b { grid-column: 7 / 13; }
	.hosting-place__c { grid-column: 1 / 6; }
	.hosting-facts { grid-column: 6 / 13; }
}

@media (max-width: 880px) {
	.hosting-intro__grid { grid-template-columns: 1fr; }
	.hosting-shot--tall img { aspect-ratio: 16 / 10; }
	.hosting-place__a,
	.hosting-place__b,
	.hosting-place__c,
	.hosting-facts { grid-column: 1 / -1; margin-block-start: 0; }
	.hosting-place__b { margin-block-start: var(--space-md); }
	.hosting-place__c { margin-block-start: var(--space-md); }
	.hosting-place__a img { aspect-ratio: 16 / 9; }
	.hosting-place__b img,
	.hosting-place__c img { aspect-ratio: 16 / 10; }
}

@media (max-width: 720px) {
	.hosting-place__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
}

@media (max-width: 400px) {
	.hosting-shot__caption {
		inset-block-end: var(--space-2xs);
		inset-inline-start: var(--space-2xs);
		font-size: var(--step-2xs);
		padding: 0.35em 0.75em;
	}
	.hosting-facts { padding: var(--space-md); }
}

/* -------------------------------------------------------------------
	 Reduced motion — static photos, no drift, no zoom
	 ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.page-hero__dc-bg img,
	.hosting-place__a img,
	.hosting-place__b img,
	.hosting-place__c img {
		animation: none !important;
	}
}