/* ==========================================================================
   review.css — /review-nakhon365/ only. Loaded after style.css + responsive.css.
   Colours, the page head, the card face, headings and buttons come from style.css
   (section 16 "Shared page components"); this file only holds the layout + the lightbox.
   Reused from style.css: .breadcrumb, .article*, .feature*, .faq*, .cta, .btn, .register-cta.

   1. Review gallery    2. Lightbox    3. Article bits    4. Responsive
   ========================================================================== */

/* The page must not scroll behind the open lightbox (the stable scrollbar gutter that avoids a width jump is set for every page in style.css). */
html:has(dialog[open]) { overflow: hidden; }

/* 1. Review gallery: every screenshot keeps its own ratio (width 100%, height auto, no crop).
      The card is a thin dark frame around the (mostly white) screenshot; no overlay on the picture. */
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--space-md); }
.review-card { display: block; padding: 6px; overflow: hidden; cursor: zoom-in; }
.review-card img { display: block; width: 100%; height: auto; border-radius: 4px; }
.review-card:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* 2. Lightbox (native <dialog>: focus trap + ESC come from the browser) ------------------- */
.lightbox {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: transparent; color: var(--text-primary);
    overflow: hidden;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
/* the figure lets clicks through, so a click beside the picture reaches the dialog and closes it */
.lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; pointer-events: none; }
.lightbox__image {
    display: block; width: auto; height: auto;
    max-width: 95vw; max-height: 90vh; max-height: 90dvh; object-fit: contain;
    border-radius: 8px; background: var(--bg-deep);
    pointer-events: auto; touch-action: pan-y pinch-zoom;
}
.lightbox__count { color: var(--text-secondary); font-size: 13px; line-height: 1; }
.lightbox__btn {
    position: absolute; z-index: 2; display: grid; place-items: center;
    width: 44px; height: 44px; border: 1px solid var(--border-strong); border-radius: 50%;
    background: var(--bg-deep); color: var(--accent);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.lightbox__btn:hover { border-color: var(--accent-hover); color: var(--accent-hover); }
.lightbox__btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { top: 50%; left: 12px; margin-top: -22px; }
.lightbox__next { top: 50%; right: 12px; margin-top: -22px; }

/* 3. Article bits ------------------------------------------------------------------------ */
.review-article { max-width: none; margin: var(--space-xl) 0 0; }
.review-article .article__section > p, .review-article .faq { max-width: 820px; }
.review-article > .article__section:first-child { margin-top: 0; }
.review-article .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-article .cta { max-width: 820px; margin-top: var(--space-lg); }

/* 4. Responsive: 3 columns (desktop) / 2 (tablet) / 1 (mobile, so the chat text stays readable) -- */
@media (max-width: 959px) {
    .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
    .review-grid { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
    .review-article .feature-grid { grid-template-columns: minmax(0, 1fr); }
    .lightbox__image { max-width: 100vw; border-radius: 0; }
    .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; margin-top: 0; }
    .lightbox__prev { left: 16px; }
    .lightbox__next { right: 16px; }
}