/* Contact: written by tools/build-pages.py (contact_page). Reads every value from tokens.css;
   the head (.page-head: the eyebrow, then the statement) comes from components.css, the
   closing under it from cta.css.

   Luke 10/12: a very short page. The head is the portfolio's; under it a row of ruled cells,
   the footer's: book a consultation, the email, the phone (Luke: the consultation first, as
   underlined text like the others, not a button; the studio's city dropped). Each a rule, its
   label, its value, measured to capitals and baselines. On desktop the row is on the footer's
   columns (tokens.css --footer-cols) with its uprights, and the closing's cells follow
   straight under it, so the details, the closing and the footer read as one title block down
   the page. Below 1260 (the middle column is too narrow for the email address there) the
   cells stack, one ruled line each, and the closing's rule follows the last one. */

.contact {
  padding: calc(var(--header-height, 88px) + var(--space-page-top)) var(--gutter) 0;
  background: var(--paper);
  color: var(--ink);
}
.contact + .cta.cta--page { padding-top: 0; } /* its first rule closes the last cell (cta.css loads after this) */

/* ---------- Details: a ruled cell each ---------- */

/* Each a .cell (components.css), drawn as one only on desktop; below it, a plain rule above */
.contact__details { --cell-rules: none; }
.contact__cell {
  padding: var(--space-cell-top) 0 var(--space-cell);
  border-top: var(--hairline-width) solid var(--hairline);
}
.contact__cell dt { margin-bottom: var(--space-cell-label); text-box: trim-both cap alphabetic; }
.contact__cell dd {
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-text);
  overflow-wrap: break-word; /* a safety net: the address fits its cell at every width (the row stacks under 1260) */
  text-box: trim-both cap alphabetic;
}
/* The links are .text-link (components.css), underlined as the closing's email is: the one
   thing to click in the cell */

/* ---------- Desktop: the footer's columns, uprights and all ---------- */
/* As the closing's sheet and the footer draw them: each cell its rule along the top, half the
   gap past it where it meets a neighbor (--rule-l / --rule-r: 0 at the page's edges), and the
   upright on its left in the gap (--vr). Borders, so every line is the same width. */
@media (min-width: 1260px) { /* under 1245 the middle column is narrower than the email address */
  .contact__details {
    --half: calc(var(--footer-gap) / -2);
    --cell-rules: block;
    display: grid; grid-template-columns: var(--footer-cols); column-gap: var(--footer-gap);
  }
  .contact__cell {
    padding-top: calc(var(--space-cell-top) + var(--hairline-width));
    border-top: 0;
  }
  .contact__cell:first-child { --rule-l: 0; }
  .contact__cell:not(:first-child) { --vr: block; }
  .contact__cell:last-child { --rule-r: 0; }
}

/* ---------- Phone: no client review (Luke 10/12) ---------- */
/* The page goes straight from the details to "Start a project": the closing's quote and his
   name are left out, and the desk's rule closes the last cell, as the quote's rule did, with
   the section head's space to the eyebrow (cta.css). Tablet and desktop keep the quote. */
@media (max-width: 600px) {
  .contact + .cta--page .cta__testimonial { display: none; }
  .contact + .cta--page .cta__desk { margin-top: 0; }
}