/* =====================================================
   GFC EVENTS PAGE
===================================================== */

:root {

    --events-black: #050505;
    --events-dark: #080808;
    --events-card: #101010;

    --events-red: #D61C24;

    --events-white: #ffffff;
    --events-gray: #a5a5a5;

}


/* =====================================================
   ACTIVE NAV
===================================================== */

.nav-links a.active {

    color: #D61C24;

}


.nav-links a.active::after {

    width: 100%;

}


/* =====================================================
   HERO
===================================================== */

.events-hero {

    position: relative;

    min-height: 780px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 160px 30px 120px;

    background:

        radial-gradient(
            circle at 50% 60%,
            rgba(214,28,36,.16),
            transparent 45%
        ),

        #050505;

}


.events-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.96),
            rgba(0,0,0,.55),
            rgba(0,0,0,.96)
        );

    z-index: 1;

}


.events-hero::after {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    right: -300px;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(214,28,36,.12);

    filter: blur(120px);

    border-radius: 50%;

}


.events-hero-content {

    position: relative;

    z-index: 3;

    width: 90%;

    max-width: 1100px;

    text-align: center;

    margin: auto;

}


.events-label {

    display: inline-block;

    margin-bottom: 25px;

    color: #D61C24;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 6px;

}


.events-hero h1 {

    margin: 0;

    color: white;

    font-size: clamp(65px, 9vw, 145px);

    line-height: .82;

    font-weight: 900;

    letter-spacing: -7px;

    text-transform: uppercase;

}


.events-hero h1 strong {

    display: block;

    color: #D61C24;

}


.events-hero-subtitle {

    margin: 40px 0 25px;

    color: white;

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 7px;

}


.events-hero-info {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-bottom: 40px;

}


.events-hero-info span {

    color: #bdbdbd;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

}


.events-hero-info .events-divider {

    color: #D61C24;

    font-size: 22px;

}


/* =====================================================
   INTRO
===================================================== */

.events-intro {

    padding: 120px 0;

    background: #080808;

    border-top: 1px solid rgba(255,255,255,.05);

    border-bottom: 1px solid rgba(255,255,255,.05);

}


.events-intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}


.events-intro-title span {

    color: #D61C24;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 4px;

}


.events-intro-title h2 {

    margin: 20px 0 0;

    color: white;

    font-size: clamp(55px, 6vw, 90px);

    line-height: .9;

    font-weight: 900;

    letter-spacing: -4px;

}


.events-intro-title h2 strong {

    display: block;

    color: #D61C24;

}


.events-intro-text {

    max-width: 650px;

}


.events-intro-text p {

    margin-bottom: 25px;

    color: #999;

    font-size: 18px;

    line-height: 1.8;

}


/* =====================================================
   SECTION TITLE
===================================================== */

.events-section-title {

    text-align: center;

    margin-bottom: 70px;

}


.events-section-title span {

    display: block;

    margin-bottom: 18px;

    color: #D61C24;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 5px;

}


.events-section-title h2 {

    color: white;

    font-size: clamp(50px, 6vw, 80px);

    font-weight: 900;

    line-height: .95;

    letter-spacing: -4px;

}


.events-section-title h2 strong {

    color: #D61C24;

}


.events-section-title p {

    margin-top: 20px;

    color: #888;

    font-size: 16px;

}


/* =====================================================
   FIGHT CARDS
===================================================== */

.fightcards-section {

    padding: 140px 0;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(214,28,36,.08),
            transparent 40%
        ),

        #050505;

}


.fightcards-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 35px;

    align-items: start;

}


