/* Contact page — values read from Figma frame "14" (145:212954), 1200px container. */

/* Vertical rhythm: 60px between blocks (sections 30px; first/last get full 60). */
.page--contact .section { padding-block: 30px; }
.page--contact .section:first-of-type { padding-top: 60px; }
.page--contact .join-community { padding-bottom: 60px; }

/* Two columns: contact info | map. Figma: ~590 / 600, 30px gap, 343px tall. */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

/* "Get in Touch" — Figma: title 24/33 w400, desc + items 18/25, #333. */
.contact-block__title {
  font-size: var(--font-size-2xl);
  line-height: 33px;
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);
  margin-bottom: 20px;
}
.contact-block__desc {
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);
  line-height: 25px;
  margin-bottom: 20px;
  max-width: none;
}
.contact-list { display: grid; gap: 20px; margin: 0; }
.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);
  line-height: 25px;
}
.contact-list__item p { margin: 0; }
.contact-list__icon { color: var(--color-orange); margin-top: 4px; }
.contact-list__address { font-style: normal; line-height: 25px; }
/* Contact links keep their colour on hover — the underline is the affordance. */

/* Map — Figma: 343px tall, radius 10, flat (no shadow). */
.contact-map {
  border-radius: 10px;
  overflow: hidden;
  height: 343px;
  background: var(--color-bg-shaded);
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Section headings — Figma: 24/33 w400; intro 18/25; #333. */
.contact-section__title {
  font-size: var(--font-size-2xl);
  line-height: 33px;
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);
  margin-bottom: 20px;
}
.contact-section__intro {
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);
  line-height: 25px;
  margin-bottom: 20px;
  max-width: none;
}

/* UK / Egypt hubs — Figma: two columns ~100px apart, bold label + value, 18/25. */
.hubs-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 100px;
  row-gap: 0;
  margin: 0;
}
.hub__label {
  font-size: var(--font-size-lg);
  line-height: 25px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
}
.hub__value {
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
  margin: 0;
}

/* Social — Figma: 34px circles, 15px gap, 20px below the intro. */
.contact-social {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-map { height: 300px; }
}