/* responsive.css - All media queries */
/* Large Desktop */
@media (min-width: 1440px) {
    .page-layout

{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.content-container {
    padding: 40px;
}

}

/* Desktop */
@media (min-width: 1024px) and (max-width: 1439px) {
    .page-layout {
        grid-template-columns: 200px 1fr 250px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .page-layout {
        grid-template-areas:
            "header header"
            "main sidebar"
            "nav nav"
            "footer footer";
        grid-template-columns: 1fr 250px;
        gap: 15px;
    }

    .content-container {
        padding: 25px;
    }

    .media-content-container {
        flex-direction: column;
    }

    .form-row {
        flex-direction: column;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .page-layout {
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "nav"
            "footer";
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 10px;
    }

    .content-container {
        padding: 15px;
        margin-bottom: 15px;
    }

    .training-article-form {
        gap: 20px;
    }

    .media-content-container {
        flex-direction: column;
    }

    .step-item {
        flex-direction: column;
        text-align: center;
    }

    .step-number {
        align-self: center;
    }

    .nav-menu {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        grid-template-rows: auto;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .page-layout {
        padding: 0 5px;
    }

    .content-container {
        padding: 10px;
    }

    .header {
        padding: 15px;
    }

    .nav, .sidebar {
         padding: 15px;
    }
}