/*
 * BASKINTA GLOBAL MEGA MENU NORMALIZATION V1
 *
 * One visual system for:
 * Discover / Visit / Live / Souk Baskinta / About
 */

/* ----------------------------------------------------------
   PANEL FRAME
   ---------------------------------------------------------- */

.bk-mega-panel{
    box-sizing:border-box;
}

.bk-mega-panel .bk-mega-inner{
    width:min(calc(100vw - 120px),1760px);
    min-height:330px;
    margin:0 auto;
    padding:38px 42px;
    box-sizing:border-box;
    border-radius:24px;
}


/* ----------------------------------------------------------
   EDITORIAL MEGA MENU MASTER GRID

   intro | two link columns | feature
   ---------------------------------------------------------- */

.bk-mega-panel .bk-mega-inner.bk-mega-editorial{
    display:grid;
    grid-template-columns:
        minmax(260px,.90fr)
        minmax(500px,1.55fr)
        minmax(390px,1.12fr);
    gap:48px;
    align-items:start;
}


/* ----------------------------------------------------------
   INTRO
   ---------------------------------------------------------- */

.bk-mega-editorial-intro{
    min-width:0;
    padding-top:10px;
}

.bk-mega-editorial-intro .bk-mega-kicker{
    display:block;
    margin-bottom:22px;
}

.bk-mega-editorial-intro > strong{
    display:block;
    margin:0;
    max-width:310px;
    line-height:.95;
}

.bk-mega-editorial-intro > p{
    max-width:300px;
    margin-top:24px;
    line-height:1.65;
}


/* ----------------------------------------------------------
   LINK AREA
   ---------------------------------------------------------- */

.bk-mega-editorial-links{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:36px;
    min-width:0;
}

.bk-mega-column{
    min-width:0;
}

.bk-mega-column .bk-mega-heading{
    display:block;
    margin-bottom:9px;
}

.bk-mega-column > a{
    display:block;
    min-height:67px;
    padding:14px 0 13px;
    box-sizing:border-box;
}

.bk-mega-column > a + a{
    border-top:1px solid rgba(22,75,99,.10);
}

.bk-mega-column > a strong{
    display:block;
    margin-bottom:4px;
    line-height:1.25;
}

.bk-mega-column > a small{
    display:block;
    line-height:1.45;
}


/* ----------------------------------------------------------
   FEATURE CARD
   ---------------------------------------------------------- */

.bk-mega-feature{
    width:100%;
    height:270px;
    min-height:270px;
    align-self:start;
    overflow:hidden;
    border-radius:18px;
}

.bk-mega-feature img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* ----------------------------------------------------------
   PANELS WITHOUT FEATURE CARDS

   Keep their height consistent instead of collapsing.
   ---------------------------------------------------------- */

.bk-mega-panel .bk-mega-inner:not(.bk-mega-editorial){
    min-height:330px;
}


/* ----------------------------------------------------------
   HEADER CONSISTENCY
   ---------------------------------------------------------- */

.bk-global-header-inner{
    box-sizing:border-box;
}

.bk-global-nav{
    align-items:center;
}

.bk-mega-trigger{
    white-space:nowrap;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:1280px){

    .bk-mega-panel .bk-mega-inner{
        width:calc(100vw - 70px);
        padding:32px;
    }

    .bk-mega-panel .bk-mega-inner.bk-mega-editorial{
        grid-template-columns:
            minmax(230px,.82fr)
            minmax(420px,1.45fr)
            minmax(320px,1fr);
        gap:32px;
    }

    .bk-mega-editorial-links{
        gap:26px;
    }

    .bk-mega-feature{
        height:245px;
        min-height:245px;
    }
}


/* ----------------------------------------------------------
   SMALL DESKTOP / TABLET
   ---------------------------------------------------------- */

