/* ═══════════════════════════════════════════════════════════════
   SPW Property Gallery — Frontend Styles
   v1.3.0 · Splendid Websites

   All colour values resolve from site CSS custom properties.
   Spacing uses the site fluid scale (--space-*) except where
   fixed pixel values are structurally required.
   ═══════════════════════════════════════════════════════════════ */

/* ── Internal tokens (all from site variables) ─────────────── */
:root {
    --spwpg-arrow-bg:      color-mix(in srgb, var(--primary) 65%, transparent);
    --spwpg-arrow-icon:    var(--white);
    --spwpg-lb-bg:         color-mix(in srgb, var(--primary) 97%, transparent);
    --spwpg-lb-overlay:    color-mix(in srgb, var(--primary) 62%, transparent);
    --spwpg-pill-bg:       color-mix(in srgb, var(--primary) 72%, transparent);
    --spwpg-focus:         var(--secondary);
    --spwpg-thumb-opacity: 0.52;
}

/* ── Arrow icon colour variants ─────────────────────────────── */
.spwpg-wrap[data-arrow="primary"]   { --spwpg-arrow-icon: var(--primary);   }
.spwpg-wrap[data-arrow="secondary"] { --spwpg-arrow-icon: var(--secondary); }
.spwpg-wrap[data-arrow="tertiary"]  { --spwpg-arrow-icon: var(--tertiary);  }
.spwpg-wrap[data-arrow="white"]     { --spwpg-arrow-icon: var(--white);     }
.spwpg-wrap[data-arrow="black"]     { --spwpg-arrow-icon: var(--black);     }

/* ── Wrap ───────────────────────────────────────────────────── */
.spwpg-wrap {
    display: block;
    width: 100%;
    line-height: 0;
    font-size: 0;
}

/* ── Hero ───────────────────────────────────────────────────── */
.spwpg-hero {
    position: relative;
    width: 100%;
    aspect-ratio: var(--spwpg-ratio, 16/7);
    overflow: hidden;
    background: var(--primary);
    cursor: pointer;
}

@media (max-width: 767px) {
    .spwpg-hero {
        aspect-ratio: var(--spwpg-ratio-mobile, 4/3);
    }
}

.spwpg-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease;
}

.spwpg-hero-img.spwpg-fade { opacity: 0; }

/* ── Navigation arrows ──────────────────────────────────────── */
.spwpg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-2xl);
    height: var(--space-2xl);
    background: var(--spwpg-arrow-bg);
    color: var(--spwpg-arrow-icon);
    border: none;
    cursor: pointer;
    transition: filter 0.2s ease;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

.spwpg-arrow svg {
    display: block;
    width: var(--space-m);
    height: var(--space-m);
    stroke: var(--spwpg-arrow-icon);
    flex-shrink: 0;
}

.spwpg-arrow:hover         { filter: brightness(1.3); }
.spwpg-arrow:focus-visible { outline: 2px solid var(--spwpg-focus); outline-offset: 2px; }

.spwpg-prev { left:  var(--space-s); }
.spwpg-next { right: var(--space-s); }

@media (max-width: 767px) {
    .spwpg-arrow { display: none; }
}

/* ── Counter ────────────────────────────────────────────────── */
.spwpg-counter {
    position: absolute;
    bottom: var(--space-s);
    right: var(--space-s);
    background: var(--spwpg-pill-bg);
    color: var(--white);
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 6px 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

/* ── Toolbar ────────────────────────────────────────────────── *
   position: absolute inside .spwpg-hero.                        *
   Uses inline-flex so it naturally sizes to its content and     *
   cannot be stretched by any parent flex/grid context.          *
   font-size explicitly set to escape the font-size:0 on .wrap. */
.spwpg-toolbar {
    position: absolute;
    bottom: var(--space-s);
    left: var(--space-s);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    z-index: 10;
    font-size: 0; /* reset — each btn sets its own */
    line-height: 0;
}

/* ── Toolbar buttons ────────────────────────────────────────── */
.spwpg-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--spwpg-pill-bg);
    color: var(--white);
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 10px;
    border: none;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: filter 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    /* Ensure nothing can make this button grow beyond its content */
    width: auto;
    max-width: none;
    min-width: 0;
    box-sizing: content-box;
}

.spwpg-toolbar-btn svg {
    display: block;
    width: 12px;
    height: 12px;
    stroke: var(--white);
    flex-shrink: 0;
}

.spwpg-toolbar-btn:hover         { filter: brightness(1.3); }
.spwpg-toolbar-btn:focus-visible { outline: 2px solid var(--spwpg-focus); outline-offset: 2px; }

