/* ============================================================
   flair/countdown: the countdown timer block.

   Styles: an eyebrow label, four unit chips, large numerals in the headings
   font, and the icon badge for the ended state.

   Loaded through the block's own block.json ("style"), so it loads only on
   pages that use the block.
   ============================================================ */
.flair-countdown-label{
	font-family:var(--flair-companion-font-headings);font-weight:700;
	font-size:var(--flair-companion-font-size-small);letter-spacing:.16em;
	text-transform:uppercase;color:var(--flair-companion-color-secondary);
	margin:0 0 var(--flair-companion-space-xs)
}
.flair-countdown{container-type:inline-size}
/* The four chips always sit on one row: when the room is narrow (a popup, a column) they shrink with it,
   numerals and labels included, instead of dropping to a second row. */
.flair-countdown-timer{display:flex;flex-wrap:nowrap;gap:clamp(.25rem,2.5cqi,var(--flair-companion-space-sm))}
.flair-countdown-unit{
	flex:0 1 auto;min-width:0;text-align:center;
	background:var(--flair-companion-color-background-alt);
	border-radius:var(--flair-companion-radius-card,1rem);padding:clamp(.375rem,2.5cqi,var(--flair-companion-space-sm)) clamp(.25rem,2cqi,var(--flair-companion-space-xs))
}
.flair-countdown-value{
	display:block;font-family:var(--flair-companion-font-headings);font-weight:700;
	font-size:clamp(1.125rem,8.5cqi,var(--flair-companion-font-size-h2));line-height:1.1;
	color:var(--flair-companion-color-foreground)
}
.flair-countdown-unit-label{
	display:block;margin-top:var(--flair-companion-space-3xs);
	font-size:clamp(.5625rem,2.8cqi,var(--flair-companion-font-size-small));letter-spacing:.06em;
	text-transform:uppercase;color:var(--flair-companion-color-muted)
}
/* Ended state: an icon and a message that replace the unit chips. PHP prints
   it hidden, and countdown.js shows it. The [hidden] rule is needed because
   display: flex below would otherwise override the browser's [hidden] rule. */
.flair-countdown-ended[hidden]{display:none}
.flair-countdown-ended{
	display:flex;align-items:center;gap:var(--flair-companion-space-sm);
	background:transparent;
	border:var(--flair-companion-border-card,0.0625rem solid var(--flair-companion-color-border));
	border-radius:var(--flair-companion-radius-card,1rem);
	padding:var(--flair-companion-space-sm) var(--flair-companion-space-md)
}
/* Icon badge: a soft tint with matching text. It is quieter than a solid
   gradient fill, and it works without the theme. */
.flair-countdown-ended-icon{
	display:inline-flex;align-items:center;justify-content:center;flex:none;
	width:2.25rem;height:2.25rem;border-radius:50%;
	background:var(--flair-companion-color-primary-subtle);
	color:var(--flair-companion-color-primary-subtle-foreground)
}
.flair-countdown-ended-icon:before{font-size:1.1rem;line-height:1}
.flair-countdown-ended-text{
	margin:0;font-family:var(--flair-companion-font-headings);font-weight:600;
	font-size:var(--flair-companion-font-size-lead);color:var(--flair-companion-color-foreground)
}
/* The exact date and time note. It sits under the timer while the countdown
   runs, and under the ended message after it finishes. */
.flair-countdown-note{
	margin:var(--flair-companion-space-2xs) 0 0;
	font-size:var(--flair-companion-font-size-small);
	color:var(--flair-companion-color-muted)
}
/* Alignment (data-flair-align): left is the default layout. Center uses
   justify-content on the timer, so the chips and the ended badge center as a
   group. This suits popups and centered layouts. */
.flair-countdown[data-flair-align="center"]{text-align:center}
.flair-countdown[data-flair-align="center"] .flair-countdown-timer,
.flair-countdown[data-flair-align="center"] .flair-countdown-ended{justify-content:center}
.flair-countdown[data-flair-align="right"]{text-align:right}
.flair-countdown[data-flair-align="right"] .flair-countdown-timer,
.flair-countdown[data-flair-align="right"] .flair-countdown-ended{justify-content:flex-end}
/* On gradient and charcoal backgrounds: translucent chips and white numerals.
   The theme's background classes are matched here, for a countdown placed
   inside a dark section. */
.has-brand-gradient-background .flair-countdown-unit,
.has-foreground-background-color .flair-countdown-unit{background:color-mix(in srgb,var(--flair-companion-color-background) 14%,transparent)}
/* The ended card's border. The theme's border color is light gray, so it would
   be invisible on a dark or gradient background. */
.has-brand-gradient-background .flair-countdown-ended,
.has-foreground-background-color .flair-countdown-ended{border-color:color-mix(in srgb,var(--flair-companion-color-background) 35%,transparent)}
.has-brand-gradient-background .flair-countdown-value,
.has-foreground-background-color .flair-countdown-value,
.has-brand-gradient-background .flair-countdown-ended-text,
.has-foreground-background-color .flair-countdown-ended-text{color:var(--flair-companion-color-background)}
.has-brand-gradient-background .flair-countdown-unit-label,
.has-foreground-background-color .flair-countdown-unit-label,
.has-brand-gradient-background .flair-countdown-note,
.has-foreground-background-color .flair-countdown-note{color:color-mix(in srgb,var(--flair-companion-color-background) 78%,transparent)}