:root{
  --nasa-blue:#0B3D91;
  --nasa-red:#FC3D21;
  --ink:#121212;
  --muted:#6c6f75;
  --bg:#0a0c10;
  --card:#12161f;
  --ring:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#fff;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial}
img{max-width:100%;display:block}
button{cursor:pointer;border:0}

.site-header{
  padding:1.25rem 1rem;border-bottom:1px solid var(--ring);
  background:linear-gradient(180deg,rgba(11,61,145,.35),transparent 70%)
}
.brand{display:flex;align-items:center;gap:.75rem}
.logo{width:48px;height:48px;object-fit:contain}
.site-header h1{margin:0;font-size:1.6rem;font-weight:700;letter-spacing:.3px}
.tag{margin:.35rem 0 0;color:#cfd6e4}

.container{max-width:1100px;margin:1.25rem auto;padding:0 1rem}

.controls{display:flex;gap:.75rem;align-items:end;flex-wrap:wrap;margin-bottom:1rem}
.controls label{display:flex;flex-direction:column;font-size:.95rem;color:#e2e6f2}
.controls input{padding:.55rem .7rem;border-radius:.6rem;background:#0f1420;border:1px solid var(--ring);color:#fff}
.btn-primary{
  background:var(--nasa-red);color:#fff;padding:.65rem 1rem;border-radius:.7rem;
  font-weight:700;transition:transform .08s ease, opacity .2s ease
}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.6}

.facts{
  margin:1rem 0;padding:.9rem 1rem;border:1px solid var(--ring);border-radius:.8rem;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}

.loading{margin:1rem 0;font-weight:700}

/* ---- Symmetric gallery grid ---- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); /* consistent columns */
  gap:16px;
}

/* ---- Card ---- */
.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%; /* equal card heights */
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.35)}

.card .thumb-wrap{
  position:relative;
  aspect-ratio:16/9;   /* consistent media height */
  overflow:hidden;
}
.card img,.card .thumb-video{
  width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .35s ease
}
/* LevelUp: Hover Zoom Effect */
.card:hover img,.card:hover .thumb-video{transform:scale(1.06)}

.badge{
  position:absolute;top:8px;left:8px;background:var(--nasa-blue);color:#fff;padding:.25rem .45rem;
  font-size:.7rem;border-radius:.4rem;border:1px solid rgba(255,255,255,.2)
}

.card .meta{
  padding:.9rem 1rem 1rem;
  min-height:88px; /* aligns bottoms when titles wrap */
}
.card .title{
  margin:0 0 .35rem;font-size:1rem;
  display:-webkit-box;            /* clamp to 2 lines */
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card .date{margin:0;color:var(--muted);font-size:.9rem}

/* ---- Modal ---- */
.modal{
  width:min(100%, 980px);border:1px solid var(--ring);border-radius:14px;padding:0;background:#0c1018;color:#fff
}
.modal::backdrop{background:rgba(0,0,0,.6)}
.modal-close{
  position:absolute;top:10px;right:12px;border-radius:999px;background:#182033;color:#fff;
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ring)
}
.modal-content{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;padding:1rem}
.modal-media{border-radius:10px;overflow:hidden;border:1px solid var(--ring);background:#0e1422}
.modal-info{display:flex;flex-direction:column;gap:.6rem}
.muted{color:var(--muted)}
.modal iframe{width:100%;height:100%;min-height:420px;border:0;display:block}

@media (max-width:900px){
  .modal-content{grid-template-columns:1fr}
}
.site-footer{max-width:1100px;margin:2rem auto 3rem;padding:0 1rem;color:#aab2c4}