/* ca-consolidations.css: month grid of topic cards (Aeon-style). Colours come from tokens.css so dark theme works. */
#cac-panels { padding: 8px 4px 80px; }
.cac-panel[hidden] { display: none !important; }
.cac-head { text-align: center; margin: 28px 0 48px; }
.cac-head h1 { margin: 0; font: 700 clamp(32px, 3.6vw, 46px)/1.1 'Source Serif 4', Georgia, serif; color: var(--vx-title); letter-spacing: -.01em; }
.cac-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 24px; max-width: 1500px; margin: 0 auto; }
@media (max-width: 1280px) { .cac-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .cac-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 18px; } }
@media (max-width: 560px) { .cac-grid { grid-template-columns: 1fr; gap: 36px; } .cac-head { margin: 12px 0 32px; } }
.cac-empty { text-align: center; padding: 28px 0; font-size: 14px; color: var(--vx-muted-2); }
.cac-card { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cac-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cac-tint, var(--vx-sel)); }
.cac-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease, transform .5s ease; }
.cac-img img.ok { opacity: 1; }
.cac-card:hover .cac-img img.ok { transform: scale(1.03); }
.cac-meta { display: flex; align-items: center; gap: 7px; margin: 16px 0 9px; font: 400 13px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--vx-text); }
.cac-meta svg { width: 14px; height: 16px; flex: none; }
.cac-meta .sl, .cac-meta .mo { color: var(--vx-muted); }
.cac-card h2 { margin: 0; font: 700 clamp(20px, 1.6vw, 24px)/1.2 'Source Serif 4', Georgia, serif; color: var(--vx-title); }
.cac-card:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cac-card:hover .cac-meta .gn { color: var(--vx-red); }
.cac-card:focus-visible { outline: 2px solid var(--vx-red); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .cac-img img { transition: none; } }

/* Locked topic (paid pack not owned): image recedes, lock badge, muted title. Colours from the shared --vx-lock-* tokens. */
.cac-lock { display: none; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: var(--vx-lock-badge-bg); color: var(--vx-lock-badge-icon); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.cac-lock svg { width: 15px; height: 15px; }
.cac-card[data-locked="1"] .cac-lock { display: flex; }
.cac-card[data-locked="1"] .cac-img img, .cac-card[data-locked="1"] .cac-img img.ok { filter: grayscale(.9) brightness(.92); opacity: .42; }
.cac-card[data-locked="1"]:hover .cac-img img.ok { transform: none; }
.cac-card[data-locked="1"] h2, .cac-card[data-locked="1"] .cac-meta, .cac-card[data-locked="1"] .cac-meta .gn { color: var(--vx-lock-title); }

.vx-content { padding: 28px 32px 56px; }
@media (max-width: 700px) { .vx-content { padding: 18px 18px 48px; } }

/* Free demo badge: a topic a student without the pack may still read */
.cac-freetag { display: none; position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--vx-pill-bg); color: var(--vx-pill-text); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.cac-card[data-free="1"] .cac-freetag { display: block; }