/* Text column beside an image that bleeds to the edge. The layout gives #content no
   measure, which is what lets this section reach both sides of the window. */
[qcms-mod="cont.luca.hero"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  background: color-mix(in srgb, var(--color-bg), white 50%);

  > .text {
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3.5rem);
    justify-self: end;
    max-width: 34rem;
  }

  > .media :is(img, cms-image2) {
    width: 100%;
    height: 100%;
    min-height: 24rem;
    object-fit: cover;
    display: block;
  }

  /* The oversized opening line. Which face it wears is the site's business. */
  .lead {
    font-size: clamp(4rem, 11vw, 8.5rem);
    line-height: .85;
    margin-bottom: .35em;
  }
  .lead small { font-size: .42em; vertical-align: .9em }

  .claim {
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    text-align: center;
    padding-bottom: .5em;
    border-bottom: 2px solid var(--color);
    margin-bottom: .5em;
  }

  .sub {
    text-align: center;
    margin-bottom: 2rem;
  }

  .note {
    font-family: var(--font-hand, cursive);
    font-size: 1.3rem;
    line-height: 1.35;
    margin-top: 1.8rem;
  }

  /* An editor cannot put classes in text — the sanitizer drops them — so the buttons
     are made here: in a hero the first action is the emphatic one. */
  [qcms-name=actions] {
    p { margin: 0; display: flex; flex-wrap: wrap; gap: .9rem }

    a {
      display: inline-block;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .13em;
      text-decoration: none;
      padding: .95em 1.8em;
      border: 1px solid var(--color);
      border-radius: var(--radius, 0);
      transition: background .2s, color .2s;
    }
    a:hover { background: var(--color); color: var(--color-bg) }
    a:first-of-type { background: var(--color); color: var(--color-bg) }
    a:first-of-type:hover { background: none; color: var(--color) }
  }

  @media (width < 48rem) {
    grid-template-columns: minmax(0, 1fr);
    > .text { justify-self: stretch; max-width: none }
    > .media :is(img, cms-image2) { min-height: 16rem }
  }
}

/* An optional mark under the text — a signature, a seal, an award.
   Scoped to .text so the section's own picture is not caught by it. */
[qcms-mod="cont.luca.hero"] > .text :is(img, cms-image2) {
  display: block;
  margin-block: 1.2rem .4rem;
}