/*
 AN INFINITY HOTELS & RESORTS
 Premium Homepage V2
 Scope: homepage only, using existing ih-* classes.
*/

:root {
    --infinity-blue: #1267a8;
    --infinity-sky: #d9f0ff;
    --infinity-navy: #0d2d49;
    --infinity-gold: #c6a465;
    --infinity-cream: #f8fbfe;
    --infinity-radius: 22px;
}

body:has(.ih-hero) {
    background: var(--infinity-cream);
}

body:has(.ih-hero) .ih-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: min(82vh, 850px);
}

body:has(.ih-hero) .ih-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            105deg,
            rgba(6, 30, 55, .40),
            rgba(9, 51, 82, .13) 58%,
            rgba(0, 0, 0, .08)
        );
}

body:has(.ih-hero) .ih-hero > * {
    position: relative;
    z-index: 1;
}

body:has(.ih-hero) .ih-hero h1 {
    font-weight: 750;
    letter-spacing: .055em;
    line-height: 1.07;
    text-wrap: balance;
    text-shadow: 0 5px 30px rgba(0, 0, 0, .18);
}

body:has(.ih-hero) .ih-hero h2 {
    font-weight: 400;
    line-height: 1.45;
    text-wrap: balance;
}

body:has(.ih-hero) .ih-eyebrow {
    letter-spacing: .17em;
    font-weight: 750;
    text-transform: uppercase;
}

body:has(.ih-hero) .ih-section-heading h2,
body:has(.ih-hero) .ih-section-copy h2 {
    color: var(--infinity-navy);
    letter-spacing: -.035em;
    line-height: 1.12;
    text-wrap: balance;
}

body:has(.ih-hero) .ih-button {
    border-radius: 999px;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

@media (hover: hover) {
    body:has(.ih-hero) .ih-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(13, 45, 73, .18);
    }
}

body:has(.ih-hero) .ih-stay-enquiry {
    position: relative;
    z-index: 3;
    background: linear-gradient(125deg, #fff, #eef8ff);
    border: 1px solid rgba(18, 103, 168, .12);
    border-radius: var(--infinity-radius);
    box-shadow: 0 18px 55px rgba(13, 45, 73, .09);
    padding: clamp(20px, 3vw, 36px);
}

body:has(.ih-hero) .ih-hotel-card,
body:has(.ih-hero) .ih-offer-card {
    overflow: hidden;
    border-radius: var(--infinity-radius);
    background: #fff;
    box-shadow: 0 10px 35px rgba(12, 53, 85, .07);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

@media (hover: hover) {
    body:has(.ih-hero) .ih-hotel-card:hover,
    body:has(.ih-hero) .ih-offer-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 24px 50px rgba(12, 53, 85, .15);
    }
}

body:has(.ih-hero) .ih-hotel-card img,
body:has(.ih-hero) .ih-image-card img,
body:has(.ih-hero) .ih-offer-card img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

@media (hover: hover) {
    body:has(.ih-hero) .ih-hotel-card:hover img,
    body:has(.ih-hero) .ih-image-card:hover img,
    body:has(.ih-hero) .ih-offer-card:hover img {
        transform: scale(1.045);
    }
}

body:has(.ih-hero) .ih-image-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--infinity-radius);
}

body:has(.ih-hero) .ih-card-badge {
    border-radius: 999px;
    background: var(--infinity-gold);
    color: #172b3a;
}

body:has(.ih-hero) .ih-card-actions a,
body:has(.ih-hero) .ih-offer-card a {
    transition: color .2s ease;
}

body:has(.ih-hero) .ih-card-actions a:hover,
body:has(.ih-hero) .ih-offer-card a:hover {
    color: var(--infinity-blue);
}

body:has(.ih-hero) .ih-concierge {
    border-radius: var(--infinity-radius);
}

body:has(.ih-hero) [data-ih-reveal] {
    opacity: 1;
}

body:has(.ih-hero).ih-v2-motion [data-ih-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .65s ease,
        transform .65s ease;
}

body:has(.ih-hero).ih-v2-motion [data-ih-reveal].ih-v2-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 768px) {
    body:has(.ih-hero) .ih-hero {
        min-height: 68vh;
    }

    body:has(.ih-hero) .ih-hero h1 {
        font-size: clamp(2rem, 8vw, 3.3rem);
    }

    body:has(.ih-hero) .ih-hero h2 {
        font-size: clamp(1.05rem, 4vw, 1.5rem);
    }

    body:has(.ih-hero) .ih-stay-enquiry {
        padding: 18px;
        border-radius: 16px;
    }

    body:has(.ih-hero) .ih-hotel-card,
    body:has(.ih-hero) .ih-image-card,
    body:has(.ih-hero) .ih-offer-card {
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(.ih-hero) *,
    body:has(.ih-hero) *::before,
    body:has(.ih-hero) *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    body:has(.ih-hero).ih-v2-motion [data-ih-reveal] {
        opacity: 1;
        transform: none;
    }
}