/*
 * responsive.css — Viviane Cancian
 * Mobile-first media queries
 * Breakpoints: xs <576 | sm 576 | md 768 | lg 992 | xl 1200
 * ─────────────────────────────────────────────────────────
 */

/* ── 0. Utility overrides for all viewports ────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── 1. Extra-small (<576px) ────────────────────────────── */
@media (max-width: 575.98px) {

  /* Typography scale-down */
  .hero-headline   { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .section-title   { font-size: clamp(1.5rem, 6vw, 2rem); }
  .page-hero__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  /* Hero: stack vertically, photo below text */
  .section-hero .row { flex-direction: column-reverse; }
  .section-hero .col-lg-6:last-child { margin-bottom: 1.5rem; }

  /* Hero photo placeholder */
  .photo-placeholder { min-height: 240px; }
  .photo-placeholder--hero { min-height: 240px; }

  /* Hero quote card — hide on very small screens */
  .hero-quote-card { display: none; }

  /* Indicações: single column */
  .indicacoes-grid { grid-template-columns: 1fr !important; }

  /* Pilares: single column */
  .pilar-item { flex-direction: column; gap: .75rem; }

  /* Carousel controls: smaller */
  .carousel-nav-btn { width: 2.25rem; height: 2.25rem; }
  .carousel-nav-btn svg { width: 18px; height: 18px; }

  /* Servicos quick-nav: wrap badges */
  .servicos-nav { gap: .5rem; }
  .servico-nav-badge { font-size: .75rem; padding: .35rem .85rem; }

  /* Service section: photo always on top */
  .servico-section .row { flex-direction: column; }
  .servico-section .photo-placeholder { min-height: 220px; margin-bottom: 1.5rem; }

  /* Depoimentos grid: single column already via dep-grid */

  /* Social proof numbers */
  .display-5 { font-size: 2rem; }

  /* Footer: center all columns, full-width em mobile */
  .site-footer .col-12,
  .site-footer .col-6,
  .site-footer .col-md-2,
  .site-footer .col-md-4 { text-align: center; flex: 0 0 100%; max-width: 100%; }
  .site-footer [class*="offset-"] { margin-left: 0; }
  .footer-heading { text-align: center; }
  .footer-contact-list { align-items: center; }
  .footer-contact-list li { justify-content: center; }
  .footer-social-btn   { justify-content: center; }
  .site-footer .d-flex.gap-3 { justify-content: center; }
  .footer-nav { text-align: center; padding-left: 0; }
  .footer-nav li { list-style: none; }

  /* WhatsApp float: slightly smaller */
  .whatsapp-float { width: 52px; height: 52px; bottom: 1.25rem; right: 1.25rem; }

  /* CTA Final: full-width button, sem overflow */
  .btn-cta-primary--lg {
    width: 100%;
    min-width: 0;
    justify-content: center;
    font-size: 1rem;
    padding: .9rem 1.5rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }

  /* Botões de serviço: quebrar texto longo */
  .btn-cta-primary {
    display: flex;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }

  /* Contact info cards */
  .contact-info-card { padding: 1.75rem 1.25rem; }

  /* Sobre page: stack photo */
  .sobre-photo-col { order: -1; margin-bottom: 1.5rem; }

  /* Page hero padding */
  .page-hero { padding: 4rem 0 2.5rem; }
}

/* ── 2. Small (576–767px) ───────────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {

  .hero-headline    { font-size: clamp(2rem, 6vw, 2.5rem); }
  .section-title    { font-size: clamp(1.65rem, 5vw, 2.1rem); }
  .page-hero__title { font-size: clamp(1.8rem, 6vw, 2.4rem); }

  /* Hero: stack */
  .section-hero .row { flex-direction: column-reverse; }
  .section-hero .col-lg-6:last-child { margin-bottom: 2rem; }
  .photo-placeholder--hero { min-height: 280px; }

  /* Pilares: 2 columns */
  .pilares-grid { grid-template-columns: 1fr 1fr !important; }

  /* Footer */
  .site-footer .col-12,
  .site-footer .col-6,
  .site-footer .col-md-2,
  .site-footer .col-md-4 { text-align: center; flex: 0 0 100%; max-width: 100%; }
  .site-footer [class*="offset-"] { margin-left: 0; }
  .footer-heading { text-align: center; }
  .footer-contact-list { align-items: center; }
  .footer-contact-list li { justify-content: center; }
  .site-footer .d-flex.gap-3 { justify-content: center; }
  .footer-nav { text-align: center; padding-left: 0; }
  .footer-nav li { list-style: none; }
}

