/* ===================================
   RESPONSIVE STYLES
   Mobile-First Approach
   =================================== */

/* ===== TABLET (768px - 1024px) ===== */
@media (max-width: 1024px) {

    .page-layout,
    .page-layout-sidebar {
        grid-template-columns: 1fr;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

/* ===== MOBILE (below 768px) ===== */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    /* Header */
    .top-bar-inner {
        flex-wrap: wrap;
    }

    .auth-section {
        display: none;
    }

    .primary-nav {
        display: none;
    }

    .primary-nav.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        padding: 24px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #E2E8F0;
        z-index: 100;
    }

    .primary-nav.active ul {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .hamburger {
        display: flex;
    }

    /* Hamburger Animation */
    .hamburger.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Typography */
    .page-title {
        font-size: 32px;
    }

    .section-heading {
        font-size: 26px;
    }

    .subsection-heading {
        font-size: 20px;
    }

    /* Cards */
    .card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Footer */
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Bio Section */
    .bio-spotlight {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .bio-photo {
        margin: 0 auto;
    }
}