/* =============================================================================
   Bio Page Template — Pass 1.4
   Canonical path:
   /_assets/css/main-theme/current/templates/bio.css

   Lightweight profile page for people outside the Faculty/Staff directory model.
   The portrait is limited to the profile header so long biography content can use
   the full readable width below it. The page reuses the shared Render_CTA output and the dedicated
   components/program-cta.css stylesheet. This file only handles Bio Page integration.
   ============================================================================= */

.bio-page,
.bio-page * {
  box-sizing: border-box;
}

.bio-page {
  --bio-card-bg: linear-gradient(
    145deg,
    var(--color-surface) 0%,
    var(--color-white) 52%,
    hsl(48 100% 97%) 100%
  );
  --bio-accent-size: 0.45rem;
  --bio-readable-width: 78ch;

  width: min(100% - 2rem, var(--container-lg));
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4rem);
  color: var(--color-text);
}

.bio-page__card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--bio-card-bg);
  box-shadow: var(--shadow-md);
}

.bio-page__card::before {
  content: "";
  position: absolute;
  inset-block: 0 auto;
  inset-inline: 0;
  height: var(--bio-accent-size);
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-accent),
    var(--color-gold)
  );
}

/* ---------- Profile introduction ---------- */

.bio-page__profile {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  padding-block-end: clamp(1.5rem, 4vw, 2.5rem);
}

.bio-page__intro,
.bio-page__media {
  min-inline-size: 0;
}

.bio-page__intro {
  max-inline-size: 52rem;
}

.bio-page__eyebrow {
  margin: 0 0 var(--space-sm);
  color: var(--color-accent-dark);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.bio-page__name {
  max-inline-size: 18ch;
  margin: 0;
  color: var(--color-primary-dark);
  font-size: clamp(2.25rem, 7vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.bio-page__meta {
  display: grid;
  gap: 0.35rem;
  margin-block-start: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: 0.25rem solid var(--color-gold);
}

.bio-page__title,
.bio-page__affiliation {
  margin: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bio-page__title {
  color: var(--color-text);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: var(--fw-bold);
}

.bio-page__affiliation {
  color: var(--color-muted);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
}

.bio-page__media {
  margin: 0;
}

.bio-page__image {
  display: block;
  inline-size: 100%;
  max-inline-size: 20rem;
  max-block-size: 26rem;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  border: 0.4rem solid var(--color-white);
  border-radius: calc(var(--radius-lg) + 0.2rem);
  object-fit: cover;
  object-position: center;
  box-shadow: var(--shadow-lg);
}

.bio-page__caption {
  max-inline-size: 20rem;
  margin: var(--space-sm) auto 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------- Long-form biography ---------- */

.bio-page__body,
.bio-page__empty {
  width: min(100% - clamp(3rem, 10vw, 7rem), var(--bio-readable-width));
  margin-inline: auto;
}

.bio-page__body {
  padding-block: 0 clamp(2rem, 6vw, 4rem);
  color: var(--color-text);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.bio-page__body > :first-child {
  margin-block-start: 0;
}

.bio-page__body > :last-child {
  margin-block-end: 0;
}

.bio-page__body h2,
.bio-page__body h3,
.bio-page__body h4 {
  color: var(--color-primary-dark);
  line-height: 1.2;
  text-wrap: balance;
}

.bio-page__body h2 {
  margin-block: 2.25rem 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.bio-page__body h3 {
  margin-block: 1.75rem 0.65rem;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}

.bio-page__body p,
.bio-page__body ul,
.bio-page__body ol,
.bio-page__body blockquote,
.bio-page__body figure,
.bio-page__body table,
.bio-page__body pre {
  margin-block: 1rem;
}

.bio-page__body ul,
.bio-page__body ol {
  padding-inline-start: 1.5rem;
}

.bio-page__body li + li {
  margin-block-start: 0.4rem;
}

.bio-page__body a {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

.bio-page__body a:hover,
.bio-page__body a:focus {
  color: var(--color-accent-dark);
  text-decoration-thickness: 0.14em;
}

.bio-page__body a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset, 0.2rem);
}

.bio-page__body blockquote {
  margin-inline: 0;
  padding: var(--space-md) var(--space-lg);
  border-inline-start: 0.35rem solid var(--color-accent);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.76);
  color: var(--color-primary-dark);
  font-size: 1.08em;
  font-weight: var(--fw-semibold);
}

.bio-page__body img,
.bio-page__body video,
.bio-page__body iframe {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

.bio-page__body table,
.bio-page__body pre {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
}

.bio-page__body table {
  border-collapse: collapse;
}

.bio-page__body th,
.bio-page__body td {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}

.bio-page__empty {
  padding-block: 0 clamp(2rem, 6vw, 4rem);
  color: var(--color-muted);
  font-style: italic;
}

/* ---------- Shared CTA placement ---------- */

/*
 * The shared CTA component owns CTA surfaces, radii, shadows and buttons.
 * Bio contributes only safe placement/overflow behavior.
 */
.bio-page > .bio-page__cta {
  margin-block-start: clamp(1.5rem, 4vw, 3rem);
}

.bio-page__cta .program-cta__layout,
.bio-page__cta .program-cta__content,
.bio-page__cta .program-cta__actions {
  min-inline-size: 0;
}

.bio-page__cta .program-cta__body,
.bio-page__cta .program-cta__actions,
.bio-page__cta .program-button {
  overflow-wrap: anywhere;
}

/* ---------- Layout variants ---------- */

.bio-page--centered .bio-page__profile,
.bio-page--no-image .bio-page__profile {
  justify-items: center;
  text-align: center;
}

.bio-page--centered .bio-page__intro,
.bio-page--no-image .bio-page__intro {
  width: min(100%, 52rem);
}

.bio-page--centered .bio-page__name,
.bio-page--no-image .bio-page__name {
  margin-inline: auto;
}

.bio-page--centered .bio-page__meta,
.bio-page--no-image .bio-page__meta {
  width: fit-content;
  margin-inline: auto;
  text-align: start;
}

@media (min-width: 760px) {
  .bio-page--image-left .bio-page__profile,
  .bio-page--image-right .bio-page__profile {
    grid-template-columns: minmax(13rem, 20rem) minmax(0, 1fr);
  }

  .bio-page--image-right .bio-page__media {
    grid-column: 2;
    grid-row: 1;
  }

  .bio-page--image-right .bio-page__intro {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 759.98px) {
  .bio-page {
    width: min(100% - 1rem, var(--container-lg));
    padding-block: var(--space-xl);
  }

  .bio-page__profile {
    gap: var(--space-lg);
  }

  .bio-page__image {
    max-inline-size: min(100%, 18rem);
    max-block-size: none;
    aspect-ratio: 1 / 1;
  }

  .bio-page__name {
    max-inline-size: 100%;
  }

  .bio-page__body,
  .bio-page__empty {
    width: calc(100% - 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bio-page *,
  .bio-page *::before,
  .bio-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}