/* ── 3. Medium (768–991px) ──────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {

  /* Hero: stack at md */
  .section-hero .row { flex-direction: column-reverse; }
  .section-hero .col-lg-6:last-child { margin-bottom: 2rem; }
  .photo-placeholder--hero { min-height: 320px; }
  .hero-quote-card { display: none; }

  /* Servicos alternating: always photo top at md */
  .servico-section [class*="order-lg"] { order: 0 !important; }

  /* Depoimentos grid: 2 cols already from dep-grid */

  /* Footer: 2-col layout */
  .site-footer .col-lg-4:last-child {
    grid-column: 1 / -1;
    text-align: center;
  }
  .footer-contact-list { align-items: center; }
}

/* ── 4. Large (992–1199px) ──────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {

  /* Section padding slightly reduced */
  :root { --section-py: 4.5rem; }

  .hero-headline { font-size: clamp(2.25rem, 3.5vw, 3rem); }
}

/* ── 5. All screens ≤992 (mobile + tablet) ──────────────── */
@media (max-width: 991.98px) {

  /* Header: hide desktop nav, show hamburger */
  .navbar-desktop { display: none !important; }
  .hamburger-btn  { display: flex !important; }

  /* Section padding */
  :root { --section-py: 3.5rem; }

  /* Hero section */
  .section-hero { padding-top: 5rem; }

  /* Sobre page: photo on top */
  .sobre-photo-col { margin-bottom: 2rem; }

  /* Servicos: photo always stacks */
  .servico-section .order-lg-1,
  .servico-section .order-lg-2 { order: 0 !important; }

  /* Sobre page photo placeholder */
  .photo-placeholder--sobre { min-height: 300px; }

  /* Botões CTA: sem overflow em mobile/tablet */
  .btn-cta-primary {
    display: flex;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }
  .servico-section .btn-cta-primary { width: 100%; }

  /* Footer: centralizar menu em mobile/tablet */
  .site-footer .col-12,
  .site-footer .col-6,
  .site-footer .col-md-2,
  .site-footer .col-md-4 { text-align: center; flex: 0 0 100%; max-width: 100%; }
  .site-footer [class*="offset-"] { margin-left: 0; }
  .footer-heading { text-align: center; }
  .footer-contact-list li { justify-content: center; }
  .site-footer .d-flex.gap-3 { justify-content: center; }
  .footer-nav { text-align: center; padding-left: 0; }
  .footer-nav li { list-style: none; }
}

/* ── 6. Desktop ≥992 (desktop-specific adjustments) ──────── */
@media (min-width: 992px) {

  /* Hamburger hidden on desktop */
  .hamburger-btn { display: none !important; }

  /* Desktop nav visible */
  .navbar-desktop { display: flex !important; }

  /* Hero two-column */
  .section-hero .hero-content { padding-right: 2rem; }

  /* Botões CTA: restaurar inline-flex e nowrap no desktop */
  .btn-cta-primary { display: inline-flex; white-space: nowrap; }

  /* Servicos alternating layout enforced */
  .servico-section .order-lg-1 { order: 1; }
  .servico-section .order-lg-2 { order: 2; }
}

/* ── 7. Print ───────────────────────────────────────────── */
@media print {
  .site-header,
  .whatsapp-float,
  #mobileMenu,
  #mobileMenuBackdrop,
  .btn-cta-primary,
  .btn-cta-secondary { display: none !important; }

  body { font-size: 12pt; color: #000; }
  a    { color: #000; text-decoration: underline; }
  .section-cta-final { background: #f5f5f5 !important; color: #000 !important; }
  .section-cta-final * { color: #000 !important; }
}

/* ── 8. Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }

  .fade-up { opacity: 1; transform: none; }
  .whatsapp-float__pulse { display: none; }
}

/* ── 9. High-contrast / dark mode preference (basic) ────── */
@media (prefers-color-scheme: dark) {
  /* We keep the site light — no dark mode for now.
     Override only if browser forces dark styles. */
  :root { color-scheme: light; }
}