.main-fight-card {

    position: relative;

    overflow: hidden;

    background: #080808;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.6);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}


.main-fight-card:hover {

    transform: translateY(-8px);

    border-color: rgba(214,28,36,.5);

    box-shadow:
        0 35px 100px rgba(0,0,0,.8),
        0 0 35px rgba(214,28,36,.08);

}


.fight-card-number {

    padding: 20px 25px;

    color: #888;

    background: #090909;

    border-bottom: 1px solid rgba(255,255,255,.08);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 4px;

}


.fight-card-number strong {

    color: #D61C24;

}


/* =====================================================
   FIGHT CARD IMAGE
===================================================== */

.fight-card-image {

    width: 100%;

    min-height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: #020202;

}


.fight-card-image img {

    width: 100%;

    height: 700px;

    display: block;

    object-fit: contain;

    object-position: center;

}


.fight-card-caption {

    padding: 25px 28px 30px;

    background: #090909;

    border-top: 1px solid rgba(255,255,255,.07);

}


.fight-card-caption span {

    display: block;

    margin-bottom: 8px;

    color: #D61C24;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 4px;

}


.fight-card-caption h3 {

    margin: 0;

    color: white;

    font-size: 25px;

    font-weight: 900;

    letter-spacing: 1px;

}


/* =====================================================
   GALLERY HEADING
===================================================== */

.gallery-heading {

    padding: 120px 0 60px;

    background: #080808;

}


/* =====================================================
   GALLERY
===================================================== */

.event-gallery-section {

    padding: 30px 0 140px;

    background: #080808;

}


.event-gallery {

    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-auto-rows: 250px;

    gap: 18px;

}


/* =====================================================
   GALLERY ITEMS
===================================================== */

.gallery-item {

    position: relative;

    overflow: hidden;

    min-width: 0;

    background: #050505;

    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.07);

    cursor: pointer;

}


/* 01 */

.gallery-item:nth-child(1) {

    grid-column: span 4;

    grid-row: span 3;

}


/* 02 */

.gallery-item:nth-child(2) {

    grid-column: span 4;

    grid-row: span 2;

}


/* 03 */

.gallery-item:nth-child(3) {

    grid-column: span 4;

    grid-row: span 2;

}


/* 04 */

.gallery-item:nth-child(4) {

    grid-column: span 4;

    grid-row: span 3;

}


/* 05 */

.gallery-item:nth-child(5) {

    grid-column: span 4;

    grid-row: span 3;

}


/* 06 */

.gallery-item:nth-child(6) {

    grid-column: span 4;

    grid-row: span 2;

}


/* 07 */

.gallery-item:nth-child(7) {

    grid-column: span 4;

    grid-row: span 2;

}


/* 08 */

.gallery-item:nth-child(8) {

    grid-column: span 4;

    grid-row: span 2;

}


/* 09 */

.gallery-item:nth-child(9) {

    grid-column: span 8;

    grid-row: span 2;

}


/* 10 */

.gallery-item:nth-child(10) {

    grid-column: span 4;

    grid-row: span 2;

}


/* 11 */

.gallery-item:nth-child(11) {

    grid-column: span 8;

    grid-row: span 2;

}


/* 12 — GÜRTEL */

.gallery-item:nth-child(12) {

    grid-column: span 4;

    grid-row: span 2;

}


/* =====================================================
   GALLERY IMAGE
===================================================== */

.gallery-item img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .6s ease,
        filter .6s ease;

}


.gallery-item:hover img {

    transform: scale(1.07);

    filter:
        brightness(.72)
        contrast(1.08);

}


/* =====================================================
   GALLERY OVERLAY
===================================================== */

.gallery-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 70px 25px 25px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.88)
        );

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.gallery-item:hover .gallery-overlay {

    opacity: 1;

    transform: translateY(0);

}


.gallery-overlay span {

    color: white;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;

}


/* =====================================================
   RED BOTTOM LINE
===================================================== */

.gallery-item::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background: #D61C24;

    transition: width .4s ease;

}


.gallery-item:hover::after {

    width: 100%;

}


/* =====================================================
   EVENT MESSAGE
===================================================== */

.events-message {

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(214,28,36,.16),
            transparent 45%
        ),

        #050505;

}


.events-message::before {

    content: "GFC";

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    color: rgba(255,255,255,.025);

    font-size: 350px;

    font-weight: 900;

    line-height: 1;

}


.events-message-content {

    position: relative;

    z-index: 2;

    text-align: center;

}


.events-message-content > span {

    color: #D61C24;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 6px;

}


.events-message-content h2 {

    margin: 25px 0;

    color: white;

    font-size: clamp(70px, 10vw, 150px);

    font-weight: 900;

    line-height: .85;

    letter-spacing: -7px;

}


.events-message-content h2 strong {

    color: #D61C24;

}


.events-message-content > p {

    color: #aaa;

    font-size: 20px;

}


