/*
 * responsive.css — Mobile-first breakpoint overrides
 * Esthyak Ahmmed Siyam Portfolio
 * ==========================================
 * Breakpoints: sm=640px  md=768px  lg=1024px  xl=1280px
 */

/* ══════════════════════════════════════════
   NAVIGATION — MOBILE
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .nav__links {
        display: none;
    }
    .nav__github {
        display: none;
    }
    .nav__hamburger {
        display: flex;
    }
    .mobile-cta-bar {
        display: flex;
    }
}

/* ══════════════════════════════════════════
   HERO — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-top: 3rem;
        padding-bottom: 4rem;
    }
    .hero__image-wrap {
        width: clamp(220px, 55vw, 340px);
        margin-inline: auto;
        order: -1;
        /* image above text on mobile */
    }
    .hero__badge {
        left: 0;
        bottom: 1rem;
    }
    .hero__content {
        text-align: center;
    }
    .hero__eyebrow {
        justify-content: center;
    }
    .hero__roles {
        justify-content: center;
    }
    .hero__cta {
        justify-content: center;
    }
    .hero__social {
        justify-content: center;
    }
    .hero__scroll {
        display: none;
    }
}

@media (max-width: 640px) {
    .hero {
        padding-top: 70px;
    }
    .hero__name {
        font-size: clamp(2.4rem, 12vw, 3.5rem);
    }
    .hero__cta {
        flex-direction: column;
        align-items: center;
    }
    .hero__cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════
   STATS BAR — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .stats-bar__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
    .stat-item:nth-child(2)::after {
        display: none;
    }
}

@media (max-width: 420px) {
    .stats-bar__inner {
        grid-template-columns: 1fr;
    }
    .stat-item::after {
        display: none !important;
    }
    .stat-item {
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: var(--space-5);
    }
    .stat-item:last-child {
        border-bottom: none;
    }
}

/* ══════════════════════════════════════════
   ABOUT — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 900px) {
    .about__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ══════════════════════════════════════════
   EXPERTISE — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .expertise__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .expertise__grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   CASE CARDS — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 900px) {
    .case-card {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        padding: var(--space-6);
    }
    .case-card__right {
        flex-direction: row;
        align-items: center;
        min-width: unset;
    }
    .case-card__detail {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   PROJECT GRID — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .project-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   DEEP DIVE — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .deep-dive__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .deep-dive::before {
        display: none;
    }
    .deep-dive__inner {
        padding-left: 0;
    }
}

@media (max-width: 500px) {
    .deep-dive__grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   WORKFLOW — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 900px) {
    .workflow__steps {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .workflow__steps::before {
        display: none;
    }
}

/* ══════════════════════════════════════════
   GITHUB REPOS — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 900px) {
    .github__repos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .github__repos {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   SERVICES — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .services__grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   CONTACT — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 900px) {
    .contact__inner {
        grid-template-columns: 1fr;
    }
    .contact__form-wrap {
        padding: var(--space-6);
    }
    .contact__form-row {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   FOOTER — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-6);
    }
    .footer__nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }
    .footer__right {
        align-items: center;
    }
    /* Extra bottom padding for mobile sticky CTA */
    body {
        padding-bottom: 70px;
    }
}

/* ══════════════════════════════════════════
   GRID UTILITIES — RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 768px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   SECTION PADDING — TIGHT ON MOBILE
   ══════════════════════════════════════════ */

@media (max-width: 640px) {
    .section {
        padding-block: clamp(3rem, 6vw, 4rem);
    }
    .section-header {
        margin-bottom: 2rem;
    }
    .featured-cases {
        margin-bottom: 2.5rem;
    }
    .contact__form-wrap {
        padding: var(--space-5);
    }
}