/* =========================================================
   CMTS Resource Hub — hub.css  (WCAG 2.1 AA compliant)
   v2.7 — editorial two-column layout with proper whitespace

   Each webinar entry (.cmts-webinar-block) has three
   stacked layers:

     ┌─ .cmts-entry-header ──────────────────────────────┐
     │  h3 title                    [Format]  30min  Date │
     └───────────────────────────────────────────────────┘
                  ↕  24px gap

     ┌─ .cmts-entry-row (CSS Grid) ──────────────────────┐
     │  .cmts-video-pane   ║  .cmts-info-card            │
     │  ┌──────────────┐   ║  desc                       │
     │  │  iframe      │   ║  TOPICS COVERED             │
     │  │  16:9 / 500w │   ║  • item                     │
     │  └──────────────┘   ║  [tag]                      │
     │                     ║  PRESENTERS                 │
     │                     ║  Name · Role · Dept         │
     │                     ║  ──────────────             │
     │                     ║  [▶ Watch] [Slides]         │
     └───────────────────────────────────────────────────┘
                  ↕  48px + border-top (between entries)

   Whitespace principles:
   - Header ↔ row: 24px margin (intentional breath before content)
   - Video ↔ card: 28px column-gap (clear separation, not a border)
   - Entry ↔ entry: 52px padding + 2px rule (definitive section end)
   - Card internal: consistent 20px padding, 14px section gaps

   TAMU brand: maroon #500000 | dark-gray #2a2a2a
   WCAG 2.1 AA — all criteria maintained throughout.
   ========================================================= */

/* ── Custom properties ──────────────────────────────────── */
.cmts-resource-hub {
	--cmts-maroon:       #500000;
	--cmts-maroon-hover: #3a0000;
	--cmts-maroon-dim:   rgba(80,0,0,.07);
	--cmts-gray:         #2a2a2a;   /* 15.3:1 on white */
	--cmts-gray-mid:     #595959;   /* 7.0:1  on white */
	--cmts-gray-light:   #f5f5f5;
	--cmts-border:       #d0d0d0;   /* ≥3:1 UI boundary (1.4.11) */
	--cmts-focus:        #005fcc;   /* 4.5:1 on white */
	--cmts-video-w:      500px;
	--cmts-radius:       6px;
	--cmts-gap-h:        24px;      /* header ↔ row */
	--cmts-gap-col:      28px;      /* video ↔ card column gap */
	--cmts-gap-entry:    52px;      /* between entries */
	font-family: inherit;
}

/* ── SR utility ─────────────────────────────────────────── */
.cmts-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Live region (4.1.3) ────────────────────────────────── */
.cmts-live-region {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════ */
.cmts-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 36px;
}

/* 1.4.1 active = color+underline+aria-pressed (not color alone)
   2.5.8 min 44px | 2.4.7 :focus-visible */
.cmts-chip {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0 18px;
	min-height: 44px;
	border-radius: 22px;
	border: 2px solid var(--cmts-maroon);
	background: transparent;
	color: var(--cmts-maroon);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}
@media (prefers-reduced-motion: no-preference) {
	.cmts-chip { transition: background 0.15s, color 0.15s; }
}
.cmts-chip:hover                { background: var(--cmts-maroon); color: #fff; }
.cmts-chip[aria-pressed="true"] { background: var(--cmts-maroon); color: #fff;
                                   text-decoration: underline; text-underline-offset: 2px; }
.cmts-chip:focus-visible        { outline: 3px solid var(--cmts-focus); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════
   GRID — vertical list of webinar entries
   ══════════════════════════════════════════════════════════ */
.cmts-grid {
	display: flex;
	flex-direction: column;
}

/* ══════════════════════════════════════════════════════════
   WEBINAR BLOCK
   Each entry is a self-contained layout unit.
   ══════════════════════════════════════════════════════════ */
.cmts-webinar-block {
	padding-bottom: var(--cmts-gap-entry);
}

/* Ruled divider between entries */
.cmts-webinar-block + .cmts-webinar-block {
	padding-top: var(--cmts-gap-entry);
	border-top: 2px solid var(--cmts-border);
}

.cmts-webinar-block.cmts-hidden { display: none; }

/* ══════════════════════════════════════════════════════════
   ① ENTRY HEADER
   Full-width title + meta. Stands alone above the row,
   separated by --cmts-gap-h of whitespace.
   ══════════════════════════════════════════════════════════ */
.cmts-entry-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: var(--cmts-gap-h);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cmts-border);
}

