/* ============================================
 * Approach — section module
 *
 * Dark "near-black" section with a heading, two intro
 * paragraphs, and a CTA. A soft pink-orange radial-
 * gradient blob bleeds off the section's top-right
 * corner.
 *
 * Mobile (default) and desktop share the same single-
 * column layout; desktop just scales the heading and
 * pushes the glow further off-canvas.
 *
 * Horizontal padding + max-width cap live in layout.css
 * via the `.tlm-section` and `.tlm-container` classes
 * on the HTML. Buttons live in buttons.css. This file
 * owns only approach-unique layout.
 *
 * RESOLVED 2026-05-19: section background swapped from
 * hardcoded #191315 to var(--color-bg-darker), promoted
 * to tokens after 3 modules adopted the same value
 * (approach + footer + mega menu).
 * ============================================ */

.tlm-approach {
  position: relative;
  padding-block: var(--space-section-y-mobile);
  background-color: var(--color-bg-darker);
  color: var(--color-text-on-dark);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ----- Decorative pink-glow blob, upper-right -----
 *
 * Implemented as a CSS radial-gradient rather than an
 * image asset. The Figma version is a blurred raster
 * blob; a CSS gradient is lighter (no asset to load)
 * and visually equivalent at the section's scale.
 * Uses the brand accent colours (--gradient-accent).
 * ----- */

/* Glow uses the pre-blurred raster from Figma (approach-glow.webp,
   1798×1340 with transparent surround). Sized to the source aspect
   ratio so the blob doesn't squash; positioned top-right and bleeds
   off the section edge. */
.tlm-approach__glow {
  position: absolute;
  top: -180px;
  right: -200px;
  width: 900px;
  aspect-ratio: 1798 / 1340;
  background-image: url('../../images/approach-glow.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

/* The inner container sits above the glow */
.tlm-approach__inner {
  position: relative;
  z-index: 1;
}

/* ----- Intro: heading + lead paragraphs + CTA ----- */

.tlm-approach__intro {
  display: flex;
  flex-direction: column;
  /* Standards-aligned heading→body→CTA rhythm (32px). Figma had
     64 here; standards lock at --space-lg for consistency across
     sections. */
  gap: var(--space-lg);
}

.tlm-approach__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-dark);
}

.tlm-approach__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 522px;
}

.tlm-approach__lead p {
  margin: 0;
  font-family: var(--font-sans);
  /* Mobile: 16/1.5 per mobile-standards. Tablet+ bumps to
     18/1.6 (matches hero / referral-journey pattern). */
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
}

/* Mobile: CTA is full-width per mobile-standards. Tablet+ reverts
   to natural width pinned left. */
.tlm-approach__cta {
  align-self: stretch;
  width: 100%;
}

/* ============================================
 * TABLET (≥768px)
 * ============================================ */

@media (min-width: 768px) {
  .tlm-approach__title {
    font-size: var(--text-h3);
  }

  .tlm-approach__lead p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }

  .tlm-approach__cta {
    align-self: flex-start;
    width: auto;
  }
}

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

@media (min-width: 1024px) {
  .tlm-approach {
    /* Symmetric body-section rhythm: 120/120 desktop. */
    padding-block: var(--space-5xl);
  }

  .tlm-approach__glow {
    top: -120px;
    right: 0;
    width: 1100px;
    /* aspect-ratio inherited from base rule */
  }

  .tlm-approach__title {
    font-size: var(--text-h2);
  }
}