/**
 * Tour pages rendered by the parent theme — gallery and header.
 *
 * Loaded only on those pages (hm_is_native_tour() in functions.php), so
 * none of this can reach the homepage or the one tour that uses a child
 * template.
 *
 * Paired with hm-native-tour.js, which moves the parent's own nodes into
 * the structure these rules expect. The parent theme itself is never
 * edited — its next update would overwrite the change.
 */

/* ============================================================
   1. The banner strip under the header
   ------------------------------------------------------------
   A 190px dark band repeating the tour title and a breadcrumb, directly
   above a photo that already carries the title. It pushed the photo —
   the thing that actually sells the tour — most of the way down a phone
   screen.
   ============================================================ */

body.single-st_tours .banner,
body.single-st_activity .banner,
body.single-st_tours .st-breadcrumb,
body.single-st_activity .st-breadcrumb {
    display: none !important;
}

/* The gallery then sits flush under a fixed header, so give it back the
   space the banner used to occupy. */
body.single-st_tours .st-gallery,
body.single-st_activity .st-gallery {
    margin-top: 0;
}
body.hm-native-tour .hm-gal {
    margin-top: clamp(14px, 2.5vw, 26px);
}

/* ============================================================
   2. The photo frame
   ------------------------------------------------------------
   A fixed aspect ratio rather than whatever height the tallest photo
   happens to be. Every tour page then opens identically, and the
   overlays have a known area to sit in — which is what made them
   collide before: they were positioned over a box whose size changed
   per tour.
   ============================================================ */

.hm-gal {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #eef2f3;
    isolation: isolate;
}

.hm-gal__source { display: none !important; }

.hm-gal__stage {
    position: relative;
    width: 100%;
    height: 100%;
}
.hm-gal__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hm-gal { aspect-ratio: 4 / 3; }

@media (min-width: 768px) {
    .hm-gal { aspect-ratio: 16 / 9; }
}

/* A gradient at each end so white text and icons stay legible whatever
   the photo underneath is doing. Pointer-events off, or it would eat the
   taps meant for the arrows. */
.hm-gal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5,35,44,.34) 0%, rgba(5,35,44,0) 26%),
        linear-gradient(0deg,  rgba(5,35,44,.30) 0%, rgba(5,35,44,0) 22%);
    z-index: 1;
}

/* ============================================================
   3. Rating and wishlist, on the photo
   ============================================================ */

.hm-gal__overlay {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}
.hm-gal__overlay > * { pointer-events: auto; }