@media(max-width:1080px){

    .bk-mega-panel .bk-mega-inner.bk-mega-editorial{
        grid-template-columns:
            minmax(220px,.85fr)
            minmax(0,1.7fr);
    }

    .bk-mega-feature{
        display:none;
    }

    .bk-mega-panel .bk-mega-inner{
        min-height:300px;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:760px){

    .bk-mega-panel .bk-mega-inner,
    .bk-mega-panel .bk-mega-inner.bk-mega-editorial{
        display:block;
        width:calc(100vw - 28px);
        min-height:0;
        padding:25px 22px;
        border-radius:18px;
    }

    .bk-mega-editorial-intro{
        margin-bottom:25px;
    }

    .bk-mega-editorial-links{
        grid-template-columns:1fr;
        gap:18px;
    }

    .bk-mega-column > a{
        min-height:0;
        padding:12px 0;
    }
}

/* ==========================================================
   VISIT FEATURE CARD
   ========================================================== */

.bk-visit-feature{
    position:relative;
    display:block;
    overflow:hidden;
    color:#fff;
    text-decoration:none;
}

.bk-visit-feature > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.bk-visit-feature-shade{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            180deg,
            rgba(8,39,52,.04) 20%,
            rgba(8,39,52,.82) 100%
        );
}

.bk-visit-feature-copy{
    position:absolute;
    left:27px;
    right:27px;
    bottom:24px;
    z-index:2;
    display:block;
}

.bk-visit-feature-copy small{
    display:block;
    margin-bottom:8px;
    color:#78d4df;
    font-size:9px;
    font-weight:850;
    letter-spacing:.13em;
}

.bk-visit-feature-copy strong{
    display:block;
    color:#fff;
    font-family:var(
        --bk-type-editorial,
        Georgia,
        serif
    );
    font-size:clamp(25px,2vw,38px);
    font-weight:700;
    line-height:1;
    letter-spacing:-.025em;
}

.bk-visit-feature-copy em{
    display:block;
    margin-top:11px;
    color:#fff;
    font-size:10px;
    font-style:normal;
    font-weight:800;
}

.bk-visit-feature:hover img{
    transform:scale(1.025);
}

.bk-visit-feature img{
    transition:transform .35s ease;
}


/* BASKINTA MEGA MENU TYPOGRAPHY LOCK V2
 *
 * AUTHORITATIVE typography layer for:
 * Discover / Visit / Live / Souk Baskinta / About
 *
 * All selectors are scoped to the global header so page-level
 * typography cannot change mega-menu sizing.
 */

/* ----------------------------------------------------------
   GLOBAL MENU TYPE TOKENS
   ---------------------------------------------------------- */

.bk-global-header{
    --bk-mega-nav-size:15px;
    --bk-mega-kicker-size:10px;
    --bk-mega-heading-size:10px;
    --bk-mega-link-title-size:16px;
    --bk-mega-link-description-size:12px;
    --bk-mega-intro-title-size:42px;
    --bk-mega-intro-description-size:14px;
    --bk-mega-feature-kicker-size:9px;
    --bk-mega-feature-title-size:31px;
    --bk-mega-feature-cta-size:11px;
}


/* ----------------------------------------------------------
   MAIN NAVIGATION
   ---------------------------------------------------------- */

.bk-global-header .bk-mega-trigger{
    font-size:var(--bk-mega-nav-size);
    font-weight:600;
    line-height:1.2;
    letter-spacing:-.01em;
}


/* ----------------------------------------------------------
   KICKERS
   Discover Baskinta / Visit Baskinta / etc.
   ---------------------------------------------------------- */

.bk-global-header .bk-mega-kicker{
    font-size:var(--bk-mega-kicker-size);
    font-weight:850;
    line-height:1.2;
    letter-spacing:.15em;
    text-transform:uppercase;
}


/* ----------------------------------------------------------
   INTRO TITLES

   Covers:
   - legacy Discover/About .bk-mega-intro
   - editorial Visit/Live
   - Souk minimal
   ---------------------------------------------------------- */

.bk-global-header .bk-mega-intro > strong,
.bk-global-header .bk-mega-editorial-intro > strong,
.bk-global-header .bk-souk-minimal-intro > strong{
    font-family:
        var(
            --bk-type-editorial,
            Georgia,
            serif
        );

    font-size:
        var(
            --bk-mega-intro-title-size
        );

    font-weight:700;
    line-height:.96;
    letter-spacing:-.035em;
}


