:root{ --ring: rgba(100,116,139,.25); }
*{box-sizing:border-box}
html,body{height:100%}
::selection{background:#38bdf8;color:#fff}
img{max-width:100%;display:block}

body{
  margin:0;
  font:400 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:#f8fafc;
  color:#0f172a;
}
.container{width:100%;max-width:80rem;margin-inline:auto;padding-inline:1rem}

/* NAVBAR */
.navbar{
  position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);
  border-bottom:2px solid rgba(0,0,0,0.2);
  background:rgba(255,255,255,.85);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.navbar-inner{height:4rem;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;font-weight:800}
.logo img{height:40px;width:40px;border-radius:14px;object-fit:cover}
.nav-links{display:none;gap:.25rem}
.nav-btn{
  padding:.5rem .75rem;border-radius:.75rem;
  font:500 0.9rem/1 system-ui;text-decoration:none;color:inherit;
  border:2px solid transparent;background:transparent;cursor:pointer;
  transition:all .2s;
}
.nav-btn:hover{
  border-color:#38bdf8;
  background:rgba(56,189,248,0.1);
}
@media (min-width:768px){.nav-links{display:flex}}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .9rem;border-radius:1rem;
  font:600 .95rem/1 system-ui;
  border:2px solid rgba(0,0,0,0.15);
  text-decoration:none;color:#0c4a6e;background:#f8fafc;
  box-shadow:0 2px 4px rgba(0,0,0,0.08);
  transition:all .25s;
}
.btn:hover{
  border-color:#38bdf8;
  box-shadow:0 4px 8px rgba(0,0,0,0.12),
             0 0 0 3px rgba(56,189,248,0.25);
  background:#eef2f7;
}
.btn-primary{
  background:#0284c7;color:#fff;border-color:#0284c7;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.btn-primary:hover{
  background:#0369a1;border-color:#0369a1;
  box-shadow:0 4px 10px rgba(0,0,0,0.18),
             0 0 0 3px rgba(56,189,248,0.35);
}

.tag{
  font-size:.72rem;border-radius:999px;padding:.25rem .5rem;
  background:#f1f5f9;color:#334155;margin-right:.35rem
}
.badge{
  display:inline-block;padding:.125rem .5rem;border-radius:999px;
  font:700 .72rem/1.2 system-ui;
  background:#e0f2fe;color:#075985
}.redbadge{
  display:inline-block;padding:.125rem .5rem;border-radius:999px;
  font:700 .72rem/1.2 system-ui;
  background:#fee2e2; color:#7f1d1d;
}.yellowbadge{
  display:inline-block;padding:.125rem .5rem;border-radius:999px;
  font:700 .72rem/1.2 system-ui;
  background:#fef9c3; color:#713f12;
}.greenbadge{
  display:inline-block;padding:.125rem .5rem;border-radius:999px;
  font:700 .72rem/1.2 system-ui;
  background:#dcfce7; color:#14532d;
}.voidbadge{
  display:inline-block;padding:.125rem .5rem;border-radius:999px;
  font:700 .72rem/1.2 system-ui;
  background:#0b0f19; color:#e5e7eb;
}.orangebadge{
  display:inline-block;padding:.125rem .5rem;border-radius:999px;
  font:700 .72rem/1.2 system-ui;
  background:#ffedd5; color:#7c2d12;
}
  .whitebadge{
  display:inline-block;padding:.125rem .5rem;border-radius:999px;
  font:700 .72rem/1.2 system-ui;
  background:#ffffff; color:#0f172a; border:1px solid #e5e7eb;
}

/* GRID LAYOUTS */
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* CARDS / PANELS */
.card{
  background:#fff;
  border:2px solid rgba(0,0,0,0.15);
  border-radius:1.25rem;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.08),
    0 0 0 3px rgba(56,189,248,0.15);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:all 0.25s;
}
.card-body{padding:1rem}
.card:hover{
  border-color:rgba(56,189,248,0.6);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.12),
    0 0 0 4px rgba(56,189,248,0.35);
}

/* HERO */
.page-hero{padding:3rem 0}
.page-hero h1{
  font:800 clamp(1.6rem,3vw,2.4rem)/1.1 system-ui;
  margin:0
}
.page-hero p{color:#475569;margin:.75rem 0 0}

/* FOOTER */
.footer{
  border-top:2px solid rgba(0,0,0,0.2);
  padding:2rem 0;color:#475569;
  box-shadow:0 -2px 6px rgba(0,0,0,0.1);
}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Utilities */
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}

