/*
 * start-a-conversation.css — Toro Legal Marketing
 *
 * "Talk to Paul Evans" — two-column section that sits beneath the
 * /start-a-conversation/ hero. Left col reuses the blog-single-author-bio
 * card verbatim. Right col is a labelled contact list (phone / email /
 * book a time). Both cards share the same cream surface so they read
 * as a paired surface rather than two unrelated panels.
 *
 * Layout:
 *   Mobile     — stacked single column.
 *   ≥1024px    — 2-col equal-width grid, gap matches site standard.
 *
 * Section bg is white so the cream cards lift off the page; the hero
 * above ends on cream, so this gives the page a clean transition.
 */

.tlm-talk {
  background: var(--color-white);
  padding-block: var(--space-3xl);
}

.tlm-talk__inner {
  display: grid;
  /* minmax(0,1fr): a plain 1fr track grows to the card's content width
     and overruns the container; minmax lets it shrink to fit. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

/* Each column is a flex column so the inner card (author-bio on the
   left, reach panel on the right) stretches to fill the column height.
   Combined with the grid's default align-items: stretch, that makes
   the two cards match heights even when one has less content. */
.tlm-talk__col {
  display: flex;
  flex-direction: column;
}

.tlm-talk__col > .blog-single-author-bio,
.tlm-talk__col > .tlm-talk__reach {
  flex: 1 1 auto;
}

/* Inside the author-bio __body grid, the bio area is one cell; if we
   render multiple <p>s directly as children they all map to grid-area:
   bio and overlap. Wrap them in this prose container so the area gets
   ONE child that owns the cell, with normal vertical flow inside. */
.blog-single-author-bio__prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Place the prose wrapper into the bio area on the ≥640px grid. */
@media (min-width: 640px) {
  .blog-single-author-bio__body > .blog-single-author-bio__prose {
    grid-area: bio;
  }
}

.tlm-talk__heading {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  margin: 0 0 var(--space-md);
}

/* ============================================
 * Right column — Ways to reach me
 * ============================================
 * Same cream card shell as blog-single-author-bio so the two columns
 * read as a paired surface.
 */

.tlm-talk__reach {
  /* border-box so padding fits inside the grid track (else the card
     overran the container's right edge -> sideways scroll on mobile). */
  box-sizing: border-box;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-talk__reach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-talk__reach-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* Reach icon chip — matches the mega-menu Engagements icon treatment:
   navy pill, white Carbon icon inside. Chip is --space-xl square
   (40px). Inner SVG inherits white via currentColor (set on .__icon
   via color:white). */
.tlm-talk__reach-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: var(--radius-pill);
  background-color: var(--color-navy);
  color: var(--color-white);
}

.tlm-talk__reach-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tlm-talk__reach-label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  margin: 0;
}

/* The actual link inside the label row — just the value (number /
   email address / "Book a time"). Inherits the global hyperlink
   style + 70%-navy hover-underline from base.css. */
.tlm-talk__reach-value {
  font-weight: var(--weight-regular);
}

/* Book-a-time row variant — full label + link sit bold. */
.tlm-talk__reach-label--strong .tlm-talk__reach-value {
  font-weight: var(--weight-semibold);
}

/* Email row — the "Email:" label is bold, but the link itself stays
   regular weight. Needs the same two-class specificity as the --strong
   link rule above, or it loses and the link renders bold. */
.tlm-talk__reach-label--strong .tlm-talk__reach-value--email {
  font-weight: var(--weight-regular);
}

/* Email link text swaps by breakpoint: the full address is too long for
   the narrow column on mobile, so show the short "Email Paul directly"
   there and the full address from tablet up. */
.tlm-talk__email-full {
  display: none;
}

@media (min-width: 768px) {
  .tlm-talk__email-full {
    display: inline;
  }
  .tlm-talk__email-short {
    display: none;
  }
}

/* No-icon row variant — indent the body to where the icon would sit
   so the label aligns vertically with the rows above. The 40px chip
   + gap (--space-sm = 16px) totals 56px of left inset. */
.tlm-talk__reach-item--noicon {
  padding-left: calc(var(--space-xl) + var(--space-sm));
}

.tlm-talk__reach-note {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  margin: 0;
}

/* ============================================
 * Tablet+ (≥768px) — bigger cards, gap up
 * ============================================ */

@media (min-width: 768px) {
  .tlm-talk__reach {
    padding: var(--space-xl);
  }
}

/* ============================================
 * Desktop (≥1024px) — 2-col equal-width
 * ============================================ */

@media (min-width: 1024px) {
  .tlm-talk__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    /* align-items: stretch (default) — columns match heights so the
       author-bio card grows to match the taller reach card. */
  }
}