.events-message-line {

    width: 100px;

    height: 3px;

    margin: 30px auto;

    background: #D61C24;

}


.events-message-content .events-message-small {

    color: white;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 5px;

}


/* =====================================================
   CTA
===================================================== */

.events-cta {

    padding: 120px 0;

    background: #080808;

    text-align: center;

}


.events-cta-content {

    max-width: 800px;

    margin: auto;

}


.events-cta-content > span {

    color: #D61C24;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 5px;

}


.events-cta-content h2 {

    margin: 20px 0;

    color: white;

    font-size: clamp(50px, 6vw, 80px);

    line-height: .9;

    font-weight: 900;

    letter-spacing: -4px;

}


.events-cta-content h2 strong {

    color: #D61C24;

}


.events-cta-content p {

    max-width: 600px;

    margin: 0 auto 35px;

    color: #999;

    font-size: 17px;

    line-height: 1.7;

}


.events-cta-content .hero-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

}


/* =====================================================
   RESPONSIVE — 1100px
===================================================== */

@media (max-width: 1100px) {

    .events-hero {

        min-height: 700px;

    }


    .events-intro-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .fightcards-grid {

        grid-template-columns: 1fr;

    }


    .fight-card-image {

        min-height: auto;

    }


    .fight-card-image img {

        height: auto;

        max-height: 850px;

    }


    .event-gallery {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 300px;

    }


    .gallery-item:nth-child(n) {

        grid-column: span 1;

        grid-row: span 1;

    }


    .gallery-item:nth-child(1),
    .gallery-item:nth-child(4),
    .gallery-item:nth-child(5),
    .gallery-item:nth-child(9),
    .gallery-item:nth-child(11) {

        grid-column: span 2;

    }

}


/* =====================================================
   TABLET — 768px
===================================================== */

@media (max-width: 768px) {

    .events-hero {

        min-height: 650px;

        padding:
            140px
            20px
            100px;

    }


    .events-hero h1 {

        font-size: 65px;

        letter-spacing: -4px;

    }


    .events-hero-subtitle {

        font-size: 13px;

        letter-spacing: 4px;

    }


    .events-hero-info {

        flex-direction: column;

        gap: 8px;

    }


    .events-divider {

        display: none;

    }


    .events-intro {

        padding: 90px 0;

    }


    .events-intro-title h2 {

        font-size: 55px;

    }


    .fightcards-section {

        padding: 90px 0;

    }


    .events-section-title {

        margin-bottom: 45px;

    }


    .events-section-title h2 {

        font-size: 55px;

    }


    .fight-card-image {

        padding: 10px;

    }


    .fight-card-image img {

        height: auto;

        width: 100%;

    }


    .event-gallery-section {

        padding-bottom: 90px;

    }


    .event-gallery {

        grid-template-columns: 1fr;

        grid-auto-rows: auto;

    }


    .gallery-item:nth-child(n) {

        grid-column: span 1;

        grid-row: span 1;

        height: 380px;

    }


    .gallery-item img {

        object-fit: cover;

    }


    .gallery-overlay {

        opacity: 1;

        transform: none;

    }


    .events-message {

        min-height: 500px;

    }


    .events-message-content h2 {

        font-size: 80px;

    }


    .events-cta-content .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

}


/* =====================================================
   MOBILE — 480px
===================================================== */

@media (max-width: 480px) {

    .events-hero h1 {

        font-size: 50px;

        letter-spacing: -3px;

    }


    .events-label {

        font-size: 10px;

        letter-spacing: 4px;

    }


    .events-hero-subtitle {

        font-size: 11px;

        letter-spacing: 3px;

    }


    .events-intro-title h2 {

        font-size: 45px;

    }


    .events-section-title h2 {

        font-size: 45px;

    }


    .fight-card-number {

        padding: 16px;

    }


    .fight-card-caption {

        padding: 20px;

    }


    .fight-card-caption h3 {

        font-size: 20px;

    }


    .gallery-item:nth-child(n) {

        height: 320px;

    }


    .events-message-content h2 {

        font-size: 65px;

        letter-spacing: -4px;

    }


    .events-message-content .events-message-small {

        font-size: 9px;

        letter-spacing: 3px;

    }

}