/* ==========================================================================
   UGS Live Show Countdown — flyer + distressed bolted-metal split-flap
   counter, overlaying and overhanging the widget like the vinyl record
   overhangs the Music Link widget.
   ========================================================================== */

.ugs-lsc,
.ugs-lsc * {
	/* Without this, .ugs-lsc-flap's `width: var(--flap-w)` only sets its
	   CONTENT box — its 5px padding then adds another 10px on top of that
	   per flap, silently inflating the counter's actual rendered width
	   well past what all the sizing math below assumes. That's a latent
	   bug from before this round, harmless while the flaps were small
	   enough for the extra 10px/flap to go unnoticed, but the direct cause
	   of the counter overflowing once the flaps were sized up. */
	box-sizing: border-box;
}

.ugs-lsc {
	--ugs-lsc-accent: #c9401f;
	--ugs-lsc-digit-color: #e7ded0;
	position: relative;
	width: 100%;
	/* standard widget width — shared across the whole plugin family via
	   assets/css/base.css, never hardcoded per-widget */
	max-width: var(--ugs-widget-max-width, 420px);
	margin: 0 auto;
	/* nothing here clips — the counter overhangs on purpose, same rule as
	   the vinyl record on the Music Link widget */
	overflow: visible;
	/* The counter below sizes its flaps with cqw (container query width)
	   units against THIS box, not vw (viewport width) — vw tracks the
	   whole browser window, which on desktop is usually much wider than
	   this 420px-max widget, so vw-based sizing was hitting its max clamp
	   value and staying there regardless of how much room the widget
	   itself actually had, capping the counter small even in a full-width
	   placement. cqw scales with the widget's own box instead. */
	container-type: inline-size;
}

