/* ==========================================================================
   Melissa Ferri Beauty — responsivo
   Desktop primeiro. Pontos de ajuste: 1200 · 1080 · 1024 · 900 · 768 · 600 · 430
   ========================================================================== */

/* Menu mobile só existe abaixo de 1080px */
@media (min-width: 1081px) {
  .mobile-menu { display: none; }
}

@media (max-width: 1200px) {
  .nav__list { gap: 1.6rem; }
  .header__cta { padding: 0 1.1rem; }
}

/* --------------------------------------------------------------------------
   ≤ 1080 — header com menu hamburger
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --header-h: 76px; }
  .header.is-scrolled { --header-h: 66px; }
  .nav { display: none; }
  .menu-toggle { display: block; }
}

/* --------------------------------------------------------------------------
   ≤ 1024 — tablet paisagem
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__media { width: 62vw; }

  .gallery__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(48px, 10vw, 96px);
  }
  .g-item:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 5; }
  .g-item:nth-child(2) { grid-column: 5 / 7; grid-row: 1 / 5; }
  .g-item:nth-child(3) { grid-column: 1 / 3; grid-row: 5 / 9; }
  .g-item:nth-child(4) { grid-column: 3 / 5; grid-row: 5 / 7; }
  .g-item:nth-child(5) { grid-column: 3 / 5; grid-row: 7 / 9; }
  .g-item:nth-child(6) { grid-column: 5 / 7; grid-row: 5 / 9; }
  .g-item:nth-child(7) { grid-column: 1 / 4; grid-row: 9 / 14; }
  .g-item:nth-child(8) { grid-column: 4 / 7; grid-row: 9 / 14; }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Números do "Sobre" em linhas enquanto a coluna de texto é estreita */
@media (max-width: 1100px) {
  .about__facts { grid-template-columns: 1fr; }
  .about__facts > div,
  .about__facts > div + div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    padding: 1.1rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-line);
  }
  .about__facts dd { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   ≤ 900 — tablet retrato: seções passam a uma coluna
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 560px; margin-inline: auto; width: 100%; }
  .about__seal { left: -0.5rem; top: -2.5rem; }

  .section-head--split { grid-template-columns: 1fr; align-items: start; }
  .section-head--split p { justify-self: start; }

  /* Serviços: imagem de cada serviço aparece na própria linha */
  .services__layout { grid-template-columns: 1fr; }
  .services__preview { display: none; }
  .services__list { border-top: 0; }
  .service + .service { margin-top: 1.5rem; }
  .service__img-mobile {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-graphite-soft);
  }
  .service__img-mobile img { width: 100%; height: 100%; object-fit: cover; }
  .service__link {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    padding-top: 1.5rem;
  }
  .service__meta {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
  }
  .services__list:hover .service:not(:hover) { opacity: 1; }
  .service.is-active .service__link::after { transform: scaleX(0); }
  .service__link:hover .service__title,
  .service.is-active .service__title { transform: none; }

  /* Experiência */
  .experience__grid { grid-template-columns: 1fr; }
  .experience__sticky { position: relative; height: 68vh; height: 68svh; }
  .experience__sticky::after {
    background: linear-gradient(0deg, var(--color-ink) 0%, rgba(20, 19, 16, 0) 40%);
  }
  .experience__content { padding: 1rem var(--gutter) var(--space-section); }
  .experience__line { min-height: 0; padding-block: 2.25rem; opacity: 1; }
  .experience__line + .experience__line { border-top: 1px solid var(--color-line-dark); }
  .experience__line::before { margin-bottom: 1rem; }
  .experience__outro { margin-top: 1rem; }

  .insta__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 0;
  }
  .insta__grid li:nth-child(even) { translate: none; }

  .contact__grid { grid-template-columns: 1fr; }
  .contact__map { min-height: 380px; }
}