/* Mobile: icon-only */
@media (max-width: 767px) {
    .spwpg-btn-label          { display: none !important; }
    .spwpg-toolbar-btn        { padding: 7px !important; }
    .spwpg-toolbar-btn svg    { width: 14px !important; height: 14px !important; }
    .spwpg-tour-chevron       { display: none !important; }
}

/* ── 360 tour dropdown wrapper ──────────────────────────────── */
.spwpg-tour-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.spwpg-tour-chevron {
    display: block;
    margin-left: 2px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.spwpg-tour-dropdown-btn[aria-expanded="true"] .spwpg-tour-chevron {
    transform: rotate(180deg);
}

.spwpg-tour-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: color-mix(in srgb, var(--primary) 95%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-width: 160px;
    z-index: 20;
}

.spwpg-tour-dropdown[hidden] { display: none; }

.spwpg-tour-dropdown-item {
    display: block;
    padding: 8px 14px;
    color: var(--white);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}

.spwpg-tour-dropdown-item:hover {
    background: color-mix(in srgb, var(--white) 10%, transparent);
    color: var(--white);
}

.spwpg-tour-dropdown-item:focus-visible {
    outline: 2px solid var(--spwpg-focus);
    outline-offset: -2px;
}

/* ── Thumbnail strip ────────────────────────────────────────── */
.spwpg-thumbs {
    display: grid;
    grid-template-columns: repeat(var(--spwpg-thumb-cols, 6), 1fr);
    gap: var(--spwpg-thumb-gap, 2px);
    background: var(--primary);
    padding-top: var(--spwpg-thumb-gap, 2px);
    line-height: 0;
    font-size: 0;
}

.spwpg-thumbs--hidden { display: none; }

@media (max-width: 767px) {
    .spwpg-thumbs--hide-mobile { display: none; }
}

@media (min-width: 768px) {
    .spwpg-thumbs--hide-desktop { display: none; }
}

/* ── Individual thumb ───────────────────────────────────────── */
.spwpg-thumb {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    cursor: pointer;
    border: none;
    padding: 0;
    background: var(--primary);
    display: block;
    opacity: var(--spwpg-thumb-opacity);
    transition: opacity 0.2s ease;
    line-height: 0;
    font-size: 0;
}

.spwpg-thumb:hover,
.spwpg-thumb--active { opacity: 1; }

.spwpg-thumb:focus-visible {
    outline: 2px solid var(--spwpg-focus);
    outline-offset: -2px;
    opacity: 1;
}

.spwpg-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* +N more overlay */
.spwpg-thumb-overflow {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--spwpg-lb-overlay);
    color: var(--white);
    gap: var(--space-2xs);
    pointer-events: none;
}

.spwpg-thumb-overflow-count {
    font-size: var(--text-l);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    display: block;
}

.spwpg-thumb-overflow-label {
    font-size: var(--text-2xs);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    display: block;
}

/* ── LIGHTBOX ───────────────────────────────────────────────── */
.spwpg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--spwpg-lb-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spwpg-lightbox[hidden] { display: none; }

/* ── Modal view switcher (Gallery / Floorplans / EPC) ───────── */
.spwpg-lb-views {
    position: absolute;
    top: var(--space-s);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs);
    max-width: 80vw;
    z-index: 3;
}

.spwpg-lb-view-btn {
    background: color-mix(in srgb, var(--white) 10%, transparent);
    color: color-mix(in srgb, var(--white) 65%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding: var(--space-2xs) var(--space-s);
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spwpg-lb-view-btn:hover {
    background: color-mix(in srgb, var(--white) 16%, transparent);
    color: var(--white);
}

.spwpg-lb-view-btn--active {
    background: color-mix(in srgb, var(--secondary) 85%, transparent);
    color: var(--white);
    border-color: var(--secondary);
}

.spwpg-lb-view-btn:focus-visible {
    outline: 2px solid var(--spwpg-focus);
    outline-offset: 2px;
}

.spwpg-lb-close {
    position: absolute;
    top: var(--space-s);
    right: var(--space-m);
    background: none;
    border: none;
    color: color-mix(in srgb, var(--white) 60%, transparent);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 2;
    padding: var(--space-2xs) var(--space-xs);
}

.spwpg-lb-close:hover         { color: var(--white); }
.spwpg-lb-close:focus-visible { outline: 2px solid var(--spwpg-focus); outline-offset: 2px; }

.spwpg-lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: color-mix(in srgb, var(--white) 55%, transparent);
    cursor: pointer;
    padding: var(--space-m);
    transition: color 0.2s ease;
    z-index: 2;
    line-height: 0;
    font-size: 0;
}

.spwpg-lb-arrow svg {
    display: block;
    stroke: currentColor;
    width: var(--space-xl);
    height: var(--space-xl);
}

.spwpg-lb-arrow:hover         { color: var(--white); }
.spwpg-lb-arrow:focus-visible { outline: 2px solid var(--spwpg-focus); outline-offset: 2px; }

.spwpg-lb-prev { left:  var(--space-2xs); }
.spwpg-lb-next { right: var(--space-2xs); }

.spwpg-lb-img-wrap {
    max-width: 90vw;
    max-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;           /* contain the zoomed/panned image */
    touch-action: none;         /* gestures handled in JS (pinch / pan / swipe) */
}

.spwpg-lb-img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
    cursor: zoom-in;
    transition: opacity 0.25s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.spwpg-lb-zoomed .spwpg-lb-img         { cursor: grab; }
.spwpg-lb-zoomed .spwpg-lb-img:active  { cursor: grabbing; }

.spwpg-lb-img.spwpg-fade { opacity: 0; }

.spwpg-lb-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-m);
    width: 100%;
}

