/* =========================
   IDENTITY PAGE
========================= */

.identity-content {
    padding-bottom: 20vh;
}


/* =========================
   SECTION SPACING
========================= */

.identity-section {
    min-height: auto;
    margin-bottom: 10vh;
}


/* =========================
   CV VIEWER
========================= */

.cv-frame {
    width: 80%;

    margin-top: 6vh;
    margin-bottom: 4vh;

    overflow: hidden;

    border:
        2px solid rgba(103, 247, 252, 0.12);

    background:
        rgba(2, 12, 12, 0.45);

    box-shadow:
        0 0 40px rgba(18, 157, 161, 0.08);
}

.cv-viewer {
    display: block;

    width: 100%;
    min-height: 1400px;

    border: none;

    background: transparent;
}

/* =========================
   PDF FALLBACK
========================= */

.cv-fallback {
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 3vh;

    min-height: 60vh;

    text-align: center;

    padding: 4vh;
}

.cv-fallback p {
    margin: 0;

    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    line-height: 1.8;

    color:
        rgba(190, 250, 252, 0.72);
}

.cv-fallback a {
    display: inline-block;

    padding:
        1.2vh
        2vh;

    border:
        1px solid rgba(103, 247, 252, 0.18);

    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.18em;

    color:
        rgba(170, 240, 242, 0.82);

    text-decoration: none;

    background:
        rgba(2, 12, 12, 0.35);
}

.cv-image-fallback {
    display: none;
}


/* =========================
   CONTACT GRID
========================= */

.contact-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 2vw;

    margin-top: 6vh;
}


/* =========================
   CONTACT CARDS
========================= */

.contact-card {
    display: block;

    padding:
        2.5vh
        2.5vh;

    border:
        1px solid rgba(103, 247, 252, 0.12);

    text-decoration: none;

    background:
        rgba(2, 12, 12, 0.35);

    box-shadow:
        0 0 25px rgba(18, 157, 161, 0.06);

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(103, 247, 252, 0.32);

    box-shadow:
        0 0 35px rgba(18, 157, 161, 0.12);
}


/* =========================
   CONTACT TYPOGRAPHY
========================= */

.contact-label {
    margin-top: 0;
    margin-bottom: 2vh;

    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.28em;

    color:
        rgba(103, 247, 252, 0.55);
}

.contact-value {
    margin: 0;

    font-family: 'Exo 2', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;

    color:
        rgba(190, 250, 252, 0.82);
}


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

@media (pointer: coarse)
and (orientation: landscape)
and (max-width: 1600px) {

    .cv-viewer {
        display: none;
    }

    .cv-image-fallback {
        display: flex;
    }

    .cv-frame {
        width: 70vw;

        margin-left: auto;
        margin-right: auto;
    }

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

        justify-items: center;

        gap: 2vh;
    }

    .contact-card {
        width: 50vw;
    }

    /* =========================
    CV IMAGE FALLBACK
    ========================= */

    .cv-image-fallback {
        display: flex;
        flex-direction: column;

        gap: 4vh;

        padding: 2vh;
    }

    .cv-image-fallback img {
        display: block;

        width: 100%;
        height: auto;

        border:
            1px solid rgba(103, 247, 252, 0.08);

        box-shadow:
            0 0 25px rgba(18, 157, 161, 0.08);
    }

}


/* ==================================================
   MOBILE - PORTRAIT
================================================== */

@media (pointer: coarse)
and (orientation: portrait)
and (max-width: 1600px) {

    .cv-viewer {
        display: none;
    }

    .cv-image-fallback {
        display: flex;
    }

    .cv-frame {
        width: 90vw;

        margin-left: auto;
        margin-right: auto;
    }

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

        gap: 2vh;
    }

    /* =========================
    CV IMAGE FALLBACK
    ========================= */

    .cv-image-fallback {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        padding: 1.5vh;
    }

    .cv-image-fallback img {
        display: block;

        width: 100%;
        height: auto;

        border:
            1px solid rgba(103, 247, 252, 0.08);

        box-shadow:
            0 0 25px rgba(18, 157, 161, 0.08);
    }

}