.hm-gal__rating,
.hm-gal__wish {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 2px 10px rgba(5, 35, 44, .16);
    color: var(--hm-navy, #082f3a);
    font-size: .86rem;
    line-height: 1;
}
.hm-gal__wish { padding: 0; width: 34px; justify-content: center; }

.hm-gal__rating .stt-icon-star1 { color: #f0a500; }
.hm-gal__rating a,
.hm-gal__rating .review-score { color: inherit; text-decoration: none; }

/* The parent lays the review block out for a wide strip; inside a pill it
   needs to be inline and unspaced. */
.hm-gal__rating .st-review-box-top,
.hm-gal__rating .st-review-booking-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.hm-gal__wish .service-add-wishlist,
.hm-gal__wish .wistlist-single {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--hm-coral, #f26b4a);
    line-height: 1;
}

/* The "1/5" chip: bottom-right corner, out of the way of everything. */
.hm-gal__count {
    position: absolute !important;
    z-index: 3;
    right: 12px;
    bottom: 12px;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(5, 35, 44, .62);
    color: #fff;
    font-size: .78rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* Once the rating and heart have moved onto the photo, the strip they
   came from is an empty box with margins. */
.st-service-header2.hm-gal__emptied { display: none; }

/* ============================================================
   4. Arrows
   ------------------------------------------------------------
   The parent ships Owl with nav disabled, so a five-photo gallery gave
   no sign it could be swiped. These drive Owl's own events rather than
   re-initialising it, so its state and touch handling are untouched.
   ============================================================ */

.hm-gal__arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(5, 35, 44, .18);
    cursor: pointer;
    transition: background .18s ease;
}
.hm-gal__arrow:hover { background: #fff; }
.hm-gal__arrow:focus-visible { outline: 2px solid var(--hm-lagoon, #17a9a1); outline-offset: 2px; }
.hm-gal__arrow--prev { left: 10px; }
.hm-gal__arrow--next { right: 10px; }

.hm-gal__arrow span {
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--hm-navy, #082f3a);
    border-right: 2px solid var(--hm-navy, #082f3a);
}
.hm-gal__arrow--prev span { transform: rotate(-135deg); margin-left: 3px; }
.hm-gal__arrow--next span { transform: rotate(45deg); margin-right: 3px; }

/* ============================================================
   5. Thumbnails
   ------------------------------------------------------------
   Only rendered when a second photo exists, and only for photos that
   exist — never a placeholder box. The JS caps the row at three; the
   grid below follows however many were actually built, so a gallery of
   two shows one thumbnail at the same size rather than one stretched
   across the full width.
   ============================================================ */

.hm-gal__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.hm-gal__thumb {
    flex: 0 1 calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f3;
    cursor: pointer;
}
.hm-gal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.hm-gal__thumb:hover img { transform: scale(1.05); }
.hm-gal__thumb:focus-visible { outline: 2px solid var(--hm-lagoon, #17a9a1); outline-offset: 2px; }

/* ============================================================
   6. "Toutes les photos" — under the photo, not across it
   ============================================================ */

.hm-gal__actions {
    display: flex;
    margin-top: 12px;
}

.hm-gal__actions .st-gallery-popup {
    position: static !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0 !important;
    padding: 10px 18px !important;
    border: 1px solid var(--hm-line, rgba(8, 47, 58, .14)) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--hm-navy, #082f3a) !important;
    font-size: .88rem;
    line-height: 1.2;
    transform: none !important;
    inset: auto !important;
}
.hm-gal__actions .st-gallery-popup:hover {
    border-color: var(--hm-navy, #082f3a) !important;
}

@media (max-width: 575px) {
    .hm-gal__actions .st-gallery-popup { width: 100%; justify-content: center; }
}

/* A single-photo tour still gets a "1/1" chip from the parent theme.
   Hidden rather than removed, so the parent's own code keeps whatever
   node it expects to find. */
.hm-gal__count--hidden { display: none !important; }

/* Which thumbnail is currently in the big frame. */
.hm-gal__thumb.is-current {
    outline: 2px solid var(--hm-lagoon, #17a9a1);
    outline-offset: -2px;
}

/* ============================================================
   7. The tour title
   ------------------------------------------------------------
   The parent printed the <h1> inside the banner strip, so hiding that
   strip removed the page's only title and its only h1. The script moves
   the heading out and drops it here, under the photo — the image still
   leads the page, and the document keeps exactly one h1.
   ============================================================ */

.hm-gal__title {
    margin: clamp(16px, 3vw, 26px) 0 0;
}
/*
 * The selector needs body + two classes to outrank the parent theme's
 * own `body.st-mod-style .st-style-elementor h1`, which sets 64px and a
 * mid grey (--heading-color, #666). A plain `.hm-gal__title h1` loses to
 * it on specificity and the heading silently kept the parent's size and
 * colour — which is exactly what happened on the first attempt at this.
 */
body.hm-native-tour .hm-gal__title h1 {
    margin: 0;
    /* Smaller than the parent's 64px, which wrapped to two lines on a
       phone and read as a page banner rather than a heading above the
       facts — but nudged back up from the first correction, which landed
       a little too quiet. Navy-deep rather than the parent's grey, for
       real contrast against white.

       On a phone the viewport term is the smallest of the three, so the
       lower bound is what actually governs there; that is the number to
       change if this needs adjusting again. */
    font-size: clamp(1.45rem, 3.8vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--hm-navy-deep, #05232c);
    text-wrap: balance;
}

/* An emptied header strip still holds its own margins. */
.st-service-header2.hm-gal__emptied { display: none !important; }