/* 1.3.1 — h3 (section heading above this is h2) */
.cmts-title {
	font-size: 1.0625rem;    /* 17px — prominent but not dominant */
	font-weight: 700;
	color: var(--cmts-gray);
	line-height: 1.3;
	margin: 0;
	flex: 1;
}

/* Meta cluster: format · duration · date */
.cmts-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* Format pill — white on maroon = 9.3:1 */
.cmts-meta-badge {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--cmts-maroon);
	color: #fff;
	padding: 3px 9px;
	border-radius: 3px;
	white-space: nowrap;
}

/* Duration + date — #595959 on white = 7.0:1 */
.cmts-meta-duration,
.cmts-meta-recorded {
	font-size: 0.8125rem;
	color: var(--cmts-gray-mid);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* "Duration:" / "Recorded:" label prefix — slightly lighter weight */
.cmts-meta-label {
	font-weight: 600;
	color: var(--cmts-gray-mid);
}

/* Separator dot between duration and date */
.cmts-meta-duration + .cmts-meta-recorded::before {
	content: '·';
	margin: 0 6px;
	color: var(--cmts-border);
}

/* Keep legacy .cmts-recorded for the <time> inside .cmts-meta-recorded */
.cmts-recorded {
	font-size: inherit;
	color: inherit;
}

/* ══════════════════════════════════════════════════════════
   ② ENTRY ROW — video pane + info card, side by side
   Column gap is whitespace only (no border/line) so the two
   elements feel related but clearly distinct.
   ══════════════════════════════════════════════════════════ */
.cmts-entry-row {
	display: grid;
	grid-template-columns: var(--cmts-video-w) 1fr;
	column-gap: var(--cmts-gap-col);
	align-items: start;
}

/* When there is no video, info card goes full width */
.cmts-entry-row:not(:has(.cmts-video-pane)) {
	grid-template-columns: 1fr;
}

/* ── Video pane — standalone, not part of the card ─────── */
.cmts-video-pane {
	/* Sticky so the video stays visible while scrolling tall card content */
	position: sticky;
	top: 24px;
}

.cmts-embed-wrap {
	border-radius: var(--cmts-radius);
	overflow: hidden;
	background: #0d0d0d;
	box-shadow:
		0 2px 8px  rgba(0,0,0,.18),
		0 8px 24px rgba(0,0,0,.12);
	line-height: 0;
}

/* Aspect-ratio iframe — fills its column naturally */
.cmts-embed {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
}

/* Static image fallback */
.cmts-embed-wrap img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Info card — bordered panel on the right ────────────── */
.cmts-info-card {
	background: #fff;
	border: 1px solid var(--cmts-border);
	border-top: 3px solid var(--cmts-maroon);
	border-radius: var(--cmts-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.cmts-info-card { transition: box-shadow 0.15s; }
	.cmts-webinar-block:hover .cmts-info-card {
		box-shadow: 0 4px 20px rgba(0,0,0,.08);
	}
}

/* Card interior — flex column with consistent gaps */
.cmts-info-body {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}

/* Description — #595959 on white = 7.0:1 */
.cmts-desc {
	font-size: 0.875rem;
	color: var(--cmts-gray-mid);
	line-height: 1.65;
	margin: 0;
}

/* ── Topics — always-visible labeled list ────────────────── */
.cmts-topics {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Eyebrow label with maroon left rule */
.cmts-topics-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cmts-maroon);   /* 9.3:1 on white */
	margin: 0;
	padding-left: 8px;
	border-left: 3px solid var(--cmts-maroon);
}

/* #2a2a2a on white = 15.3:1 */
.cmts-topics-list {
	margin: 0;
	padding: 0 0 0 1.25em;
	font-size: 0.8125rem;
	color: var(--cmts-gray);
	line-height: 1.75;
	list-style: disc;
}

/* ── Taxonomy tags ───────────────────────────────────────── */
.cmts-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* #595959 on #f5f5f5 = 6.2:1 */
.cmts-tag {
	font-size: 0.6875rem;
	padding: 3px 10px;
	border-radius: 12px;
	background: var(--cmts-gray-light);
	color: var(--cmts-gray-mid);
	border: 1px solid var(--cmts-border);
}

/* ── Presenters ──────────────────────────────────────────── */
.cmts-presenters {
	display: flex;
	flex-direction: column;
	padding: 14px 16px;
	background: var(--cmts-maroon-dim);
	border-radius: 5px;
	border: 1px solid rgba(80,0,0,.14);
}

/* Eyebrow label — same style as topics label */
.cmts-presenters-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cmts-maroon);
	margin: 0 0 10px;
	padding-left: 8px;
	border-left: 3px solid var(--cmts-maroon);
}