/* --------------------------------------------------------------------------
   ≤ 768 — hero mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero { justify-content: flex-end; }
  .hero__media {
    width: 100%;
    bottom: auto;
    height: 76%;
  }
  .hero__media img { object-position: 50% 18%; }
  .hero__media::after {
    background:
      linear-gradient(0deg, var(--color-ink) 0%, var(--color-ink) 12%, rgba(20, 19, 16, 0.82) 38%, rgba(20, 19, 16, 0) 66%),
      linear-gradient(180deg, rgba(20, 19, 16, 0.6) 0%, rgba(20, 19, 16, 0) 22%);
  }
  .hero__eyebrow { align-items: flex-start; }
  .hero__eyebrow::before { margin-top: 0.62em; }
  .hero__title { line-height: 0.9; }
  .hero__title .line:nth-child(2) { padding-left: 0.4em; }
  .hero__bottom { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .link-arrow { align-self: center; }
  .hero__facts { padding-block: 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); }
  .hero__facts ul { gap: 0.4rem 1.5rem; }
  .hero__scroll { display: none; }

  .lightbox__stage { inset: 4.5rem 0.75rem 7rem; }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 1.25rem; transform: none; width: 50px; height: 50px; }
  .lightbox__prev { left: 1rem; }
  .lightbox__next { right: 1rem; }
  .lightbox__close { top: 0.9rem; right: 0.9rem; width: 50px; height: 50px; }
  .lightbox__bar {
    left: 5rem; right: 5rem; bottom: 1.9rem;
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   ≤ 600 — celulares
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .header__cta { display: none; }
  .brand { gap: 0.75rem; }
  .brand__mono { font-size: 1.35rem; padding-right: 0.75rem; }
  .brand__name { font-size: 0.86rem; letter-spacing: 0.2em; }
  .brand__name small { font-size: 0.5rem; }

  .hero__facts { font-size: 0.6rem; letter-spacing: 0.18em; }

  .about__media { padding: 0 12% 16% 0; }
  .about__img--detail { width: 44%; }

  .service__tag { display: none; }
  .service__meta { justify-content: flex-start; }

  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 27vw;
  }
  .g-item:nth-child(n) { grid-row: auto; }
  .g-item:nth-child(1) { grid-column: 1 / 3; grid-row: span 2; }
  .g-item:nth-child(2) { grid-column: 1 / 2; grid-row: span 3; }
  .g-item:nth-child(3) { grid-column: 2 / 3; grid-row: span 2; }
  .g-item:nth-child(4) { grid-column: 2 / 3; grid-row: span 1; }
  .g-item:nth-child(5) { grid-column: 1 / 3; grid-row: span 2; }
  .g-item:nth-child(6) { grid-column: 1 / 2; grid-row: span 3; }
  .g-item:nth-child(7) { grid-column: 2 / 3; grid-row: span 3; }
  .g-item:nth-child(8) { grid-column: 1 / 3; grid-row: span 2; }
  .g-item__cap { left: 0.85rem; bottom: 0.75rem; font-size: 0.56rem; }
  .g-item__cap::before { width: 1rem; }
  .gallery__foot { flex-direction: column; align-items: flex-start; }

  .insta__head .btn { width: 100%; }
  .insta__grid { gap: 0.4rem; }

  .cta__mono { font-size: 78vw; }
  .cta .btn { width: 100%; }

  .contact__list > div { grid-template-columns: 1fr; gap: 0.35rem; }
  .contact__actions { flex-direction: column; }
  .contact__actions .btn { width: 100%; }
  .contact__map { min-height: 320px; }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
  .footer__cols > :nth-child(n + 3) { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; }

  .wa-float { width: 52px; height: 52px; }
}

@media (max-width: 430px) {
  .btn { padding: 0 1.25rem; letter-spacing: 0.16em; }
  .hero__title .line:nth-child(2) { padding-left: 0.3em; }
  .mobile-menu__meta { flex-direction: column; gap: 0.5rem; }
}

/* Telas curtas em paisagem (celular deitado) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 560px; }
  .experience__sticky { height: 100vh; }
  .experience__line { min-height: 80vh; }
}

/* Dispositivos sem hover: legendas visíveis e sem esmaecimento */
@media (hover: none) {
  .g-item__cap { opacity: 1; transform: none; }
  .g-item__btn::after { opacity: 0.85; }
  .services__list:hover .service:not(:hover) { opacity: 1; }
}