/* ----------------------------------------------------------
   INTRO DESCRIPTION
   ---------------------------------------------------------- */

.bk-global-header .bk-mega-intro > p,
.bk-global-header .bk-mega-editorial-intro > p,
.bk-global-header .bk-souk-minimal-intro > p{
    font-size:
        var(
            --bk-mega-intro-description-size
        );

    font-weight:400;
    line-height:1.65;
    letter-spacing:0;
}


/* ----------------------------------------------------------
   COLUMN HEADINGS
   EXPLORE / HERITAGE / PLAN / LIFE IN BASKINTA
   ---------------------------------------------------------- */

.bk-global-header .bk-mega-heading{
    font-size:
        var(
            --bk-mega-heading-size
        );

    font-weight:850;
    line-height:1.2;
    letter-spacing:.13em;
    text-transform:uppercase;
}


/* ----------------------------------------------------------
   STANDARD LINK TITLES
   ---------------------------------------------------------- */

.bk-global-header .bk-mega-column > a > strong{
    font-size:
        var(
            --bk-mega-link-title-size
        );

    font-weight:700;
    line-height:1.25;
    letter-spacing:-.01em;
}


/* ----------------------------------------------------------
   STANDARD LINK DESCRIPTIONS
   ---------------------------------------------------------- */

.bk-global-header .bk-mega-column > a > small{
    font-size:
        var(
            --bk-mega-link-description-size
        );

    font-weight:400;
    line-height:1.45;
    letter-spacing:0;
}


/* ----------------------------------------------------------
   SOUK LINK TYPOGRAPHY

   Souk uses its own markup generation.
   ---------------------------------------------------------- */

.bk-global-header .bk-souk-minimal-link strong{
    font-size:
        var(
            --bk-mega-link-title-size
        );

    font-weight:700;
    line-height:1.25;
    letter-spacing:-.01em;
}

.bk-global-header .bk-souk-minimal-link small{
    font-size:
        var(
            --bk-mega-link-description-size
        );

    font-weight:400;
    line-height:1.45;
    letter-spacing:0;
}


/* ----------------------------------------------------------
   FEATURE CARD TYPOGRAPHY

   Covers Discover / Live / Souk / About feature cards.
   ---------------------------------------------------------- */

.bk-global-header .bk-mega-feature-copy > small,
.bk-global-header .bk-visit-feature-copy > small{
    font-size:
        var(
            --bk-mega-feature-kicker-size
        );

    font-weight:850;
    line-height:1.2;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.bk-global-header .bk-mega-feature-copy > strong,
.bk-global-header .bk-visit-feature-copy > strong{
    font-family:
        var(
            --bk-type-editorial,
            Georgia,
            serif
        );

    font-size:
        var(
            --bk-mega-feature-title-size
        );

    font-weight:700;
    line-height:1.02;
    letter-spacing:-.025em;
}

.bk-global-header .bk-mega-feature-copy > span,
.bk-global-header .bk-visit-feature-copy > em{
    font-size:
        var(
            --bk-mega-feature-cta-size
        );

    font-weight:800;
    line-height:1.3;
    letter-spacing:0;
}


/* ----------------------------------------------------------
   TABLET TYPE
   ---------------------------------------------------------- */

@media(max-width:1280px){

    .bk-global-header{
        --bk-mega-nav-size:14px;
        --bk-mega-intro-title-size:38px;
        --bk-mega-link-title-size:15px;
        --bk-mega-link-description-size:11px;
        --bk-mega-feature-title-size:28px;
    }
}


/* ----------------------------------------------------------
   MOBILE TYPE
   ---------------------------------------------------------- */

@media(max-width:760px){

    .bk-global-header{
        --bk-mega-nav-size:15px;
        --bk-mega-intro-title-size:34px;
        --bk-mega-intro-description-size:13px;
        --bk-mega-link-title-size:15px;
        --bk-mega-link-description-size:12px;
        --bk-mega-feature-title-size:26px;
    }
}

/* END BASKINTA MEGA MENU TYPOGRAPHY LOCK V2 */