/* Closing: the last section before the footer (Luke 9/30). One client's words, then the way
   to start: a last piece of credibility, then the inquiry. Paper, after the services band's ink.
   Reads every value from tokens.css; the eyebrow, the note and the fields come from
   components.css, the button from site.css.

   The pieces: the "Client review" eyebrow (Luke 10/1), the quote in the statement style
   (two-tone, its lead read through like the other statements), his name and title, the
   "Start a project" eyebrow and lede, the form. (Luke 10/12: Alex's longer story about the
   shop, which ran under the quote below desktop, is gone: the quote and his name only.)

   Desktop is the sheet (Luke picked it from four layouts 10/1, locked 10/9): a title block on
   the footer's own columns, ruled cells meeting in the gaps, uprights between them. The quote
   and his name in the first column; the lede and the fields across the other two. Below 1040,
   where the footer drops to two columns (so the uprights would no longer meet), it runs down
   the page: the quote and his name, then under a rule the lede and the form. No rule closes
   the section: the footer's ink band opens after its own space. */

.cta {
  --read-pace: var(--read-pace-closing); /* the quote's read-through finishes sooner (js/read.js) */
  --cell-rules: none; /* its pieces are cells (components.css) only on desktop, where it's a title block */
  --cta-gap: clamp(48px, 5.5vw, 88px); /* the quote to the ruled row under it */
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding: var(--space-band) var(--gutter) 0; /* the band's bottom edge to the first line, as at its top */
  background: var(--paper);
  color: var(--ink);
}

/* ---------- The pieces ---------- */

.cta__eyebrow { margin-bottom: var(--space-eyebrow); }

.cta__quote { margin: 0; }
/* The quote is a .statement (components.css). Its opening mark sits inside, at the cell's edge,
   the words after it (Luke 10/1: it hung out past the edge). */

/* Who said it is a .credit (components.css): his name, then his title in stone, the near gap
   under the quote (they belong together) */
.cta__cite { margin-top: var(--space-near); text-box: trim-end cap alphabetic; } /* ends on its last baseline */

.cta__lede {
  max-width: calc(30 * var(--text-body));
  font-size: var(--text-body);
  font-weight: var(--weight-demi); /* Luke 10/1: bolder than the body (it was 520 on the dials; the demi, brand pass 10/12) */
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-text);
  text-wrap: pretty;
  text-box: trim-both cap alphabetic;
}
.cta__lede strong { font-weight: var(--weight-demi); }

/* The send line: the button, and the email for anyone who'd rather write it themselves (Luke
   10/1: was the phone number). A rule over it like every field's, which also closes the
   message box above it. */
.inquiry__send {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-cell-label) var(--space-inline);
  padding-top: var(--space-cell-top);
  border-top: var(--hairline-width) solid var(--hairline);
}
.inquiry__or {
  font-size: var(--text-body); font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body); line-height: var(--leading-text);
  color: var(--stone);
}
/* The address is a .text-link (components.css): underlined, always (Luke 10/1) */


/* Sent: the thank-you takes the form's place, under an ink rule */
.inquiry__done { outline: none; }
.inquiry__done:not([hidden]) { padding-top: var(--space-cell-top); border-top: var(--hairline-width) solid var(--ink); }

/* ---------- Every width up to desktop: down the page ---------- */
/* The quote across the page and his name under it; then a rule (Luke 10/12), and under it the
   "Start a project" eyebrow, the lede, and the form with its fields in two columns. The rule to
   the eyebrow's capitals is a section head's, as "Selected works" (Luke 10/12: it had a field
   label's, much tighter). */

.cta__testimonial, .cta__desk { grid-column: 1 / -1; }
.cta__desk {
  display: grid; grid-template-columns: subgrid; align-items: start;
  margin-top: var(--cta-gap);
  padding-top: var(--space-rule-eyebrow); border-top: var(--hairline-width) solid var(--hairline);
}
.cta__head .cta__eyebrow { text-box: trim-start cap alphabetic; }
.cta__head { grid-column: 1 / span 8; margin-bottom: var(--space-near); }
.inquiry {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
}
.inquiry > * { grid-column: span 6; }
.inquiry > :is(.inquiry__message, .inquiry__reach, .inquiry__send) { grid-column: 1 / -1; }
.inquiry__done { grid-column: 1 / -1; }

/* Tablet: the halves are the footer's (its two columns and the gap between them, the space
   either side of its upright), so the form's right-hand fields start exactly where the
   footer's right-hand column does, straight under them */
@media (min-width: 601px) and (max-width: 1039px) {
  .cta { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--footer-gap); }
  .cta__head { grid-column: 1 / -1; }
  .inquiry > * { grid-column: span 1; }
}

/* Phone: one column */
@media (max-width: 600px) {
  .cta { --cta-gap: var(--space-tiles); }
  .cta__eyebrow { margin-bottom: var(--space-eyebrow-phone); }
  .cta__head { grid-column: 1 / -1; }
  .inquiry > * { grid-column: 1 / -1; }
  .inquiry__or .text-link { white-space: nowrap; } /* the whole address drops to its own line, rather than "inquiry@" left on the first */
}
/* Under 360 even its own line is a few px short, so it breaks after the @ */
.inquiry__break { display: none; }
@media (max-width: 359px) {
  .inquiry__break { display: inline; }
}

