/* ==========================================================================
   Photo tour (Airbnb-style): a full-screen scrollable gallery of every photo,
   and a full-screen single-photo viewer opened from it.
   No library: plain CSS + JS (see photo_tour.js). Class prefix: .pt-
   ========================================================================== */
.pt-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    flex-direction: column;
}
.pt-overlay.pt-open { display: flex; }

/* ---------- Tour (white, scrollable) ---------- */
.pt-tour { background: #fff; color: #17211E; }

.pt-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    min-height: 60px;
}
.pt-tour .pt-bar { background: rgba(255,255,255,.96); border-bottom: 1px solid transparent; transition: border-color .15s; }
.pt-tour.pt-scrolled .pt-bar { border-bottom-color: #e5e7eb; }

.pt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    line-height: 1;
}
.pt-btn:hover { background: rgba(127,127,127,.15); }
.pt-btn:focus-visible { outline: 3px solid #087F5B; outline-offset: 2px; }
.pt-btn i { font-size: 1rem; }
.pt-bar-actions { display: flex; align-items: center; gap: 0.25rem; }

.pt-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pt-grid {
    max-width: 780px;
    margin: 0 auto;
    padding: 0.5rem 1rem 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.pt-title { max-width: 780px; margin: 0 auto; padding: 0.5rem 1rem 0.75rem; font-family: "Manrope", "Inter", system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; }

.pt-item {
    position: relative;
    padding: 0;
    border: 0;
    background: #E8F0EB;
    overflow: hidden;
    cursor: zoom-in;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
}
.pt-item:nth-child(3n + 1) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }  /* full-width, then two halves */
.pt-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .15s; }
.pt-item:hover img { filter: brightness(.93); }
.pt-item:focus-visible { outline: 3px solid #087F5B; outline-offset: 2px; }

/* ---------- Viewer (black, one photo) ---------- */
.pt-viewer { background: #000; color: #fff; z-index: 2010; }
.pt-viewer .pt-bar { position: relative; }
.pt-counter { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 600; font-size: 0.95rem; pointer-events: none; }

.pt-stage { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; touch-action: pan-y pinch-zoom; }  /* pinch-zoom allowed (zoom in/out on phones) */
.pt-stage img { max-width: min(92vw, 1400px); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; user-select: none; -webkit-user-drag: none; }

.pt-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.35); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pt-nav:hover { background: rgba(255,255,255,.18); }
.pt-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pt-prev { left: 1rem; }
.pt-next { right: 1rem; }
.pt-viewer .pt-heart.pt-on i { color: #ff5a6e; }

.pt-open-btn {
    position: absolute; left: 12px; bottom: 12px; z-index: 11;
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #fff; color: #17211E; border: 1px solid #17211E; border-radius: 10px;
    padding: 0.45rem 0.8rem; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.pt-open-btn:hover { background: #F7F8F4; }

body.pt-lock { overflow: hidden; }

/* Phones/tablets in portrait: no "Show all photos" button -- tapping the main
   photo opens the tour instead (the button would cover too much of it). */
@media (max-width: 767.98px) {
    .pt-open-btn { display: none; }
}

@media (max-width: 575.98px) {
    .pt-bar { padding: 0.5rem 0.5rem; }
    .pt-grid { padding: 0.25rem 0.5rem 2rem; gap: 0.35rem; }
    .pt-prev { left: 0.4rem; } .pt-next { right: 0.4rem; }
    .pt-nav { width: 38px; height: 38px; }
    .pt-stage img { max-width: 100vw; }
    .pt-btn .pt-label { display: none; }   /* icon-only on phones, except Close */
    .pt-btn.pt-close .pt-label { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .pt-item img { transition: none; } }