/**
 * Live-slot teaser card — styling (mockup reference).
 * Navy/red/gold, 16px radius, tabular countdown. Covers the Live slot; lifts to
 * reveal the live card underneath.
 *
 * @package HD_Press_Studio
 */

/* The slot wraps the teaser (cover) and the live card (underneath). */
.hd-live-slot { position: relative; }
.hd-live-slot .hd-live--covered { display: none; }

/* Visually-hidden but screen-reader-available (the JS reveal announcement region
   lives in the slot). Mirrors WP's core .screen-reader-text so it stays hidden
   even if the theme's global rule isn't loaded on this view. */
.hd-live-slot .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}

.hd-teaser {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	color: #fff;
	background: radial-gradient(120% 140% at 85% -10%, #24335a 0%, #131c2e 55%, #0e1626 100%);
	box-shadow: 0 18px 40px -18px rgba(19, 28, 46, .55);
	border: 1px solid #0c1424;
	transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .55s ease;
}
.hd-teaser.is-lifting { transform: translateY(-16px); opacity: 0; }

.hd-teaser__glow {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(200, 16, 46, .24), transparent 60%),
		radial-gradient(50% 60% at 0% 100%, rgba(232, 178, 58, .12), transparent 60%);
}
.hd-teaser__pad { position: relative; padding: 24px 26px 22px; }

.hd-teaser__eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.hd-teaser__pill {
	display: inline-flex; align-items: center; gap: 7px;
	background: #c8102e; color: #fff; font-size: .7rem; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
}
.hd-teaser__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: hd-teaser-pulse 1.8s infinite; }
@keyframes hd-teaser-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
	70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.hd-teaser__badge {
	display: inline-flex; align-items: baseline; font-weight: 900; font-size: .82rem; color: #fff;
	border: 1.5px solid rgba(232, 178, 58, .85); border-radius: 8px; padding: 4px 9px;
}

.hd-teaser__headline { font-family: Georgia, 'Times New Roman', serif; font-size: 1.7rem; line-height: 1.16; margin: 0 0 10px; font-weight: 700; color: #fff; }
.hd-teaser__deck { font-size: .98rem; line-height: 1.55; color: #d5dcea; margin: 0 0 18px; }

.hd-teaser__cdlabel { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #aab5c9; margin-bottom: 9px; }
.hd-teaser__cd { display: flex; gap: 9px; margin-bottom: 20px; }
.hd-teaser__u { flex: 1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px 4px 9px; text-align: center; }
.hd-teaser__n { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: .5px; }
.hd-teaser__k { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9aa6bc; margin-top: 7px; }

.hd-teaser__cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hd-teaser__btn { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; text-decoration: none; border-radius: 10px; padding: 11px 16px; cursor: pointer; border: 0; transition: .15s; }
.hd-teaser__btn--primary { background: #c8102e; color: #fff; }
.hd-teaser__btn--primary:hover { background: #a50d25; color: #fff; }
.hd-teaser__btn--ghost { background: transparent; color: #e7ecf5; border: 1px solid rgba(255, 255, 255, .28); }
.hd-teaser__btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.hd-teaser__armchip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: #9be7b4; border: 1px solid rgba(155, 231, 180, .55); border-radius: 999px; padding: 6px 11px; }
.hd-teaser__micro { margin: 16px 0 0; font-size: .76rem; color: #93a0b8; }

@media (max-width: 560px) {
	.hd-teaser__headline { font-size: 1.45rem; }
	.hd-teaser__n { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
	.hd-teaser, .hd-teaser__dot { transition: none; animation: none; }
}