.cmts-presenter-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 0;
}
.cmts-presenter-item:first-of-type { padding-top: 0; }

/* Visible rule between multiple presenters — rgba so it tints correctly */
.cmts-presenter-divider {
	border: none;
	border-top: 1px solid rgba(80,0,0,.15);
	margin: 0;
}

/* #2a2a2a on dim bg = 13.5:1 */
.cmts-presenter-name {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--cmts-gray);
	line-height: 1.3;
}

/* #595959 on dim bg = 6.4:1 */
.cmts-presenter-role {
	font-size: 0.8125rem;
	color: var(--cmts-gray-mid);
	line-height: 1.4;
}

.cmts-presenter-dept {
	font-size: 0.75rem;
	color: var(--cmts-gray-mid);
	font-style: italic;
	line-height: 1.4;
}

/* ── Action buttons ──────────────────────────────────────── */
/* 2.5.8 min 44px | 2.4.7 :focus-visible */
.cmts-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 22px;
	border-top: 1px solid var(--cmts-border);
	background: var(--cmts-gray-light);
}

.cmts-btn {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0 16px;
	min-height: 44px;
	border-radius: 6px;
	border: 2px solid var(--cmts-maroon);
	background: var(--cmts-maroon);
	color: #fff;             /* 9.3:1 */
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
	.cmts-btn { transition: background 0.15s, color 0.15s, border-color 0.15s; }
}
.cmts-btn:hover         { background: var(--cmts-maroon-hover); border-color: var(--cmts-maroon-hover); }
.cmts-btn:focus-visible { outline: 3px solid var(--cmts-focus); outline-offset: 3px; }
.cmts-btn svg           { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; pointer-events: none; }

/* #500000 on white = 9.3:1 */
.cmts-btn-outline       { background: #fff; color: var(--cmts-maroon); }
.cmts-btn-outline:hover { background: var(--cmts-maroon); color: #fff; }

/* ── No results ─────────────────────────────────────────── */
.cmts-no-results {
	font-style: italic;
	color: var(--cmts-gray-mid);
	font-size: 0.875rem;
	padding: 2rem 0;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Medium — narrow video column */
@media (max-width: 960px) {
	.cmts-resource-hub { --cmts-video-w: 380px; --cmts-gap-col: 20px; }
}

/* Small — header stays full width; row stacks video above card */
@media (max-width: 680px) {
	.cmts-resource-hub {
		--cmts-gap-h:      16px;
		--cmts-gap-entry:  36px;
	}

	.cmts-entry-row {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	/* Unstick video on mobile — no viewport height to spare */
	.cmts-video-pane { position: static; }

	.cmts-entry-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.cmts-card-meta { flex-wrap: wrap; }
}