/* Merv Services — additive rules on top of the Nocturne design system.
   Never overrides nocturne.css tokens; only adds what a static build needs
   (scroll-reveal, image placeholders, small-screen layout) using the same
   var(--color-*), var(--space-*), var(--radius-*) tokens. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Image placeholders (stand-in for real photos) ---------- */
.img-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  overflow: hidden;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.img-slot svg { width: 30px; height: 30px; opacity: .5; }
.img-slot .cap {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  font-size: 10.5px;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}

.btn { white-space: nowrap; }

/* ---------- Footer background photo ---------- */
.site-footer {
  position: relative;
  background:
    linear-gradient(color-mix(in srgb, var(--color-bg) 88%, transparent), var(--color-bg) 88%),
    url('assets/footer-bg.jpg') center 30% / cover no-repeat;
}
.site-footer > * { position: relative; z-index: 1; }


/* ---------- Responsive: the dc.html pages use inline grid styles with
   no breakpoints, since Claude Design previewed them at desktop width.
   These target-by-inline-style rules collapse the same grids on mobile
   without touching the page markup or the vendored stylesheet. ---------- */
@media (max-width: 900px) {
  section[style*="grid-template-columns:1.15fr 0.85fr"],
  section[style*="grid-template-columns: 1.15fr 0.85fr"] { display: block !important; }
  section[style*="1.15fr 0.85fr"] figure { margin-top: 28px !important; }

  section[style*="grid-template-columns:1fr 1fr"],
  section[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] { display: block !important; }
  section[style*="1fr 1fr"] > * + *,
  div[style*="1fr 1fr"] > * + * { margin-top: 28px !important; }

  section[style*="grid-template-columns:1.2fr 0.8fr"],
  section[style*="grid-template-columns: 1.2fr 0.8fr"] { display: block !important; }
  section[style*="1.2fr 0.8fr"] > * + * { margin-top: 28px !important; }

  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; row-gap: 24px !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

  .card[style*="flex-direction:row"] { flex-direction: column !important; }
  .card[style*="flex-direction:row"] figure { flex: none !important; aspect-ratio: 16/9; }

  .nav { flex-wrap: wrap; row-gap: 8px; }
}