/* contato.css — página Contato, Figma 4070:767. Carrega em is_page('contato'). */

/* Seção 1 · Hero — Figma 4070:1849 */

.contato-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 50.833vw, 976px);
  padding-top: calc(var(--dm-header-height) + var(--dm-space-96));
  padding-bottom: var(--dm-space-72);
  background-color: var(--dm-grey-10);
  color: var(--dm-white);
}

.contato-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, var(--dm-grey-10) 89%);
  z-index: 0;
}

.contato-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dm-space-64);
  width: 100%;
}

.contato-hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-64);
  max-width: calc(var(--dm-display-5) * 9.306);
}

.contato-hero__headline,
.contato-hero__identity {
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-8);
}

.contato-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--dm-space-12);
  color: var(--dm-primary);
  text-transform: uppercase;
}

.contato-hero__eyebrow svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.contato-hero__title {
  color: var(--dm-white);
  text-wrap: balance;
}

.contato-hero__role {
  color: var(--dm-primary);
  text-transform: uppercase;
}

.contato-hero__name {
  color: var(--dm-white);
}

/* Cartão de contato — Figma 4070:1906 */

/* ⚠ blur(14px), não os 20 do Figma — medido; o backdrop aqui é a cortina (não liso), 20 borra 40% a mais. */
.contato-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-48);
  width: clamp(360px, 27.917vw, 536px);
  padding: var(--dm-space-24);
  border-radius: var(--dm-radius-md);
  background-color: rgb(255 255 255 / 4%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ⚠ 164px sincronizado com o sizes do srcset no PHP. */
.contato-card__avatar-img {
  display: block;
  width: 164px;
  height: 164px;
  border-radius: 50%;
  object-fit: cover;
}

.contato-card__lead,
.contato-card__label {
  color: var(--dm-white);
}

.contato-card__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--dm-space-56);
}

.contato-card__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dm-space-16);
}

.contato-card__value {
  color: var(--dm-primary);
  text-transform: uppercase;
}

/* ⚠ --dm-radius-full, não os 64px do Figma — numa caixa de 71px de altura já é pílula; radius fixo dependeria da altura. */
.contato-card__cta {
  --btn-pad-y: var(--dm-space-24);
  --btn-pad-x: var(--dm-space-80);
  --btn-radius: var(--dm-radius-full);

  width: 100%;
  font-size: var(--dm-text-xl);
  line-height: 1.15;
}

/* Empilhado */

@media (max-width: 1024px) {

  .contato-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--dm-space-48);
  }

  .contato-hero__intro {
    max-width: none;
  }

  .contato-card {
    width: 100%;
    max-width: 536px;
  }

  .contato-card__avatar-img {
    width: 96px;
    height: 96px;
  }
}

/* Seção 2 · Faixa de mapa — Figma 4070:1263 */

.contato-map {
  position: relative;
  height: 374px;
  background-color: var(--dm-grey-20);
}

.contato-map__link {
  display: block;
  width: 100%;
  height: 100%;
}

/* ⚠ <picture> precisa de display:block — é inline por padrão e o height:100% da imagem resolve contra ele, não contra a faixa. */
.contato-map picture {
  display: block;
  width: 100%;
  height: 100%;
}

.contato-map__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contato-map__badge {
  --btn-bg: rgb(0 0 0 / 55%);

  position: absolute;
  top: var(--dm-space-24);
  left: var(--dm-container-padding);
  pointer-events: none;
  /* quem recebe o clique é a faixa inteira */
}

.contato-map__link:hover .contato-map__badge,
.contato-map__link:focus-visible .contato-map__badge {
  --btn-bg: var(--dm-primary);
  --btn-border: var(--dm-primary);
}

.contato-map__link:focus-visible {
  outline: 2px solid var(--dm-white);
  outline-offset: -6px;
}

@media (max-width: 768px) {
  .contato-map {
    height: 280px;
  }
}