/* ============================================================
   J&I ELITE — Global Stylesheet
   style.css
   ============================================================

   TABLE OF CONTENTS
   1. Design Tokens  (:root variables)
   2. Reset & Base
   3. Typography
   4. Layout — Frame & Containers
   5. Region Cards
   6. Background Images
   7. Overlay
   8. Content Block
   9. Gold Accent Line
   10. Location Copy
   11. Enter Portal Button
   12. Header
   13. Footer
   14. Mobile (max-width: 767px)
   15. Extra-small phones (max-width: 380px)
   ============================================================ */


/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
    /* Brand Colors */
    --color-navy:           #1A202C;
    --color-cream:          #FDFBF7;
    --color-gold:           #C5A059;
    --color-gold-border:    rgba(197, 160, 89, 0.3);
    --color-overlay-mid:    rgba(26, 32, 44, 0.76);
    --color-overlay-hover:  rgba(26, 32, 44, 0.9);
    --color-desc-text:      rgba(255, 255, 255, 0.6);

    /* Typography */
    --font-display: 'Playfair Display', serif;
    --font-body:    'Lato', sans-serif;

    /* Font Sizes */
    --text-label:       10px;
    --text-desc:        11px;
    --text-footer:      9px;
    --text-cta:         10px;
    --text-location:    clamp(3rem, 8vw, 6rem);

    /* Spacing */
    --card-padding:         120px 60px;
    --header-top:           60px;
    --footer-bottom:        40px;
    --logo-max-height:      100px;
    --frame-inset:          20px;
    --accent-line-height:   40px;
    --accent-line-hover:    80px;

    /* Letter Spacing */
    --tracking-label:   0.5em;
    --tracking-desc:    0.3em;
    --tracking-footer:  0.4em;
    --tracking-header:  0.6em;

    /* Animation */
    --speed-dramatic:   1s;
    --speed-content:    0.6s;
    --easing:           cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index Scale */
    --z-overlay:    10;
    --z-content:    20;
    --z-header:     50;
    --z-frame:      100;

    /* Card Expansion */
    --card-flex-default:    1;
    --card-flex-hover:      1.2;
    --card-scale-hover:     1.08;
    --content-lift-hover:   -20px;
}


/* ── 2. Reset & Base ───────────────────────────────────────── */
body {
    background-color: var(--color-navy);
    color: var(--color-cream);
    font-family: var(--font-body);
    margin: 0;
}


/* ── 3. Typography ─────────────────────────────────────────── */
h1, h2, .serif {
    font-family: var(--font-display);
}


/* ── 4. Layout — Frame & Containers ───────────────────────── */
.viewport-frame {
    position: fixed;
    inset: var(--frame-inset);
    border: 1px solid var(--color-gold-border);
    pointer-events: none;
    z-index: var(--z-frame);
}

.main-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}


/* ── 5. Region Cards ───────────────────────────────────────── */
.region-card {
    position: relative;
    flex: var(--card-flex-default);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--card-padding);
    overflow: hidden;
    transition: flex var(--speed-dramatic) var(--easing);
    text-decoration: none;
    color: inherit;
}

.region-card:hover {
    flex: var(--card-flex-hover);
}


/* ── 6. Background Images ──────────────────────────────────── */
.bg-asset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.4);
    transition:
        transform var(--speed-dramatic) var(--easing),
        filter    var(--speed-dramatic) var(--easing);
}

.region-card:hover .bg-asset {
    filter: grayscale(0%) brightness(0.6);
    transform: scale(var(--card-scale-hover));
}

.dubai-img {
    object-position: 35% 10%;
}


/* ── 7. Overlay ────────────────────────────────────────────── */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-overlay-mid) 0%, transparent 100%);
    transition:
        opacity    var(--speed-dramatic) var(--easing),
        background var(--speed-dramatic) var(--easing);
    z-index: var(--z-overlay);
}

.region-card:hover .overlay {
    background: linear-gradient(to top, var(--color-overlay-hover) 10%, transparent 100%);
}


/* ── 8. Content Block ──────────────────────────────────────── */
.content-wrap {
    position: relative;
    z-index: var(--z-content);
    text-align: left;
    transition: transform var(--speed-content) var(--easing);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.region-card:hover .content-wrap {
    transform: translateY(var(--content-lift-hover));
}


/* ── 9. Gold Accent Line ───────────────────────────────────── */
.gold-accent-line {
    height: var(--accent-line-height);
    width: 1px;
    background-color: var(--color-gold);
    margin-bottom: 2rem;
    transition: height var(--speed-content) var(--easing);
}

.region-card:hover .gold-accent-line {
    height: var(--accent-line-hover);
}


/* ── 10. Location Copy ─────────────────────────────────────── */
.location-label {
    color: var(--color-gold);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
}

.location-name {
    font-size: var(--text-location);
    margin-bottom: 1.5rem;
    line-height: 1;
    font-weight: 400;
}

.location-desc {
    font-size: var(--text-desc);
    text-transform: uppercase;
    letter-spacing: var(--tracking-desc);
    color: var(--color-desc-text);
    line-height: 2;
    max-width: 300px;
}


/* ── 11. Enter Portal Button ───────────────────────────────── */
.enter-portal-cta {
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    display: inline-block;
    margin-top: 2rem;
    border-bottom: 1px solid var(--color-gold);
    padding-bottom: 0.25rem;
    font-size: var(--text-cta);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.region-card:hover .enter-portal-cta {
    opacity: 1;
}


/* ── 12. Header ────────────────────────────────────────────── */
header {
    position: absolute;
    top: var(--header-top);
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    pointer-events: none;
    text-align: center;
    background: transparent;

    /* Dark drape so header text pops against the image */
    /* Extends upward to cover the full top of the container */
}

/* Gradient scrim behind the header — separate from the card overlays */
header::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--header-top)); /* stretch to very top of container */
    left: 0;
    width: 100%;
    height: calc(100% + var(--header-top) + 60px);
    background: linear-gradient(to bottom, rgba(26, 32, 44, 0.7) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

.header-title {
    color: var(--color-gold);
    letter-spacing: var(--tracking-header);
    text-transform: uppercase;
    font-family: var(--font-display);
}

.logo-img {
    max-height: var(--logo-max-height);
    margin: 0 auto 15px;
    display: block;
    pointer-events: auto;
}


/* ── 13. Footer ────────────────────────────────────────────── */
footer {
    position: absolute;
    bottom: var(--footer-bottom);
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    pointer-events: none;
}


/* ── 14. Mobile (max-width: 767px) ─────────────────────────── */
@media (max-width: 767px) {
    .main-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .region-card {
        min-height: 75vh;
        flex: none;
        padding: 40px 28px 48px;
    }

    .region-card:hover {
        flex: none;
    }

    .location-label {
        font-size: 9px;
        letter-spacing: 0.3em;
    }

    .location-name {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .location-desc {
        font-size: 10px;
        letter-spacing: 0.2em;
        line-height: 1.8;
        max-width: 100%;
    }

    .enter-portal-cta {
        opacity: 1;
    }

    footer {
        position: relative;
        pointer-events: auto;
        bottom: 0;
        padding: 2rem 1rem;
    }

    .viewport-frame {
        inset: 10px;
    }

    .gold-accent-line {
        height: 28px;
        margin-bottom: 1.25rem;
    }
}


/* ── 15. Extra-small phones (max-width: 380px) ─────────────── */
@media (max-width: 380px) {
    .location-name  { font-size: 2.5rem; }
    .location-label { font-size: 8px; letter-spacing: 0.2em; }
    .location-desc  { font-size: 9px;  letter-spacing: 0.15em; }
}