/* DARK MODE */
.dark body{background:#0b1220;color:#e5e7eb}
.dark .navbar{
  background:rgba(2,6,23,.7);
  border-bottom:2px solid rgba(148,163,184,0.3);
  box-shadow:0 2px 8px rgba(0,0,0,0.6);
}
.dark .card{
  background:#0b1220;
  border:2px solid rgba(148,163,184,0.25);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.6),
    0 0 0 3px rgba(56,189,248,0.2);
}
.dark .card:hover{
  border-color:rgba(56,189,248,0.5);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.7),
    0 0 0 4px rgba(56,189,248,0.4);
}
.dark .btn{
  background:transparent;color:#cbd5e1;
  border:2px solid rgba(148,163,184,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.6);
}
.dark .btn:hover{
  border-color:#38bdf8;
  background:#0f172a;
  box-shadow:0 4px 10px rgba(0,0,0,0.8),
             0 0 0 3px rgba(56,189,248,0.35);
}
.dark .btn-primary{
  background:#0369a1;border-color:#0369a1;
  box-shadow:0 2px 8px rgba(0,0,0,0.7);
}
.dark .btn-primary:hover{
  background:#075985;border-color:#075985;
  box-shadow:0 4px 12px rgba(0,0,0,0.9),
             0 0 0 3px rgba(56,189,248,0.45);
}
.dark .footer{
  border-top:2px solid rgba(148,163,184,0.3);
  color:#94a3b8;
  box-shadow:0 -2px 8px rgba(0,0,0,0.7);
}
.dark .tag{background:#111827;color:#cbd5e1}

/* Make cards clickable without breaking inner buttons/links */
.card{ position: relative; }
.stretched-link{
  position:absolute; inset:0; z-index:1;
  text-decoration:none; color:inherit;
}
.card .btn, .card .card-body a{ position:relative; z-index:2; }

/* optional: keyboard focus ring on the whole card */
.stretched-link:focus{ outline:2px solid #38bdf8; outline-offset:3px; border-radius:inherit; }

/* ---------- Media: Carousel (fixed) ---------- */
figure{ margin:0; } /* reset default figure margin */

.carousel{
  position:relative; overflow:hidden; border-radius:1rem; background:#000;
  border:2px solid rgba(0,0,0,0.15); box-shadow:0 4px 8px rgba(0,0,0,0.08);
  aspect-ratio:16/9;
}
.carousel-track{ display:flex; height:100%; transition:transform .4s ease; }

/* CHANGE THIS: min-width -> flex:0 0 100%  */
.carousel-slide{
  flex:0 0 100%;
  height:100%;
  user-select:none;
}

.carousel-slide img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
}

/* Dots */
.carousel-dots{
  position:absolute;left:0;right:0;bottom:.5rem;
  display:flex;justify-content:center;gap:.35rem;z-index:3
}
.carousel-dots button{
  width:8px;height:8px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(148,163,184,.7)
}
.carousel-dots button[aria-current="true"]{background:#38bdf8}

/* Focus ring for a11y */
.carousel{outline:none}
.carousel:focus{box-shadow:0 0 0 3px rgba(56,189,248,.35)}

/* Dark mode */
.dark .carousel{border-color:rgba(148,163,184,.25);box-shadow:0 4px 8px rgba(0,0,0,.6)}
.dark .carousel-prev,.dark .carousel-next{border-color:rgba(148,163,184,.35)}

/* ---------- Media: Responsive Video ---------- */
.ratio{position:relative;width:100%}
.ratio::before{content:"";display:block;padding-top:56.25%} /* 16:9 */
.ratio > *{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:1rem}

/* One height to rule them all */
:root { --card-media-h: 260px; } /* set site-wide default (tweak to taste) */

.media {
  height: var(--card-media-h);
  border-radius: .75rem;
  overflow: hidden;
}

/* Make both <img> and the carousel fill that box */
.media > img,
.media > .carousel,
.media > .carousel .carousel-track,
.media > .carousel .carousel-slide {
  width: 78%;
  height: 100%;
}

.media .carousel-slide { flex: 0 0 128%; }
.media img { display: block; object-fit: cover; }

/* Your existing CSS-only autoplay (keep as you had it) */
.carousel.auto { pointer-events: none; }
.carousel .carousel-track {
  display: flex;
  transform: translateX(0);
  transition: none !important;
  animation: carousel-step calc(var(--slides) * var(--autoplay)) steps(var(--slides)) infinite;
  will-change: transform;
}
@keyframes carousel-step {
  to { transform: translateX(calc(-100% * var(--slides))); }
}
@media (prefers-reduced-motion: reduce) {
  .carousel .carousel-track { animation: none; }
}


:root { --card-media-h: 260px; } /* optional global default */

.media { height: var(--card-media-h); border-radius:.75rem; overflow:hidden; }
.media > img,
.media > .carousel,
.media > .carousel .carousel-track,
.media > .carousel .carousel-slide { width:78%; height:100%; }

.media .carousel-slide { flex: 0 0 128%; }
.media img { display:block; object-fit:cover; }

/* CSS-only autoplay with safe fallbacks */
.carousel.auto { pointer-events:none; }
.carousel .carousel-track{
  display:flex;
  transform: translateX(0);
  transition: none !important; /* prevent global transform transitions */
  animation: carousel-step calc(var(--slides, 1) * var(--autoplay, 5s))
             steps(var(--slides, 1)) infinite;
  will-change: transform;
}
@keyframes carousel-step{
  to { transform: translateX(calc(-128% * var(--slides, 1))); }
}

@media (prefers-reduced-motion: reduce){
  .carousel .carousel-track { animation:none; }
}