/* JEM.cabeleireiros — Revisão 07 (03-11-2026)
   Ajustes aprovados para CTAs, enquadramento de imagens e experiência mobile.
   NÃO altera fotografias, logos nem serviços/valores aprovados. */

/* Botões do preçário: retirar seta azul (emoji representada por ↗) e melhorar contraste. */
.jem-price-book{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center;text-decoration:none;white-space:normal;line-height:1.45}
.jem-price-book:hover,.jem-price-book:focus-visible{background:#e5c39c;color:#1c1b19}

/* Cartões e imagens: manter composição dos cartões sem cortar pessoas. */
.jem-four-grid,.specialty-grid,.people-grid,.jem-beauty-approved{min-width:0}
.jem-four-card,.specialty-card,.person-card{min-width:0}
.jem-four-card a,.specialty-content,.jem-four-content{min-width:0}
.jem-four-content strong{display:inline-block;line-height:1.5}

/* Contraste: botão secundário no painel preto da barbearia. */
.bg-dark .btn-outline-jem,.jem-area-detail .bg-dark .btn-outline-jem{color:#f4ebdf!important;border:1px solid #c4a582!important}
.bg-dark .btn-outline-jem:hover,.bg-dark .btn-outline-jem:focus-visible{background:#e5c39c!important;color:#1c1b19!important}

/* Ações fixas: as 3 colunas pertencem à largura disponível do ecrã.
   As ferramentas de pré-visualização do Netlify são sobrepostas pelo Netlify
   e não integram o site publicado. */
@media(max-width:760px){
  html{max-width:100%;overflow-x:clip}
  body{min-width:0;max-width:100%;overflow-x:clip}
  .jem-r06-mobile-cta{
    position:fixed!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:6px!important;
    padding:8px max(10px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-right,0px))!important;
    background:#171410!important;
    box-shadow:0 -4px 18px rgba(0,0,0,.16)!important;
    z-index:1000!important;
  }
  .jem-r06-mobile-cta a{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    height:auto!important;min-height:46px!important;
    padding:9px 4px!important;
    box-sizing:border-box!important;
    font-size:clamp(.69rem,2.8vw,.82rem)!important;
    line-height:1.25!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    letter-spacing:0!important;
    word-break:normal!important;
  }
  body:has(.jem-r06-mobile-cta){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}

  /* Pessoas reais, fotos aprovadas: respeitar a proporção vertical natural. */
  .specialty-media,.specialty-media.jem-cachos-portrait{
    aspect-ratio:auto!important;height:auto!important;min-height:0!important;
    overflow:visible!important;background:#e8dfd3;
  }
  .specialty-media img,.specialty-media.jem-cachos-portrait img{
    display:block!important;position:static!important;
    width:100%!important;height:auto!important;max-height:none!important;
    aspect-ratio:auto!important;object-fit:contain!important;
    object-position:center!important;
  }
  .barber-figure.media-image,.person-card .media-image{
    aspect-ratio:auto!important;height:auto!important;min-height:0!important;
  }
  .barber-figure.media-image img,.person-card .media-image img{
    width:100%!important;height:auto!important;max-height:none!important;
    object-fit:contain!important;object-position:center!important;
  }
  .hair-feature.media-image{aspect-ratio:4/5!important;min-height:0!important}
  .hair-feature.media-image img{object-fit:cover!important;object-position:center 34%!important}

  /* Galeria: foto vertical não deve ser comprimida numa moldura panorâmica. */
  .gallery-mosaic .g-item,.gallery-mosaic .g-item.big,
  .gallery-mosaic .g-item.wide,.gallery-mosaic .g-item.tall{
    aspect-ratio:auto!important;min-height:0!important;height:auto!important;overflow:hidden;
  }
  .gallery-mosaic .g-item img{
    position:static!important;inset:auto!important;display:block!important;
    width:100%!important;height:auto!important;max-height:none!important;
    aspect-ratio:auto!important;object-fit:contain!important;
  }
  .jem-cachos-gallery img{object-fit:contain!important}

  /* As duas fotografias aprovadas da área de beleza também mantêm a altura natural. */
  .beauty-media-grid.jem-beauty-approved .media-image,
  .beauty-media-grid.jem-beauty-approved .media-image:last-child{
    aspect-ratio:auto!important;min-height:0!important;height:auto!important;
  }
  .beauty-media-grid.jem-beauty-approved .media-image img{
    display:block!important;width:100%!important;height:auto!important;
    object-fit:contain!important;object-position:center!important;
  }
  .jem-page-hero figure{height:auto!important;min-height:0!important;aspect-ratio:auto!important}
  .jem-page-hero figure img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
}

@media(max-width:520px){
  /* Evitar quatro cartões demasiado estreitos no telemóvel. */
  .jem-four-grid{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  .jem-four-card img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:4/3!important;object-fit:cover!important;object-position:center!important}
  .jem-four-card .jem-four-content{padding:19px 22px 24px!important;min-height:0!important}
  .jem-four-content h3{font-size:clamp(1.55rem,6vw,1.95rem)!important}
  .jem-four-content p{font-size:.88rem!important;line-height:1.65!important}
  .jem-four-content strong{font-size:.75rem!important;letter-spacing:.045em!important}
  .jem-price-section{min-width:0}
  .jem-price-section-head{align-items:stretch!important}
  .jem-price-book{width:100%;max-width:none;min-height:46px;padding:13px 18px;font-size:.8rem}
  .jem-price-table th{overflow-wrap:anywhere}
  .jem-price-table td{white-space:normal;min-width:90px}
  .jem-r06-social-links a{min-height:48px}
}
@media(max-width:360px){
  .jem-r06-mobile-cta{column-gap:4px!important;padding-inline:6px!important}
  .jem-r06-mobile-cta a{font-size:.66rem!important;padding-inline:2px!important}
}
@media(prefers-reduced-motion:reduce){
 .media-image img,.gallery-image img{transition:none!important}
}