/* Page blocks Paul can add in the editor (Pages CMS). Ely owns this file.
   Each block option Paul picks becomes one of the classes below, so restyling a
   block here changes it on every project that uses it.
   Loads after site.css. Existing blocks (text, image, pair, gallery, video) reuse
   site.css classes; only the new ones are defined here. */

/* Text block, "Large" style: a lede-size statement instead of body copy. */
.project__body--lede p.lede { grid-column: 2 / span 9; max-width: 30ch; color: var(--c-phthalo); font-size: var(--s-lede); line-height: 1.17; }
.project__body--lede p + p { margin-top: 0.6em; }
.project__body p + p { margin-top: 1em; }
@media (max-width: 1100px) { .project__body--lede p.lede { grid-column: 1 / -1; font-size: var(--s-lede); } }

/* Three images in a row. */
.row--trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: start; }
.fig--third { width: 100%; }
@media (max-width: 809px) { .row--trio { grid-template-columns: 1fr; gap: var(--row-gap); } }

/* Quote block. "paper" sits on the page; "phthalo" is a dark band. */
.quote { margin-top: var(--row-gap); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.quote blockquote { grid-column: 3 / span 8; border-top: 1px solid var(--c-teal); padding-top: 28px; }
.quote .lede { max-width: 32ch; }
.quote figcaption { grid-column: 3 / span 8; margin-top: 0; }
.quote--phthalo { background: var(--c-phthalo); color: var(--c-paper); padding: clamp(48px, 7vw, 112px) 0; }
.quote--phthalo blockquote { border-top-color: var(--c-mint); }
.quote--phthalo figcaption { color: var(--c-mint); }
@media (max-width: 1100px) {
  .quote blockquote, .quote figcaption { grid-column: 2 / span 10; }
}
@media (max-width: 809px) {
  .quote blockquote, .quote figcaption { grid-column: 1 / -1; }
  .quote--phthalo { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* Grid block: equal cells; with seven pieces the rows go 2-3-2 (a honeycomb). */
.grid-block { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--grid-gap); }
.grid-block > .fig { grid-column: span 2; width: 100%; }
.grid-block--7 > .fig:nth-child(1) { grid-column: 2 / span 2; }
.grid-block--7 > .fig:nth-child(2) { grid-column: 4 / span 2; }
.grid-block--7 > .fig:nth-child(6) { grid-column: 2 / span 2; }
.grid-block--7 > .fig:nth-child(7) { grid-column: 4 / span 2; }
.grid-block--4 > .fig, .grid-block--2 > .fig { grid-column: span 3; }
@media (max-width: 809px) {
  .grid-block { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .grid-block > .fig, .grid-block--7 > .fig:nth-child(n) { grid-column: span 2; }
  .grid-block--7 > .fig:nth-child(7) { grid-column: 2 / span 2; }
}