/*
 * BARBEARIA GUARARAPES - V40
 * Capa inicial compacta no celular, sem faixa preta entre foto e chamada.
 */

@media (max-width: 680px) and (orientation: portrait) {
  .public-booking-hero {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: calc(100% - 16px) !important;
    min-height: 410px !important;
    height: auto !important;
    padding: 168px 18px 22px !important;
    overflow: hidden !important;
    background-color: #02060b !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 6, 11, 0.03) 0%,
        rgba(2, 6, 11, 0.08) 35%,
        rgba(2, 6, 11, 0.58) 61%,
        rgba(2, 6, 11, 0.94) 84%,
        #02060b 100%
      ),
      url('/assets/barbearia-guararapes-capa-home-v17.webp') !important;
    background-repeat: no-repeat !important;
    background-size: cover, cover !important;
    background-position: center, 64% center !important;
  }

  .public-booking-hero > span,
  .public-booking-hero h1,
  .public-booking-hero p {
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
  }

  .public-booking-hero > span {
    align-self: flex-start !important;
  }

  .public-booking-hero h1 {
    margin: 10px 0 0 !important;
    font-size: clamp(29px, 8.4vw, 36px) !important;
    line-height: 1.02 !important;
  }

  .public-booking-hero p {
    margin: 12px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.52 !important;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .public-booking-hero {
    min-height: 390px !important;
    padding: 148px 16px 20px !important;
    background-size: cover, cover !important;
    background-position: center, 64% center !important;
  }

  .public-booking-hero h1 {
    font-size: clamp(27px, 8.2vw, 33px) !important;
  }
}