/*
 * responsive.css — Navega Theme · Media Queries
 * Todas as regras responsivas organizadas por breakpoint.
 * Ordem: tablet (max 1023px) → mobile (max 767px).
 * Tokens mobile já sobrescrevem tipografia em style-tokens.css.
 * ============================================================ */

/* ============================================================
   TABLET — até 1023px
   ============================================================ */

@media (max-width: 1023px) {

    /* Container */
    .container { padding-inline: var(--container-padding-tab); }

    /* Grid */
    .grid--3col                    { grid-template-columns: repeat(2, 1fr); }
    .grid--4col                    { grid-template-columns: repeat(2, 1fr); }
    .grid--55-45,
    .grid--60-40,
    .grid--65-35                   { grid-template-columns: 1fr; }

    /* Header */
    .site-header__inner            { height: 64px; }

    /* Footer — mantém 3 colunas no tablet */
    .site-footer__inner            { gap: var(--space-5); }

    /* Teams — single column stacked, no breakpoint change needed */

    /* Steps — horizontal → vertical */
    .steps-list                    { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
    .steps-list__item              { flex-direction: row; text-align: left; flex: none; }
    .steps-list__connector         { display: none; }
    .steps-list__body              { margin-top: 0; padding-inline: 0; }

    /* Proof bar */
    .proof-bar__number             { font-size: 3.5rem; }

    /* Metrics */
    .metrics-bar                   { flex-wrap: wrap; }
    .metrics-bar__item             { flex: 1 1 40%; }

    /* Section headers */
    .section-header--split         { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   MOBILE — até 767px
   ============================================================ */

@media (max-width: 767px) {

    /* Container */
    .container { padding-inline: var(--container-padding-mob); }

    /* Seções — padding reduzido em mobile */
    .section,
    [class*="section-"] { padding-block: var(--space-8); }

    /* ---- Tipografia ---- */
    /* Tokens já ajustam --text-h1, --text-h2 etc. em style-tokens.css.
       Aqui só classes que não usam os tokens diretamente. */
    .section__subtitle             { font-size: var(--text-body); }
    .proof-bar__number             { font-size: 3rem; }
    .testimonial__quotes           { font-size: 4rem; }
    .section-proof__number         { font-size: clamp(3rem, 15vw, 5rem); }

    /* ---- Header ---- */
    .site-nav,
    .site-header__cta              { display: none; }
    .site-header__hamburger        { display: flex; }
    .site-header__inner            { justify-content: space-between; height: 60px; }

    /* ---- Grid ---- */
    .grid--2col,
    .grid--3col,
    .grid--4col,
    .grid--2x2,
    .grid--50-50,
    .grid--40-60                   { grid-template-columns: 1fr; }
    .proof-bar__inner              { grid-template-columns: 1fr; gap: var(--space-5); }
    .posts-grid__item,
    .cases-grid__item              { height: auto; }

    /* ---- Footer ---- */
    .site-footer__inner            { grid-template-columns: 1fr; gap: var(--space-7); }

    /* ---- Hero ---- */
    .hero                          { padding-top: var(--space-9); padding-bottom: var(--space-7); }
    .hero--home                    { min-height: auto; padding-top: var(--space-9); background-position: 75% center; }
    .hero__actions                 { flex-direction: column; align-items: flex-start; }

    /* ---- Botões ---- */
    .btn--full,
    .hero__actions .btn            { width: 100%; justify-content: center; }

    /* ---- Formulários ---- */
    .form__row                     { grid-template-columns: 1fr; }

    /* ---- Newsletter ---- */
    .newsletter__input-group       { flex-direction: column; }

    /* ---- Metrics ---- */
    .metrics-bar                   { flex-direction: column; }

    /* ---- Section CTAs ---- */
    .section-cta__actions,
    .section-cta-dark__actions     { flex-direction: column; align-items: center; }

    /* ---- Steps ---- */
    .steps-list                    { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
    .steps-list__item              { flex-direction: row; text-align: left; flex: none; }
    .steps-list__connector         { display: none; }
    .steps-list__body              { margin-top: 0; padding-inline: 0; }

    /* ---- Cards ---- */
    .card-service                  { flex-direction: column; }
    .diag-card                     { padding: var(--space-6); }
    .team-card                     { flex-direction: column; }

    /* ---- Blog ---- */
    .featured-post__img            { height: 240px; }

    /* ---- Section headers ---- */
    .section-header--split         { flex-direction: column; align-items: flex-start; }
    .section-header--split .btn    { align-self: flex-start; }

    /* ---- Credentials ---- */
    .credentials-logos             { gap: var(--space-6); }

    /* ---- Filter pills ---- */
    .filter-pills                  { gap: var(--space-2); }

    /* ---- Footer ---- */
    .social-links__list            { flex-wrap: wrap; }
}