/* ---------- Desktop: the sheet ---------- */
@media (min-width: 1040px) {

  /* The footer's three columns, gaps and uprights exactly (tokens.css --footer-cols, Luke
     10/1), so the closing's lines run on down into the footer's: the quote in the first
     column and the form across the other two, its fields split on the second upright.
     Each cell draws the rule along its 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
     where it has a neighbor there (--vr), as the footer's cells do. Text is measured to its
     capitals at the top and its baseline at the bottom, from the rules' inner edges, so every
     cell has the footer's space above and below. */

  .cta {
    grid-template-columns: var(--footer-cols); column-gap: var(--footer-gap);
    --half: calc(var(--footer-gap) / -2);
    --cell-rules: block;
    /* Centered in its height (Luke 10/1: more room above than below, same height). Under the
       last line: the cells' own space, then the paper above the footer's band. The two spaces,
       the band's edge to the first rule and the last line to the footer, add up to what they
       were, shared out by --cta-top-share (.5, even). */
    --cta-under: calc(var(--space-cell) + var(--space-footer-top));
    --cta-both: calc(var(--space-band) + var(--cta-under));
    padding-top: calc(var(--cta-both) * var(--cta-top-share));
    padding-bottom: calc(var(--cta-both) * (1 - var(--cta-top-share)) - var(--cta-under));
  }

  /* Every piece is a .cell (components.css), with the cells' spacing (tokens.css) */
  .cta :is(.cta__testimonial, .cta__head, .inquiry__send, .inquiry__done) {
    padding-top: calc(var(--space-cell-top) + var(--hairline-width)); padding-bottom: var(--space-cell);
  }
  /* A field's rule is the cell's (drawn inside it, so its label sits the rule's width lower):
     a missing answer turns it ink (focus doesn't, Luke 10/1) */
  .cta .field { --field-rule: 0; --field-top: calc(var(--space-cell-top) + var(--hairline-width)); }
  .cta .field::before { transition: border-color var(--duration-quick) var(--ease-out); }
  .cta .field.is-invalid::before { border-color: var(--ink); }

  .cta .cta__testimonial {
    grid-row: 1; align-self: stretch;
    display: flex; flex-direction: column;
  }
  /* A cell's label: its baseline the label gap above what it labels (the lede); over the quote,
     the eyebrow gap every statement has under its eyebrow */
  .cta .cta__eyebrow { margin-bottom: var(--space-cell-label); text-box: trim-both cap alphabetic; }
  .cta .cta__quote { flex: 1; }
  .cta .cta__statement { margin-top: calc(var(--space-eyebrow) + var(--eyebrow-tail) - var(--space-cell-label)); }

  /* The form (or, once sent, the thank-you) takes whatever height the quote's cell leaves */
  .cta .cta__desk { grid-row: 1; grid-template-rows: auto 1fr; align-items: stretch; margin-top: 0; padding-top: 0; border-top: 0; }
  .cta .cta__head { grid-column: 1 / -1; margin-bottom: 0; }
  .cta .cta__lede { max-width: none; }
  .cta .inquiry { grid-column: 1 / -1; }
  .cta .inquiry > * { grid-column: span 1; }
  .cta .inquiry > :is(.inquiry__message, .inquiry__reach, .inquiry__send) { grid-column: 1 / -1; }
  .cta .inquiry__send { border-top: 0; }
  /* Sent: the thank-you is the next cell, its rule in ink */
  .cta .inquiry__done { grid-column: 1 / -1; }
  .cta .inquiry__done:not([hidden]) { border-top: 0; padding-top: calc(var(--space-cell-top) + var(--hairline-width)); }
  .cta .inquiry__done::before { border-color: var(--ink); }

  /* The quote at left, every form cell with an upright on its left */
  .cta .cta__testimonial { grid-column: 1; --rule-l: 0; }
  .cta .cta__desk { grid-column: 2 / -1; }
  .cta :is(.cta__head, .inquiry > *, .inquiry__done) { --vr: block; --rule-r: 0; }
  .cta .inquiry > :is(.inquiry__name, .inquiry__phone) { --rule-r: initial; }
}

/* Narrower desktop: the footer's middle column is too narrow for a field (an email
   wants room), so each field takes the form's full width, one under the next */
@media (min-width: 1040px) and (max-width: 1199px) {
  .cta .inquiry > * { grid-column: 1 / -1; }
  .cta .inquiry > :is(.inquiry__name, .inquiry__phone) { --rule-r: 0; }
}

/* ---------- At a page's foot (Luke 10/12): the portfolio, about and contact ----------
   The same section, copied from index.html by tools/build-pages.py (.cta--page). On home the
   services band's edge sets it apart; on these pages it follows paper, so the space above it
   is a page's last line to what comes after (--space-page-end), and below 1040 a rule opens
   it (on desktop its cells' own rules already run across the page). The page's wrapper above
   it keeps no bottom padding of its own. */
.cta.cta--page { padding-top: var(--space-page-end); }
/* and its last line is a page's last line: --space-page-end above the footer's band, as on every
   other page (its last cell's own space, then the footer's paper, make up the rest) */
@media (min-width: 1040px) {
  .cta.cta--page { padding-bottom: max(0px, calc(var(--space-page-end) - var(--space-cell) - var(--space-footer-top))); }
}
@media (max-width: 1039px) {
  .cta--page .cta__testimonial { padding-top: var(--space-rule-eyebrow); border-top: var(--hairline-width) solid var(--hairline); } /* a rule to the eyebrow's capitals, as a section head's */
  .cta--page .cta__testimonial > .cta__eyebrow { text-box: trim-start cap alphabetic; }
}