/* =====================================================
   CYCLE TECNOLOGIA E PREVENÇÃO — Responsive Styles
   ===================================================== */


/* =====================================================
   Large Tablets  (≤ 1024px)
   ===================================================== */
@media (max-width: 1024px) {
    :root { --sp-3xl: 5rem; }

    .hero__container    { gap: var(--sp-xl); }
    .services__grid     { grid-template-columns: repeat(2, 1fr); }
    .products__grid     { grid-template-columns: repeat(2, 1fr); }
    .certs__grid        { grid-template-columns: repeat(4, 1fr); }
    .footer__grid       { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
    .about__grid        { gap: var(--sp-xl); }

    /* 5 indicadores nao cabem lado a lado: quebram centralizados, sem divisoria */
    .hero__stat { flex-basis: 145px; }
    .hero__stat + .hero__stat::before { display: none; }
}


/* =====================================================
   Tablets  (≤ 768px)
   ===================================================== */
@media (max-width: 768px) {
    :root { --sp-3xl: 4rem; }

    /* ------- Nav mobile drawer ------- */
    .nav__toggle { display: flex; }

    .nav__menu {
        position: fixed;
        top: 0; right: -100%;
        height: 100vh;
        width: min(280px, 80vw);
        background: var(--clr-primary);
        flex-direction: column;
        align-items: flex-start;
        padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
        transition: right var(--t-base);
        box-shadow: -4px 0 24px rgba(0,0,0,0.35);
        z-index: 1000;
        gap: 0.25rem;
        overflow-y: auto;
    }

    .nav__menu.is-open { right: 0; }

    .nav__link {
        width: 100%;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-md);
    }

    .nav__link--cta {
        margin-left: 0;
        margin-top: 1rem;
        text-align: center;
        justify-content: center;
    }

    /* ------- Hero ------- */
    .hero__container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--sp-xl);
    }

    .hero__visual {
        height: 280px;
        order: -1;
    }

    .hero__shield {
        width: 128px;
        height: 128px;
    }

    .hero__shield-mark { width: 80px; }

    /* ------- Logo ------- */
    .nav__logo-mark   { height: 34px; }
    .nav__logo-type   { height: 30px; }
    .nav__logo-tagline { font-size: 0.5625rem; }   /* 9px */

    .hero__actions { justify-content: center; }

    .hero__stats-grid { gap: 0.5rem; }
    .hero__stat { flex-basis: 40%; }

    /* em 2 colunas a divisória cairia no início da 2ª linha */
    .hero__stat + .hero__stat::before { display: none; }

    .hero__stat { padding: 1rem 0.5rem; }

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

    .section-title--left { text-align: center; }

    /* ------- Services ------- */
    .services__grid  { grid-template-columns: 1fr; }
    .products__grid  { grid-template-columns: 1fr; }

    /* ------- Certificações ------- */
    .certs__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }

    /* ------- Contact ------- */
    .contact__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
    .form__row     { grid-template-columns: 1fr; }

    /* ------- Footer ------- */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }

    .footer__bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    /* ------- WhatsApp ------- */
    .wpp__card { flex-direction: column; text-align: center; padding: 1.75rem 1.25rem; }
    .wpp__sub  { margin-bottom: 0.25rem; }
    .wpp-float { right: 1rem; bottom: 1rem; width: 52px; height: 52px; font-size: 1.6rem; }

    /* ------- CTA banner ------- */
    .cta-banner__actions { flex-direction: column; align-items: center; }
}


/* =====================================================
   Mobile  (≤ 480px)
   ===================================================== */
@media (max-width: 480px) {
    :root {
        --sp-3xl: 3.5rem;
        --sp-2xl: 2.5rem;
    }

    .container { padding: 0 1rem; }

    /* Logo: só o ícone, o lettering não cabe ao lado do menu */
    .nav__logo-lockup { display: none; }
    .nav__logo-mark { height: 36px; }

    /* Hide two floating elements to avoid crowding */
    .hero__float--2,
    .hero__float--4 { display: none; }

    .hero__ring--3 { display: none; }

    .certs__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

    .cert-card { padding: 1.25rem 0.625rem 1.125rem; }
    .cert-card__badge      { height: 62px; }
    .cert-card__badge img  { max-height: 62px; }

    /* About card grid → single column */
    .about__cards { grid-template-columns: 1fr; }

    /* Contact form tighten */
    .contact__form { padding: 1.5rem; }

    /* Certs ABES block */
    .certs__abes { flex-direction: column; text-align: center; }

    /* Client ticker tighter */
    .clients__item { height: 64px; min-width: 142px; padding: 0.6rem 1.1rem; }
    .clients__logo { max-height: 32px; max-width: 108px; }
}


/* =====================================================
   Accessibility: reduce motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html { scroll-behavior: auto; }
}