/* Desktop specific styles */
@media (min-width: 901px) {
    .split__actions {
        grid-column: 1;
    }

    #cad .split__actions {
        grid-column: 1;
    }
}

/* Tablet and mobile */
@media (max-width: 900px) {
    .split {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    #cad .split {
        grid-template-columns: 1fr;
    }
}

/* Mobile specific styles */
@media (max-width: 700px) {
    .hero {
        background: linear-gradient(rgb(11, 25, 33, 0), rgb(11, 25, 33, 0)),
        url('../assets/images/header.webp') 33% calc(50% - 60px)/auto 115% no-repeat fixed;
        padding-top: calc(70px + env(safe-area-inset-top));
        height: 100vh;
        height: -webkit-fill-available;
        min-height: 100vh;
        overflow: hidden;
    }

    .hero__content {
        width: min(900px, 92%);
        margin: 100px 5% -40% 5%;
        position: relative;
        transform: translateY(-70px);
    }

    .hero__card {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2rem 1.5rem;
        border-radius: 16px;
        margin: 0;
        max-width: none;
        backdrop-filter: blur(12px) saturate(200%);
        -webkit-backdrop-filter: blur(80px) saturate(200%);
    }

    .hero__subtitle {
        font-size: 1.05rem;
    }
    
    .contacts-container {
        gap: 0.5rem;
        justify-content: center;
    }

    .contact {
        flex-wrap: wrap;
        padding: 1rem 1rem;
    }
    
    .hero__links {
        gap: 8px;
    }

    .btn {
        min-height: 44px;
    }

    #dev.section,
    #cad.section {
        padding: 20px 0;
    }

    #dev.section {
        margin-top: 0;
    }

    /* Grid layouts for mobile */
    .hero__links,
    .actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 90% !important;
        padding: 0 !important;
    }
    .hero__actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .hero__action-btn {
        padding: 1.5rem 2rem;
    }

    .hero__links .btn--social,
    .hero__actions .btn--primary,
    .actions .btn--social,
    .actions .btn--primary {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .hero__actions {
        margin-top: 1.5rem !important;
    }

    /* Section ordering for mobile */
    .split {
        display: flex;
        flex-direction: column;
    }

    .split__left {
        order: 1;
    }

    .split__right {
        order: 2;
        margin: 1.5rem 0;
    }

    .split__actions {
        order: 3;
        margin-top: 1rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
        padding: 0 2px;
    }

    .split__actions .btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* Development section mobile order */
    #dev .split__left > *:not(.actions) {
        order: 1;
    }

    #dev .split__right {
        order: 2;
        margin: 1.5rem 0;
    }

    #dev .split__left .actions {
        order: 3;
        margin-top: 1rem;
    }

    /* CAD section mobile order */
    #cad .split__left > *:not(.actions) {
        order: 1;
    }

    #cad .split__right {
        order: 2;
        margin: 1.5rem 0;
    }

    #cad .split__left .actions {
        order: 3;
        margin-top: 1rem;
    }

    /* Carousel mobile styles */
    .carousel {
        position: relative;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .carousel__btn {
        display: none;
    }

    .carousel__viewport {
        max-width: 100%;
        touch-action: pan-y;
        cursor: grab;
    }

    .carousel__viewport:active {
        cursor: grabbing;
    }

    .carousel__track {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Container adjustments */
    #dev .container,
    #cad .container {
        width: 90%;
        margin: 50px 5% 20px 5%;
        padding: 36px 24px;
        border-radius: 12px;
    }

    #cad .container {
        margin: 0 auto;
    }

    .split__left,
    .split__right {
        padding: 0 4px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .hero__links,
    .hero__actions,
    .actions,
    .split__actions {
        grid-template-columns: 1fr !important;
    }

    .hero__card {
        width: 100%;
        padding: 1.5rem 1rem;
    }

    .hero__action-btn {
        padding: 0.5rem 2rem;
    }

    .hero__title {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
    }

    .contacts-container {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .contact {
        width: auto;
        min-width: 200px;
        justify-content: center;
    }
}