/* ══════════════════════════════════════════
   MOBILE SECTIONS — max-width: 850px
══════════════════════════════════════════ */

@media (max-width: 850px) {

    /* ─── HEADER ─── */

    header {
        min-height: 100svh;
        box-sizing: border-box;
        justify-content: center;
    }

    #header_top {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0;
        width: auto;
    }

    #bg-shape-container {
        width: 75vw;
        max-width: 340px;
    }

    #filip-photo {
        width: 130%;
    }

    #header_right {
        align-items: center;
        gap: 16px;
        height: auto;
        flex: none;
        padding: 0;
    }

    .logo_header_small {
        display: none;
    }

    #headtitle h1 {
        font-size: clamp(2rem, 10vw, 52px);
        margin: 10px;
    }

    #headtitle h2 {
        font-size: clamp(0.85rem, 4vw, 22px);
    }

    #arrow {
        padding-top: 20px;
    }

    #arrow img {
        width: clamp(28px, 6vw, 44px);
    }

    #arrow_top {
        display: none;
    }

    #arrow_top_mobile {
        display: block;
        text-align: center;
        padding: 32px 0 48px;
    }

    #arrow_top_mobile img {
        width: clamp(40px, 10vw, 60px);
    }

    /* ─── MAIN ─── */

    main h1 {
        font-size: clamp(1.6rem, 7vw, 48px);
        padding-bottom: clamp(20px, 6vw, 60px);
        margin-top: clamp(30px, 8vw, 80px);
    }

    main h2 {
        font-size: clamp(1rem, 4.5vw, 30px);
        padding-bottom: clamp(20px, 6vw, 60px);
        margin-top: clamp(30px, 8vw, 80px);
    }

    .page_width {
        width: 90%;
    }

    .main_box {
        margin-bottom: clamp(40px, 8vw, 100px);
    }

    .main_box p {
        font-size: clamp(16px, 3.5vw, 18px);
    }

    /* ─── WHY ME ─── */

    #whyme_content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    #whyme_content p {
        max-width: 100%;
    }

    #locate_content {
        min-width: unset;
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    #locate_content img {
        width: clamp(36px, 8vw, 56px);
    }

    #locate_content p {
        font-size: clamp(16px, 4vw, 22px);
    }

    /* ─── SKILLS ─── */

    #skills_content {
        flex-direction: column;
        gap: 32px;
    }

    .skills_grid {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(12px, 4vw, 28px);
        width: 100%;
    }

    .skill_item img {
        width: clamp(48px, 12vw, 64px);
        height: clamp(48px, 12vw, 64px);
    }

    .skill_item p {
        font-size: clamp(16px, 3.5vw, 18px);
    }

    #skills_bubble {
        width: 90%;
        height: auto;
        padding: 32px 24px;
        border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%;
    }

    .bubble_title {
        font-size: clamp(16px, 4vw, 20px);
        margin-bottom: 12px;
    }

    .bubble_text {
        font-size: clamp(16px, 3.5vw, 17px);
    }

    /* ─── TEAMPLAYER ─── */

    main {
        overflow-x: hidden;
    }

    #teamplayer_content {
        width: 100vw;
        max-width: none;
        flex-direction: row;
        align-items: center;
        gap: 5vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 20px 0 28px;
        margin-bottom: clamp(40px, 8vw, 100px);
        justify-content: flex-start;
    }

    #teamplayer_content::-webkit-scrollbar {
        display: none;
    }

    .teamplayer_bubble {
        flex-shrink: 0;
        width: 78vw;
        height: auto;
        min-height: 260px;
        padding: 40px 28px;
        border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%;
        scroll-snap-align: center;
    }

    .teamplayer_bubble:first-child {
        margin-left: 11vw;
    }

    .teamplayer_bubble:last-child {
        margin-right: 11vw;
    }

    .teamplayer_name {
        font-size: clamp(16px, 4vw, 20px);
    }

    .teamplayer_project,
    .teamplayer_text,
    .teamplayer_linkedin {
        font-size: clamp(16px, 3.5vw, 17px);
    }

    /* ─── PROJECTS ─── */

    #project_tabs {
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 28px;
    }

    .tab_btn {
        font-size: clamp(16px, 3.5vw, 18px);
        padding: 10px 16px;
    }

    .project_panel.active {
        flex-direction: column;
        gap: 32px;
    }

    .project_left {
        gap: 24px;
    }

    .project_section h3 {
        font-size: clamp(16px, 3.8vw, 20px);
    }

    .project_duration {
        font-size: clamp(16px, 3vw, 18px);
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    .project_right {
        gap: 16px;
    }

    .tech_icons img {
        width: clamp(48px, 12vw, 64px);
        height: clamp(48px, 12vw, 64px);
    }

    .project_preview {
        max-width: 100%;
    }

    .btn_filled,
    .btn_outline {
        padding: 10px 24px;
        font-size: clamp(16px, 3.5vw, 17px);
    }

    /* ─── CONTACT ─── */

    #contact_top {
        flex-direction: column;
        gap: 28px;
    }

    #contact_intro {
        max-width: 100%;
        font-size: clamp(16px, 3.5vw, 18px);
    }

    #contact_info {
        gap: 16px;
    }

    .contact_info_item p {
        font-size: clamp(16px, 3.5vw, 17px);
        word-break: break-all;
    }

    .contact_info_item img {
        width: clamp(18px, 5vw, 26px);
        height: clamp(18px, 5vw, 26px);
    }

    #contact_form_top {
        flex-direction: column;
        gap: 0;
    }

    .input_group {
        padding-bottom: 28px;
    }

    #checkbox_group {
        padding-bottom: 28px;
    }

    .input_group input,
    .input_group textarea {
        font-size: clamp(16px, 3.5vw, 17px);
        padding: 14px 20px;
    }

    .input_group label {
        font-size: clamp(16px, 3vw, 17px);
        margin-left: 14px;
    }

    #contact_form_bottom {
        flex-direction: column;
        gap: 48px;
        align-items: flex-start;
    }

    #contact_send {
        width: 100%;
        font-size: clamp(16px, 4vw, 18px);
        padding: 14px 0;
    }

    #contact_checkbox label {
        font-size: clamp(16px, 3vw, 17px);
    }

    /* ─── FOOTER ─── */

    footer {
        flex-direction: column;
        gap: 20px;
        padding: 32px 20px;
        text-align: center;
        font-size: clamp(16px, 3.5vw, 17px);
    }

    #footer_legal {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }

    #social-icons-footer {
        gap: 20px;
    }

    #social-icons-footer a img {
        width: clamp(22px, 6vw, 32px);
    }

}