/* =========================================================
   PAGE — Programs overview (COLLINS /programs layout)
   Staggered hero image row, a value list, a title+excerpt
   program list, and a dark Capabilities band. Scoped .po-body.
   ========================================================= */

.po-body .pr-section {
  padding: var(--space-section-y-fluid) 0;
}

.po-wrap {
  width: var(--shell);
  margin-inline: auto;
}

/* ---- Hero ---- */
.po-hero {
  padding: var(--space-section-y-loose) 0 var(--space-stack-xl);
}

.po-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-row-lg);
  margin-bottom: var(--space-section-head);
}

.po-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-page-hero);
  line-height: var(--leading-display-tight);
  letter-spacing: var(--tracking-display);
}

.po-head p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-heading-md);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading-soft);
  opacity: 0.7;
}

/* Staggered, horizontally-scrollable image row. Stagger via margin so GSAP
   can own each image's transform for the scroll parallax. */
.po-images {
  display: flex;
  align-items: flex-start;
  gap: var(--space-row-lg);
  overflow-x: auto;
  padding-bottom: var(--space-row-lg);
  margin-inline: calc(-1 * max(var(--space-page-x), var(--full-bleed-gutter)));
  padding-inline: max(var(--space-page-x), var(--full-bleed-gutter));
  scrollbar-width: thin;
}

.po-img {
  position: relative;
  flex: 0 0 auto;
  width: var(--size-program-image);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--page-fg), transparent 88%);
}

.po-img:nth-child(even) { margin-top: clamp(24px, 4vw, 56px); }
.po-img:nth-child(3n) { margin-top: clamp(40px, 7vw, 96px); }
.po-img:nth-child(4n) { margin-top: clamp(12px, 2vw, 28px); }

.po-img-inner {
  position: absolute;
  inset: -10% 0;
  will-change: transform;
}

.po-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Value list ---- */
.po-value p {
  margin: 0 0 var(--space-stack-lg);
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--pr-rocket);
}

.po-value ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-hairline);
  background: color-mix(in srgb, var(--page-fg), transparent 84%);
  border: var(--border-width-hairline) solid color-mix(in srgb, var(--page-fg), transparent 84%);
}

.po-value li {
  background: var(--page-bg);
  padding: var(--space-card-pad);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-card-sm);
  letter-spacing: var(--tracking-heading-soft);
  line-height: var(--leading-heading);
}

/* ---- Programs list (title + excerpt + arrow) ---- */
.po-programs-head {
  margin: 0 0 var(--space-stack-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-section-sm);
  letter-spacing: var(--tracking-heading-soft);
}

.po-programs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width-rule) solid color-mix(in srgb, var(--page-fg), transparent 72%);
}

.po-programs a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-row-lg);
  padding: var(--space-row-lg) var(--space-row-xs);
  border-bottom: var(--border-width-rule) solid color-mix(in srgb, var(--page-fg), transparent 72%);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--duration-medium) var(--ease), background-color var(--duration-medium) var(--ease);
}

.po-programs .po-prog-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-heading-md);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading-soft);
}

.po-programs .po-prog-excerpt {
  opacity: 0.66;
  line-height: var(--leading-body-tight);
}

.po-programs .po-prog-arrow {
  justify-self: end;
  font-size: var(--type-lede);
  opacity: 0;
  transform: translateX(calc(-1 * var(--motion-reveal-x)));
  transition: opacity var(--duration-medium) var(--ease), transform var(--duration-medium) var(--ease);
}

.po-programs a:hover,
.po-programs a:focus-visible {
  padding-left: var(--space-indent);
  background: color-mix(in srgb, var(--page-fg), transparent 92%);
}

.po-programs a:hover .po-prog-arrow,
.po-programs a:focus-visible .po-prog-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Capabilities band ---- */
.po-capabilities {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: var(--space-grid-lg);
  align-items: start;
}

.po-capabilities small {
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  opacity: 0.55;
}

.po-cap-title {
  margin: 0 0 var(--space-stack-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-section-sm);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading-soft);
}

.po-cap-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-row-lg);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
  opacity: 0.84;
  max-width: 60ch;
}

.po-cap-body p {
  margin: 0;
}

/* ---- Closing CTA ---- */
.po-cta .po-cap-title {
  margin: 0 0 var(--space-stack-lg);
  max-width: 16ch;
}

@media (max-width: 860px) {
  .po-value ul {
    grid-template-columns: 1fr;
  }

  .po-programs a {
    grid-template-columns: 1fr;
    gap: var(--space-row-xs);
  }

  .po-programs .po-prog-arrow {
    display: none;
  }

  .po-capabilities {
    grid-template-columns: 1fr;
  }
}