/**
 * Module: Hero Variant Composition Layer
 * Target: src/core_apps/frontend/static/frontend/themes/_shared/sections/hero/hero-variants.css
 */

/* =============================================================================
   1. STRUCTURAL CONTAINER & POSITION CONTEXT
   ============================================================================= */

/* Structural context for composable sections — no overflow clipping here;
   breakout clipping is handled at the html level (reset.css) */

/*
|--------------------------------------------------------------------------
| Qorezo Rendering Invariant
|--------------------------------------------------------------------------
| Full-bleed breakout sections rely on negative inline margins to escape
| constrained layout containers.
|
| DO NOT combine breakout margins with width: 100%.
| Negative margins already expand the rendering box mathematically.
|
| Applying width: 100% constrains the element to the parent content box
| and produces asymmetric edge gaps.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Transform Safety Rule
|--------------------------------------------------------------------------
| Never apply transform/scale/translate directly on breakout root
| containers. Apply motion only to inner visual wrappers to prevent
| phantom horizontal overflow on mobile devices.
|--------------------------------------------------------------------------
*/
.page-home .home-composer .section-hero {
    position: relative;
    overflow: visible;
    display: block;
    min-height: 70vh;
    z-index: 10;
    margin: var(--layout-breakout-inline);
    /* Ensure breakout if parent padded */
}

/* Ensure breakout is safe across viewports */
@media (max-width: 1024px) {
    .page-home .home-composer .section-hero {
        margin: 0;
    }
}

/* Native tenant-safe image containment */
.page-home .home-composer .section-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    display: block;
}

/* Scoped enforcement to guarantee input components utilize full allocated grid widths */
.page-composer .section-hero .booking-form__field :is(.input-wrap,
    input[type="text"],
    .booking-form__input,
    #property-dropdown,
    #guests,
    .flatpickr,
    #checkin,
    #checkout),
.page-home .home-composer .section-hero .booking-form__field :is(.input-wrap,
    input[type="text"],
    .booking-form__input,
    #property-dropdown,
    #guests,
    .flatpickr,
    #checkin,
    #checkout) {
    width: 100% !important;
}

/* Sacred DOM instrumentation container */
.page-home .home-composer .section-hero__booking-wrapper {
    position: relative;
    z-index: 20;
    width: 100%;
}

/* =============================================================================
   1.5. VARIANT: DEFAULT — Carousel Hero with Booking Widget
   
   Design: Full-width image carousel, text overlay, booking form.
   Scroll-hint animated chevron at bottom.
   Note: Core .hero styles remain in per-theme home.css for backward compat.
   These rules ADD to the default hero rather than replace.
   ============================================================================= */

/* Scroll Hint Chevron — animated bounce at bottom of hero */
.page-home .home-composer .section-hero--default .hero-scroll-hint {
    position: absolute;
    bottom: clamp(1rem, 2vw, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-overlay, 10);
    color: #ffffff;
    font-size: 1.1rem;
    opacity: 0.7;
    animation: hero-scroll-bounce 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hero-scroll-bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-50%) translateY(8px);
        opacity: 0.4;
    }
}

/* Hero Text Entrance — fade up on load */
.page-home .home-composer .section-hero--default .hero__line--1 {
    animation: hero-text-entrance 0.6s ease-out 0.2s both;
}

.page-home .home-composer .section-hero--default .hero__line--2 {
    animation: hero-text-entrance 0.6s ease-out 0.4s both;
}

@keyframes hero-text-entrance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile — hide scroll hint on very small screens */
@media (max-width: 480px) {
    .page-home .home-composer .section-hero--default .hero-scroll-hint {
        display: none;
    }
}


/* =============================================================================
   2. VARIANT: SPLIT (Asymmetric Horizontal Balance)
   ============================================================================= */