.spwpg-lb-counter {
    color: color-mix(in srgb, var(--white) 40%, transparent);
    font-family: inherit;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    line-height: 1;
    user-select: none;
}

.spwpg-lb-thumbs {
    display: flex;
    gap: var(--space-2xs);
    max-width: 90vw;
    overflow-x: auto;
    padding-bottom: var(--space-2xs);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--white) 20%, transparent) transparent;
}

.spwpg-lb-thumbs::-webkit-scrollbar       { height: 3px; }
.spwpg-lb-thumbs::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--white) 20%, transparent); }

.spwpg-lb-thumb {
    flex-shrink: 0;
    width: var(--space-3xl);
    aspect-ratio: 4/3;
    overflow: hidden;
    border: none;
    padding: 0;
    background: color-mix(in srgb, var(--primary) 80%, var(--white));
    cursor: pointer;
    opacity: 0.36;
    transition: opacity 0.2s ease;
    line-height: 0;
    font-size: 0;
}

.spwpg-lb-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spwpg-lb-thumb:hover,
.spwpg-lb-thumb--active { opacity: 1; }

.spwpg-lb-thumb:focus-visible {
    outline: 2px solid var(--spwpg-focus);
    outline-offset: -2px;
    opacity: 1;
}

/* ── VIDEO MODAL ─────────────────────────────────────────────── */
.spwpg-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: var(--spwpg-lb-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-m);
}

.spwpg-video-modal[hidden] { display: none; }

.spwpg-video-modal-inner {
    position: relative;
    width: 100%;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.spwpg-video-modal-close {
    position: absolute;
    top: calc(-1 * var(--space-xl));
    right: 0;
    background: none;
    border: none;
    color: color-mix(in srgb, var(--white) 60%, transparent);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: var(--space-2xs) var(--space-xs);
    z-index: 2;
}

.spwpg-video-modal-close:hover         { color: var(--white); }
.spwpg-video-modal-close:focus-visible { outline: 2px solid var(--spwpg-focus); outline-offset: 2px; }

.spwpg-video-tabs {
    display: flex;
    gap: var(--space-2xs);
    flex-wrap: wrap;
}

.spwpg-video-tab {
    background: color-mix(in srgb, var(--white) 10%, transparent);
    color: color-mix(in srgb, var(--white) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 15%, transparent);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-2xs) var(--space-xs);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spwpg-video-tab:hover {
    background: color-mix(in srgb, var(--white) 16%, transparent);
    color: var(--white);
}

.spwpg-video-tab--active {
    background: color-mix(in srgb, var(--secondary) 80%, transparent);
    color: var(--white);
    border-color: var(--secondary);
}

.spwpg-video-tab:focus-visible { outline: 2px solid var(--spwpg-focus); outline-offset: 2px; }

.spwpg-video-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--primary);
}

.spwpg-video-panel {
    display: none;
    position: absolute;
    inset: 0;
}

.spwpg-video-panel--active { display: block; }

.spwpg-video-iframe-wrap {
    width: 100%;
    height: 100%;
}

.spwpg-video-iframe-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

.spwpg-video-el {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--primary);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .spwpg-hero-img,
    .spwpg-lb-img,
    .spwpg-thumb,
    .spwpg-lb-thumb,
    .spwpg-lb-view-btn,
    .spwpg-arrow,
    .spwpg-toolbar-btn { transition: none; }
}