/* main.css: base theme that complements base.html inline styles */
@font-face{
  font-family: 'Inter var';
  src: url('/static/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-display: swap; font-style: normal;
}
body{ font-family:'Inter var', ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; }
.container { max-width: 1100px; margin-inline:auto; }
.btn { transition: transform .15s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(0); }
.btn:hover { box-shadow: 0 8px 24px rgba(7,115,217,.25); }

/* Lightbox */
.lightbox-backdrop{ position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); z-index:99; }
.lightbox-backdrop[aria-hidden="false"]{ display:flex; }
.lightbox-viewport{ position:relative; max-width:95vw; max-height:92vh; }
.lightbox-viewport img{ max-width:95vw; max-height:92vh; border-radius:12px; border:1px solid rgba(63,209,255,.35); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(10,22,38,.6); border:1px solid rgba(63,209,255,.35);
  padding:10px 12px; border-radius:12px; cursor:pointer; color:#e8f6ff;
}
.lightbox-close{ top:16px; right:16px; transform:none; }
.lightbox-prev{ left:-56px; }
.lightbox-next{ right:-56px; }

@media (max-width:860px){
  .lightbox-prev{ left:8px; top:auto; bottom:16px; transform:none; }
  .lightbox-next{ right:8px; top:auto; bottom:16px; transform:none; }
}

/* Skeletons */
.skeleton{ position:relative; overflow:hidden; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  animation: shimmer 1.25s infinite; border-radius:12px; }
@keyframes shimmer {
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
/* Photo grid helpers */
.photo-tile{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--blue-border); background:rgba(0,0,0,.25); }
.photo-tile img{ width:100%; height:180px; object-fit:cover; display:block; filter:blur(10px); transform:scale(1.02);
  transition: filter .35s ease, transform .35s ease; }
.photo-tile img[data-loaded="1"]{ filter:none; transform:none; }
.photo-check{ position:absolute; left:10px; top:10px; transform:scale(1.25); }