/* CONTACT */
.contact {
  background: var(--white);
  max-width: none;
}
/* Spacing below scales with viewport height via clamp(min, Nsvh, max)
   instead of jumping between fixed breakpoint values - a 620px-tall
   viewport and a 785px-tall one each get proportionate gaps instead of
   the same cramped (or the same oversized) spacing. Lower bound in each
   clamp is the "never smaller than this" floor from the min-height/
   min-font-size work above. */
.contact-map {
  margin-top: clamp(16px, 6svh, 48px);
  border-radius: 8px;
  overflow: hidden;
}
.contact-map img {
  width: 100%;
  height: clamp(200px, 26svh, 280px);
  object-fit: cover;
  display: block;
}
.contact-cards {
  margin-top: clamp(12px, 4svh, 28px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 3svh, 20px);
  align-items: stretch;
}
.contact-card {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5svh, 14px);
  background: var(--bg-light);
  border-radius: 20px;
  padding: clamp(12px, 2svh, 18px);
  height: 100%;
}
.contact-icon {
  width: clamp(32px, 4svh, 40px);
  height: clamp(32px, 4svh, 40px);
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icon img {
  width: clamp(15px, 2svh, 18px);
  height: clamp(15px, 2svh, 18px);
}
.contact-card p {
  /* --fs-small floors at 0.8rem at the 760px tier - see AGENTS.md CSS rules */
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
}
.contact-card a {
  color: var(--black);
}

@media (min-width: 1101px) {
  .contact-map img {
    height: clamp(280px, 48svh, 720px);
  }
  .contact-card {
    gap: 14px;
    padding: 18px;
    height: clamp(96px, 16svh, 200px);
  }
  .contact-icon {
    width: clamp(40px, 8svh, 80px);
    height: clamp(40px, 8svh, 80px);
    background: var(--border-gray);
  }
  .contact-icon img {
    width: clamp(18px, 3.2svh, 32px);
    height: clamp(18px, 3.2svh, 32px);
  }
}

@media (min-width: 880px) {
  .contact-cards {
    /* Flat at the base values right up to 880px, then eases up toward
       the wide-screen target (60px margin, 200px gap, 200px side
       padding) by ~2400px instead of jumping straight there. */
    margin-top: clamp(28px, 2.1vw + 9px, 60px);
    gap: clamp(20px, 11.84vw - 84px, 200px);
    padding-inline: clamp(0px, 13.16vw - 116px, 200px);
  }
}

@media (max-width: 760px) {
  .contact {
    padding-left: max(var(--section-pad-x), 28px);
    padding-right: max(var(--section-pad-x), 28px);
  }
  .contact-cards {
    grid-template-columns: 1fr;
  }
}