/* ==========================================================================
   IPAM — reusable content sections (institutional pages and any page that uses the parts)
   template-parts: hero-slider, section-head, feature-cards, highlights-band, stats-grid,
   growth-chart, timeline-columns, member-card.
   Figma "Pages intérieures (Final)" 116:2 — What is IPAM 116:30, What we do 200:779, Governance 198:659.
   Load with ipam_enqueue_page_style( 'sections' ) before get_header().
   ========================================================================== */

/* Sections continuing the previous one (Figma pt 24) */
.section--flush-top { padding-top: var(--spacing-lg); }

/* Section head with a right-hand note ("As of July 1, 2026") */
.section-head--note > .label { white-space: nowrap; }
.section-head--note .lede { max-width: 760px; }

/* --------------------------------------------------------------------------
   Hero slider content (117:28) — the frame itself is styled in ipam.css (.hero-slider)
   -------------------------------------------------------------------------- */
.hero-slider { padding-top: var(--spacing-4xl); }
.hero-slider__content > .label { color: #fff; }
.hero-slider__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }

/* --------------------------------------------------------------------------
   Feature cards (accent bar + icon) — 118:35
   -------------------------------------------------------------------------- */
.feature-card { box-shadow: var(--shadow-medium); }
.feature-card .card__bar { margin-bottom: 34px; } /* bar 6 + 34 + gap 14 → icon at 54px */
.feature-card .card-title { font-size: 18px; line-height: 24px; }
.feature-card__text { font-size: 15px; line-height: 22px; }
.feature-card__lead { font-size: 15px; line-height: 22px; font-weight: 600; }
.feature-card__email {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 18px; letter-spacing: 1px;
  color: var(--color-text-muted); word-break: break-all;
}
.feature-card__email:hover { color: var(--color-accent-cta); }

/* --------------------------------------------------------------------------
   Highlights band (navy) — 118:59
   -------------------------------------------------------------------------- */
.highlights-band { padding: var(--spacing-3xl) var(--section-x-tight); }
.highlights-band__inner { display: flex; align-items: center; gap: var(--spacing-3xl); }
.highlights-band__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
.highlights-band__text .lede { color: rgba(255, 255, 255, 0.85); }
.highlights { flex: 0 0 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); align-items: stretch; }
.highlight {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-small);
  display: flex; flex-direction: column; gap: 10px; padding: var(--spacing-lg); height: 100%;
}
.highlight p:not(.label) { font-size: 15px; line-height: 22px; color: var(--color-text-body); }

/* --------------------------------------------------------------------------
   Stat cards — 119:36
   -------------------------------------------------------------------------- */
.stats-cards { margin: 0; }
.stats-cards .stat { box-shadow: var(--shadow-small); }
.stats-cards .label { color: var(--color-text-body); }
.stats-cards + * { margin-top: var(--spacing-lg); }
.section-head + .stats-cards { margin-top: -8px; }

/* --------------------------------------------------------------------------
   Growth chart — 119:53
   -------------------------------------------------------------------------- */
.growth-chart {
  margin: 0; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-small);
  padding: 28px; display: flex; flex-direction: column; gap: var(--spacing-md);
}
.growth-chart__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; }
.growth-chart__head > div { display: flex; flex-direction: column; gap: 6px; }
.growth-chart__title { font-size: 22px; line-height: 28px; }
.growth-chart__plot { position: relative; height: 340px; }
.growth-chart__area { position: absolute; inset: 28px 28px 60px 48px; color: var(--navy-900); }
.growth-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.growth-chart__grid { position: absolute; left: 0; right: 0; height: 1px; background: rgba(74, 85, 104, 0.14); }
.growth-chart__grid > span,
.growth-chart__x,
.growth-chart__value {
  position: absolute; font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 18px; letter-spacing: 1px;
  color: var(--color-text-muted); white-space: nowrap;
}
.growth-chart__grid > span { right: calc(100% + 10px); top: -9px; }
.growth-chart__point {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--navy-900); box-shadow: 0 0 0 1.5px #fff; z-index: 1;
}
.growth-chart__value { bottom: 10px; left: 14px; font-size: 12px; color: var(--color-text-heading); }
.growth-chart__point.is-last .growth-chart__value { left: auto; right: 6px; }
.growth-chart__x { top: calc(100% + 16px); transform: translateX(-50%); }
.growth-chart__x.is-first { transform: translateX(-30px); }
.growth-chart__x.is-last { transform: translateX(calc(-100% + 30px)); }

/* --------------------------------------------------------------------------
   Timeline columns — 120:43 (rail styles in ipam.css .timeline)
   -------------------------------------------------------------------------- */
.timeline-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-3xl); align-items: start; }
.timeline-columns--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.timeline-columns .timeline { margin: 0; }
.timeline-columns .timeline__entry::before { top: 0; }
.timeline-columns .timeline__entry .link-more { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Member card — 198:1229
   -------------------------------------------------------------------------- */
.members-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-lg); align-items: stretch; }
.member-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-medium);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); padding: 28px;
}
.member-card--wide { max-width: 824px; }
.member-card__identity { display: flex; align-items: center; gap: var(--spacing-md); width: 100%; }
.member-card__photo { width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--color-bg-soft); }
.member-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.member-card__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.member-card__name .card-title { font-size: 18px; line-height: 24px; }
.member-card__bio { display: flex; flex-direction: column; gap: 10px; }
.member-card__bio p { font-size: 15px; line-height: 22px; }
.member-card__bio.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden;
}
.member-card__bio.is-clamped p + p { display: none; }
.member-card__toggle { background: none; border: 0; padding: 0; margin-top: -6px; }

/* --------------------------------------------------------------------------
   Responsive — tablet / mobile (Figma Homepage Mobile 84:33: one column, 24px gutters)
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .highlights-band__inner { flex-direction: column; align-items: stretch; gap: var(--spacing-xl); }
  .highlights { flex-basis: auto; }
  .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .timeline-columns { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .section, .highlights-band { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .highlights-band { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
  .section--flush-top { padding-top: var(--spacing-md); }
  .hero-slider { padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-xl); height: auto; min-height: 520px; }
  .hero-slider .h-hero { font-size: 36px; line-height: 40px; }
  .hero-slider__actions .btn { flex: 1 1 100%; }
  .highlights { grid-template-columns: minmax(0, 1fr); }
  .members-grid { grid-template-columns: minmax(0, 1fr); }
  .member-card, .feature-card { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .member-card { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
  .member-card__photo { width: 72px; height: 72px; }
  .section-head--note { flex-direction: column; align-items: flex-start; }
  .growth-chart { padding: var(--spacing-lg) var(--spacing-md); }
  .growth-chart__plot { height: 260px; }
  .growth-chart__area { inset: 28px 16px 52px 40px; }
  .growth-chart__x.is-minor { display: none; }
  .growth-chart__x.is-first { transform: translateX(-24px); }
  .growth-chart__x.is-last { transform: translateX(calc(-100% + 16px)); }
  .stats--grid.stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
  .stats-cards .stat { padding: 20px; }
  .stats-cards .stat-value { font-size: 36px; line-height: 40px; }
}
@media (max-width: 360px) {
  .stats--grid.stats-cards { grid-template-columns: minmax(0, 1fr); }
}