/* =============================================================================
   Online CPD Academy — catalogue-site additive layer.
   Loaded AFTER styles.css + a11y.css so the shared design system stays identical
   with the other OCA sites. Adds only the components a multi-course hub needs:
   category cards, the courses catalogue + filter, pillar heros and a Trustpilot
   strip. All built on the existing design tokens.
   ============================================================================= */

/* ---- Category cards (home + pillars) ---------------------------------------- */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.cat-card { position:relative; display:flex; flex-direction:column; gap:10px; padding:var(--s-6); background:#fff;
  border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cat-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--c-brand); }
.cat-card .cat-ico { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--c-brand-soft); color:var(--c-brand); margin-bottom:6px; }
.cat-card h3 { font-size:1.2rem; }
.cat-card p { color:var(--c-ink-soft); font-size:.95rem; flex:1; }
.cat-card .cat-count { font-size:var(--fs-small); font-weight:700; color:var(--c-brand); }
.cat-card .cat-link { font-weight:700; color:var(--c-brand); font-size:.95rem; margin-top:4px; display:inline-flex; align-items:center; gap:6px; }
.cat-card .cat-cover { position:absolute; inset:0; z-index:1; } /* whole card clickable */

/* ---- Catalogue filter ------------------------------------------------------- */
.cat-filter { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:var(--s-6); }
.cat-chip { border:1.5px solid var(--c-line); background:#fff; color:var(--c-ink); font:inherit; font-weight:600;
  font-size:var(--fs-small); padding:8px 16px; border-radius:999px; cursor:pointer; transition:all var(--dur) var(--ease); }
