/* ==================================================================
   MAZHARUL MAHIN — responsive.css
   Mobile-first: base styles target phones; these queries progressively
   enhance the layout for larger screens.
   ================================================================== */

/* ---------- Small phones ---------- */
@media (max-width: 379px) {
    .hero__ctas .btn { flex: 1 1 100%; }
    .social__grid { grid-template-columns: 1fr; }
    .info-list { grid-template-columns: 1fr; }
    .hero__tag--right { display: none; }
    .badge-rotate { width: 92px; height: 92px; right: -6px; top: -6px; }
}

/* ---------- Phones: keep the face clear of the name ---------- */
@media (max-width: 899px) {
    .hero__name { top: 40%; }
    .hero__portrait { height: 88%; }
}

@media (max-width: 419px) {
    .nav__brand { display: none; }
}

/* ---------- ≥ 640px : large phones / small tablets ---------- */
@media (min-width: 640px) {
    .services__grid,
    .skills__grid,
    .videos__grid { grid-template-columns: repeat(2, 1fr); }

    .form-row { grid-template-columns: 1fr 1fr; }
    .form-foot { grid-template-columns: auto 1fr; }

    .stats { grid-template-columns: repeat(4, 1fr); }

    .chip-float { font-size: .8rem; padding: .65rem 1.1rem; }
    .chip-float--3 { display: inline-flex; left: 10%; top: 30%; }

    .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
    .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }

    .info-list { grid-template-columns: repeat(3, 1fr); }
    .info-list__wide { grid-column: span 2; }

    .marquee { padding-block: 1.5rem; }
}

/* ---------- ≥ 900px : tablets landscape / laptops ---------- */
@media (min-width: 900px) {
    :root { --nav-h: 84px; }

    .nav__menu { display: block; }
    .burger { display: none; }
    .mobile-menu { display: none; }

    /* Hero becomes a single full-screen composition */
    .hero { min-height: max(100svh, 680px); }
    .hero__meta { padding-top: 1.75rem; }
    .hero__stage {
        position: absolute;
        inset: 0;
        height: auto;
        min-height: 0;
        margin: 0;
    }
    .hero__name { top: 58%; transform: translateY(-42%); }
    .hero__portrait { height: calc(100% - var(--nav-h) - 1rem); max-height: 1050px; }

    .chip-float--1 { left: 13%; top: 30%; }
    .chip-float--2 { right: 12%; top: 26%; }
    .chip-float--3 { left: auto; right: 18%; top: 50%; }

    .hero__bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin-inline: auto;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        padding-bottom: 2.25rem;
    }
    .hero__intro { max-width: 380px; }
    .hero__ctas { flex-direction: column; align-items: flex-end; justify-self: end; }
    .scroll-cue {
        display: inline-flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2.25rem;
        width: max-content;
        margin-inline: auto;
        flex-direction: column;
        gap: .5rem;
    }

    .section-head--split { grid-template-columns: 1.3fr 1fr; gap: 3rem; }
    .section-head--split .section-lead { justify-self: end; }

    .about__grid { grid-template-columns: .9fr 1.1fr; }
    .about__media { margin: 0; }
    .info-list { grid-template-columns: repeat(2, 1fr); }
    .info-list__wide { grid-column: 1 / -1; }

    .creative__head { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 3rem; }
    .featured-video { grid-template-columns: 1.7fr 1fr; align-items: center; gap: 2rem; }
    .featured-video__info { padding: 1rem 1.5rem 1rem 0; }

    .contact__grid { grid-template-columns: .85fr 1.15fr; }
    .contact__info { position: sticky; top: calc(var(--nav-h) + 2rem); }

    .projects__grid { grid-template-columns: repeat(2, 1fr); }
    .projects__grid > .project-card:nth-child(even) { margin-top: clamp(4rem, 10vw, 9rem); }

    .social-card { min-height: 240px; padding: 1.75rem; }

    .to-top { right: 2rem; bottom: 2rem; }
}

/* ---------- ≥ 1100px ---------- */
@media (min-width: 1100px) {
    .nav .nav__cta { display: inline-flex; }
    .services__grid,
    .skills__grid,
    .videos__grid { grid-template-columns: repeat(3, 1fr); }
    .social__grid { grid-template-columns: repeat(4, 1fr); }
    .info-list { grid-template-columns: repeat(3, 1fr); }
    .info-list__wide { grid-column: span 2; }
}

/* ---------- ≥ 1440px : large desktops ---------- */
@media (min-width: 1440px) {
    .hero__intro { max-width: 420px; }
    .hero__text { font-size: 1.05rem; }
}

/* ---------- Short landscape screens (phones turned sideways) ---------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
    .hero__stage { height: 120vh; min-height: 0; }
    .hero__name { top: 30%; }
    .chip-float { display: none; }
}

/* ---------- Touch devices: no hover-only tricks ---------- */
@media (hover: none) {
    .spotlight::before { display: none; }
    .project-card__img img { transform: none; }
}

/* ---------- Print ---------- */
@media print {
    .nav, .mobile-menu, .preloader, .cursor, .bg-fx, .grain, .to-top, .scroll-progress, .marquee { display: none !important; }
    body { background: #fff; color: #000; }
    html.js [data-reveal], html.js [data-hero], html.js [data-split] .w__in, html.js .hero__name .ch { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}