/*
 * Heat Check Online — event and replay cards. Every rule is scoped to .hco so the theme and Elementor sections are
 * untouched; fonts are inherited from the site. Heat Check identity: black/charcoal, white type, restrained red.
 * Colour contrast is WCAG AA or better (body text ≥ 7:1, buttons ≥ 4.5:1). Columns follow the width the shortcode
 * actually has (container queries), so a listing in a narrow Elementor column or theme content area never squeezes
 * cards. The listing heading sits on the page itself and takes the theme's colour; override with --hco-heading-color.
 */
.hco {
	--hco-bg: #0b0b0e;
	--hco-card: #16161b;
	--hco-card-2: #1d1d23;
	--hco-line: #2c2c35;
	--hco-text: #f4f4f6;
	--hco-muted: #b9b9c3;
	--hco-red: #d4140b;
	--hco-red-bright: #ff3b30;
	--hco-amber: #ffcf6b;
	--hco-green: #7ee2a8;
	--hco-radius: 14px;
	--hco-gap: 20px;
	--hco-cols: 3;
	box-sizing: border-box;
	line-height: 1.45;
	width: 100%;
	container-type: inline-size;
}
.hco + .hco { margin-top: 2.5rem; }
.hco *, .hco *::before, .hco *::after { box-sizing: inherit; }
.hco :where(h2, h3, h4, p, ul, li, figure) { margin: 0; padding: 0; }
.hco :where(ul) { list-style: none; }
.hco .hco-heading { font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; margin: 0 0 18px; color: var(--hco-heading-color, inherit); }

/* Layout */
.hco .hco-grid { display: grid; gap: var(--hco-gap); grid-template-columns: repeat(var(--hco-cols), minmax(0, 1fr)); }
.hco.hco-layout-list .hco-grid { grid-template-columns: minmax(0, 1fr); }
.hco .hco-item { display: flex; min-width: 0; }

/* Cards */
.hco .hco-card { display: flex; flex-direction: column; gap: 12px; width: 100%; color: var(--hco-text); background: var(--hco-card); border: 1px solid var(--hco-line); border-radius: var(--hco-radius); padding: 22px; min-width: 0; }
.hco .hco-card.is-live { border-color: var(--hco-red); box-shadow: 0 0 0 1px var(--hco-red) inset; }
.hco .hco-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hco .hco-kicker { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hco-muted); }
.hco .hco-card-title { font-weight: 800; font-size: 1.25rem; line-height: 1.25; color: var(--hco-text); overflow-wrap: anywhere; }
.hco .hco-desc { color: var(--hco-muted); font-size: 0.97rem; overflow-wrap: anywhere; }
.hco .hco-meta { display: grid; gap: 4px; color: var(--hco-text); font-size: 0.95rem; }
.hco .hco-meta li { overflow-wrap: anywhere; }
.hco .hco-meta li + li { color: var(--hco-muted); }

/* Badges */
.hco .hco-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--hco-line); color: var(--hco-text); background: var(--hco-card-2); max-width: 100%; }
.hco .hco-badge-live { background: var(--hco-red); border-color: var(--hco-red); color: #fff; }
.hco .hco-badge-confirmed { color: var(--hco-green); border-color: #2c6b48; }
.hco .hco-badge-pending { color: var(--hco-amber); border-color: #7a6020; text-transform: none; letter-spacing: 0.02em; }
.hco .hco-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: hco-pulse 1.4s ease-in-out infinite; }
@keyframes hco-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .hco .hco-dot { animation: none; } }

/* Buttons */
.hco .hco-btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: 10px; background: var(--hco-red); border: 1px solid var(--hco-red); color: #fff; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; font-size: 0.95rem; line-height: 1.2; transition: background-color 0.15s ease; }
.hco .hco-btn:hover { background: #b0100a; color: #fff; text-decoration: none; }
.hco .hco-btn:focus-visible, .hco a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hco .hco-btn-live { background: #fff; border-color: #fff; color: #0b0b0e; }
.hco .hco-btn-live:hover { background: #e6e6ea; color: #0b0b0e; }

/* Featured (next event) */
.hco.hco-next .hco-card { padding: 26px 28px; gap: 14px; }
.hco.hco-next .hco-card-title { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }

/* Replays */
.hco .hco-replay-card { padding: 0; overflow: hidden; gap: 0; }
.hco .hco-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.hco .hco-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hco .hco-thumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; letter-spacing: 0.08em; color: var(--hco-red-bright); }
.hco .hco-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }

/* States */
.hco .hco-message { background: var(--hco-card); border: 1px solid var(--hco-line); border-radius: var(--hco-radius); padding: 22px; color: var(--hco-muted); }
.hco .hco-unavailable { border-style: dashed; }
.hco .hco-admin-note { margin-top: 10px; padding: 10px 14px; border-radius: 10px; border: 1px dashed #7a6020; background: #2a2109; color: var(--hco-amber); font-size: 0.88rem; }
.hco .hco-preview-banner { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #3a0c0a; border: 1px solid var(--hco-red); color: #fff; font-weight: 800; letter-spacing: 0.04em; font-size: 0.85rem; }

/* Responsive: by the listing's own width */
@container (max-width: 1099px) {
	.hco .hco-grid { grid-template-columns: repeat(min(var(--hco-cols), 3), minmax(0, 1fr)); }
}
@container (max-width: 819px) {
	.hco .hco-grid { grid-template-columns: repeat(min(var(--hco-cols), 2), minmax(0, 1fr)); }
}
@container (max-width: 539px) {
	.hco .hco-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.hco .hco-card { padding: 18px; }
	.hco .hco-btn { align-self: stretch; }
	.hco.hco-next .hco-card { padding: 20px; }
}
/* Browsers without container queries (before 2023): by the viewport */
@supports not (container-type: inline-size) {
	@media (max-width: 1024px) {
		.hco .hco-grid { grid-template-columns: repeat(min(var(--hco-cols), 2), minmax(0, 1fr)); }
	}
	@media (max-width: 640px) {
		.hco .hco-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
		.hco .hco-card { padding: 18px; }
		.hco .hco-btn { align-self: stretch; }
	}
}