/* Ajustes para o Safari no iPhone, incluindo barras dinâmicas e safe areas. */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

.page-shell {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

@media (max-width: 520px) {
  .page-shell {
    display: block;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0;
  }

  .card {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .hero {
    height: clamp(230px, 36vh, 310px);
    height: clamp(230px, 36svh, 310px);
  }

  .content {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  .contact-link {
    width: 100%;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    gap: 12px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .contact-link > span:nth-child(2) { min-width: 0; }
  .contact-link small { max-width: 100%; }
  address { line-height: 1.5; }
}

/* Mantém o cartão e os controles no mesmo eixo em qualquer largura. */
.page-shell {
  box-sizing: border-box;
  width: 100%;
  padding-right: clamp(0px, 4vw, 46px);
  padding-left: clamp(0px, 4vw, 46px);
}

.card,
.content,
.links,
.contact-link {
  box-sizing: border-box;
  min-width: 0;
}

.card,
.content { margin-right: auto; margin-left: auto; }
.links { width: 100%; }

.contact-link {
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  gap: 12px;
}

.contact-link > span:nth-child(2) { min-width: 0; }
.contact-link .arrow {
  display: grid;
  width: 24px;
  place-items: center;
  justify-self: center;
  line-height: 1;
  text-align: center;
}

@media (max-width: 520px) {
  .page-shell { padding-right: 0; padding-left: 0; }
  .card { width: 100%; }
  .content { width: 100%; }
}