.ugs-lsc-flyer {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(160deg, #1a1512 0%, #0c0a08 60%, #050403 100%);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}

.ugs-lsc-flyer-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ugs-lsc-flyer-placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 20%, rgba(201, 64, 31, 0.28), transparent 55%),
		linear-gradient(160deg, #1a1512 0%, #0c0a08 60%, #050403 100%);
}

/* ---- glassy hover overlay: title / venue / address / tickets button ---- */

.ugs-lsc-flyer-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	text-align: center;
	/* Noise listed first (top layer) so it blends into the tint gradient
	   beneath it via overlay; the gradient itself just paints normally. */
	background-image: var(--ugs-glass-noise), linear-gradient(180deg, rgba(12, 9, 7, 0.3) 0%, rgba(12, 9, 7, 0.62) 100%);
	background-blend-mode: overlay, normal;
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: var(--ugs-glass-bevel);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.ugs-lsc-flyer:hover .ugs-lsc-flyer-overlay,
.ugs-lsc-flyer:focus-within .ugs-lsc-flyer-overlay {
	opacity: 1;
}

/* Touch devices have no hover state. Rather than showing the overlay
   permanently (which hid the flyer image entirely — the bug reported),
   a tap toggles a class via JS (live-widget.js) that reveals it, same as
   a hover would. First tap reveals; tapping the button then works
   normally, and tapping the flyer again hides it. */
.ugs-lsc-flyer.ugs-lsc-flyer-active .ugs-lsc-flyer-overlay {
	opacity: 1;
}

.ugs-lsc-caption {
	color: #f5efe6;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ugs-lsc-title {
	font-size: clamp(20px, 5.5vw, 28px);
	font-weight: 900;
	letter-spacing: 0.5px;
	margin-top: 2px;
}

.ugs-lsc-subtitle {
	font-size: 15.6px; /* bumped up from the original 13.4px */
	font-weight: 400;
	margin-top: 6px;
	color: #cbb9a8;
}

/* City/State now renders ABOVE the title (see render()) — sized larger than
   the title and set in the theme's own header font via the Typography
   control below, so it reads as the lead line of the caption. */
.ugs-lsc-address {
	font-size: clamp(24px, 6.5vw, 34px);
	font-weight: 700;
	margin-top: 0;
	color: var(--ugs-lsc-accent);
	letter-spacing: 0.3px;
}

.ugs-lsc-tickets-btn {
	display: inline-block;
	background: var(--ugs-lsc-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 14px 34px;
	border-radius: 999px;
	text-decoration: none;
	text-shadow: none; /* the button sits on the caption block, which sets
	                       a text-shadow that would otherwise be inherited */
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
	white-space: nowrap;
}

/* ==========================================================================
   COUNTER — a row of unit groups, each a strip of individual flap digits,
   pinned to the bottom-center of the flyer and hanging past its edge.
   ========================================================================== */

.ugs-lsc-counter {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100%;
	transform: translate(-50%, 42%);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(6px, 2.2cqw, 11px);
	z-index: 5;
}

/* The 4th group (seconds) adds a full extra flap-pair + colon to the row,
   so it gets a slightly tighter gap to leave room for it — but flap size
   itself now uses the SAME cqw scale as the 3-group layout (see
   .ugs-lsc-flap below) rather than a separately shrunken one, so the
   digits read at essentially the same size and the whole row still
   stretches out to use the widget's width, seconds or not. */
.ugs-lsc-has-seconds .ugs-lsc-counter {
	gap: clamp(3px, 1.6cqw, 8px);
}
.ugs-lsc-has-seconds .ugs-lsc-flaps {
	gap: 1px;
}
.ugs-lsc-has-seconds .ugs-lsc-unit-label {
	letter-spacing: 1.5px;
}

.ugs-lsc-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.ugs-lsc-flaps {
	display: flex;
	gap: 3px;
}

.ugs-lsc-unit-label {
	font-size: clamp(9px, 2.6cqw, 11px);
	letter-spacing: 2px;
	font-weight: 700;
	color: #cbb9a8;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.76);
}

.ugs-lsc-colon {
	align-self: center;
	margin-top: clamp(18px, 6vw, 26px);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ugs-lsc-colon span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #8a7a6c;
	display: block;
}

.ugs-lsc-ended-message {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 30%);
	background: #14110d;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #f5efe6;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.5px;
	padding: 12px 22px;
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.ugs-lsc.ugs-lsc-ended .ugs-lsc-counter > *:not(.ugs-lsc-ended-message) {
	display: none;
}

.ugs-lsc.ugs-lsc-ended .ugs-lsc-ended-message {
	display: block;
}

/* ==========================================================================
   FLAP DIGIT — the bolted metal plate: bezel, corner screws, rust freckles,
   scratches, a metal roller hinge, and a numeral with grime clipped to its
   own glyph shape.
   ========================================================================== */

.ugs-lsc-flap {
	/* cqw (see .ugs-lsc's container-type above) rather than vw, so this
	   scales with the widget's own box instead of the whole viewport, and
	   the same scale is used whether or not the seconds group is showing —
	   .ugs-lsc-has-seconds only tightens the GAPS between groups (above),
	   not the flaps themselves, so digits stay a consistent, legible size
	   either way and the row still stretches toward the widget's full width. */
	--flap-w: clamp(25px, 10.2cqw, 46px);
	--flap-h: clamp(35px, 14.1cqw, 64px);
	position: relative;
	width: var(--flap-w);
	height: var(--flap-h);
	border-radius: 8px;
	padding: 5px;
	background: linear-gradient(155deg, #5a5a56 0%, #3a3a37 40%, #232320 100%);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.ugs-lsc-panel {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	overflow: hidden;
	/* perspective has to live on the LEAF's direct parent to give its
	   rotateX() real foreshortening — it was previously two levels up on
	   .ugs-lsc-flap, which doesn't reach a grandchild, so the flip
	   rendered flat/warped instead of a convincing fold. */
	perspective: 240px;
	background:
		radial-gradient(ellipse 90% 60% at 30% 15%, rgba(255, 255, 255, 0.05), transparent 60%),
		linear-gradient(180deg, #201f1c 0%, #131211 55%, #0a0908 100%);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.8),
		inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* metal roller hinge across the middle */
.ugs-lsc-hinge-bar {
	position: absolute;
	left: 2px;
	right: 2px;
	top: 50%;
	height: 3px;
	transform: translateY(-50%);
	border-radius: 2px;
	background: linear-gradient(180deg, #8c8c86 0%, #4a4a46 45%, #2b2b28 55%, #6d6d68 100%);
	z-index: 6;
	pointer-events: none;
}
.ugs-lsc-hinge-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: rgba(0, 0, 0, 0.9);
	transform: translateY(-0.5px);
	z-index: 7;
	pointer-events: none;
}

/* corner screws */
.ugs-lsc-screw {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: linear-gradient(135deg, #cfcfca 0%, #8a8a84 35%, #4c4c48 70%, #2a2a27 100%);
	box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.7);
	z-index: 8;
	pointer-events: none;
}
.ugs-lsc-flap .ugs-lsc-screw:nth-of-type(1) { top: 2px; left: 2px; }
.ugs-lsc-flap .ugs-lsc-screw:nth-of-type(2) { top: 2px; right: 2px; }
.ugs-lsc-flap .ugs-lsc-screw:nth-of-type(3) { bottom: 2px; left: 2px; }
.ugs-lsc-flap .ugs-lsc-screw:nth-of-type(4) { bottom: 2px; right: 2px; }

.ugs-lsc-rust {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--ugs-lsc-accent) 65%, transparent) 0%, transparent 75%);
	z-index: 4;
	pointer-events: none;
	opacity: 0.55;
}
.ugs-lsc-flap .ugs-lsc-rust:nth-of-type(1) { width: 9px; height: 9px; top: 0; left: 0; }
.ugs-lsc-flap .ugs-lsc-rust:nth-of-type(2) { width: 7px; height: 7px; top: 0; right: 0; }
.ugs-lsc-flap .ugs-lsc-rust:nth-of-type(3) { width: 6px; height: 6px; bottom: 0; left: 0; }
.ugs-lsc-flap .ugs-lsc-rust:nth-of-type(4) { width: 8px; height: 8px; bottom: 0; right: 0; }

.ugs-lsc-scratch {
	position: absolute;
	background: rgba(255, 255, 255, 0.08);
	z-index: 4;
	pointer-events: none;
}
.ugs-lsc-scratch.ugs-lsc-scratch-dark { background: rgba(0, 0, 0, 0.3); }

/* ---- the numeral itself, split top/bottom, with grime clipped to glyph ---- */

.ugs-lsc-face {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	overflow: hidden;
	z-index: 1;
}
.ugs-lsc-face-top { top: 0; }
.ugs-lsc-face-bottom { bottom: 0; }

.ugs-lsc-num-inner {
	position: absolute;
	left: 0;
	right: 0;
	height: 200%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ugs-lsc-face-top .ugs-lsc-num-inner { top: 0; }
.ugs-lsc-face-bottom .ugs-lsc-num-inner { top: -100%; }

.ugs-lsc-num-inner span,
.ugs-lsc-glyph {
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Black', sans-serif;
	font-weight: 900;
	/* The rendered glyph box is ~1:1 with font-size at line-height:1, and we
	   want the FULL digit (both halves stacked) to fill the panel's height
	   exactly — so font-size tracks the flap height itself, not a multiple
	   of it. (A larger multiplier here was overflowing past each card's
	   edges on both axes — this is the fix for that.) */
	font-size: calc(var(--flap-h) * 0.94);
	line-height: 1;
	color: var(--ugs-lsc-digit-color);
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.45);
}

/* grime stains clipped to the digit's own glyph shape, not just the
   background — opacity dropped ~5 points across the board so it reads as
   worn rather than dirty. */
.ugs-lsc-num-inner .ugs-lsc-grime {
	color: transparent;
	background:
		radial-gradient(circle 30% at 35% 30%, rgba(30, 20, 10, 0.5), transparent 70%),
		radial-gradient(circle 35% at 68% 65%, rgba(20, 15, 10, 0.4), transparent 70%),
		linear-gradient(200deg, transparent 40%, rgba(20, 15, 10, 0.25) 55%, transparent 70%);
	-webkit-background-clip: text;
	background-clip: text;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- the animated leaf: duplicate of the top half, flips down/away ---- */

.ugs-lsc-leaf {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 50%;
	overflow: hidden;
	transform-origin: bottom center;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	z-index: 3;
	/* The flip itself (a two-legged rotateX swing so it reads as one
	   continuous fold instead of a fade-then-teleport) is driven entirely
	   by inline styles from live-widget.js, since each leg needs its own
	   duration/easing and an instant, transition-free re-arm between them —
	   easier to get right in JS than to coordinate through CSS classes. */
}
.ugs-lsc-leaf::after {
	/* subtle fold shadow toward the hinge, sells the depth of the flip */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
}
.ugs-lsc-leaf .ugs-lsc-num-inner { top: 0; }

/* ---- the bottom half's own leaf: mirrors .ugs-lsc-leaf, hinged at the
   opposite edge, so the WHOLE digit visibly flips rather than just its
   top — previously the bottom half's glyph just swapped instantly with
   no motion at all. ---- */
.ugs-lsc-leaf-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	overflow: hidden;
	transform-origin: top center;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	z-index: 3;
	/* Driven by inline styles from live-widget.js — see the comment on
	   .ugs-lsc-leaf above, and animateLeaf() in live-widget.js. */
}
.ugs-lsc-leaf-bottom::after {
	/* fold shadow toward the hinge, mirrored to fall from the top edge */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
}
.ugs-lsc-leaf-bottom .ugs-lsc-num-inner { top: -100%; }

@media (prefers-reduced-motion: reduce) {
	/* Defense in depth — live-widget.js already skips the animated path
	   entirely for reduced motion, but this guards against any inline
	   transition it might still set. */
	.ugs-lsc-leaf,
	.ugs-lsc-leaf-bottom { transition: none !important; }
}

@media (max-width: 480px) {
	.ugs-lsc-counter { transform: translate(-50%, 36%); }
}