/*
 * approach-page.css — Toro Legal Marketing
 *
 * /approach/ — "How we think about marketing for relationship-driven law
 * firms". Built from Figma 857:9301. Six sections + hero:
 *   .tlm-approach-hero      — 2-col copy + soft pink glow (CSS gradient)
 *   .tlm-approach-steps     — heading + intro, hosts the SHARED referral-flow
 *   .tlm-approach-jobs      — cream "two jobs" statement + 2-col + outro
 *   .tlm-approach-practice  — white tabbed "what that means in practice"
 *   .tlm-approach-work      — cream 2x2 "how we work" principles
 *   .tlm-approach-cta       — cream rounded CTA + book panel
 *
 * Mobile-first; desktop layout at >=1024px. Headings serif (Halant) per the
 * page-build serif rule; body sans. All colour/type/space on tokens.
 */

/* =====================================================================
 * Shared idioms within this page
 * ===================================================================== */

.tlm-approach-jobs__title,
.tlm-approach-jobs__item-title,
.tlm-approach-steps__title,
.tlm-approach-practice__title,
.tlm-approach-practice__point-title,
.tlm-approach-work__title,
.tlm-approach-work__item-title,
.tlm-approach-cta__title,
.tlm-approach-hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
}

/* Icon chip used by the jobs + work item lists (grey-100 circle). */
.tlm-approach-jobs__icon,
.tlm-approach-work__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: var(--color-grey-100, var(--color-navy-wash));
  color: var(--color-navy);
  flex-shrink: 0;
}

/* =====================================================================
 * 1. Hero
 * ===================================================================== */

.tlm-approach-hero {
  position: relative;
  background: var(--color-cream);
  overflow: hidden;
  /* 130 read as jammed under the navbar (the 3-line H1 starts high);
     match the shared service-page-hero mobile clearance (156). */
  padding-block: 156px var(--space-2xl);
}

/* Soft pink/peach glow on the right — the pre-blurred Figma raster
   (approach-glow.webp, 1798×1340 with transparent surround), the same
   asset the other section backgrounds use. Sized to source aspect so it
   doesn't squash; bleeds off the top-right edge. */
/* Matches the /about/ hero background exactly: the shared
   service/hero-gradient-bg.webp, anchored right-top, full section
   height, knocked back so the cream blends through (opacity lifts to
   1 at desktop). */
.tlm-approach-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../../images/service/hero-gradient-bg.webp') no-repeat right top / auto 100%;
  opacity: 0.65;
}

.tlm-approach-hero__inner {
  position: relative;
  z-index: 1;
}

.tlm-approach-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  max-width: 640px;
}

.tlm-approach-hero__title {
  font-size: var(--text-h1-mobile);
}

.tlm-approach-hero__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-approach-hero__lead-emphasis {
  margin: 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}

.tlm-approach-hero__lead p:not(.tlm-approach-hero__lead-emphasis) {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.56;
  color: var(--color-navy-muted);
}

@media (min-width: 1024px) {
  /* Literal top padding clears the absolute navbar (matches the service
     hero's 180px clearance) so the H1 sits well below the menu. */
  .tlm-approach-hero {
    padding-block: 180px var(--space-4xl);
    min-height: 700px;
  }
  /* Wider than the lead copy so "relationship-driven law firms" holds on
     one line at 56px; nowrap guards each <br>-defined line. */
  .tlm-approach-hero__copy {
    max-width: none;
  }
  .tlm-approach-hero__lead {
    max-width: 640px;
  }
  .tlm-approach-hero__title {
    font-size: var(--text-h2);
    white-space: nowrap;
  }
  .tlm-approach-hero__glow {
    opacity: 1;
  }
}

/* =====================================================================
 * 2. Three steps (heading + intro; the diagram is the shared module)
 * ===================================================================== */

.tlm-approach-steps {
  background: var(--color-white);
  padding-block: var(--space-section-y-mobile);
}

.tlm-approach-steps__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* On mobile the intro->carousel gap (60px) read larger than the carousel's
   own bottom spacing (~40px); tighten it so the section breathes evenly. */
@media (max-width: 1023px) {
  .tlm-approach-steps__inner {
    gap: 40px;
  }
}

/* The shared referral-flow panel carries its own margin-top (48px) for
   the homepage; inside the steps section the flex gap already spaces it,
   so drop that margin or the seam reads as a big empty band on mobile. */
.tlm-approach-steps__inner .tlm-referral-flow {
  margin-top: 0;
}

.tlm-approach-steps__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-approach-steps__title {
  font-size: var(--text-h2-mobile);
}

.tlm-approach-steps__title-accent {
  color: var(--color-pink-stop);
}

.tlm-approach-steps__body p {
  margin: 0 0 var(--space-md);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

.tlm-approach-steps__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .tlm-approach-steps {
    padding-block: var(--space-5xl);
  }
  .tlm-approach-steps__intro {
    display: grid;
    grid-template-columns: 686px 1fr;
    gap: var(--space-3xl);
    align-items: start;
  }
  .tlm-approach-steps__title {
    font-size: var(--text-h2);
  }
}

/* =====================================================================
 * 3. Two jobs
 * ===================================================================== */

.tlm-approach-jobs {
  background: var(--color-cream);
  padding-block: var(--space-section-y-mobile);
}

.tlm-approach-jobs__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.tlm-approach-jobs__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-approach-jobs__title {
  font-size: var(--text-h2-mobile);
  text-wrap: balance;
  margin-bottom: var(--space-sm);
}

.tlm-approach-jobs__intro p {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

.tlm-approach-jobs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.tlm-approach-jobs__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--color-navy-divider);
}

