/**
 * Responsive — v3.2
 *
 * Mudanças v2.x → v3.2:
 *   - rgba(10,13,20,0.95) → color-mix com --color-surface-dark
 *   - rgba(255,255,255,0.10/0.08) → color-mix com white
 *   - --space-sm/md/lg/xl/2xl/3xl/4xl (legados) → escala v3.2
 *   - font-size: 1rem/15px hardcoded nos botões → var(--font-size-base)
 *   - padding: 14px 24px hardcoded → tokens btn
 *   - clamp() hardcoded no hero mobile → var(--font-size-4xl)
 *   - gap: 4px hardcoded → var(--space-1)
 *   - Removida duplicação do bloco @media (min-width: 1024px) grid gap
 *
 * @package FocofyFactory
 * @version 3.2
 */

/* ══════════════════════════════════════════════════════════════════════════
   CONTAINER GLOBAL
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --wrap:     var(--container-max);
  --pad-x:    var(--gutter);
  --pad-x-sm: var(--gutter);
}
.focofy-section > * {
  max-width:     var(--wrap);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--pad-x);
  padding-right: var(--pad-x);
}

@media (max-width: 1023px) {
  .focofy-section > * {
    padding-left:  var(--pad-x-sm);
    padding-right: var(--pad-x-sm);
  }
}

@media (min-width: 1440px) {
  :root { --wrap: 1140px; }
}

/* Exceção: Hero tem layout próprio */
.focofy-section--sec-hero > .focofy-hero {
  max-width:     none;
  margin-left:   0;
  margin-right:  0;
  padding-left:  0;
  padding-right: 0;
}

.focofy-hero__grid {
  max-width:     var(--wrap);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--pad-x);
  padding-right: var(--pad-x);
}

