/*
 * Product screenshot styles, shared by every marketing page.
 *
 * These live outside landing.css on purpose: index.html keeps its own inline
 * styles for homepage-only components and does not load landing.css, so rules
 * placed there silently do nothing on the homepage — the image renders at its
 * natural 2632px and blows the layout apart. One small file linked from all
 * pages beats either duplicating the rules or pulling landing.css into a page
 * whose class names would collide with it.
 */

/* ── Product screenshots ──
 *
 * Generated, never hand-made: `pnpm --filter @medspa/marketing shots` captures
 * them from the demo practice in packages/db/prisma/seed-demo.ts. Re-run after a
 * UI change rather than editing an image, or the page starts making claims the
 * product no longer honours.
 *
 * The captures are dark-theme only. The app is dark by default, and the site's
 * light theme is driven by a `data-spaarc-theme` attribute rather than
 * `prefers-color-scheme`, so a <picture> media swap would not track the toggle.
 * The frame below is what makes a dark image read as deliberate on a light page.
 */
.shot {
  margin: 0;
  border-radius: 16px;
  border: 1px solid var(--sp-border);
  background: var(--sp-bg-card);
  overflow: hidden;
  /* Dark-on-dark dissolves into the page without a lift; the shadow reads as a
     window rather than a hard box. */
  box-shadow: 0 24px 70px var(--sp-shadow);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--sp-text-dim);
  border-top: 1px solid var(--sp-border-faint);
}

/* Hero screenshot — the one shot that carries the page.
   Sized by width rather than padding: `.shot` is the framed element itself, so
   padding here would fall inside the border. */
.shot-hero {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto 40px;
}

/* Feature screenshot beside its explanation. */
.shot-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 120px;
}

/* Puts the image on the right so consecutive bands alternate. */
.shot-split--flip .shot {
  order: 2;
}

.shot-split h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.shot-split p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sp-text-secondary);
}

@media (max-width: 900px) {
  .shot-split {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 80px;
  }
  /* Image above the copy on every band once stacked — an alternating order
     reads as a mistake in one column. */
  .shot-split--flip .shot {
    order: 0;
  }
}

/* ── Click to enlarge ──
 *
 * The thumbnails are links to the full-resolution PNG (lightbox.js upgrades
 * them to an overlay). Styling lives here rather than in the script so the
 * affordance is present even before the script runs.
 */
.shot-zoom {
  display: block;
  cursor: zoom-in;
}

.shot-zoom:focus-visible {
  outline: 2px solid var(--sp-turquoise);
  outline-offset: 3px;
}

.shot-modal {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  /* Scrolls, because the enlarged image is sized to the width rather than
     squeezed into the height — see the img rule below. */
  overflow: auto;
}

/* Dark in both themes, deliberately. A lightbox dims the page so the image
   carries the screen, and these images are dark UI — a pale backdrop would
   both break that convention and wash the screenshot out. */
.shot-modal::backdrop {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.shot-modal-figure {
  margin: 0;
  /* min-height rather than height: a short image still centres in the viewport,
     a tall one is free to grow past it and scroll. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
}

/*
 * Sized to the available width, not fitted inside the viewport height.
 *
 * The obvious rule — max-height so the whole thing is visible at once — makes
 * "enlarge" a lie for the wide screenshots. The schedule is 4:3, so contain-
 * fitting it into a 900px-tall window yields about 980px across, narrower than
 * the 1158px it already occupies in the page. Clicking to enlarge and getting
 * something smaller is worse than no lightbox at all.
 *
 * Filling the width and letting the overlay scroll guarantees the enlarged view
 * is never smaller than the inline one, and these are dense UI captures people
 * open in order to read the appointment text. No max-width beyond 100% and no
 * explicit width, so the image's own intrinsic size caps it — a large monitor
 * stops at 1:1 rather than upscaling into mush.
 */
.shot-modal-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--sp-border);
}

.shot-modal-figure figcaption {
  font-size: 14px;
  color: #a3a3a3;
  text-align: center;
  max-width: 720px;
}
.shot-modal-figure figcaption[hidden] { display: none; }

.shot-modal-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.shot-modal-close:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}
.shot-modal-close:focus-visible {
  outline: 2px solid var(--sp-turquoise);
  outline-offset: 2px;
}
.shot-modal-close svg { width: 20px; height: 20px; }

.shot-modal[open] {
  animation: shot-modal-in 0.18s ease-out;
}
@keyframes shot-modal-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shot-modal[open] { animation: none; }
}

@media (max-width: 720px) {
  .shot-modal-figure { padding: 16px; }
  .shot-modal-close { top: 12px; right: 12px; }
}