/* ATLAS case-study screenshot gallery.
   Progressive enhancement: the default (no-JS) layout is a static "bento" of
   real screenshots; carousel.js adds .is-enhanced to upgrade it into a framed,
   keyboard-operable carousel with a lightbox. Sits on the navy .atlas panel.
   Pairs with /styles.css for tokens (--navy/--brass/--ivory). */

.atlas-gallery { margin: clamp(1.2rem, 3vw, 2rem) 0 0; }

/* Screen surface tone (slightly lighter than the navy panel) */
:root { --atlas-screen: #0e1830; --atlas-screen-2: #0b1426; }

/* ============================================================
   DEFAULT / NO-JS  —  static bento mosaic
   ============================================================ */
.atlas-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr);
}
.atlas-slide { margin: 0; }
.atlas-slide:first-child { grid-column: span 2; grid-row: span 2; }

.atlas-shot {
  margin: 0; background: var(--atlas-screen);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.atlas-shot img {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top center; background: var(--atlas-screen);
}
.atlas-slide:first-child .atlas-shot img { aspect-ratio: 16 / 11; }
.atlas-shot figcaption {
  font-size: 0.78rem; line-height: 1.4; color: #c2c9d4;
  padding: 0.55rem 0.7rem; border-top: 1px solid rgba(255,255,255,0.06);
}

.atlas-honesty {
  text-align: center; color: var(--bluegray); font-size: 0.8rem;
  margin: 0.9rem 0 0; font-style: italic;
}

/* ============================================================
   ENHANCED  —  framed carousel
   ============================================================ */
.atlas-gallery.is-enhanced .atlas-honesty { margin-top: 0.7rem; }

/* App-window frame — restrained, centered, laptop-browser proportions */
.atlas-window {
  position: relative; max-width: 900px; margin-inline: auto;
  border-radius: 12px; overflow: hidden;
  background: var(--atlas-screen);
  border: 1px solid rgba(255,255,255,0.10);
  border-top-color: rgba(184,155,94,0.28); /* whisper of brass, not a glowing bar */
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.6);
}
.atlas-titlebar {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.8rem; background: var(--atlas-screen-2);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.atlas-windots { display: flex; gap: 0.38rem; }
.atlas-windots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.atlas-fav { width: 15px; height: 15px; margin-left: 0.35rem; flex: 0 0 auto; }
.atlas-addr {
  font-size: 0.74rem; color: #aab3c0; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 16:10 viewport; cover + top crop so each shot reads as a live product screen */
.atlas-stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--atlas-screen); cursor: zoom-in;
}
.is-enhanced .atlas-track { /* override grid → absolute stack */
  position: absolute; inset: 0; display: block; gap: 0;
}
.is-enhanced .atlas-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease;
}
.is-enhanced .atlas-slide.is-active { opacity: 1; visibility: visible; }
.is-enhanced .atlas-shot {
  background: transparent; border: 0; border-radius: 0; height: 100%;
}
.is-enhanced .atlas-shot img {
  width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: top center; padding: 0;
}
.is-enhanced .atlas-shot figcaption { display: none; }

/* Live caption — sits directly under the window like a figure caption */
.atlas-livecaption {
  text-align: center; color: #d6dae1; font-size: 0.9rem; line-height: 1.5;
  margin: 0.8rem auto 0; max-width: 760px; min-height: 1.4em;
}

/* One tight control row: arrows flank the filmstrip (filmstrip = position indicator) */
.atlas-nav {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: 900px; margin: 0.8rem auto 0;
}
.atlas-arrow {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ivory);
  border: 1px solid rgba(245,240,230,0.30); cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.atlas-arrow:hover { border-color: var(--brass); background: rgba(184,155,94,0.14); }
.atlas-arrow svg { width: 18px; height: 18px; }

.atlas-filmstrip {
  flex: 1 1 auto; display: flex; gap: 0.5rem; justify-content: center;
  overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: thin; scroll-behavior: smooth;
}
.atlas-thumb {
  flex: 0 0 auto; width: 72px; aspect-ratio: 16 / 10; padding: 0; cursor: pointer;
  border-radius: 6px; overflow: hidden; background: var(--atlas-screen);
  border: 1px solid rgba(255,255,255,0.12); opacity: 0.5;
  transition: opacity 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.atlas-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.atlas-thumb:hover { opacity: 0.85; }
.atlas-thumb[aria-current="true"] {
  opacity: 1; border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass);
}

/* Lightbox */
.atlas-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(8,12,22,0.93);
  display: flex; align-items: center; justify-content: center; padding: 3vmin;
}
.atlas-lightbox[hidden] { display: none; }
.atlas-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; max-width: 96vw; }
.atlas-lightbox img { max-width: 96vw; max-height: 86vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8); }
.atlas-lightbox figcaption { color: #d6dae1; font-size: 0.92rem; text-align: center; max-width: 70ch; }
.atlas-lb-close {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,0.08); color: var(--ivory); border: 1px solid rgba(245,240,230,0.32);
}
.atlas-lb-close:hover { border-color: var(--brass); }
.atlas-lb-close svg { width: 20px; height: 20px; }

/* Visible focus rings everywhere in the gallery + lightbox */
.atlas-gallery :focus-visible,
.atlas-lightbox :focus-visible { outline: 2px solid #c9a14a; outline-offset: 2px; border-radius: 4px; }

/* Reduced motion: instant swaps, no smooth scroll */
@media (prefers-reduced-motion: reduce) {
  .is-enhanced .atlas-slide { transition: none; }
  .atlas-filmstrip { scroll-behavior: auto; }
}

/* Responsive */
@media (max-width: 720px) {
  .atlas-track { grid-template-columns: repeat(2, 1fr); }
  .atlas-slide:first-child { grid-column: span 2; grid-row: span 1; }
  .atlas-thumb { width: 56px; }
  .atlas-addr { font-size: 0.7rem; }
  .atlas-nav { gap: 0.5rem; }
}