/* Mobile styles for kontakti.html */
@media (max-width: 768px) {
    /* Mobile: use native/default scrollbars (remove custom styling) */
    html {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
    .scrollbar-thin {
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
    }
    html::-webkit-scrollbar,
    .scrollbar-thin::-webkit-scrollbar {
        width: initial !important;
        height: initial !important;
    }
    html::-webkit-scrollbar-track,
    .scrollbar-thin::-webkit-scrollbar-track {
        background: initial !important;
        border-radius: initial !important;
    }
    html::-webkit-scrollbar-thumb,
    .scrollbar-thin::-webkit-scrollbar-thumb {
        background: initial !important;
        border-radius: initial !important;
        border: initial !important;
    }
    html::-webkit-scrollbar-thumb:hover,
    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
        background: initial !important;
    }

    .content-card,
    .contact-card,
    .contact-item,
    .contact-icon,
    .copy-button,
    .profile-picture,
    .profile-img,
    .cookie-popup,
    .cookie-accept {
        border-radius: 2vw !important;
    }

    .cookie-text {
        font-size: max(15px, 3.4vw);
    }

    .cookie-accept {
        font-size: max(15px, 3.4vw);
        padding: 1vw;
    }

    .cookie-popup {
        padding: 1vw !important;
        bottom: 2vw;
        left: 50% !important;
        right: auto !important;
        max-width: 90vw;
        width: auto;
        flex-wrap: nowrap !important;
        white-space: nowrap;
        transform: translateX(-50%) translateY(100px);
        gap: 1vw;
    }

    .cookie-popup.show {
        transform: translateX(-50%) translateY(0);
    }

    /* When cookie popup is visible, add extra scroll room so the bottom credit
       can be scrolled above the fixed popup (works with iOS #scrollWrapper too). */
    html.cookie-popup-visible body,
    html.cookie-popup-visible .scroll-wrapper {
        padding-bottom: 5vh;
        box-sizing: border-box;
    }

    .main-content {
        padding: 10vh 5vw 3vh 5vw !important;
        margin: 0 auto;
        min-height: auto;
    }

    /* Mobile typography mins (Kontakti uses different scale than other subpages) */
    .person-name,
    .card-title {
        font-size: max(22px, 3vh);
    }

    .person-title {
        font-size: max(19px, 2.5vh);
    }

    .person-description,
    .contact-label,
    .contact-link,
    .content-list,
    .content-list li {
        font-size: max(16px, 2vh);
    }

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

    .contacts-grid {
        width: 100%;
        gap: 2vh;
    }

    .contact-card {
        flex-direction: column !important;
        min-height: auto;
    }

    .contact-name,
    .contact-title {
        text-align: center;
    }

    .contact-details {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-label {
        align-self: flex-start;
        text-align: left;
    }

    .general-contact .contact-item {
        flex-direction: column;
        text-align: center;
    }
    
    body > .site-credit {
        display: none;
    }

    .contact-link {
        text-align: left;
        width: 100%;
        max-width: 100%;
    }

    .contact-item {
        gap: 3vw;
    }

    .copy-button {
        width: max(40px, 5.5vh) !important;
        height: max(40px, 5.5vh) !important;
    }

    .copy-button svg {
        width: max(24px, 3.6vh) !important;
        height: max(24px, 3.6vh) !important;
    }

    .content-list {
        margin: 0;
    }
    
    .team-section {
        margin-bottom: 3vh;
    }

    .site-credit {
        font-size: max(12px, 1.5vh);
    }
}