.tlm-approach-jobs__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-approach-jobs__item-title {
  font-size: var(--text-xl);
}

.tlm-approach-jobs__text p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
}

.tlm-approach-jobs__outro {
  margin: 0;
  max-width: 1043px;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
}

@media (min-width: 1024px) {
  .tlm-approach-jobs {
    padding-block: var(--space-5xl);
  }
  .tlm-approach-jobs__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4xl);
  }
}

/* =====================================================================
 * 4. What that means in practice (tabbed)
 * ===================================================================== */

.tlm-approach-practice {
  background: var(--color-white);
  padding-block: var(--space-section-y-mobile);
}

.tlm-approach-practice__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.tlm-approach-practice__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.tlm-approach-practice__title {
  font-size: var(--text-h2-mobile);
}

.tlm-approach-practice__subhead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

/* Pill tab toggle. */
.tlm-approach-practice__tabs {
  display: flex;
  gap: var(--space-sm);
  width: 100%;
  max-width: 732px;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-navy-divider);
  border-radius: var(--radius-pill);
}

.tlm-approach-practice__tab {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-sans);
  /* Keep each label on ONE line so the active cream pill reads as a
     clean full-width pill, not a cramped oval hugging wrapped text.
     text-sm at 375px fits "Confirm the referral" in the ~165px cell;
     bumps to text-lg once there's room. */
  font-size: var(--text-sm);
  white-space: nowrap;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
}

@media (min-width: 768px) {
  .tlm-approach-practice__tab {
    font-size: var(--text-lg);
  }
}

.tlm-approach-practice__tab.is-active {
  background: var(--color-cream);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

@media (hover: hover) {
  .tlm-approach-practice__tab:not(.is-active):hover {
    color: var(--color-navy);
  }
}

.tlm-approach-practice__tab:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* Panel: 4 points around a centre photo. Mobile = stacked. */
.tlm-approach-practice__grid {
  display: flex;
  flex-direction: column;
  /* Mobile: the photo is hidden, so the two columns stack into one list.
     Match the within-column point spacing so all 4 points read as a
     single evenly-spaced list. */
  gap: var(--space-xl);
}

.tlm-approach-practice__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Mobile: bridge the seam between the two stacked columns (point 2 ->
   point 3) with the same hairline rule the within-column points use,
   so there isn't a gap with no divider. */
.tlm-approach-practice__col--right {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-navy-divider);
}

.tlm-approach-practice__point {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-approach-practice__point-title {
  font-size: var(--text-xl);
}

.tlm-approach-practice__point p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy);
}

.tlm-approach-practice__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-navy-divider);
}

.tlm-approach-practice__visual {
  /* Hidden on mobile/tablet — the centre photo isn't needed in the
     stacked layout; shown only in the desktop 3-column row (1024+). */
  display: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tlm-approach-practice__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tlm-approach-practice__visual--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 410 / 500;
  background: var(--color-navy-tint);
  color: var(--color-navy-faint);
}

@media (min-width: 1024px) {
  .tlm-approach-practice {
    padding-block: var(--space-5xl);
  }
  .tlm-approach-practice__grid {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-4xl);
  }
  .tlm-approach-practice__col {
    flex: 1 0 0;
    min-width: 0;
    gap: var(--space-3xl);
  }
  .tlm-approach-practice__col--left {
    text-align: right;
    align-items: flex-end;
  }
  /* Drop the mobile cross-column bridge rule in the desktop row layout. */
  .tlm-approach-practice__col--right {
    padding-top: 0;
    border-top: 0;
  }
  .tlm-approach-practice__visual {
    display: block;
    flex-shrink: 0;
    width: 410px;
    height: 500px;
  }
}

/* =====================================================================
 * 5. How we work (2x2 principles)
 * ===================================================================== */

.tlm-approach-work {
  background: var(--color-cream);
  padding-block: var(--space-section-y-mobile);
}

.tlm-approach-work__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.tlm-approach-work__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-approach-work__title {
  font-size: var(--text-h2-mobile);
}

.tlm-approach-work__subhead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

.tlm-approach-work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.tlm-approach-work__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--color-navy-divider);
}

.tlm-approach-work__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-approach-work__item-title {
  font-size: var(--text-xl);
}

.tlm-approach-work__text p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
}

@media (min-width: 1024px) {
  .tlm-approach-work {
    padding-block: var(--space-5xl);
  }
  .tlm-approach-work__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4xl);
    row-gap: var(--space-3xl);
    align-items: start;
  }
}

/* =====================================================================
 * 6. CTA + book
 * ===================================================================== */

.tlm-approach-cta {
  background: var(--color-white);
  padding-block: var(--space-section-y-mobile);
}

.tlm-approach-cta__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-2xl) var(--space-md);
  border-radius: var(--radius-xl);
  background: var(--color-cream);
}

.tlm-approach-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.tlm-approach-cta__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-approach-cta__title {
  font-size: var(--text-h2-mobile);
  text-wrap: balance;
}

.tlm-approach-cta__lead p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
}

.tlm-approach-cta__button {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.tlm-approach-cta__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-navy-divider);
}

.tlm-approach-cta__book {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
}

.tlm-approach-cta__visual img {
  display: block;
  width: 100%;
  max-width: 545px;
  height: auto;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .tlm-approach-cta {
    padding-block: var(--space-5xl);
  }
  .tlm-approach-cta__panel {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4xl);
    padding: var(--space-4xl);
  }
  .tlm-approach-cta__copy {
    flex: 0 0 565px;
    max-width: 565px;
  }
  .tlm-approach-cta__visual {
    flex: 1 0 0;
    min-width: 0;
  }
}