/*
 * FLT HOMEPAGE EVENT SHOWCASE V2
 * Real photography + central media authority.
 */

.flt-event-showcase{
    position:relative;
    padding:40px 0 34px;
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(0,167,181,.08),
            transparent 38%
        ),
        #050b10;
}

.flt-showcase-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.flt-photo-card{
    position:relative;
    isolation:isolate;
    min-height:430px;
    overflow:hidden;
    border:
        1px solid rgba(215,181,109,.34);
    border-radius:18px;
    background:#08131b;
    box-shadow:
        0 18px 46px rgba(0,0,0,.25);
}

.flt-card-photo{
    position:absolute;
    inset:0;
    z-index:-3;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.015);
    transition:
        transform .5s ease,
        filter .5s ease;
}

.flt-photo-card:hover .flt-card-photo{
    transform:scale(1.045);
}

.flt-card-overlay{
    position:absolute;
    inset:0;
    z-index:-2;

    background:
        linear-gradient(
            180deg,
            rgba(3,9,14,.05) 0%,
            rgba(3,9,14,.20) 36%,
            rgba(3,9,14,.88) 76%,
            rgba(3,9,14,.98) 100%
        );
}

.flt-card-overlay-heavy{
    background:
        linear-gradient(
            180deg,
            rgba(3,9,14,.18),
            rgba(3,9,14,.60) 48%,
            rgba(3,9,14,.98)
        );
}

.flt-card-copy{
    position:absolute;
    z-index:4;
    left:34px;
    right:34px;
    bottom:31px;
    padding:0;
}

.flt-card-kicker{
    display:block;
    margin-bottom:10px;

    color:#00b9c8;
    font-size:13px;
    font-weight:900;
    line-height:1;
    letter-spacing:.19em;
    text-transform:uppercase;
}

.flt-card-title{
    display:block;
    max-width:540px;

    color:#fff;
    font-size:
        clamp(28px,3vw,47px);
    font-weight:900;
    line-height:.96;
    letter-spacing:-.025em;
    text-transform:uppercase;

    text-shadow:
        0 3px 18px rgba(0,0,0,.45);
}

/*
 * Venue stays WHITE.
 * Gold is accent only.
 */
.flt-location-title{
    color:#fff !important;
}

.flt-card-rule{
    display:block;
    width:54px;
    height:2px;
    margin:18px 0 14px;
    background:#d7b56d;
}

.flt-card-meta{
    margin:0;

    color:rgba(255,255,255,.86);
    font-size:14px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
}


/* Real FLT master crown */

.flt-card-master-crown{
    position:absolute;
    z-index:3;
    top:27px;
    left:30px;

    width:104px;
    height:90px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 10px 25px
            rgba(0,0,0,.68)
        );
}


/*
 * Premium location pin.
 * CSS vector, not a raster icon.
 */

.flt-location-marker{
    position:absolute;
    z-index:3;

    top:30px;
    right:31px;

    width:72px;
    height:72px;

    display:grid;
    place-items:center;

    border:
        1px solid rgba(215,181,109,.66);
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(5,15,22,.95),
            rgba(12,29,38,.88)
        );

    box-shadow:
        0 16px 35px rgba(0,0,0,.38),
        inset 0 0 22px rgba(215,181,109,.07);
}

.flt-location-marker::before{
    content:"";

    width:27px;
    height:34px;

    border:
        3px solid #d7b56d;
    border-radius:
        50% 50% 50% 4px;

    transform:
        rotate(-45deg);

    box-sizing:border-box;
}

.flt-location-marker span{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;
    background:#d7b56d;

    transform:
        translateY(-5px);
}


/* Community mark */

.flt-community-mark{
    position:absolute;
    z-index:3;
    top:32px;
    right:32px;

    width:68px;
    height:58px;
}

.flt-community-mark span{
    position:absolute;

    width:23px;
    height:23px;

    border:
        2px solid #00b9c8;
    border-radius:50%;
}

.flt-community-mark span:first-child{
    left:5px;
    top:0;
}

.flt-community-mark span:last-child{
    right:5px;
    top:0;
}

.flt-community-mark::after{
    content:"";

    position:absolute;

    left:3px;
    right:3px;
    bottom:0;

    height:22px;

    border:
        2px solid #00b9c8;
    border-top-left-radius:19px;
    border-top-right-radius:19px;
}


/* Tablet */

@media(max-width:900px){

    .flt-event-showcase{
        padding-top:24px;
    }

    .flt-showcase-grid{
        gap:14px;
    }

    .flt-photo-card{
        min-height:390px;
    }

    .flt-card-copy{
        left:24px;
        right:24px;
        bottom:25px;
    }

}


/* Mobile */

@media(max-width:680px){

    .flt-event-showcase{
        padding:
            18px 0 24px;
    }

    .flt-showcase-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    /*
     * Wide photo cards are more cinematic
     * than the old flat 2-column boxes.
     */

    .flt-photo-card{
        min-height:365px;
        border-radius:16px;
    }

    .flt-card-copy{
        left:21px;
        right:21px;
        bottom:23px;
    }

    .flt-card-kicker{
        font-size:11px;
        margin-bottom:9px;
    }

    .flt-card-title{
        font-size:
            clamp(27px,8vw,38px);
        max-width:90%;
    }

    .flt-card-meta{
        font-size:12px;
    }

    .flt-card-rule{
        margin:
            14px 0 12px;
        width:47px;
    }

    .flt-card-master-crown{
        width:84px;
        height:74px;
        top:20px;
        left:20px;
    }

    .flt-location-marker{
        width:59px;
        height:59px;
        top:19px;
        right:19px;
        border-radius:18px;
    }

    .flt-location-marker::before{
        width:22px;
        height:28px;
    }

    .flt-community-mark{
        top:22px;
        right:22px;
        transform:scale(.83);
        transform-origin:top right;
    }

}


/* Very small phones */

@media(max-width:390px){

    .flt-photo-card{
        min-height:340px;
    }

    .flt-card-title{
        font-size:27px;
    }

}