/*
 * profile-experience.css — Toro Legal Marketing
 *
 * People CPT single (single-people.php). "Experience" row beneath the
 * Background section. Same 1/3 : 2/3 grid as profile-about /
 * profile-career; white surface (alternates with the cream Background
 * row above). Left: section heading. Right: an intro paragraph
 * followed by a divided list of case studies, each a bold title lead
 * + body prose.
 *
 * Built from spec (no Figma frame); copy is canonical and hardcoded
 * in template-parts/people/experience.php.
 */

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

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

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

/* --- Right column: intro + case-study list --- */

.tlm-profile-experience__lead {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-navy);
}

.tlm-profile-experience__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.tlm-profile-experience__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-border-card);
  color: var(--color-navy);
}

/* Every item draws ONLY a top border, so adjacent split lists never
   double the seam line. The box is closed by a single bottom border on
   whatever item is currently last ON SCREEN — never the reveal wrapper
   (that would draw a stray line under the Show more button when closed).

   Mobile (<768): the always-visible list (--desktop-extra is hidden) is
   the last thing above the button. */
.tlm-profile-experience__list:first-of-type .tlm-profile-experience__item:last-child {
  border-bottom: 1px solid var(--color-border-card);
}

/* When the reveal is open, the last revealed list closes the box, so
   drop the border from the item above the button. */
.tlm-profile-experience:has(.tlm-profile-experience__reveal.is-open) .tlm-profile-experience__list:first-of-type .tlm-profile-experience__item:last-child {
  border-bottom: 0;
}
.tlm-profile-experience__reveal.is-open .tlm-profile-experience__reveal-inner > .tlm-profile-experience__list:last-child .tlm-profile-experience__item:last-child {
  border-bottom: 1px solid var(--color-border-card);
}

@media (min-width: 768px) {
  /* Desktop shows items 4-7 inline (--desktop-extra), so the closing
     border moves from the always-visible list to that one. */
  .tlm-profile-experience__list:first-of-type .tlm-profile-experience__item:last-child {
    border-bottom: 0;
  }
  .tlm-profile-experience__list--desktop-extra .tlm-profile-experience__item:last-child {
    border-bottom: 1px solid var(--color-border-card);
  }
  .tlm-profile-experience:has(.tlm-profile-experience__reveal.is-open) .tlm-profile-experience__list--desktop-extra .tlm-profile-experience__item:last-child {
    border-bottom: 0;
  }
}

.tlm-profile-experience__item-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
}

.tlm-profile-experience__item-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* --- Show more reveal --- */

/* Standard ghost button; only positioning is module-specific. */
.tlm-profile-experience__more {
  align-self: start;
  margin-top: var(--space-lg);
}

/* Drop the button once the reveal has been triggered. */
.tlm-profile-experience__more.is-spent {
  display: none;
}

/* Collapsible: grid-rows 0fr -> 1fr animates to auto height smoothly. */
.tlm-profile-experience__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms ease;
}

.tlm-profile-experience__reveal.is-open {
  grid-template-rows: 1fr;
}

.tlm-profile-experience__reveal-inner {
  overflow: hidden;
  min-height: 0;
}

/* The revealed list already carries its own top border on the first
   item, so it sits flush under the visible list with no extra rule. */
.tlm-profile-experience__list--more {
  margin: 0;
}

/* Mobile shows 3 items then Show more; tablet/desktop show 7 then Show
   more. Items 4-7 are rendered twice: the --desktop-extra copy shows
   inline >=768, the --mobile-extra copy lives in the reveal <768. */
.tlm-profile-experience__list--desktop-extra {
  display: none;
}
.tlm-profile-experience__list--mobile-extra {
  display: flex;
}

@media (min-width: 768px) {
  .tlm-profile-experience__list--desktop-extra {
    display: flex;
  }
  .tlm-profile-experience__list--mobile-extra {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlm-profile-experience__reveal {
    transition: none;
  }
}

/* --- Tablet: body type bumps to 18/1.6 --- */

@media (min-width: 768px) {
  .tlm-profile-experience__lead,
  .tlm-profile-experience__item-body {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-tight);
  }
}

/* --- Desktop: heading left (1/3), list right (2/3) --- */

@media (min-width: 1024px) {
  .tlm-profile-experience {
    padding-block: var(--space-4xl);
  }

  .tlm-profile-experience__inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: var(--space-3xl);
  }

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

  .tlm-profile-experience__item {
    padding-block: var(--space-lg);
  }
}