/* ============================================================
   SHARED IMAGE HERO + GLASS NAVIGATION (sub-pages)
   Mirrors the homepage hero treatment so the new navigation
   and full-bleed grayscale image hero carry through to the
   internal pages. Loaded AFTER style.css so these rules
   override the default solid purple sticky navbar.
   ============================================================ */

/* ----- Glass navbar floating over the hero image ----- */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Above the hero text so dropdown + mobile menu render on top */
    background: rgba(45, 27, 94, 0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: none;
    font-family: 'Inter', sans-serif;
}

/* The mosaic pattern clashes with the glass look */
.navbar .nav-pattern {
    display: none;
}

/* Nav links */
.navbar .nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

/* Gold underline on hover (desktop) — the ::before underline is
   provided by style.css; just ensure the gold colour shift here. */
@media (hover: hover) {
    .navbar .nav-link:hover {
        color: var(--color-gold);
        transform: none;
    }
}

.navbar .nav-link.active {
    color: #fff;
    font-weight: 500;
}

/* Dropdown panel — washed-out purple matching the glass nav bar */
.navbar .dropdown-menu {
    background: rgba(45, 27, 94, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 1001;
}

.navbar .dropdown-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

/* Booking CTA — ghost button, amber fill on hover */
.navbar .nav-cta {
    height: auto;
    padding: 8px 22px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.3px;
    border-radius: 3px;
    box-shadow: none;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.navbar .nav-cta:hover {
    background: #D4AF37; /* Matches the UK & EU landscape banner gold */
    border-color: #D4AF37;
    color: #1a0f3a;
    transform: none;
    box-shadow: none;
}

/* ----- Full-bleed grayscale image hero band ----- */
.page-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 160px 0 90px;
    background: #14082f;
}

.page-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    display: block;
}

/* Dark gradient over the image for headline legibility */
.page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.3) 45%,
        rgba(0, 0, 0, 0.72) 100%
    );
}

/* Brand tint */
.page-hero-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(45, 27, 94, 0.42) 0%, transparent 55%);
}

.page-hero-container {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--space-4);
}

.page-hero-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 18px;
}

.page-hero-headline {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: -1px;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
    margin: 0;
}

.page-hero-headline .gold {
    color: var(--color-gold);
}

.page-hero-sub {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    color: rgba(255, 255, 255, 0.82);
    max-width: 760px;
    margin: 22px auto 0;
    line-height: 1.6;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.page-hero-cta {
    display: inline-block;
    margin-top: 32px;
    background: var(--color-gold);
    color: #1a0f3a;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 34px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(253, 183, 26, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.page-hero-cta:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(253, 183, 26, 0.45);
}

/* ----- Left-aligned variant: shifts the hero copy to the left edge
   of the container and drops the gold emphasis phrase onto its own line ----- */
.page-hero--left .page-hero-container {
    text-align: left;
}

.page-hero--left .page-hero-sub {
    margin-left: 0;
    margin-right: 0;
}

.page-hero--left .page-hero-headline .gold {
    display: block;
}

/* Desktop only: push the left-aligned hero copy hard to the left, into the
   darker zone of the image. Width is capped so the text never runs under the
   subject on the right. Mobile keeps the standard layout (handled below). */
@media (min-width: 769px) {
    .page-hero--farleft .page-hero-container {
        max-width: 620px;
        margin-left: 0;
        margin-right: auto;
        padding-left: clamp(40px, 5vw, 90px);
    }
}

/* ----- Legal pages: clean brand gradient hero (no photo) ----- */
.page-hero--legal {
    min-height: 48vh;
    background: linear-gradient(135deg, #1E0B4D 0%, #2D1B5E 50%, #14082f 100%);
}

.page-hero--legal .page-hero-img,
.page-hero--legal .page-hero-overlay,
.page-hero--legal .page-hero-tint {
    display: none;
}

/* ----- Mobile ----- */
@media (max-width: 768px) {
    .page-hero {
        min-height: 52vh;
        padding: 130px 0 60px;
    }

    .page-hero--legal {
        min-height: 38vh;
    }

    .page-hero-sub {
        font-size: 1rem;
    }
}