/* Mocril Móveis — mobile-only layer
   Loaded with media="(max-width: 767px)" so desktop layout stays untouched. */

@media (max-width: 767px) {
  :root {
    --mobile-pad: 1rem;
  }

  body {
    font-size: 16px;
    padding-bottom: 5.5rem; /* room for floating WA + home indicator */
  }

  .container {
    width: min(100% - 1.5rem, var(--max));
  }

  /* —— Header —— */
  .header__inner {
    padding: 0.65rem 0;
    gap: 0.75rem;
  }

  .logo img {
    height: 40px;
    max-width: 140px;
  }

  .nav-toggle {
    padding: 10px;
    margin-left: auto;
  }

  .nav-toggle span {
    width: 24px;
    height: 2.5px;
  }

  .nav--mobile {
    gap: 0;
    padding: 0.25rem 0 1rem;
  }

  .nav--mobile a {
    padding: 0.95rem 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
  }

  /* —— Hero —— */
  .hero {
    min-height: min(88vh, 640px);
    align-items: flex-end;
  }

  .hero__content {
    padding: 0 0 2.25rem;
  }

  .hero__badge {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1.15;
    margin-bottom: 0.75rem;
  }

  .hero__lead {
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: none;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1.35rem;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 1rem;
    padding: 0.9rem 1.1rem;
  }

  /* —— Sections —— */
  .section {
    padding: 3rem 0;
  }

  .section__title {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem);
  }

  .section__intro {
    font-size: 0.98rem;
  }

  /* —— Sobre —— */
  .sobre-grid {
    gap: 1.5rem;
  }

  .sobre-photos {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

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

  .stat {
    padding: 0.9rem 1rem;
  }

  /* —— Vídeos: carrossel horizontal com snap —— */
  .video-grid {
    display: flex;
    justify-content: flex-start;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -0.75rem;
    padding: 0.25rem 0.75rem 1rem;
    scroll-padding-inline: 0.75rem;
  }
  .video-grid::-webkit-scrollbar { display: none; }
  .video-grid { max-width: none; }
  .video-hint {
    display: block;
    margin: -0.5rem 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gold);
  }
  .video-card {
    flex: 0 0 78%;
    max-width: 320px;
    scroll-snap-align: start;
  }
  .video-card--wide { flex-basis: 92%; max-width: none; }
  .video-card:hover { transform: none; }
  .video-card__caption { font-size: 0.92rem; padding: 0.75rem 0.85rem 0.9rem; }

  /* —— Mostruário online —— */
  .mostruario__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .mostruario__link { border-radius: 10px; }
  .mostruario__cell--wide .mostruario__link { aspect-ratio: 16 / 10; }

  @media (max-width: 340px) {
    .mostruario__grid { grid-template-columns: 1fr; }
    .mostruario__cell--wide { grid-column: auto; }
  }

  .lightbox__inner { padding: 0.5rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
  .lightbox__img {
    max-height: calc(100vh - 12rem);
    max-height: calc(100dvh - 12rem);
    border-radius: 4px;
  }
  .lightbox__nav {
    top: auto;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: 48px;
    height: 48px;
  }
  .lightbox__prev { left: 0.75rem; }
  .lightbox__next { right: 0.75rem; }
  .lightbox__actions { margin-top: 0.5rem; }
  .lightbox__wa { padding-inline: 1.1rem; font-size: 0.9rem; }

  /* —— Contato —— */
  .contato-grid {
    gap: 1.25rem;
  }

  .contato-card {
    padding: 1.15rem;
  }

  .contato-ctas {
    flex-direction: column;
  }

  .contato-ctas .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .map-wrap iframe,
  .map-wrap {
    min-height: 240px;
    height: 240px;
  }

  /* —— Footer —— */
  .footer__top {
    flex-direction: column;
    gap: 1rem;
  }

  .footer__links {
    gap: 0.75rem 1rem;
  }

  /* —— Floating WhatsApp —— */
  .float-wa {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 60px;
    height: 60px;
  }

  .float-wa__label { display: none; }

  /* Buttons general */
  .btn {
    min-height: 46px;
  }

  .btn-ghost-dark {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }
}

@media (max-width: 767px) {
  /* —— Perguntas frequentes —— */
  .faq__q {
    padding: 1rem 3rem 1rem 1rem;
    font-size: 0.98rem;
    min-height: 48px;
  }
  .faq__q::after { right: 0.85rem; }
  .faq__a { padding: 0 1rem 1rem; font-size: 0.95rem; }
  .hero__note { font-size: 0.85rem; text-align: center; }
  .video-card__desc { font-size: 0.8rem; }
}