/**
 * MDL countdown — typografia (--lp-t-*), presety LP (--mdl-*), stan expired, subtelny tick.
 * Handle WP: `mdl-countdown-style`. Ładowany z bloku (z JS) i Woo przy `mdl-countdown.js`.
 */

/* ── Zmienne lokalne (mapowanie presetu sekcji / strony) ───────────────── */
.mdl-countdown,
.wp-block-mdl-countdown {
	--mdl-cd-digit: var(--mdl-light-heading, #1a1a1a);
	--mdl-cd-label: var(--mdl-light-text, #64748b);
	--mdl-cd-sep: var(--mdl-light-text, #64748b);
	--mdl-cd-expired-msg: var(--mdl-light-heading, #334155);
}

.mdl-urgency .mdl-countdown,
.mdl-urgency .wp-block-mdl-countdown {
	--mdl-cd-digit: var(--mdl-dark-heading, #f8fafc);
	--mdl-cd-label: var(--mdl-dark-over, rgba(248, 250, 252, 0.72));
	--mdl-cd-sep: var(--mdl-dark-over, rgba(248, 250, 252, 0.5));
	--mdl-cd-expired-msg: var(--mdl-dark-heading, #e2e8f0);
}

/* Sekcje jasne z presetu (np. hero-light) — bez .mdl-urgency */
.mdl-hero-light .mdl-countdown,
.mdl-hero-marketing .mdl-countdown {
	--mdl-cd-digit: var(--mdl-light-heading, #0f172a);
	--mdl-cd-label: var(--mdl-light-text, #475569);
	--mdl-cd-sep: var(--mdl-light-text, #94a3b8);
	--mdl-cd-expired-msg: var(--mdl-light-heading, #334155);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.mdl-countdown,
.wp-block-mdl-countdown {
	color: var(--mdl-cd-digit, currentColor);
}

.mdl-urgency .mdl-countdown {
	margin-top: 0.5rem;
}

.mdl-countdown__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(0.75rem, 2vw, 1.25rem) clamp(1.25rem, 4vw, 2.5rem);
	margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

.mdl-countdown__cell {
	text-align: center;
	min-width: clamp(3.25rem, 12vw, 4.5rem);
}

/* Cyfry: token h2 (SKILL §10) + clamp jak w sekcjach LP */
.mdl-countdown__value {
	display: block;
	font-weight: 800;
	line-height: 1.12;
	font-variant-numeric: tabular-nums;
	color: var(--mdl-cd-digit, currentColor);
	font-size: clamp(
		var(--lp-t-h2-min, var(--lp-t-h3-min, 1.125rem)),
		calc(0.36 * var(--lp-t-base-px, 16px) + 2.2vw),
		var(--lp-t-h2, var(--lp-t-h3, 1.5rem))
	);
	text-shadow: 0 0.04em 0 rgba(0, 0, 0, 0.06);
}

.mdl-urgency .mdl-countdown__value {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

/* Etykiety: --lp-t-small */
.mdl-countdown__label {
	display: block;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 0.35rem;
	color: var(--mdl-cd-label, currentColor);
	font-size: clamp(
		var(--lp-t-small-min, 0.6875rem),
		calc(0.65 * var(--lp-t-base-px, 16px) + 0.18vw),
		var(--lp-t-small, 0.8125rem)
	);
	line-height: var(--lp-lh-small, 1.35);
}

/* Separator wizualny między komórkami (opcjonalny ::after na gridzie — tu: tylko odstępy) */
.mdl-countdown__cell + .mdl-countdown__cell {
	position: relative;
}

/* ── Subtelna „żywość” cyfr (tick ambient) — wyłączona przy reduced motion ─ */
@media (prefers-reduced-motion: no-preference) {
	.mdl-countdown__value {
		animation: mdl-cd-digit-ambient 3.2s ease-in-out infinite;
	}

	.mdl-countdown__value[data-mdl-unit="seconds"] {
		animation-duration: 2.4s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mdl-countdown__value {
		animation: none;
	}
}

@keyframes mdl-cd-digit-ambient {
	0%,
	100% {
		opacity: 1;
		transform: translateZ(0);
	}
	50% {
		opacity: 0.94;
		transform: translateZ(0) scale(1.012);
	}
}

/* ── Stan wygaśnięcia ──────────────────────────────────────────────────── */
.mdl-countdown--expired,
.mdl-countdown--expired.wp-block-mdl-countdown {
	opacity: 0.58;
	filter: grayscale(0.2);
	transition: opacity 0.45s ease, filter 0.45s ease;
}

.mdl-countdown--expired .mdl-countdown__value {
	animation: none;
}

/* freeze_final: 00:00:00 + najwyższa cena — bez wyszarzenia całego bloku */
.mdl-countdown--freeze-final .mdl-countdown__value {
	animation: none;
}

.mdl-countdown__expired-msg {
	max-width: 28rem;
	margin: 0.5rem auto 0;
	text-align: center;
	color: var(--mdl-cd-expired-msg, currentColor);
	font-size: clamp(
		var(--lp-t-body-min, 0.875rem),
		calc(0.88 * var(--lp-t-base-px, 16px) + 0.35vw),
		var(--lp-t-body, 1rem)
	);
	line-height: var(--lp-lh-body, 1.55);
	font-weight: 600;
}

/* ── Edytor Gutenberg ───────────────────────────────────────────────────── */
.editor-styles-wrapper .mdl-countdown-editor-wrap .mdl-countdown--preview {
	margin-top: 1rem;
}