/*
 * subscribe-hero.css — Toro Legal Marketing
 * Figma node: 921:8581 (Subscribe / Hero)
 *
 * Cream hero band. H1 "Worth your inbox" + lead, left-aligned. The
 * right half carries the brand gradient wash (same hero-gradient asset
 * as the service + insights heroes), anchored to the right edge. Sits
 * flush under the transparent --on-light navbar.
 *
 * Mobile: single column, gradient knocked back behind the text. Desktop:
 * text sits in the left half, gradient occupies the right.
 */

.tlm-subscribe-hero {
  position: relative;
  background: var(--color-cream);
  overflow: hidden;
  padding-top: 100px;             /* clears the transparent navbar */
  padding-bottom: var(--space-4xl);
}

/* Brand gradient backdrop, anchored top-right (shared asset). Mobile
   tints it back; desktop shows it full strength (set in the 1024 block). */
.tlm-subscribe-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../../images/service/hero-gradient-bg.webp') no-repeat right center / auto 120%;
  opacity: 0.5;
}

.tlm-subscribe-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.tlm-subscribe-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 100%;
}

.tlm-subscribe-hero__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h1-mobile);     /* 44 mobile */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  margin: 0;
}

.tlm-subscribe-hero__lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  margin: 0;
  max-width: 52ch;
}

/* ============================================
 * Desktop (≥1024px)
 * ============================================ */

@media (min-width: 1024px) {
  .tlm-subscribe-hero::before {
    opacity: 1;
    /* Gradient confined to the right half so it doesn't wash the text. */
    background-position: right center;
    background-size: 56% 130%;
  }

  .tlm-subscribe-hero__content {
    max-width: 50%;
  }

  .tlm-subscribe-hero__title {
    font-size: var(--text-display);       /* 72 */
  }
}