/* styles/sections/problem-quote.css
 * The CTO quote on grained fern (frames: Problem). The quote is display-sm on 390 and
 * display-xl from 900px, with the open mark hung in the gutter. The orange underline is the
 * essay's scribble (see the scribble rules below): it sits behind the words, and its first
 * stretch is repeated in front, so the stroke crosses the g of "goddamn" in front and runs
 * behind the g of "meetings". On 390 the two words break onto two lines and each takes its own
 * scribble. Below the quote, the dateline
 * (the figcaption) and the deck share a row from 900px. */
@layer sections {
  .problem-quote {
    padding-block: var(--section-xl);
  }

  .problem-quote .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-40);
  }

  /* The figure spans both rows, so the dateline and the foot can share the second one */
  .problem-quote__figure {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-row: 1 / 3;
    grid-column: 1 / -1;
    margin: 0;
  }

  /* --scribble-*: the essay's scribble image and geometry (rules below) */
  .problem-quote__quote {
    --scribble: url("/assets/figures/modern-pdlc/scribble-underline-m.png");
    --scribble-lead: 0.125em;
    --scribble-h: 0.32em;
    --scribble-top: 0.835em;

    grid-row: 1;
    grid-column: 1 / -1;
    margin: 0;
    isolation: isolate;
  }

  .problem-quote__quote p {
    --mark-gap: 2px;
    position: relative;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-display-sm-size);
    font-weight: 600;
    line-height: var(--t-display-sm-lh);
    letter-spacing: var(--t-display-sm-ls);
    color: var(--white);
  }

  .problem-quote__mark {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: var(--mark-gap);
    letter-spacing: inherit;
    color: var(--white);
  }

  .problem-quote__scribble,
  .problem-quote__word {
    position: relative;
  }

  .problem-quote__word {
    display: inline-block;
  }

  /* The scribble is the essay's (assets/figures/modern-pdlc/scribble-underline-*.png, the same
     Pencil underline the essay's pull quote draws) with the essay's geometry, so the two quotes
     match at every width (BRI-7805 J13): it starts --scribble-lead before the word and runs the
     word's width, --scribble-h tall; the front copy covers its first 0.62em plus the lead.
     390: one scribble per word (the words break onto two lines), as the essay clones its
     scribble onto each line. */
  .problem-quote__word::before,
  .problem-quote__word::after {
    content: "";
    position: absolute;
    top: var(--scribble-top);
    left: calc(-1 * var(--scribble-lead));
    width: 100%;
    height: var(--scribble-h);
    background: var(--scribble) 0 0 / 100% 100% no-repeat;
    pointer-events: none;
  }

  .problem-quote__word::after {
    z-index: -1;
  }

  .problem-quote__word--1::before {
    z-index: 1;
    clip-path: inset(0 calc(100% - 0.62em - var(--scribble-lead)) 0 0);
  }

  .problem-quote__word--2::before {
    content: none;
  }

  .problem-quote__dateline {
    grid-row: 2;
    padding-top: var(--space-12);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--white-80);
  }

  .problem-quote__foot {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
  }

  .problem-quote__deck {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--white-90);
  }

  @media (width >= 900px) {
    /* Dateline in the first column, the deck in a 560 column at the end edge */
    .problem-quote .container {
      grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
      column-gap: var(--space-32);
      row-gap: var(--space-48);
    }

    /* 120px at 1280 of content (the 1440 frame); narrower content scales it down so
       "goddamn meetings" stays on one line */
    .problem-quote__quote p {
      --mark-gap: 7px;
      font-size: min(var(--t-display-xl-size), (100vw - 2 * var(--page-gutter)) * 0.09375);
      line-height: var(--t-display-xl-lh);
      letter-spacing: var(--t-display-xl-ls);
    }

    /* One scribble under both words */
    .problem-quote__quote {
      --scribble: url("/assets/figures/modern-pdlc/scribble-underline-d.png");
      --scribble-h: 0.28em;
      --scribble-top: 0.88em;
    }

    .problem-quote__scribble {
      display: inline-block;
    }

    .problem-quote__word::before,
    .problem-quote__word::after {
      content: none;
    }

    .problem-quote__scribble::before,
    .problem-quote__scribble::after {
      content: "";
      position: absolute;
      top: var(--scribble-top);
      left: calc(-1 * var(--scribble-lead));
      width: 100%;
      height: var(--scribble-h);
      background: var(--scribble) 0 0 / 100% 100% no-repeat;
      pointer-events: none;
    }

    .problem-quote__scribble::after {
      z-index: -1;
    }

    /* The front copy paints over the word spans (positioned, later in tree order), as the
       essay's shared .scribble-underline::before does */
    .problem-quote__scribble::before {
      z-index: 1;
      clip-path: inset(0 calc(100% - 0.62em - var(--scribble-lead)) 0 0);
    }

    .problem-quote__dateline {
      grid-column: 1;
      padding-top: 0;
      color: var(--white-85);
    }

    .problem-quote__foot {
      grid-row: 2;
      grid-column: 2;
      gap: 28px;
    }

    .problem-quote__deck {
      font-size: 20px;
      line-height: 1.5;
    }
  }

  @media (width >= 1680px) {
    .problem-quote {
      --container-max: 1600px;
    }

    .problem-quote .container {
      row-gap: var(--space-64);
    }

    /* 168px at 1600 of content (the 1920 frame); 1680 to 1839 scale it down to keep three lines */
    .problem-quote__quote p {
      --mark-gap: 5px;
      font-size: min(var(--t-display-xl-size), (100vw - 2 * var(--page-gutter)) * 0.105);
    }

    .problem-quote__quote {
      --scribble: url("/assets/figures/modern-pdlc/scribble-underline-w.png");
      --scribble-h: 0.217em;
      --scribble-top: 0.907em;
    }
  }
}

/* Pencil sets every line on a whole pixel (88 x 0.95 = 84, 18 x 1.6 = 29, 17 x 1.6 = 27);
   these rounded line heights keep the page's text boxes the frames' size. */
@layer sections {
  .problem-quote__quote p {
    line-height: round(nearest, 0.95em, 1px);
  }

  .problem-quote__deck {
    line-height: round(nearest, 1.6em, 1px);
  }

  @media (width >= 900px) {
    .problem-quote__deck {
      line-height: round(nearest, 1.5em, 1px);
    }
  }
}