/*
 * Drift status page.
 *
 * Layout og typografi følger mocket i resources/Driftstatus.pdf (målt ved
 * 1440px): navy flade uden hero-billede, 64px centreret titel, hvide kort
 * med navy overskrift og sort brødtekst, og en rød CTA nederst.
 *
 * Al styling bor her — indholdsblokken på siden er ren semantisk HTML uden
 * inline styles.
 */

.drift-status {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: clamp(3.5rem, 6.25vw, 5.625rem) clamp(4.5rem, 10vw, 9rem);
	background: var(--color-blue-overlay);
	color: var(--color-white);
}

.drift-status.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* 72.5rem − 2 × 1.25rem padding giver mockets 1120px indholdsbredde. */
.drift-status__inner {
	position: relative;
	z-index: 2;
	max-width: 72.5rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Hero: titel, intro og den samlede status — alt centreret. */
.drift-status__header {
	margin: 0 0 clamp(3rem, 5vw, 4.5rem);
	text-align: center;
}

.drift-status .drift-status__title {
	margin: 0 0 clamp(1.25rem, 2vw, 1.875rem);
	color: var(--color-white);
	font-size: clamp(2.5rem, 4.45vw, 4rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
}

/*
 * 45rem holder de to sætninger på hver sin linje ved desktop, som i mocket,
 * uden at tvinge et <br> ind i indholdet.
 */
.drift-status__intro {
	max-width: 45rem;
	margin: 0 auto clamp(3rem, 7.5vw, 6.75rem);
	color: var(--color-white);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.25;
}

.drift-status__state {
	margin: 0;
	color: var(--color-white);
	font-size: clamp(1.5rem, 2.25vw, 2rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

/* Driftsmeddelelser: hvide kort på den navy flade. */
.drift-status__updates {
	margin: 0 0 clamp(3.5rem, 7.65vw, 6.875rem);
}

.drift-status__update {
	margin: 0 0 clamp(1.25rem, 2.5vw, 2.25rem);
	padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2.8vw, 2.5rem);
	border-radius: 0.625rem;
	background: var(--color-white);
	color: var(--color-black);
}

.drift-status__update:last-child {
	margin-bottom: 0;
}

.drift-status .drift-status__update-title {
	margin: 0 0 0.75rem;
	color: var(--color-blue-overlay);
	font-size: clamp(1.1875rem, 1.53vw, 1.375rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
}

.drift-status__update p {
	margin: 0 0 1.3125rem;
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.25;
}

.drift-status__update p:last-child {
	margin-bottom: 0;
}

/* Underleverandører: samme typografi som den samlede status. */
.drift-status__services {
	margin: 0 0 clamp(4rem, 8.34vw, 7.5rem);
	text-align: center;
}

.drift-status__service + .drift-status__service {
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

.drift-status .drift-status__service-title {
	margin: 0 0 1.125rem;
	color: var(--color-white);
	font-size: clamp(1.5rem, 2.25vw, 2rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.drift-status__service-description {
	max-width: 40rem;
	margin: 0 auto clamp(1.5rem, 2.4vw, 2.1875rem);
	color: var(--color-white);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.25;
}

.drift-status__service-state {
	margin: 0;
	color: var(--color-white);
	font-size: clamp(1.5rem, 2.25vw, 2rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.drift-status__actions {
	margin: 0;
	text-align: center;
}

.drift-status .drift-status__button {
	min-height: 3.5rem;
	padding: 1rem clamp(1.75rem, 3vw, 2.6875rem);
	border: 2px solid var(--color-brand-red);
	border-radius: var(--button-radius);
	background: var(--color-brand-red);
	color: var(--color-white);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

/*
 * Standard-hover på .btn gør knappen transparent med rød tekst, og mod den
 * navy flade læses det som en tom rød ramme. Samme løsning som støttekortene
 * i support-cards.css: hvid flade, navy tekst.
 *
 * :hover og :focus-visible står i hver sin regel med vilje — en ukendt
 * pseudo-klasse i en kommasepareret selector-liste gør hele reglen ugyldig
 * i WebKit før 15.4 (se faq-accordion.css).
 */
.drift-status .drift-status__button:hover {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-blue-dark);
}

.drift-status .drift-status__button:focus-visible {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-blue-dark);
}

/*
 * Mockets stramme linjeafstand (1,25) er tegnet til desktop-størrelserne
 * (64/32/22/18px). Under 1024px er brødteksten skaleret ned til 16–17px, og
 * dér bliver 1,25 for tæt at læse — så luftes den op.
 */
@media (max-width: 63.9375rem) {
	.drift-status__intro,
	.drift-status__update p,
	.drift-status__service-description {
		line-height: 1.5;
	}
}

@media (max-width: 39.9375rem) {
	.drift-status .drift-status__button {
		width: 100%;
	}
}