/* =============================================
   RESPONSIVE.CSS — Media Queries
   ============================================= */

/* --- TABLET (≤ 1024px) --- */
@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    h1 {
        font-size: 2.8rem;
    }

    .id-card {
        min-height: auto;
    }

    .container {
        padding: 2rem 1.5rem 4rem;
        gap: 2.5rem;
    }

    .navbar-title {
        font-size: 1.1rem;
    }

    .section-subtitle {
        font-size: 1.8rem;
    }
}

/* --- MOBILE (≤ 640px) — Layout --- */
@media (max-width: 640px) {
    body {
        padding: 0;
    }

    .main-navbar {
        padding: 0.7rem 1rem;
    }

    .navbar-logo {
        height: 30px;
    }

    .container {
        padding: 1.5rem 1rem 3rem;
        gap: 2rem;
    }

    .hero-banner-container {
        border-radius: 0;
    }

    h1 {
        font-size: 2.2rem;
    }

    .description {
        font-size: 1rem;
    }

    .navbar-title {
        font-size: 0.9rem;
    }

    .section-subtitle {
        font-size: 1.5rem;
    }

    /* Stack ID card vertically on mobile */
    .id-card {
        flex-direction: column;
        min-height: auto;
    }

    .id-card-left {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        align-items: center;
        padding: 1rem 1.2rem;
        gap: 1rem;
        min-height: 100px;
    }

    .id-card-logo {
        flex-direction: row;
        gap: 0.5rem;
    }

    .ucv-name {
        text-align: left;
    }

    .id-photo-container {
        width: 70px;
        height: 80px;
        margin-left: auto;
    }

    .id-card-type {
        display: none;
    }

    .id-card-right {
        padding: 1rem;
    }

    .id-student-name {
        font-size: 0.95rem;
    }
}

/* --- MOBILE (≤ 640px) — FAB Mascot --- */
@media (max-width: 640px) {
    .floating-mascot-fab {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .mascot-img-container {
        width: 80px;
    }

    .mascot-tooltip {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }

    .fab-item {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}