/* =========================================================
   responsive.css — tablet e celular
   ========================================================= */

/* Tablet: o menu horizontal não cabe → gaveta */
@media (max-width: 1180px) {
  .menu { display: none; }
  .burger { display: flex; }
}

/* Celular e tablet em pé */
@media (max-width: 900px) {
  :root { --hdr: 66px; --ribbon: 34px; }
  body { font-size: 16px; }
  .logo img { height: 26px; }
  .ribbon { font-size: 10.5px; letter-spacing: .12em; padding: 9px 16px; }

  /* hero: foto em cima, texto embaixo */
  .hero, .no-ribbon .hero { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; }
  .hero__photo { order: -1; height: 56svh; min-height: 340px; }
  .hero__copy { padding: 32px var(--gutter) 54px; }
  .hero h1 { font-size: 48px; margin: 14px 0 16px; }
  .hero .lead { font-size: 16px; margin-bottom: 26px; }
  .hero__ctas .btn { flex: 1 1 100%; }

  .sec-head { flex-direction: column; align-items: flex-start; }

  /* sobre */
  .about__photo, .about__text { grid-column: 1 / -1; }
  .about__inset { right: -2%; bottom: -10%; width: 42%; }
  .about__text { margin-top: 60px; }
  .facts { gap: 20px; }
  .facts dt { font-size: 30px; }

  /* portfólio */
  .filters { overflow-x: auto; flex-wrap: nowrap; width: calc(100% + var(--gutter)); margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .filters button { flex: 0 0 auto; }
  .masonry { columns: 2; column-gap: 10px; }
  .pf { margin-bottom: 10px; }
  .feature { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .pf figcaption { display: none; }

  /* serviços */
  .services__media { display: none; }
  .services__list { grid-column: 1 / -1; }
  .service { grid-template-columns: 1fr; padding: 28px 0; }
  .services__list:hover .service, .service { opacity: 1 !important; }
  .service__k { padding-top: 0; }
  .service__thumb { display: block; aspect-ratio: 4 / 3; margin-bottom: 18px; }

  /* natal */
  .natal__banner { height: 84svh; min-height: 520px; }
  .natal__banner img { object-position: 62% 50%; }
  .natal__banner::after { background: linear-gradient(180deg, rgba(40,14,18,.1) 20%, rgba(40,14,18,.9) 100%); }
  .natal__banner .wrap { justify-content: flex-end; padding-bottom: 10vh; }
  .natal__banner h2 { font-size: 52px; margin: 12px 0; }
  .natal__intro h3, .natal__intro div,
  .scene > .ph, .scene__text,
  .booking__text, .booking > .ph { grid-column: 1 / -1; }
  .natal__gallery {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1);
    padding: 10px var(--gutter) 30px;
  }
  .natal__gallery > figure { flex: 0 0 78%; scroll-snap-align: center; margin-top: 0 !important; transform: none !important; }
  .details { gap: 8px; }

  /* estúdio */
  .rail figure { height: 58vh; }
  .rail-ctl { display: none; }
  .studio__cols > :first-child, .studio__cols > :last-child { grid-column: 1 / -1; }

  /* contato */
  .contact__info, .contact__form { grid-column: 1 / -1; }
  .form .row { grid-template-columns: 1fr; gap: 0; }
  .form__actions .btn { flex: 1 1 100%; }

  .quote { min-height: 300px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 18px; transform: none; }
  .lightbox__cta { bottom: 80px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 42px; }
  .facts { flex-wrap: wrap; }
}