/*
  Contact page (contact.html) — right-of-center text block, bottom-
  anchored. Page-specific rules only; shared nav/reset live in
  base.css. No footer on this page (Input/Contact.png shows none).

  Measured from Input/Contact.png (1920x1080, script-assisted line-band
  scan, not eyeballed):
    - Block left ink edge ~974-978px, matching the same right-column
      left boundary measured on the photo detail page's photo (975px)
      — both derive from the same 2-column grid: margin(24) + colWidth
      + gutter(24) = 24 + 924 + 24 = 972. Implemented with the same
      grid-template-columns: 1fr 1fr / column-gap: grid-gutter pattern
      as photo.css, content placed in column 2.
    - 4 line-bands: "Nicholas Erreweyaert" (top 739) / "Info@..." (842)
      / "+32 4 91 06 62 91" (895) / "All rights reserved, 2026" (999).
      Name->email gap = 103px, email->phone = 53px, phone->rights =
      104px. The 53px gap matches font-size-display(40)*line-height-
      display(1.3)=52px exactly (normal line spacing, via a <br>
      between email/phone). The ~104px gaps are exactly double that —
      one full extra line-height added before each of those lines.
    - Last line ink bottom 1041, 39px short of the 1080 viewport
      bottom. Implemented as bottom: var(--grid-margin) (24px) for
      consistency with every other bottom-anchored element on this
      project (photo.css back-link/title/next); the extra measured
      slack is consistent with "All rights reserved, 2026" having
      descenders (g) that extend ink below the line box.
*/

.contact-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gutter);
  padding: 0 var(--grid-margin);
  min-height: 100vh;
  box-sizing: border-box;
}

.contact-block-col {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  padding-bottom: var(--grid-margin);
  box-sizing: border-box;
}

.contact-block {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  font-weight: 400;
}

.contact-block p {
  margin: 0;
}

.contact-block a {
  text-decoration: none;
}

/* The two "blank line" groups (email+phone, and the rights line) get
   one full extra line-height above them — see the measurement note. */
.contact-block__group {
  margin-top: calc(var(--font-size-display) * var(--line-height-display)); /* 52px */
}

/* ---------------------------------------------------------------------
   Responsive (2026-07-22). Type size locked at 40px at every
   breakpoint — the block goes full-width minus margins instead of
   shrinking. Still bottom-anchored; "stacks naturally" since it's
   already the only content in a single column at these widths.
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .contact-main {
    grid-template-columns: 1fr;
  }

  .contact-block-col {
    grid-column: 1;
  }
}