/**
 * Variant CSS: hours--phone-cta-card
 * Layer 2 - Path B hours role (2026-06-06).
 * Dark, action-led hours band. Left: status dot + "open now" + today's hours +
 * a phone CTA button. Right: a compact 3-line week summary on a translucent panel.
 * Drives the visitor straight to a phone call instead of a full weekday table.
 * DARK surface -> text via var(--text-on-dark,#fff); accent via the KI-020 lift
 * (color-mix(... var(--on-dark,#fff))) so the green/brand stays legible on dark.
 * EVERY selector scoped to .universal-hours--phone-cta-card (no global leak).
 */

body.aibt-universal .universal-hours--phone-cta-card {
	background: var(--background);
}

/* === Dark card === */
body.aibt-universal .universal-hours--phone-cta-card .universal-hours__card {
	background: var(--background-dark, #141414);
	color: var(--text-on-dark, #fff);
	border-radius: var(--decor-radius);
	padding: clamp(1.75rem, 4vw, 3.25rem);
	overflow: hidden;
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cols {
	gap: var(--space-xl);
	align-items: center;
}

/* === Status column (left) === */
body.aibt-universal .universal-hours--phone-cta-card .universal-hours__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	/* Accent lift keeps the kicker legible on the dark card (KI-020). */
	color: color-mix(in srgb, var(--accent) 60%, var(--on-dark, #fff)) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__statusrow {
	gap: 0.6rem;
	align-items: center;
	margin-bottom: var(--space-sm);
}

/* Status dot - accent lift so it reads on dark; soft glow ring for "live" feel. */
body.aibt-universal .universal-hours--phone-cta-card .universal-hours__dot {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: var(--decor-radius-pill, 999px);
	background: color-mix(in srgb, var(--accent) 60%, var(--on-dark, #fff));
	box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--accent) 26%, transparent);
	flex: 0 0 auto;
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__status {
	font-family: var(--font-display) !important;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: var(--text-on-dark, #fff) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__today {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	color: var(--text-on-dark, #fff) !important;
	margin: 0 0 var(--space-sm) 0 !important;
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__note {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	/* Slightly dimmed white still clears AA on the dark card. */
	color: color-mix(in srgb, var(--text-on-dark, #fff) 78%, transparent) !important;
	margin: 0 0 var(--space-lg) 0 !important;
	max-width: 42ch;
}

/* === CTA button === */
body.aibt-universal .universal-hours--phone-cta-card .universal-hours__actions {
	margin: 0;
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cta .wp-block-button__link {
	background: var(--cta-bg-primary, var(--accent)) !important;
	color: var(--cta-text-primary, #fff) !important;
	font-family: var(--font-body) !important;
	font-weight: 700 !important;
	font-size: var(--text-base) !important;
	letter-spacing: var(--tracking-wide) !important;
	padding: 0.9rem 1.6rem !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	border: 0 !important;
	transition: transform var(--duration-fast) var(--ease-default),
		filter var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cta .wp-block-button__link:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* === Week summary panel (right) === */
body.aibt-universal .universal-hours--phone-cta-card .universal-hours__week {
	background: color-mix(in srgb, var(--on-dark, #fff) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--on-dark, #fff) 14%, transparent);
	border-radius: var(--decor-radius);
	padding: var(--space-sm) var(--space-lg);
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__row {
	gap: var(--space-md);
	align-items: center;
	margin-block: 0 !important;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--on-dark, #fff) 12%, transparent);
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__row:last-child {
	border-bottom: 0;
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__day {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 500 !important;
	color: color-mix(in srgb, var(--text-on-dark, #fff) 82%, transparent) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-hours--phone-cta-card .universal-hours__time {
	font-family: var(--font-display) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	color: var(--text-on-dark, #fff) !important;
	margin: 0 !important;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Closed day - dimmed but still AA on the dark panel. */
body.aibt-universal .universal-hours--phone-cta-card .universal-hours__row--off .universal-hours__time {
	color: color-mix(in srgb, var(--text-on-dark, #fff) 60%, transparent) !important;
	font-weight: 500 !important;
	font-style: italic;
}

/* === Responsive === */
@media (max-width: 781px) {
	body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cols {
		gap: var(--space-lg);
	}
	/* WP collapses the columns; widen both so nothing pins narrow. */
	body.aibt-universal .universal-hours--phone-cta-card .universal-hours__statuscol,
	body.aibt-universal .universal-hours--phone-cta-card .universal-hours__weekcol {
		flex-basis: 100% !important;
	}
}

@media (max-width: 480px) {
	body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cta {
		width: 100%;
	}
	body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cta .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* Tighten the wide uppercase kicker tracking on small screens (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-hours--phone-cta-card .universal-hours__kicker {
		letter-spacing: 0.08em !important;
	}
}

/* Respect reduced-motion: kill the CTA lift animation. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cta .wp-block-button__link {
		transition: none;
	}
	body.aibt-universal .universal-hours--phone-cta-card .universal-hours__cta .wp-block-button__link:hover {
		transform: none;
	}
}