/* =====================================================================
   Joy Musical Studio – responsive.css
   Breakpoints: 1200 / 1024 / 991 / 767 / 575 / 420
   ===================================================================== */

/* ---------------------------------------------------------------
   <= 1200px – large tablets / small laptops
   --------------------------------------------------------------- */
@media (max-width: 1200px) {
    .brand__name { font-size: 1.08rem; }
    .brand__tagline { font-size: 0.7rem; }
    .main-nav__link { padding: 10px 11px; font-size: 0.92rem; }
    .header-actions__cta { padding: 13px 20px; font-size: 0.88rem; }
    .service-grid { gap: 18px; }
    .academy__float { right: 0; }
}

/* ---------------------------------------------------------------
   <= 1024px
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__arrow { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------
   <= 991px – tablet / mobile navigation kicks in
   --------------------------------------------------------------- */
@media (max-width: 991px) {

    .site-header__inner { min-height: 70px; }

    .header-actions__cta { display: none; }
    .nav-toggle { display: flex; }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 12px 20px 22px;
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--border-soft);
        border-bottom: 1px solid var(--border-soft);
        box-shadow: 0 24px 45px rgba(32, 26, 21, 0.14);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }
    .site-header.is-open .main-nav { opacity: 1; visibility: visible; transform: translateY(0); }

    .main-nav__list { flex-direction: column; gap: 0; width: 100%; }
    .main-nav__item { width: 100%; }
    .main-nav__link {
        padding: 14px 4px;
        font-size: 1rem;
        border-bottom: 1px solid var(--border-soft);
        border-radius: 0;
    }
    .main-nav__link::after { left: 0; right: auto; width: 34px; bottom: 8px; }
    .main-nav__cta {
        display: inline-flex;
        justify-content: center;
        margin-top: 14px;
        width: 100%;
    }

    .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .grid-2--center { gap: 40px; }

    .service-block,
    .service-block--reverse {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
    .service-block--reverse .service-block__media { order: 0; }
    .service-block__icon,
    .service-block--reverse .service-block__icon { left: 18px; right: auto; bottom: -18px; }

    .contact-layout { grid-template-columns: minmax(0, 1fr); }

    .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .timeline::before { display: none; }
    .timeline__item { margin-top: 44px; }

    .positioning { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .positioning__divider { margin: 0 auto; }

    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .academy__media .img-frame--offset { position: relative; left: 0; bottom: 0; width: 100%; margin-top: 16px; border: 0; }
    .academy__float { position: relative; top: 0; right: 0; margin-top: 16px; max-width: none; }
}

/* ---------------------------------------------------------------
   <= 767px – mobile
   --------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Top bar hidden on mobile */
    .topbar { display: none; }

    .brand__logo { width: 64px; height: 64px; }
    .brand__name { font-size: 1rem; white-space: normal; line-height: 1.15; }
    .brand__tagline { font-size: 0.64rem; letter-spacing: 0.08em; }

    .hero {
        height: auto;
        min-height: 620px;
        padding: 48px 0 80px;
    }
    .hero__inner { min-height: 440px; }
    .hero__slide--right .hero__inner { justify-content: flex-start; }
    .hero__slide--right .hero__panel {
        border-left: 3px solid var(--brand-orange);
        border-right: 1px solid rgba(255, 255, 255, 0.14);
    }
    .hero__panel {
        max-width: 100%;
        padding: 24px 20px;
        border-radius: 14px;
        backdrop-filter: blur(5px);
    }
    .hero__actions .btn { flex: 1 1 auto; }
    .hero__arrow { width: 40px; height: 40px; top: auto; bottom: 16px; transform: none; }
    .hero__arrow:hover { transform: scale(1.06); }
    .hero__arrow--prev { left: 16px; }
    .hero__arrow--next { right: 16px; }
    .hero__dots { bottom: 30px; }

    .section-head { margin-bottom: 26px; }
    .section-foot { margin-top: 26px; }
    .section-foot .btn + .btn { margin-left: 0; margin-top: 12px; }

    .about-intro__media { padding-bottom: 0; }
    .about-intro__media .img-frame--small { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 14px; border: 0; box-shadow: none; }
    .about-intro__badge { left: auto; right: 14px; bottom: auto; top: 14px; padding: 11px 16px; }

    .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .opp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .timeline { grid-template-columns: minmax(0, 1fr); }

    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .gallery-grid--preview .gallery-item { min-height: 150px; }

    .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .map-frame iframe { height: 320px; }

    .final-cta__actions { flex-direction: column; align-items: stretch; }
    .contact-actions { flex-direction: column; }
    .contact-actions .btn { width: 100%; }

    .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .site-footer__bottom-inner { justify-content: center; text-align: center; }

    .lightbox { flex-direction: column; padding: 68px 14px 20px; gap: 10px; }
    .lightbox__nav { width: 42px; height: 42px; }
    .lightbox__figure { order: -1; }
    .lightbox__close { top: 14px; right: 16px; }

    .back-to-top { right: 16px; bottom: 82px; }
    .whatsapp-float { right: 16px; bottom: 16px; }
}

/* ---------------------------------------------------------------
   <= 575px – small mobile
   --------------------------------------------------------------- */
@media (max-width: 575px) {

    .brand__tagline { display: none; }
    .brand__name { font-size: 0.97rem; }

    .btn { padding: 14px 20px; font-size: 0.9rem; }
    .btn--sm { padding: 11px 16px; font-size: 0.85rem; }

    .hero { min-height: 600px; padding: 36px 0 78px; }
    .hero__inner { min-height: 380px; }
    .hero__text { font-size: 0.95rem; }

    .service-grid,
    .process-steps,
    .opp-grid,
    .why-grid { grid-template-columns: minmax(0, 1fr); }

    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-grid--preview .gallery-item { min-height: 130px; }

    .accordion__btn { padding: 16px 16px; font-size: 0.96rem; gap: 12px; }
    .accordion__panel p { padding: 0 16px 18px; }

    .service-block__actions .btn,
    .final-cta__actions .btn { width: 100%; }

    .whatsapp-float { width: 50px; height: 50px; }
    .whatsapp-float__icon { width: 25px; height: 25px; }
}

/* ---------------------------------------------------------------
   <= 420px – very small mobile
   --------------------------------------------------------------- */
@media (max-width: 420px) {
    :root { --gutter: 16px; }

    .brand__name { font-size: 0.9rem; }
    .brand__logo { width: 56px; height: 56px; }

    .hero__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
    .gallery-grid { grid-template-columns: minmax(0, 1fr); }
    .gallery-grid--preview .gallery-item { min-height: 200px; }

    .page-banner { padding: 44px 0; }
    .page-banner__title { font-size: 1.7rem; }

    .metric { padding: 13px 9px; }
    .metric__value { font-size: 0.93rem; }
}