/* Full-bleed textured gradient board with a centered lockup and pill link.
   Last section on the home page, right before the shared footer. */

.final-cta {
  padding-block: var(--space-120);
  background-color: var(--dozen-blue);
  /* Gradient is the fallback layer, painted beneath the photographed
     texture; it shows through if the image fails to load. */
  background-image:
    url("../../img/final-cta-bg.jpg"),
    linear-gradient(to bottom left, var(--dozen-blue), var(--red-fade));
  background-image:
    image-set(
      url("../../img/final-cta-bg-m.avif") type("image/avif"),
      url("../../img/final-cta-bg-m.webp") type("image/webp"),
      url("../../img/final-cta-bg.jpg") type("image/jpeg")
    ),
    linear-gradient(to bottom left, var(--dozen-blue), var(--red-fade));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  text-align: center;
}

.final-cta__lockup {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.final-cta__heading {
  color: var(--off-white);
  font-size: 2.25rem;
  line-height: 1.2;
}

.final-cta__subline {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 1.5rem;
  line-height: 1.2;
  font-style: italic;
  color: var(--dozen-teal);
}

.final-cta__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The mobile boards render this pill at the full 322px column with the
     label on one line; the declared side padding can't fit that, so it
     narrows at mobile (matches the rendered reference). Desktop hugs. */
  width: 100%;
  padding: 19px var(--space-20);
  border-radius: 95px;
  background: var(--pure-white);
  background: linear-gradient(
    90deg,
    var(--pure-white) 0%,
    color-mix(in srgb, var(--off-white) 60%, transparent) 100%
  );
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.7px;
  color: var(--dozen-blue);
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.final-cta__pill:hover,
.final-cta__pill:focus-visible {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

@media (min-width: 1024px) {
  .final-cta__pill {
    width: auto;
    padding: 19px 38px;
  }

  .final-cta__inner {
    gap: 53px;
  }

  .final-cta__lockup {
    gap: 13px;
  }

  .final-cta__heading {
    color: var(--pure-white);
    font-size: var(--h2-size);
    line-height: var(--h2-leading);
  }

  .final-cta__subline {
    font-size: var(--h3-size);
    line-height: var(--h3-leading);
  }

  /* About's board runs a larger, tighter headline (64/64 vs Home's 48/57.6
     h2 token) — the section's 12px extra height at 1440 is fully accounted
     for by this delta, nothing else differs. */
  .final-cta--lg .final-cta__heading {
    font-size: 4rem;
    line-height: 1;
  }
}

/* Full-size art once the layout is desktop-wide; mobile ships 828w encodes. */
@media (min-width: 1024px) {
  .final-cta {
    background-image:
      image-set(
        url("../../img/final-cta-bg.avif") type("image/avif"),
        url("../../img/final-cta-bg.webp") type("image/webp"),
        url("../../img/final-cta-bg.jpg") type("image/jpeg")
      ),
      linear-gradient(to bottom left, var(--dozen-blue), var(--red-fade));
  }
}