/* Contact (Figma 255:3243 / 257:562 / 257:777). */

.contact-muted {
  color: var(--text-secondary);
}

/* ---------- 01 Hello ---------- */

.contact-hello.panel--first {
  padding-top: calc(var(--header-h) + var(--space-64));
}

.contact-hello__content {
  grid-column: 3 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.contact-hello__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gutter);
  align-items: start;
}

.contact-book {
  display: grid;
  justify-items: start;
  gap: var(--space-24);
}

/* Desktop: the button's bottom edge is level with the bottom of the word
   "Follow" (centred on the 48 icon row, so (48 − its line) / 2 above the
   row's bottom) (review; DESIGN-NOTES 60). */
@media (min-width: 1200px) {
  .contact-book {
    align-self: end;
    margin-bottom: calc((var(--space-48) - var(--font-size-button) * 1.4) / 2);
  }
}

.reach {
  margin: 0;
}

.reach__row {
  display: grid;
  grid-template-columns: calc(var(--space-64) + var(--space-16)) 1fr;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-16) 0;
  border-top: var(--stroke-hairline) solid var(--border-default);
}

.reach__row:first-child {
  padding-top: 0;
  border-top: 0;
}

.reach__row--follow {
  padding: var(--space-8) 0 0;
}

.reach dd {
  margin: 0;
}

.reach dd > a {
  display: block;
}

.reach a:hover {
  color: var(--text-secondary);
}

/* Figma Follow row: 48 boxes 24 apart, each 32 icon centred on the word
   "Follow" and set on the left of its box, in line with the values above. */
.reach .socials {
  gap: var(--space-24);
}

.reach .social-link {
  place-items: center start;
}

/* ---------- 02 Write: red chapter with the form ---------- */

.contact-write {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  /* It holds at the top: the form starts at least 64 under the header, and
     keeps 64 at the bottom (DESIGN-NOTES 58, 75). */
  padding-top: var(--below-header);
  padding-bottom: var(--space-64);
  padding-inline: var(--page-inset);
}

/* ---------- 03 Visit ---------- */

.contact-visit__address {
  grid-column: 3 / span 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
}

.contact-visit__group {
  display: grid;
  gap: var(--space-24);
}

.contact-visit__group address {
  font-style: normal;
}

.contact-visit__time {
  display: grid;
  gap: var(--space-8);
}

.map {
  grid-column: 8 / span 5;
  aspect-ratio: 1;
  padding: var(--space-16);
  background: var(--color-red-500);
}

.map__frame {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--color-neutral-950);
}

/* Google Maps, greyed into the ink palette */
.map__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.9);
}

.map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  transform: translate(calc(var(--space-12) * -1), -50%);
  pointer-events: none;
}

.map__pin i {
  width: var(--space-24);
  height: var(--space-24);
  background: var(--color-red-500);
  border: 3px solid var(--color-base-white); /* Figma pin stroke */
}

.map__pin span {
  padding: var(--space-8) var(--space-12);
  background: var(--color-base-white);
  color: var(--color-base-black);
}

/* ---------- Tablet ---------- */

@media (max-width: 1199px) {
  .contact-hello.panel--first {
    padding-top: calc(var(--header-h) + var(--space-48));
  }

  .contact .grid {
    row-gap: var(--space-48);
  }

  .contact-hello__content {
    grid-column: 1 / -1;
    gap: var(--space-48);
  }

  .contact-hello__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }

  .contact-write {
    padding-top: calc(var(--header-h) + var(--layout-frame) + var(--space-48));
  }

  .contact-visit__address,
  .map {
    grid-column: 1 / -1;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .contact-hello.panel--first {
    padding-top: calc(var(--header-h) + var(--space-32));
  }

  .contact .grid {
    row-gap: var(--space-32);
  }

  .contact-hello__content,
  .contact-hello__row {
    gap: var(--space-32);
  }

  .contact-write {
    min-height: 0;
    padding: var(--layout-section-y) var(--page-inset);
  }

  .contact-visit__address {
    gap: var(--space-32);
  }
}