.cat-chip:hover { border-color:var(--c-brand); color:var(--c-brand-dark); }
.cat-chip.is-active { background:var(--c-brand); border-color:var(--c-brand); color:#fff; }
.course.is-hidden { display:none; }
.catalogue-count { text-align:center; color:var(--c-muted); font-size:var(--fs-small); margin-bottom:var(--s-5); }

/* course card price+meta row helpers (reuse .course from styles.css) */
.course-meta-row { display:flex; align-items:center; gap:10px; font-size:var(--fs-xsmall); color:var(--c-muted); margin-bottom:6px; }
.course-meta-row .dot { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }

/* ---- Pillar hero ------------------------------------------------------------ */
.pillar-hero { background:linear-gradient(160deg, var(--c-brand-dark), #061d34); color:#fff; padding:calc(var(--nav-h) + var(--s-8)) 0 var(--s-8); }
.pillar-hero .container { max-width:880px; }
.pillar-hero .eyebrow { color:#8fd4f3; }
.pillar-hero h1 { color:#fff; font-size:clamp(2rem,4vw,2.9rem); line-height:1.1; margin:.4rem 0; }
.pillar-hero p { color:rgba(255,255,255,.85); font-size:1.1rem; max-width:680px; }
.pillar-hero .pillar-hero-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:var(--s-5); font-size:var(--fs-small); }
.pillar-hero .pillar-hero-meta span { display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.9); }

/* ---- Trustpilot / rating strip ---------------------------------------------- */
.tp-strip { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; }
.tp-strip img { height:26px; width:auto; }
.tp-stars { display:inline-flex; gap:3px; }
.tp-stars span { width:22px; height:22px; background:#00b67a; display:inline-flex; align-items:center; justify-content:center; border-radius:3px; color:#fff; }
.tp-strip .tp-text { font-size:var(--fs-small); color:var(--c-ink-soft); }
.tp-strip .tp-text strong { color:var(--c-ink); }

/* ---- Stats / outcome band (pillars + home) ---------------------------------- */
.stat-band { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); text-align:center; }
.stat-band .stat b { display:block; font-size:2rem; font-weight:800; color:var(--c-brand-dark); line-height:1; }
.stat-band .stat span { font-size:var(--fs-small); color:var(--c-ink-soft); }

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr);} .stat-band{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .cat-grid{ grid-template-columns:1fr;} }

/* Course card thumbnails: 16:9 so banner-style course images (with baked-in
   text) are not cropped on the sides; photos still crop gracefully. */
.course-thumb { aspect-ratio: 16 / 9; }
/* Stopgap: the First Aid course image is portrait (1007x1343) and crops badly
   in the 16:9 card — shift the focal point up so the head stays in frame.
   A proper landscape image is still recommended. */
.course-thumb img[src*="online-first-aid-course"] { object-position: center 22%; }

/* ---- "Which course do you need?" finder (pillar pages) -------------------- */
.finder { max-width:880px; margin-inline:auto; }
.finder-options { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:var(--s-5); }
.finder-opt { text-align:left; border:1.5px solid var(--c-line); background:#fff; border-radius:var(--r-md); padding:14px 16px; font:inherit; font-weight:600; font-size:.95rem; color:var(--c-ink); cursor:pointer; display:flex; align-items:center; gap:11px; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.finder-opt::before { content:""; width:18px; height:18px; border-radius:50%; border:2px solid var(--c-line); flex-shrink:0; transition:all var(--dur) var(--ease); }
.finder-opt:hover { border-color:var(--c-brand); background:var(--c-brand-soft); }
.finder-opt.is-active { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder-opt.is-active::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder-result { background:#fff; border:1px solid var(--c-line); border-left:4px solid var(--c-brand); border-radius:var(--r-md); padding:var(--s-5); box-shadow:var(--sh-sm); display:flex; gap:var(--s-4); align-items:center; }
.finder-result img { width:130px; height:84px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.finder-result-body { flex:1; min-width:0; }
.finder-result .rec-label { font-size:var(--fs-xsmall); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--c-brand); display:block; }
.finder-result h3 { font-size:1.15rem; margin:3px 0 5px; }
.finder-result p { font-size:.9rem; color:var(--c-ink-soft); margin-bottom:12px; }
.finder-result .rec-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.finder-result .rec-price { font-weight:800; color:var(--c-brand-dark); font-size:1.05rem; }
@media (max-width:640px){ .finder-options{ grid-template-columns:1fr; } .finder-result{ flex-direction:column; text-align:center; } .finder-result img{ width:100%; max-width:260px; } .finder-result .rec-actions{ justify-content:center; } }

/* Finder: show ONLY the selected recommendation — the hidden attribute must win
   over .finder-result's display:flex. */
.finder-result[hidden] { display: none !important; }

/* Finder native (radio + :checked) — JS-free. Radios sit as direct children of
   .finder (before .finder-options); each reveals its matching .finder-result. */
.finder-radio { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.finder .finder-result { display:none; }
.finder #opt-fire-safety-courses-0:checked ~ #rec-fire-safety-courses-0 { display:flex; }
.finder:has(#opt-fire-safety-courses-0:checked) label.finder-opt[for="opt-fire-safety-courses-0"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-fire-safety-courses-0:checked) label.finder-opt[for="opt-fire-safety-courses-0"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-fire-safety-courses-0:focus-visible) label.finder-opt[for="opt-fire-safety-courses-0"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-fire-safety-courses-1:checked ~ #rec-fire-safety-courses-1 { display:flex; }
.finder:has(#opt-fire-safety-courses-1:checked) label.finder-opt[for="opt-fire-safety-courses-1"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-fire-safety-courses-1:checked) label.finder-opt[for="opt-fire-safety-courses-1"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-fire-safety-courses-1:focus-visible) label.finder-opt[for="opt-fire-safety-courses-1"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-fire-safety-courses-2:checked ~ #rec-fire-safety-courses-2 { display:flex; }
.finder:has(#opt-fire-safety-courses-2:checked) label.finder-opt[for="opt-fire-safety-courses-2"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-fire-safety-courses-2:checked) label.finder-opt[for="opt-fire-safety-courses-2"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-fire-safety-courses-2:focus-visible) label.finder-opt[for="opt-fire-safety-courses-2"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-food-hygiene-courses-0:checked ~ #rec-food-hygiene-courses-0 { display:flex; }
.finder:has(#opt-food-hygiene-courses-0:checked) label.finder-opt[for="opt-food-hygiene-courses-0"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-food-hygiene-courses-0:checked) label.finder-opt[for="opt-food-hygiene-courses-0"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-food-hygiene-courses-0:focus-visible) label.finder-opt[for="opt-food-hygiene-courses-0"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-food-hygiene-courses-1:checked ~ #rec-food-hygiene-courses-1 { display:flex; }
.finder:has(#opt-food-hygiene-courses-1:checked) label.finder-opt[for="opt-food-hygiene-courses-1"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-food-hygiene-courses-1:checked) label.finder-opt[for="opt-food-hygiene-courses-1"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-food-hygiene-courses-1:focus-visible) label.finder-opt[for="opt-food-hygiene-courses-1"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-food-hygiene-courses-2:checked ~ #rec-food-hygiene-courses-2 { display:flex; }
.finder:has(#opt-food-hygiene-courses-2:checked) label.finder-opt[for="opt-food-hygiene-courses-2"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-food-hygiene-courses-2:checked) label.finder-opt[for="opt-food-hygiene-courses-2"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-food-hygiene-courses-2:focus-visible) label.finder-opt[for="opt-food-hygiene-courses-2"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-food-hygiene-courses-3:checked ~ #rec-food-hygiene-courses-3 { display:flex; }
.finder:has(#opt-food-hygiene-courses-3:checked) label.finder-opt[for="opt-food-hygiene-courses-3"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-food-hygiene-courses-3:checked) label.finder-opt[for="opt-food-hygiene-courses-3"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-food-hygiene-courses-3:focus-visible) label.finder-opt[for="opt-food-hygiene-courses-3"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-food-hygiene-courses-4:checked ~ #rec-food-hygiene-courses-4 { display:flex; }
.finder:has(#opt-food-hygiene-courses-4:checked) label.finder-opt[for="opt-food-hygiene-courses-4"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-food-hygiene-courses-4:checked) label.finder-opt[for="opt-food-hygiene-courses-4"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-food-hygiene-courses-4:focus-visible) label.finder-opt[for="opt-food-hygiene-courses-4"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-health-and-safety-courses-0:checked ~ #rec-health-and-safety-courses-0 { display:flex; }
.finder:has(#opt-health-and-safety-courses-0:checked) label.finder-opt[for="opt-health-and-safety-courses-0"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-health-and-safety-courses-0:checked) label.finder-opt[for="opt-health-and-safety-courses-0"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-health-and-safety-courses-0:focus-visible) label.finder-opt[for="opt-health-and-safety-courses-0"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-health-and-safety-courses-1:checked ~ #rec-health-and-safety-courses-1 { display:flex; }
.finder:has(#opt-health-and-safety-courses-1:checked) label.finder-opt[for="opt-health-and-safety-courses-1"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-health-and-safety-courses-1:checked) label.finder-opt[for="opt-health-and-safety-courses-1"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-health-and-safety-courses-1:focus-visible) label.finder-opt[for="opt-health-and-safety-courses-1"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-health-and-safety-courses-2:checked ~ #rec-health-and-safety-courses-2 { display:flex; }
.finder:has(#opt-health-and-safety-courses-2:checked) label.finder-opt[for="opt-health-and-safety-courses-2"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-health-and-safety-courses-2:checked) label.finder-opt[for="opt-health-and-safety-courses-2"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-health-and-safety-courses-2:focus-visible) label.finder-opt[for="opt-health-and-safety-courses-2"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-health-and-safety-courses-3:checked ~ #rec-health-and-safety-courses-3 { display:flex; }
.finder:has(#opt-health-and-safety-courses-3:checked) label.finder-opt[for="opt-health-and-safety-courses-3"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-health-and-safety-courses-3:checked) label.finder-opt[for="opt-health-and-safety-courses-3"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-health-and-safety-courses-3:focus-visible) label.finder-opt[for="opt-health-and-safety-courses-3"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-health-and-safety-courses-4:checked ~ #rec-health-and-safety-courses-4 { display:flex; }
.finder:has(#opt-health-and-safety-courses-4:checked) label.finder-opt[for="opt-health-and-safety-courses-4"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-health-and-safety-courses-4:checked) label.finder-opt[for="opt-health-and-safety-courses-4"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-health-and-safety-courses-4:focus-visible) label.finder-opt[for="opt-health-and-safety-courses-4"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-health-and-safety-courses-5:checked ~ #rec-health-and-safety-courses-5 { display:flex; }
.finder:has(#opt-health-and-safety-courses-5:checked) label.finder-opt[for="opt-health-and-safety-courses-5"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-health-and-safety-courses-5:checked) label.finder-opt[for="opt-health-and-safety-courses-5"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-health-and-safety-courses-5:focus-visible) label.finder-opt[for="opt-health-and-safety-courses-5"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-health-and-safety-courses-6:checked ~ #rec-health-and-safety-courses-6 { display:flex; }
.finder:has(#opt-health-and-safety-courses-6:checked) label.finder-opt[for="opt-health-and-safety-courses-6"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-health-and-safety-courses-6:checked) label.finder-opt[for="opt-health-and-safety-courses-6"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-health-and-safety-courses-6:focus-visible) label.finder-opt[for="opt-health-and-safety-courses-6"] { outline:2px solid var(--c-brand); outline-offset:2px; }
.finder #opt-health-and-safety-courses-7:checked ~ #rec-health-and-safety-courses-7 { display:flex; }
.finder:has(#opt-health-and-safety-courses-7:checked) label.finder-opt[for="opt-health-and-safety-courses-7"] { border-color:var(--c-brand); background:var(--c-brand-soft); box-shadow:0 0 0 3px rgba(11,111,172,.12); }
.finder:has(#opt-health-and-safety-courses-7:checked) label.finder-opt[for="opt-health-and-safety-courses-7"]::before { border-color:var(--c-brand); background:var(--c-brand); box-shadow:inset 0 0 0 3px #fff; }
.finder:has(#opt-health-and-safety-courses-7:focus-visible) label.finder-opt[for="opt-health-and-safety-courses-7"] { outline:2px solid var(--c-brand); outline-offset:2px; }