@media (max-width: 1023px) {
  .focofy-hero__grid {
    padding-left:  var(--pad-x-sm);
    padding-right: var(--pad-x-sm);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — até 980px
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {

  :root {
    --sec-y:     64px;
    --pad-x:     20px;
  }

  /* Header */
  .header-grid {
    padding:    var(--space-2) 0;
    min-height: 64px;
  }

  .nav-toggle  { display: inline-flex; }
  .main-nav    { display: none; }
  .header-cta  { display: none; }

  .site-header.is-open .main-nav,
  .site-header.is-open .header-cta {
    display: block;
  }

  /* Menu mobile dropdown */
  .main-nav {
    position:     absolute;
    left:         0;
    right:        0;
    top:          100%;
    /* v3.2: rgba hardcoded → color-mix */
    background:   color-mix(in srgb, var(--color-surface-dark) 95%, transparent);
    backdrop-filter:         blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
    padding:      var(--space-4) 0;
  }

  .main-nav .primary-menu {
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-1);
    padding:         0 var(--space-4);
  }

  .main-nav .primary-menu a {
    display:       block;
    padding:       var(--space-4);
    border-radius: var(--radius-sm);
  }

  .main-nav .primary-menu a:hover {
    /* v3.2: rgba hardcoded → color-mix */
    background: color-mix(in srgb, white 8%, transparent);
  }

  .site-header.is-open .header-cta {
    position: absolute;
    left:     var(--space-4);
    right:    var(--space-4);
    top:      calc(100% + var(--space-3) + 204px);
  }

  .header-cta .btn {
    width:            100%;
    justify-content:  center;
  }

  /* Hero */
  .focofy-hero {
    padding:       var(--space-16) 0;
    border-radius: var(--radius-md);
  }

  .focofy-hero__grid {
    grid-template-columns: 1fr;
    gap:     var(--space-8);
    padding: 0 var(--space-4);
  }

  .focofy-hero__title {
    font-size: var(--font-size-4xl);
  }

  .focofy-hero__desc {
    font-size: var(--font-size-base);
  }

  .focofy-hero__media {
    justify-content: center;
  }

  /* Features */
  .focofy-features__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .focofy-features--bg-light,
  .focofy-features--bg-dark {
    padding: var(--space-6);
  }

  /* Pricing */
  .focofy-pricing__grid {
    grid-template-columns: 1fr;
  }

  .focofy-pricing__card.is-featured {
    transform: none;
  }

  /* FAQ */
  .focofy-faq--layout-two-columns .focofy-faq__items {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap:            var(--space-8);
    padding-bottom: var(--space-6);
  }

  .site-footer {
    margin-top: var(--space-16);
  }

  /* Botões — v3.2: hardcodes removidos, deriva dos tokens */
  .btn {
    font-size: var(--font-size-base);
  }

  /* Blog feed */
  .focofy-blogfeed {
    padding: var(--space-6);
  }

  .focofy-blogfeed__header {
    flex-direction:  column;
    align-items:     flex-start;
  }

  .focofy-blogfeed__grid {
    grid-template-columns: 1fr;
  }

  /* Contato */
  .focofy-contact {
    padding: var(--space-6);
  }

  .focofy-contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Content + Image */
  .focofy-ci {
    padding: var(--space-6);
  }

  .focofy-ci__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .focofy-ci--layout-image-left .focofy-ci__grid {
    direction: ltr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PEQUENO — até 640px
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  :root {
    --sec-y: 48px;
  }

  .focofy-hero {
    padding: var(--space-12) 0;
  }

  .focofy-cta {
    padding: var(--space-12) var(--space-6);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ESPAÇAMENTO VERTICAL — mobile (< 1024px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  .focofy-section {
    padding-top:    var(--space-6) !important;
    padding-bottom: var(--space-14) !important;
  }

  .focofy-section--sec-features-grid,
  .focofy-section--sec-blog-feed,
  .focofy-section--sec-faq {
    padding-top:    var(--space-12) !important;
    padding-bottom: var(--space-12) !important;
  }

  .focofy-section--sec-hero {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
  }

  .focofy-features__header,
  .focofy-pricing__header,
  .focofy-faq__header {
    margin-bottom: var(--space-8) !important;
  }

  .focofy-features__grid,
  .focofy-pricing__grid,
  .focofy-testimonials__grid {
    gap: var(--space-5) !important;
  }

  /* Padding lateral nas seções com wrappers internos */
  :root { --m-pad: 20px; }

  .focofy-section--sec-cta .focofy-cta,
  .focofy-section--sec-faq .focofy-faq,
  .focofy-section--sec-testimonials .focofy-testimonials,
  .focofy-section--sec-pricing .focofy-pricing,
  .focofy-section--sec-blog-feed .focofy-blog {
    padding-left:  var(--m-pad) !important;
    padding-right: var(--m-pad) !important;
    max-width:     90% !important;
  }

  .focofy-section--sec-cta .focofy-cta__grid,
  .focofy-section--sec-faq .focofy-faq__grid,
  .focofy-section--sec-testimonials .focofy-testimonials__grid,
  .focofy-section--sec-pricing .focofy-pricing__grid,
  .focofy-section--sec-blog-feed .focofy-blog__grid {
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP — a partir de 1024px
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  :root {
    --sec-y: 72px;
  }

  .header-grid {
    min-height: 72px;
    padding:    var(--space-2) 0;
  }

  .focofy-hero {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
  }

  .site-footer {
    margin-top: var(--space-12);
  }

  .focofy-section {
    padding-top:    var(--space-10);
    padding-bottom: var(--space-10);
  }

  .focofy-section--sec-features-grid,
  .focofy-section--sec-pricing,
  .focofy-section--sec-testimonials,
  .focofy-section--sec-blog-feed,
  .focofy-section--sec-faq {
    padding-top:    var(--space-12);
    padding-bottom: var(--space-12);
  }

  .focofy-features__grid,
  .focofy-pricing__grid,
  .focofy-testimonials__grid,
  .focofy-blog__grid {
    gap: var(--space-7);
  }

  .focofy-features__header,
  .focofy-pricing__header,
  .focofy-testimonials__header,
  .focofy-blog__header,
  .focofy-faq__header {
    margin-bottom: var(--space-10);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TELAS GRANDES — a partir de 1280px
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  :root { --container: 1140px; }
}