/* ============================================
   ANALYSIS PLOTS PAGE — /analysis/{lang}/plots/
   Flow Vision justified image wall.
   Lightbox: PhotoSwipe v5.4.4 (photoswipe.css).
   Depends on: design-system.css
   ============================================ */

html { scroll-snap-type: none; }

body:not(.dark-mode):has(.plots-wall) { background: #f1f1f1; }

/* ── Page wrapper ──────────────────────────────────────────────── */

.plots-page {
  min-height: 100vh;
  padding-bottom: var(--space-8);
}

/* ── Header ────────────────────────────────────────────────────── */

.plots-header {
  padding: var(--space-7) 0 var(--space-5);
}

.plots-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.plots-header .list-title {
  font-size: var(--text-3xl);
  margin-bottom: 0;
}

/* ── Plot wall ─────────────────────────────────────────────────── */

.plots-wall {
  width: 100%;
}

.pw-row {
  display: flex;
}

.pw-item {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: opacity 150ms ease;
  text-decoration: none;
}

.pw-item:hover { opacity: 0.82; }

.pw-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* ── PhotoSwipe "Read Article" CTA ────────────────────────────── */

/* Wrapper div injected by PhotoSwipe registerElement */
.pswp__read-article-link {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  z-index: 100;
}

.pswp__read-article-link .pw-lb-article {
  box-shadow: 0 0 28px rgba(255, 124, 67, 0.45);
}

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .plots-header-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .pswp__read-article-link { bottom: var(--space-4); left: var(--space-4); }
}