/**
 * CT Live — race-day CTA ([ctlive_live_cta]).
 *
 * Leadville tokens: pure #000 (the site's actual black: nav, hero, chin), gold #c2a14d
 * as an accent colour only, never as a rule, cap or border. Squared corners. Font
 * inherited from the page; sizes in px/em because the site root is 10px and rem would
 * render tiny. NO BORDERS ANYWHERE in this file, by instruction.
 *
 * Order inside every style: event name, then the phase label, then the clock directly
 * under it, then the buttons. Phase is a class on the root (is-pre / is-live / is-post);
 * each phase shows only its own buttons. is-gone is display:none and the JS also hides
 * the data-wrap target, so an empty WPBakery row leaves no gap.
 *
 * Styles:
 *   card    white centered card under the black chin, drop shadow, no outline (approved)
 *   inline  transparent, for sitting inside a black hero column
 *   band    full-width black block (kept for other sites; not used on Leadville)
 */

.ltf-ct-cta { font-family: inherit; box-sizing: border-box; width: 100%; }
.ltf-ct-cta *, .ltf-ct-cta *::before, .ltf-ct-cta *::after { box-sizing: border-box; }
.ltf-ct-cta.is-gone { display: none !important; }

/* ---- shared type ---- */
.ltf-ct-cta__text { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
/* Race title is the same size and weight as the clock, by instruction: the card is about
   one thing, and its name and its time carry equal weight. Rendered as an h2 so it has
   heading semantics; margins reset because the theme styles h2 with its own spacing. */
.ltf-ct-cta__name {
	display: block; margin: 0; padding: 0;
	font-size: 46px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; line-height: 1.05;
	color: inherit; font-family: inherit;
}
.ltf-ct-cta--inline .ltf-ct-cta__name { font-size: 34px; }
.ltf-ct-cta__kicker {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; line-height: 1.3;
	color: #c2a14d; margin-top: 18px;
}
.ltf-ct-cta.is-live .ltf-ct-cta__kicker { color: #e02020; }
.ltf-ct-cta.is-post .ltf-ct-cta__kicker { color: #6f6f6f; }
.ltf-ct-cta__clock {
	display: block; text-align: center;
	font-size: 46px; font-weight: 800; letter-spacing: 1px; line-height: 1;
	font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 8px;
}
.ltf-ct-cta.is-post .ltf-ct-cta__clock { display: none; }

/* live dot lives inside the kicker, so it reads "● HAPPENING NOW" */
.ltf-ct-cta__live-dot {
	display: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px;
	background: #e02020; box-shadow: 0 0 0 0 rgba(224,32,32,.7);
	animation: ltf-ct-cta-pulse 1.6s ease-out infinite;
}
.ltf-ct-cta.is-live .ltf-ct-cta__live-dot { display: inline-block; }
@keyframes ltf-ct-cta-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(224,32,32,.7); }
	70%  { box-shadow: 0 0 0 9px rgba(224,32,32,0); }
	100% { box-shadow: 0 0 0 0 rgba(224,32,32,0); }
}

/* ---- buttons ---- */
.ltf-ct-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 24px; }
.ltf-ct-cta.is-post .ltf-ct-cta__actions { margin-top: 20px; }
.ltf-ct-cta__btn {
	display: none; align-items: center; gap: 8px;
	padding: 14px 26px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
	text-decoration: none; line-height: 1; white-space: nowrap;
	background: #000; color: #fff; transition: background .15s, color .15s;
}
.ltf-ct-cta__btn:hover, .ltf-ct-cta__btn:focus { background: #c2a14d; color: #000; text-decoration: none; }
.ltf-ct-cta__btn--watch { background: #e02020; color: #fff; }
.ltf-ct-cta__btn--watch:hover, .ltf-ct-cta__btn--watch:focus { background: #000; color: #fff; }
.ltf-ct-cta__btn-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* phase gating */
.ltf-ct-cta.is-pre  .ltf-ct-cta__btn--pre,
.ltf-ct-cta.is-live .ltf-ct-cta__btn--watch,
.ltf-ct-cta.is-live .ltf-ct-cta__btn--results,
.ltf-ct-cta.is-post .ltf-ct-cta__btn--post { display: inline-flex; }
.ltf-ct-cta.hide-pre.is-pre, .ltf-ct-cta.hide-live.is-live, .ltf-ct-cta.hide-post.is-post { display: none !important; }

/* ---- card (approved homepage design) ---- */
.ltf-ct-cta--card { color: #000; padding: 0 20px; }
.ltf-ct-cta--card .ltf-ct-cta__inner {
	max-width: 720px; margin: 0 auto; background: #fff; color: #000;
	box-shadow: 0 22px 60px -24px rgba(0,0,0,.45);
	text-align: center; padding: 32px 28px 34px;
	display: flex; flex-direction: column; align-items: center;
}

/* ---- inline (inside a black hero column) ---- */
.ltf-ct-cta--inline { color: #fff; text-align: center; }
.ltf-ct-cta--inline .ltf-ct-cta__inner { display: flex; flex-direction: column; align-items: center; padding: 14px 0 4px; }
.ltf-ct-cta--inline .ltf-ct-cta__clock { font-size: 34px; }
.ltf-ct-cta--inline .ltf-ct-cta__btn { background: #c2a14d; color: #000; }
.ltf-ct-cta--inline .ltf-ct-cta__btn:hover, .ltf-ct-cta--inline .ltf-ct-cta__btn:focus { background: #fff; color: #000; }
.ltf-ct-cta--inline .ltf-ct-cta__btn--results { background: #fff; color: #000; }
.ltf-ct-cta--inline .ltf-ct-cta__btn--watch { background: #e02020; color: #fff; }

/* ---- band (not used on Leadville; kept for other installs) ---- */
.ltf-ct-cta--band { background: #000; color: #fff; }
.ltf-ct-cta--band .ltf-ct-cta__inner { max-width: 1200px; margin: 0 auto; padding: 28px 24px 32px; display: flex; flex-direction: column; align-items: center; }
.ltf-ct-cta--band .ltf-ct-cta__btn { background: #c2a14d; color: #000; }
.ltf-ct-cta--band .ltf-ct-cta__btn--results { background: #fff; color: #000; }
.ltf-ct-cta--band .ltf-ct-cta__btn--watch { background: #e02020; color: #fff; }

/* ---- mobile ---- */
@media ( max-width: 767px ) {
	.ltf-ct-cta--card { padding: 0 15px; }
	.ltf-ct-cta--card .ltf-ct-cta__inner { padding: 26px 18px 28px; }
	.ltf-ct-cta__name { font-size: 38px; }
	.ltf-ct-cta__clock { font-size: 38px; }
	.ltf-ct-cta--inline .ltf-ct-cta__clock { font-size: 30px; }
	.ltf-ct-cta--inline .ltf-ct-cta__name { font-size: 30px; }
	.ltf-ct-cta__actions { width: 100%; }
	.ltf-ct-cta__btn { flex: 1 1 auto; justify-content: center; padding: 14px 16px; }
}