/*
 * speaker-talks.css — Legal Marketing Speaker "Popular talks".
 *
 * Cream surface. Single column mobile (accordion, then photo); two
 * columns desktop (accordion left, photo card right). Figma 513:8271.
 *
 * Accordion = native <details>/<summary>. Open item shows its body;
 * chevron rotates 180deg. Rows divided by hairlines.
 *
 * Photo card sits on a soft multi-hue spectrum glow (CSS gradient per
 * the asset-pipeline rule), rounded + clipped.
 */

.tlm-speaker-talks {
  background: var(--color-cream);
  padding-block: var(--space-2xl);
}

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

/* --- Copy column --- */

.tlm-speaker-talks__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

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

.tlm-speaker-talks__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2-mobile);          /* 32 mobile */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  text-wrap: balance;
}

.tlm-speaker-talks__intro {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

/* --- Accordion --- */

.tlm-speaker-talks__list {
  display: flex;
  flex-direction: column;
}

.tlm-speaker-talks__item {
  border-top: 1px solid var(--color-navy-divider);
  padding-block: var(--space-lg);
}

.tlm-speaker-talks__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.tlm-speaker-talks__item:last-child {
  border-bottom: 1px solid var(--color-navy-divider);
}

.tlm-speaker-talks__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h5-mobile);          /* 20 mobile */
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
}

.tlm-speaker-talks__body {
  margin-top: var(--space-sm);
}

.tlm-speaker-talks__body p {
  margin: 0;
  max-width: 72ch;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
}

/* --- Photo card with spectrum glow --- */

.tlm-speaker-talks__visual {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 575 / 575;
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Soft multi-hue glow behind the photo (matches the Figma spectrum
     gradient on the card, ~24% alpha). Pure CSS, zero asset weight. */
  background:
    linear-gradient(
      60deg,
      rgba(237, 112, 11, 0.24) 0%,
      rgba(242, 21, 142, 0.24) 22%,
      rgba(194, 0, 251, 0.24) 45%,
      rgba(33, 118, 255, 0.24) 70%,
      rgba(0, 157, 172, 0.24) 100%
    ),
    var(--color-white);
  box-shadow: 0 4px 10px rgba(1, 28, 71, 0.04);
}

.tlm-speaker-talks__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* --- Tablet --- */

@media (min-width: 768px) {
  .tlm-speaker-talks__intro {
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
  }

  .tlm-speaker-talks__title {
    font-size: var(--text-2xl);              /* 24 */
  }

  .tlm-speaker-talks__body p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-tight);
  }

  .tlm-speaker-talks__heading {
    font-size: var(--text-h3);               /* 40 — Figma H3 */
  }
}

/* --- Desktop: accordion left, photo right --- */

@media (min-width: 1024px) {
  .tlm-speaker-talks {
    padding-block: var(--space-5xl);
  }

  .tlm-speaker-talks__inner {
    flex-direction: row;
    align-items: flex-start;   /* top-align so the sticky visual has room to travel */
    gap: var(--space-4xl);
  }

  .tlm-speaker-talks__copy {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--space-2xl);
  }

  /* Photo pins while the accordion column scrolls. 121px = scrolled
     navbar (97) + 24 breathing, matching the service-page anchor offset. */
  .tlm-speaker-talks__visual {
    flex: 0 0 575px;
    max-width: 575px;
    aspect-ratio: 575 / 735;
    position: sticky;
    top: 121px;
  }
}