/* styles/sections/quote-hero.css
 * A hero led by a customer's words at display size (Product Teams: Vs5ED, rVUt6, dE5oB): the
 * quote is the page's h1, a ruled attribution and lead beside the deck and actions, then the
 * figure under them. */
@layer sections {
  .quote-hero {
    padding-top: var(--section-xs);
  }

  .quote-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
  }

  .quote-hero__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  /* display-md on M, display-lg on D and W, at the frames' whole-pixel line pitch */
  .quote-hero__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-display-md-size);
    font-weight: 600;
    line-height: 42px;
    letter-spacing: var(--t-display-md-ls);
    color: var(--ink);
  }

  .quote-hero__under {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
  }

  .quote-hero__attribution {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-left: -1px;
    padding: var(--space-4) 0 0 var(--space-20);
    border-left: 2px solid var(--fern);
  }

  .quote-hero__who,
  .quote-hero__lead {
    margin: 0;
    font-size: 15px;
    line-height: round(nearest, 1.2em, 1px);
  }

  .quote-hero__who {
    font-weight: 600;
    color: var(--ink);
  }

  .quote-hero__lead {
    color: var(--ink-muted);
  }

  .quote-hero__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  .quote-hero__deck {
    margin: 0;
    font-size: 17px;
    line-height: 26px;
    color: var(--ink);
  }

  .quote-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
  }

  .quote-hero__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
  }

  @media (width >= 900px) {
    .quote-hero__inner {
      gap: var(--space-64);
    }

    .quote-hero__top {
      gap: var(--space-40);
    }

    .quote-hero__heading {
      max-width: 1120px;
      font-size: var(--t-display-lg-size);
      line-height: 84px;
      letter-spacing: var(--t-display-lg-ls);
    }

    .quote-hero__under {
      flex-direction: row;
      gap: var(--space-48);
    }

    /* 528 at 1440 and 1920; gives way with the content below 1440 */
    .quote-hero__attribution {
      flex: none;
      align-self: flex-start;
      width: min(528px, 41.25%);
    }

    .quote-hero__aside {
      flex: 1 1 0;
      min-width: 0;
    }

    .quote-hero__deck {
      font-size: 19px;
      line-height: 29px;
    }

    .quote-hero__actions {
      gap: var(--space-24);
    }
  }

  @media (width >= 1680px) {
    .quote-hero__heading {
      max-width: 1512px;
      line-height: 114px;
    }
  }
}