/*
 * GORILLA GARAGE — Component: Öffnungs-Status (hell)
 *
 * Live-Indikator + gebündelte Wochenübersicht für helle Flächen
 * (Block-Content via [gg_openings], aktuell /ueber-uns/ Standort).
 * Dunkle Pendants: components/footer.css (Status-Strip) und
 * components/header.css (Topbar-Dot) — gleiche Datenquelle,
 * eigene Optik.
 *
 * Bewusst flach: kein Card-Background, keine Border-Box. Struktur
 * kommt allein über Haarlinien zwischen den Zeilen.
 */

.gg-openings {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-top: var(--space-6);
}

/* ────────────────────────────────────────────────────────────
 * Live-Indikator — Dot + Satz („Jetzt geöffnet · bis 19:00")
 * ──────────────────────────────────────────────────────────── */

.gg-openings__status {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	font-family: var(--font-headline);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--color-heading);
}

.gg-openings__dot {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: var(--radius-pill);
	flex-shrink: 0;
}

.gg-openings__dot--open {
	background-color: var(--color-status-open);
	box-shadow:
		0 0 0 4px var(--color-status-open-glow),
		0 0 14px 2px var(--color-status-open-glow);
	animation: gg-openings-pulse 2.4s ease-in-out infinite;
}

.gg-openings__dot--closed {
	background-color: var(--color-status-closed);
	box-shadow: 0 0 0 4px rgba(138, 138, 138, 0.18);
}

@keyframes gg-openings-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.gg-openings__dot--open {
		animation: none;
	}
}

/* ────────────────────────────────────────────────────────────
 * Wochenübersicht — Tagesbereiche gebündelt (Mo–Fr / Sa / So)
 * ──────────────────────────────────────────────────────────── */

.gg-openings__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	max-width: 24rem;
	border-bottom: 1px solid var(--color-border);
}

.gg-openings__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	align-items: baseline;
	gap: var(--space-4);
	padding-block: var(--space-3);
	padding-left: var(--space-3);
	border-top: 1px solid var(--color-border);
	/* Platzhalter für den Today-Marker, damit die Zeilen nicht springen. */
	box-shadow: inset 2px 0 0 transparent;
}

.gg-openings__row--today {
	box-shadow: inset 2px 0 0 var(--color-accent);
}

.gg-openings__days {
	font-family: var(--font-headline);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	line-height: 1;
	color: var(--color-text-muted);
}

.gg-openings__row--today .gg-openings__days {
	color: var(--color-accent);
}

.gg-openings__time {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	line-height: 1;
	color: var(--color-text);
	white-space: nowrap;
}

.gg-openings__row--today .gg-openings__time {
	color: var(--color-heading);
}

.gg-openings__row--closed .gg-openings__time {
	color: var(--color-text-muted);
	font-style: italic;
}

@media (max-width: 30rem) {
	.gg-openings__row {
		grid-template-columns: 4.5rem 1fr;
		gap: var(--space-3);
	}
}

/* ────────────────────────────────────────────────────────────
 * Mobile — Block mittig
 *
 * Unter --bp-sm steht der Standort-Abschnitt auf /ueber-uns/ komplett
 * zentriert (Headline + Lead in sections/page-content.css). Der
 * Status-Satz zieht mit, die Wochenübersicht schrumpft dafür von
 * „volle Spaltenbreite" auf ihre Inhaltsbreite (width: max-content) —
 * sonst bliebe die Tabelle links kleben, während der Text darüber
 * mittig sitzt. Die Zeilen behalten ihr Zwei-Spalten-Raster, Tage und
 * Zeiten bleiben also untereinander bündig; zentriert wird der Block,
 * nicht die einzelne Zeile.
 * ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.gg-openings {
		align-items: center;
	}

	/* Aus Flex zurück in den Textfluss: der Satz bricht auf schmalen
	 * Viewports zweizeilig um. Als Flex-Zeile bliebe der Dot dabei am
	 * linken Rand kleben, während der Text mittig steht. Inline läuft
	 * er als erstes „Wort" mit und die zweite Zeile zentriert sauber. */
	.gg-openings__status {
		display: block;
		text-align: center;
	}

	.gg-openings__dot {
		margin-right: var(--space-3);
		vertical-align: middle;
	}

	.gg-openings__list {
		width: max-content;
		/* Reicht der Platz nicht (sehr schmal / große Schrift),
		 * fällt die Tabelle wieder auf volle Breite zurück. */
		max-width: 100%;
		margin-inline: auto;
	}
}