/* =========================================================
   CONTACT — FINAL MOBILE PASS
   Gianmarco Spina
========================================================= */


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none), (pointer: coarse) {

    .contact-bottomline a:hover,
    .contact-email-placeholder:hover,
    .contact-secondary-link:hover,
    .gs-final-email:hover,
    .gs-final-return:hover,
    .gs-game-visual:hover,
    .gs-game-start:hover {
        transform: none;
        filter: none;
    }

    .contact-secondary-link:hover span {
        transform: none;
    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    html,
    body.contact-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* =====================================================
       NAVBAR
    ===================================================== */

    .contact-page .navbar {
        padding:
            calc(20px + env(safe-area-inset-top))
            6%
            18px;

        display: grid;
        grid-template-columns: 1fr;

        gap: 15px;
        align-items: start;
    }

    .contact-page .navbar .logo {
        font-size: 11px;
        line-height: 1;
        letter-spacing: .085em;
    }

    .contact-page .navbar nav {
        display: flex;
        width: 100%;

        justify-content: space-between;
        align-items: center;

        gap: 0;
    }

    .contact-page .navbar nav a {
        display: inline-flex;
        align-items: center;

        min-height: 38px;

        font-size: 8px;
        letter-spacing: .11em;
    }


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

    .contact-hero {
        height: 100svh;
        min-height: 620px;
    }

    .contact-topline {
        top:
            calc(
                115px +
                env(safe-area-inset-top)
            );

        left: 6%;
        right: 6%;

        font-size: 7px;
        letter-spacing: .13em;
    }

    .contact-topline span:last-child {
        display: none;
    }

    .contact-center {
        left: 0;
        top: 50%;

        width: 100%;

        transform: translateY(-43%);
    }

    .contact-kicker {
        margin-bottom: 27px;

        font-size: 8px;
        letter-spacing: .18em;
    }

    .contact-title {
        width: 100%;

        font-size: clamp(72px, 21vw, 98px);
        line-height: .75;
        letter-spacing: -.085em;
    }

    .contact-title-row {
        max-width: 100%;
    }

    .contact-subtitle {
        margin-top: 38px;

        max-width: 82%;

        font-size: 7px;
        line-height: 1.5;
        letter-spacing: .14em;
    }

    .contact-rule {
        width: 72vw;

        margin-top: 30px;
    }

    .contact-bottomline {
        left: 6%;
        right: 6%;

        bottom:
            calc(
                22px +
                env(safe-area-inset-bottom)
            );

        font-size: 7px;
    }

    .contact-bottomline span {
        display: none;
    }

    .contact-bottomline a {
        min-height: 44px;

        display: inline-flex;
        align-items: flex-end;

        margin-left: auto;
    }


    /* =====================================================
       CONTACT DETAILS
    ===================================================== */

    .contact-details {
        padding:
            78px
            6%
            100px;
    }

    .contact-section-heading {
        padding-bottom: 15px;

        font-size: 7px;
        line-height: 1.4;
        letter-spacing: .11em;
    }

    .contact-section-heading span:last-child {
        max-width: 48%;
        text-align: right;
    }

    .contact-details-layout {
        grid-template-columns: 1fr;

        gap: 65px;

        margin-top: 60px;
    }

    .contact-small-label {
        font-size: 8px;
        letter-spacing: .14em;
    }

    .contact-introduction h2 {
        margin:
            24px
            0
            28px;

        font-size: clamp(50px, 15vw, 67px);
        line-height: .94;
    }

    .contact-introduction p {
        max-width: none;

        font-size: 16px;
        line-height: 1.65;
    }

    .contact-information {
        gap: 48px;

        padding-top: 0;
    }

    .contact-information-block {
        padding-top: 17px;
    }

    .contact-email-placeholder {
        margin-top: 26px;

        font-size: clamp(22px, 7vw, 30px);
        line-height: 1.25;
    }

    .contact-hint {
        margin-top: 16px;

        font-size: 7px;
        line-height: 1.4;
    }

    .contact-secondary-link {
        min-height: 48px;

        align-items: center;

        padding:
            17px
            0;

        gap: 15px;

        font-size: 8px;
        line-height: 1.4;
    }


    /* =====================================================
       FINAL FRAME
    ===================================================== */

    .gs-final-frame {
        min-height: auto;

        padding:
            90px
            6%
            60px;
    }

    .gs-final-topline {
        padding-bottom: 15px;

        font-size: 7px;
        line-height: 1.4;
    }

    .gs-final-topline span:last-child {
        text-align: right;
    }

    .gs-final-composition {
        margin:
            65px
            auto
            75px;
    }

    .gs-final-overline {
        margin-bottom: 24px;
    }

    .gs-final-title {
        font-size: clamp(42px, 12vw, 58px);
        line-height: .91;
        letter-spacing: -.065em;
    }

    .gs-final-line:nth-child(2) {
        padding-left: 2vw;
    }

    .gs-final-lastline {
        padding-left: 4vw;
    }

    .gs-final-translation {
        margin-top: 28px;

        max-width: 86%;

        font-size: 14px;
        line-height: 1.5;
    }


    /* =====================================================
       FINAL CONTACT
    ===================================================== */

    .gs-final-contact-content {
        padding-top: 24px;
    }

    .gs-final-contact-label {
        margin-bottom: 17px;

        font-size: 8px;
    }

    .gs-final-email {
        font-size: clamp(23px, 7vw, 31px);
        line-height: 1.2;
    }

    .gs-final-contact-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        margin-top: 35px;

        font-size: 7px;
        line-height: 1.5;
    }

    .gs-final-contact-bottom > span {
        max-width: 85%;
    }

    .gs-final-return {
        min-height: 44px;

        display: inline-flex;
        align-items: center;
    }


    /* =====================================================
       LAST TAKE INVITATION
    ===================================================== */

    .gs-game-invitation {
        min-height: auto;

        padding:
            72px
            6%;
    }

    .gs-game-topline,
    .gs-game-bottomline {
        font-size: 7px;
        line-height: 1.4;
    }

    .gs-game-topline span:last-child,
    .gs-game-bottomline span:last-child {
        text-align: right;
    }

    .gs-game-content {
        grid-template-columns: 1fr;

        gap: 42px;

        padding:
            42px
            0;
    }

    .gs-game-visual {
        width: 100%;

        aspect-ratio: 16 / 11;
    }

    .gs-game-play-overlay {
        width: 58px;
        height: 58px;

        font-size: 20px;
    }

    .gs-game-chair {
        width: 70px;
        height: 92px;
    }

    .gs-game-monitor-label {
        left: 13px;
        bottom: 13px;

        font-size: 7px;
    }

    .gs-game-corner.top-left {
        top: 13px;
        left: 13px;
    }

    .gs-game-corner.bottom-right {
        right: 13px;
        bottom: 13px;
    }

    .gs-game-kicker {
        font-size: 8px;
    }

    .gs-game-title {
        margin:
            22px
            0;

        font-size: clamp(58px, 17vw, 78px);
        line-height: .88;
    }

    .gs-game-tagline {
        font-size: 19px;
        line-height: 1.4;
    }

    .gs-game-description {
        margin-bottom: 24px;

        font-size: 15px;
        line-height: 1.6;
    }

    .gs-game-details {
        gap: 9px;

        margin-bottom: 23px;

        font-size: 8px;
    }

    .gs-game-start {
        width: 100%;

        min-height: 60px;

        padding:
            17px
            18px;

        gap: 20px;

        font-size: 10px;
    }

    .gs-game-smallprint {
        margin-top: 16px;

        font-size: 7px;
        line-height: 1.4;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .contact-footer {
        padding:
            25px
            6%
            calc(
                25px +
                env(safe-area-inset-bottom)
            );

        align-items: flex-end;

        gap: 18px;

        font-size: 7px;
        line-height: 1.4;
    }

    .contact-footer span:nth-child(2) {
        display: none;
    }

    .contact-footer a {
        min-height: 44px;

        display: inline-flex;
        align-items: flex-end;

        margin-left: auto;

        text-align: right;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .contact-page .navbar nav a {
        font-size: 7px;
        letter-spacing: .085em;
    }

    .contact-title {
        font-size: 20vw;
    }

    .gs-final-title {
        font-size: 11.5vw;
    }

    .gs-game-title {
        font-size: 16vw;
    }

}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media
(max-height: 520px)
and
(orientation: landscape) {

    .contact-page .navbar {
        padding-top: 14px;

        grid-template-columns:
            auto
            1fr;

        align-items: center;

        gap: 28px;
    }

    .contact-page .navbar nav {
        justify-content: flex-end;

        gap: 17px;
    }

    .contact-hero {
        min-height: 100svh;
    }

    .contact-topline {
        top: 72px;
    }

    .contact-center {
        top: 55%;
    }

    .contact-title {
        font-size: 13vw;
    }

}