/**
 * Canvas Countdown: card layout styles.
 *
 * The unit-grid layouts the Countdown block's "Card Style" control offers.
 * Registered per-block in Blocks\AssetRegistry, so it only loads on pages that
 * render a countdown. Colours and radii resolve through existing tokens.
 *
 * Cascade order matters here: the shared unit typography is the BASE and the
 * per-variant rules override it. Both live at the same specificity (0,2,0), so
 * putting the shared block last silently flattened every variant to one size
 * and weight: the circle, minimal and dark variants all rendered at 2.5rem/700
 * and the dark digits inherited a contrast token that inverts to black inside
 * a `.dark` section, i.e. invisible.
 *
 * @package Canvas_Core
 * @since   1.0.0
 */

/* ── Wrappers ─────────────────────────────────────────────────────────────── */

.countdown-card-wrap,
.countdown-minimal-wrap {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.countdown-minimal-wrap {
	gap: 2.5rem;
}

/* ── Shared unit typography (base: variants override below) ──────────────── */

.countdown-card-wrap .cd-value,
.countdown-minimal-wrap .cd-value {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}

.countdown-card-wrap .cd-label,
.countdown-minimal-wrap .cd-label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--cnvs-contrast-500);
	margin-top: 0.5rem;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.countdown-card-item {
	background: var(--cnvs-contrast-0, #fff);
	border-radius: 0.75rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	padding: 1.5rem 2rem;
	text-align: center;
	min-width: 120px;
}

.countdown-card-item .cd-value {
	color: var(--cnvs-themecolor);
}

/* ── Bordered ─────────────────────────────────────────────────────────────── */

.countdown-bordered-item {
	border: 2px solid var(--bs-gray-300);
	border-radius: 0.5rem;
	padding: 1.5rem 2rem;
	text-align: center;
	min-width: 120px;
	transition: border-color 0.3s ease;
}

.countdown-bordered-item:hover {
	border-color: var(--cnvs-themecolor);
}

/* ── Circle ───────────────────────────────────────────────────────────────── */

.countdown-circle-item {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	border: 3px solid var(--cnvs-themecolor);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.countdown-circle-item .cd-value {
	font-size: 2.25rem;
	color: var(--cnvs-themecolor);
}

.countdown-circle-item .cd-label {
	font-size: 0.7rem;
	margin-top: 0.25rem;
}

/* ── Minimal ──────────────────────────────────────────────────────────────── */

.countdown-minimal-item {
	text-align: center;
}

.countdown-minimal-item .cd-value {
	font-size: 3rem;
	font-weight: 300;
}

.countdown-minimal-item .cd-label {
	font-size: 0.75rem;
	letter-spacing: 2px;
	color: var(--cnvs-contrast-400);
}

.countdown-minimal-sep {
	font-size: 2.5rem;
	font-weight: 300;
	color: var(--cnvs-contrast-300);
	align-self: flex-start;
	line-height: 1;
}

/* ── Dark ─────────────────────────────────────────────────────────────────── */

.countdown-dark-item {
	text-align: center;
	padding: 0 1rem;
}

/*
 * White, not `--cnvs-contrast-0`: this variant exists to sit on a dark
 * background, and inside a `.dark` scope the contrast scale is inverted, so
 * the 0 end resolves to black.
 */
.countdown-dark-item .cd-value {
	font-size: 3.5rem;
	color: var(--bs-white, #fff);
}

.countdown-dark-item .cd-label {
	letter-spacing: 2px;
	color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {

	.countdown-bordered-item {
		transition: none;
	}
}