.page-home .home-composer .section-hero--split,
.page-home .home-composer .section-hero--split-immersive {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    min-height: 85vh;
    background: linear-gradient(
        color-mix(in srgb, var(--background-secondary, #f9f9f9) var(--bg-pattern-mix, 96%), transparent),
        color-mix(in srgb, var(--background-secondary, #f9f9f9) var(--bg-pattern-mix, 96%), transparent)
    ), var(--background-image, none);
    background-size: var(--background-image-size, auto);
    background-repeat: repeat;
    background-position: top left;
    background-color: var(--background-secondary, #f9f9f9);
}

@media (min-width: 1024px) {
    .page-home .home-composer .section-hero--split,
.page-home .home-composer .section-hero--split-immersive {
        grid-template-columns: 1.1fr 0.9fr;
        min-height: 97vh;
    }
}

.page-home .home-composer .section-hero--split .hero-content-pane,
.page-home .home-composer .section-hero--split-immersive .hero-content-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 6rem) clamp(1.5rem, 4vw, 4rem);
    padding-top: clamp(5rem, 12vw, 7rem);
    /* Clear fixed nav bar */
    z-index: 2;
}

@media (min-width: 1024px) {
    .page-home .home-composer .section-hero--split .hero-content-pane,
.page-home .home-composer .section-hero--split-immersive .hero-content-pane {
        padding-top: clamp(4rem, 10vw, 8rem);
        /* Push down from nav */
    }
}

.page-home .home-composer .section-hero--split .hero-media-pane {
    display: none;
    /* Hidden on mobile */
}

@media (min-width: 1024px) {
    .page-home .home-composer .section-hero--split .hero-media-pane {
        display: block;
        position: relative;
        height: 100%;
        min-height: 400px;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
        /* Subtle elegant slant */
    }
}

/* Advanced Typography for Split Hero */
.page-home .home-composer .section-hero--split .hero-title,
.page-home .home-composer .section-hero--split-immersive .hero-title {
    font-family: var(--font-family-secondary, serif);
    font-size: clamp(2.5rem, 4.5vw, 4.2rem);
    font-weight: 700;
    /* Safer for cursive/delicate fonts */
    line-height: 1.25;
    /* Increased to prevent vertical cramping on script fonts */
    letter-spacing: normal;
    color: var(--color-secondary, #111) !important;
    /* Authoritative dark brand contrast */
    margin-bottom: 1.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.page-home .home-composer .section-hero--split .hero-intro,
.page-home .home-composer .section-hero--split .hero-intro p,
.page-home .home-composer .section-hero--split-immersive .hero-intro,
.page-home .home-composer .section-hero--split-immersive .hero-intro p {
    font-family: var(--font-family-primary, sans-serif);
    font-size: clamp(1.1rem, 1.4vw, 1.25rem);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.015em;
    color: #475569 !important;
    /* Premium slate gray */
    opacity: 1;
    margin-bottom: 1.25rem;
    max-width: 550px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Refined COMPACT CARD layout for the Booking Widget in Split Context */
@media (min-width: 1025px) {
    .page-home .home-composer .section-hero--split .booking-form__fields,
.page-home .home-composer .section-hero--split-immersive .booking-form__fields {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
        padding: 2.25rem !important;
        border-radius: var(--border-radius-secondary, 1.25rem) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
        background: #ffffff !important;
        max-width: 560px !important;
        margin: 0 !important;
        /* Left aligned with content */
    }

    /* Force fields that must remain full-width in stacked/compact card */
    .page-home .home-composer .section-hero--split .booking-form__field:has(#property-dropdown),
    .page-home .home-composer .section-hero--split .booking-form__field.guest-selection,
    .page-home .home-composer .section-hero--split .guest-selection.rooms-for,
.page-home .home-composer .section-hero--split-immersive .booking-form__field:has(#property-dropdown),
    .page-home .home-composer .section-hero--split-immersive .booking-form__field.guest-selection,
    .page-home .home-composer .section-hero--split-immersive .guest-selection.rooms-for {
        grid-column: 1 / -1 !important;
    }

    .page-home .home-composer .section-hero--split .booking-form__field+.booking-form__field::before,
.page-home .home-composer .section-hero--split-immersive .booking-form__field+.booking-form__field::before {
        display: none !important;
        /* Remove standard vertical line separators */
    }

    .page-home .home-composer .section-hero--split .booking-form .button--primary,
.page-home .home-composer .section-hero--split-immersive .booking-form .button--primary {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 3.5rem !important;
        border-radius: var(--border-radius-primary, 0.25rem) !important;
        margin-top: 0.5rem !important;
    }

    /* Guest Verify Entry — full bleed within 2.25rem-padded card */
    .page-home .home-composer .section-hero--split .guest-verify-entry,
.page-home .home-composer .section-hero--split-immersive .guest-verify-entry {
        grid-column: 1 / -1 !important;
        width: calc(100% + 4.5rem) !important;
        /* 2 × 2.25rem padding */
        margin-left: -2.25rem !important;
        margin-right: -2.25rem !important;
        margin-bottom: -2.25rem !important;
        /* Flush with card bottom */
        padding: 0.65rem 2.25rem !important;
        border-bottom-left-radius: var(--border-radius-secondary, 1.25rem) !important;
        border-bottom-right-radius: var(--border-radius-secondary, 1.25rem) !important;
    }

    .page-home .home-composer .section-hero--split .gv-content,
.page-home .home-composer .section-hero--split-immersive .gv-content {
        flex-wrap: wrap !important;
        gap: 0.35rem;
    }

    /* Label block stays stacked but compact */
    .page-home .home-composer .section-hero--split .gv-label-block .title,
.page-home .home-composer .section-hero--split-immersive .gv-label-block .title {
        font-size: 0.8rem;
    }

    .page-home .home-composer .section-hero--split .gv-label-block .subtext,
.page-home .home-composer .section-hero--split-immersive .gv-label-block .subtext {
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .page-home .home-composer .section-hero--split .gv-inputs-row,
.page-home .home-composer .section-hero--split-immersive .gv-inputs-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }

    /* Input shrinks to share row with UNLOCK + Cancel */
    .page-home .home-composer .section-hero--split .gv-input-wrapper,
.page-home .home-composer .section-hero--split-immersive .gv-input-wrapper {
        min-width: 0;
        flex: 1 1 0;
    }

    .page-home .home-composer .section-hero--split .gv-input-wrapper .gv-input,
.page-home .home-composer .section-hero--split-immersive .gv-input-wrapper .gv-input {
        font-size: 0.85rem;
    }

    .page-home .home-composer .section-hero--split .gv-button,
.page-home .home-composer .section-hero--split-immersive .gv-button {
        flex-shrink: 0;
        padding-inline: 1rem;
        font-size: 0.8rem;
    }

    .page-home .home-composer .section-hero--split .gv-cancel,
.page-home .home-composer .section-hero--split-immersive .gv-cancel {
        flex-shrink: 0;
        font-size: 0.8rem;
    }
}


/* =============================================================================
   3. VARIANT: IMMERSIVE (Full-Screen Cinematic Stage)
   Enterprise pattern: mirrors .hero base layout (isolation, place-items, etc.)
   with cinematic crossfade slideshow + glassmorphic booking widget.
   ============================================================================= */

/* --- 3a. Stage Container — Mirrors Default Hero Full-Bleed --- */
.page-home .home-composer .section-hero--immersive {
    display: grid;
    place-items: stretch;
    min-height: 97vh;
    background: #000;
    isolation: isolate;
    overflow: hidden;
    z-index: 5;
}

/* --- 3b. Background Pane — Crossfade Image Layer --- */
.page-home .home-composer .section-hero--immersive .immersive-bg-pane {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Individual slide images: stacked absolute, crossfade via opacity */
.page-home .home-composer .section-hero--immersive .immersive-bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}

.page-home .home-composer .section-hero--immersive .immersive-bg-slide.is-active {
    opacity: 1;
}

/* --- 3c. Gradient Overlay — Cinematic vignette via shared variable.
       Immersive scopes a deeper overlay since the full-screen crossfade
       has no carousel controls to share attention. */
.page-home .home-composer .section-hero--immersive .immersive-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay,
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.50) 0%,
                rgba(0, 0, 0, 0.18) 30%,
                rgba(0, 0, 0, 0.15) 55%,
                rgba(0, 0, 0, 0.30) 80%,
                rgba(0, 0, 0, 0.60) 100%));
    z-index: 2;
    pointer-events: none;
}

/* --- 3d. Content Pane — Centered Stage --- */
.page-home .home-composer .section-hero--immersive .immersive-content-pane {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--section-padding-y, 5rem) var(--section-padding-x-desktop, 7.5rem);
    color: #fff;
}

/* --- 3e. Cinematic Typography --- */
.page-home .home-composer .section-hero--immersive .hero-title {
    font-family: var(--font-family-secondary, serif);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    /* Safer for cursive/delicate fonts */
    color: #ffffff !important;
    letter-spacing: normal;
    line-height: 1.25;
    /* Increased to prevent vertical cramping on script fonts */
    margin: 0 0 1.25rem 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    max-width: 55rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.page-home .home-composer .section-hero--immersive .hero-intro {
    margin: 0 0 2.5rem 0;
    max-width: 45rem;
}

.page-home .home-composer .section-hero--immersive .hero-intro p {
    font-family: var(--font-family-primary, sans-serif);
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.65;
    letter-spacing: 0.015em;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 3f. Booking Widget — Centered Card --- */
.page-home .home-composer .section-hero--immersive .section-hero__booking-wrapper {
    width: 100%;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

@media (min-width: 1025px) {

    /* Prevent the default white card from stretching awkwardly wide and apply cinematic frosted card style */
    .page-home .home-composer .section-hero--immersive .booking-form__fields {
        max-width: 1050px !important;
        margin: 0 auto;

        /* Cinematic Card Aesthetic */
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: var(--border-radius-secondary, 1.25rem) !important;
        padding: 1.5rem 2rem !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    /* Guest Verify Entry — full bleed within 2rem-padded card */
    .page-home .home-composer .section-hero--immersive .guest-verify-entry {
        width: calc(100% + 4rem) !important;
        margin-left: -2rem !important;
        margin-right: -2rem !important;
        margin-bottom: -1.5rem !important;
        padding: 0.65rem 2rem !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    .page-home .home-composer .section-hero--immersive .gv-content {
        justify-content: flex-start !important;
    }

    .page-home .home-composer .section-hero--immersive .gv-inputs-row {
        justify-content: flex-start !important;
        width: max-content !important;
        margin-left: 0 !important;
    }

    .page-home .home-composer .section-hero--immersive .gv-input-wrapper {
        margin: 0 !important;
    }
}

/* --- 3g. Immersive Responsive Breakpoints --- */
@media (max-width: 1024px) {
    .page-home .home-composer .section-hero--immersive .immersive-content-pane {
        padding: 3rem var(--section-padding-x-tablet, 3rem);
    }
}

@media (max-width: 768px) {

    /* Hero content pane adjustments for mobile */
    .page-home .home-composer .section-hero--immersive .immersive-content-pane {
        padding: clamp(6rem, 15vh, 8rem) 1.25rem clamp(3rem, 8vh, 4rem);
        justify-content: flex-start;
        /* Start from top instead of center */
    }

    .page-home .home-composer .section-hero--immersive .hero-title {
        font-size: clamp(2rem, 9vw, 2.6rem);
        /* Slightly larger on very small screens */
        margin-bottom: 0.5rem;
        margin-top: auto;
        /* Push down to center vertically */
    }

    .page-home .home-composer .section-hero--immersive .hero-intro {
        margin-bottom: 1.5rem;
        /* Reduced gap before booking widget */
    }

    .page-home .home-composer .section-hero--immersive .hero-intro p {
        font-size: 1rem;
    }

    .page-home .home-composer .section-hero--immersive .section-hero__booking-wrapper {
        margin-top: 0;
        margin-bottom: auto;
        /* Push up to center vertically */
    }
}


/* =============================================================================
   4. VARIANT: SPLIT-IMMERSIVE (Split Layout + Crossfade Media Pane)
   
   Same asymmetric split as variant 2 (content left, media right), but the
   right media pane uses a crossfade slideshow for multiple hero images
   instead of a single static image.
   ============================================================================= */

/* --- 4c. Media Pane — Immersive Crossfade Slideshow --- */
.page-home .home-composer .section-hero--split-immersive .hero-media-pane {
    display: none;
    /* Hidden on mobile */
}

@media (min-width: 1024px) {
    .page-home .home-composer .section-hero--split-immersive .hero-media-pane {
        display: block;
        position: relative;
        height: 100%;
        min-height: 400px;
        overflow: hidden;
        background: #111;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* Crossfade Slides — stacked absolute, opacity transition */
.page-home .home-composer .section-hero--split-immersive .split-imm__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
}

.page-home .home-composer .section-hero--split-immersive .split-imm__slide.is-active {
    opacity: 1;
}


/* =============================================================================
   HERO VIDEO — Ambient Background Layer
   ============================================================================= */

/* Immersive + Default: Full-screen video fill */
.section-hero .immersive-bg-video,
.section-hero .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Split variants: Video in media pane */
.section-hero--split .hero-media-pane video,
.section-hero--split-immersive .hero-media-pane video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .section-hero video {
        display: none !important;
    }
    /* Poster image fallback is handled by the <img> tags still in DOM if they were to exist */
}


/* =============================================================================
   VIDEO SPECIFIC OVERRIDES FOR IMMERSIVE VARIANT
   ============================================================================= */
.section-hero--immersive.hero--has-video .immersive-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.40) 55%,
        rgba(0, 0, 0, 0.50) 80%,
        rgba(0, 0, 0, 0.70) 100%
    );
}

.section-hero--immersive.hero--has-video .hero-title {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 0, 0, 0.5);
}