/* ==========================================================
   Responsive rules for the whole site.
   Breakpoints: 1199px (large tablet) → 991px (tablet) →
   767px (mobile) → 480px (small mobile)
   ========================================================== */

/* ---------- Large tablet / small laptop ---------- */
@media (max-width: 1199px) {
    .navbar .nav-inner {
        padding: 0 20px;
    }

    .navbar ul {
        gap: 2px;
    }

    .navbar ul li a {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .nav-cta {
        display: none;
    }

    .navbar .hamburger {
        display: flex;
    }

    .navbar .nav-items {
        display: block;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background-color: rgba(8, 8, 12, 0.95);
        backdrop-filter: blur(16px);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .navbar .nav-items.active {
        max-height: 400px;
    }

    .navbar .nav-items ul {
        flex-direction: column;
        padding: 10px 20px;
        gap: 0;
    }

    .navbar ul li {
        display: block;
        width: 100%;
    }

    .navbar ul li a {
        padding: 14px 0;
        text-align: center;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
    }

    .home .contint h1 {
        font-size: 2.9rem;
    }

    .blob-1 { width: 380px; height: 380px; }
    .blob-2 { width: 300px; height: 300px; }
    .blob-3 { width: 220px; height: 220px; }

    .about-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-photo {
        grid-column: span 2;
        grid-row: span 1;
        height: 300px;
    }

    .bento-photo .img-frame {
        height: 100%;
    }

    .bento-bio {
        grid-column: span 2;
        grid-row: span 1;
    }

    .bento-stat {
        grid-column: span 1;
    }

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

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .navbar .nav-inner {
        padding: 0 20px;
    }

    .nav-logo span {
        font-size: 1.2rem;
       
    }
  
   

    /* Home */
    .home .contint h1 {
        font-size: 2.3rem;
    }

.hero-role {
    font-size: clamp(0.72rem, 3.4vw, 1.05rem);
    min-height: 1.6rem;
    white-space: nowrap;
}

    .hero-tagline {
        font-size: 0.9rem;
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-stats {
        gap: 10px;
    }

    .hero-stat {
        min-width: 100px;
        padding: 0.8rem 1rem;
    }

    .scroll-indicator {
        display: none;
    }

    .blob-1 { width: 260px; height: 260px; }
    .blob-2 { width: 200px; height: 200px; }
    .blob-3 { display: none; }

    /* Section spacing */
    .About,
    .Skills,
    .Projects,
    .Services,
    .Contact {
        padding: 4.5rem 0;
    }

    .section-title {
        font-size: 1.7rem;
        margin-bottom: 2rem;
    }

    /* About */
    .about-bento {
        grid-template-columns: 1fr;
    }

    .bento-photo {
        grid-column: span 1;
        height: 260px;
    }

    .bento-photo .img-frame {
        height: 100%;
    }

    .bento-bio {
        grid-column: span 1;
        padding: 1.6rem;
    }

    .bento-stat {
        grid-column: span 1;
    }

    /* Skills */
    .skill-category {
        padding: 1.4rem;
    }

    /* Projects */
    .Projects .projects-grid {
        grid-template-columns: 1fr;
    }

    .modal-img {
        height: 220px;
    }

    .modal-info {
        padding: 1.5rem;
    }

    /* Contact */
    .contact-info-card,
    .contact-form-card {
        padding: 1.6rem;
    }

    /* Theme picker */
    .theme-toggle {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    .theme-panel {
        padding: 0.8rem;
    }

    .theme-swatch {
        width: 22px;
        height: 22px;
    }
}

/* ---------- Small mobile ---------- */
@media (max-width: 480px) {
    .nav-logo span em {
        display: none;
    }

    .home .contint h1 {
        font-size: 1.9rem;
    }

    .available-pill {
        font-size: 0.68rem;
        padding: 0.4rem 0.8rem;
    }

    .hero-stats {
        flex-direction: column;
    }

    .hero-stat {
        width: 100%;
    }

    .bento-bio h3 {
        font-size: 1.3rem;
    }

    .modal-links {
        flex-direction: column;
    }

    .info-item {
        font-size: 0.85rem;
    }

    .theme-swatches {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    /* Page Loader */
    .loader-ring-wrap {
        width: 76px;
        height: 76px;
    }

    .loader-logo {
        font-size: 1.15rem;
    }

    .loader-bar-track {
        width: 130px;
    }
}