/* course-gallery.css  Extra course pictures (gallery + lightbox) in course-gallery.js. Light, Dark navy and Glass; WCAG AA; works from 320 px. */
.xcg-h{margin:.8rem 0 .3rem}
.xcg-grid{list-style:none;margin:.3rem 0 .7rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
@media(min-width:600px){.xcg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.xcg-item{margin:0;min-width:0}
.xcg-thumb{display:block;width:100%;padding:0;border:2px solid #475569;border-radius:10px;overflow:hidden;background:#e2e8f0;cursor:zoom-in;aspect-ratio:4/3;min-height:44px}
.xcg-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.xcg-thumb:hover img{transform:scale(1.04)}}
.xcg-thumb:focus-visible{outline:3px solid #ff8a00;outline-offset:2px}
.xcg-cap{display:block;font-size:.78rem;margin-top:.2rem;overflow-wrap:anywhere}
html[data-theme="dark"] .xcg-thumb,html[data-theme="glass"] .xcg-thumb{border-color:#9fbdf0;background:#143270}
html[data-theme="dark"] .xcg-thumb:focus-visible,html[data-theme="glass"] .xcg-thumb:focus-visible{outline-color:#ffb000}
/* course card header image: focal point is set by script (object-position); keep the crop stable while it loads */
.xcs-cover{object-position:50% 50%}
/* lightbox: always a dark scrim, so the same colours work in every theme */
.xcg-lb{position:fixed;inset:0;z-index:3000;background:rgba(5,12,30,.94);color:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.xcg-lb[hidden]{display:none}
html.xcg-lock,html.xcg-lock body{overflow:hidden}
.xcg-lb-in{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:3.2rem .5rem 3rem;touch-action:pan-y}
.xcg-fig{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;max-height:100%;min-width:0}
.xcg-big{max-width:100%;max-height:calc(100vh - 9rem);max-height:calc(100dvh - 9rem);width:auto;height:auto;object-fit:contain;border-radius:6px;background:#0b1c2d}
.xcg-fc{margin-top:.5rem;max-width:42rem;text-align:center;font-size:.92rem;color:#fff;overflow-wrap:anywhere}
.xcg-fc:empty{display:none}
.xcg-x,.xcg-nav{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:#143270;color:#fff;cursor:pointer;padding:0;font:700 1.7rem/1 system-ui,sans-serif}
.xcg-x{top:.6rem;right:.6rem}
.xcg-nav{top:50%;margin-top:-24px}
.xcg-nav svg{width:24px;height:24px}
.xcg-prev{left:.5rem}.xcg-next{right:.5rem}
.xcg-x:hover,.xcg-nav:hover{background:#1b4288}
.xcg-x:focus-visible,.xcg-nav:focus-visible{outline:3px solid #ffb000;outline-offset:2px}
.xcg-count{position:absolute;bottom:.7rem;left:0;right:0;margin:0;text-align:center;font-size:.86rem;color:#fff}
@media(max-width:600px){.xcg-nav{top:auto;bottom:.4rem;margin-top:0}.xcg-prev{left:.6rem}.xcg-next{right:.6rem}}
@media(prefers-reduced-motion:reduce){.xcg-thumb img{transition:none}}