/*
 * V3 section package: about
 *
 * CSS isolation: every selector rooted under
 *   .pd-section--about[data-pd-module]
 *
 * Class/attribute selectors only - no element selectors.
 *
 * Canonical tokens used:
 *   --pd-color-text, --pd-color-muted, --pd-color-surface,
 *   --pd-color-surface-alt, --pd-color-primary, --pd-color-accent
 *   --pd-font-heading, --pd-font-body
 *   --pd-radius-md, --pd-radius-lg
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5,
 *   --pd-space-6, --pd-space-8
 *
 * Package-local scoped one-off:
 *   - 56px circular signature photo in story-signed
 *
 * Variants:
 *   story-split      body text next to media on wide screens
 *   story-centered   single centered narrative column, no media
 *   story-signed     narrative followed by a signed attribution block
 */

.pd-section--about[data-pd-module] {
  display: block;
  width: 100%;
  font-family: var(--pd-font-body);
  box-sizing: border-box;
}

.pd-section--about[data-pd-module] .pd-about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pd-space-6);
  align-items: start;
}

.pd-section--about[data-pd-module] .pd-about__content {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-5);
  min-width: 0;
}

.pd-section--about[data-pd-module] .pd-about__header {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
}

/* PASS 4BO: about section header typography moved to the shared
 * .pd-eyebrow / .pd-section-heading rules in components.css. The
 * package-specific __eyebrow / __headline classes are now layout
 * hooks only. The placeholder modifier keeps its visual marker
 * (muted color + italic + reduced opacity) since that's an empty-
 * state cue, not duplicated typography. */
.pd-section--about[data-pd-module] .pd-about__headline--placeholder {
  font-style: italic;
  opacity: 0.7;
}

.pd-section--about[data-pd-module] .pd-about__body {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-4);
}

.pd-section--about[data-pd-module] .pd-about__body-paragraph {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--pd-color-text);
  white-space: pre-wrap;
}

.pd-section--about[data-pd-module] .pd-about__media {
  min-width: 0;
  border-radius: var(--pd-radius-lg);
  overflow: hidden;
  background: var(--pd-color-surface-alt);
  aspect-ratio: 4 / 3;
}

.pd-section--about[data-pd-module] .pd-about__media-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-section--about[data-pd-module] .pd-about__signature {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  padding-top: var(--pd-space-4);
  margin-top: var(--pd-space-3);
  border-top: 1px solid var(--pd-color-surface-alt);
}

.pd-section--about[data-pd-module] .pd-about__signature-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pd-color-surface-alt);
}

.pd-section--about[data-pd-module] .pd-about__signature-photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-section--about[data-pd-module] .pd-about__signature-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-section--about[data-pd-module] .pd-about__signature-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pd-color-text);
  line-height: 1.3;
}

.pd-section--about[data-pd-module] .pd-about__signature-role {
  font-size: 0.875rem;
  color: var(--pd-color-muted);
  line-height: 1.3;
}

.pd-section--about[data-pd-module] .pd-about__cta-row {
  display: flex;
}

/* Background tone contrast.
 * Section bg/root color come from the shared [data-background-tone]
 * primitive. Body paragraphs flip on dark tones via the rule below.
 * PASS 4BO: __headline and __eyebrow tone-aware contrast moved to
 * the shared .pd-section-heading / .pd-eyebrow rules in
 * components.css. */
.pd-section--about[data-pd-module][data-background-tone="primary"] .pd-about__body-paragraph,
.pd-section--about[data-pd-module][data-background-tone="secondary"] .pd-about__body-paragraph {
  color: var(--pd-color-surface);
  opacity: 0.9;
}
/* PASS 4BN: about CTA composes .pd-button + .pd-button--primary.
 * Visual styling lives in components.css. Tone-aware contrast on
 * primary/secondary backgrounds is handled by the shared
 * [data-background-tone="primary|secondary"] .pd-button rules. */

.pd-section--about[data-pd-module] .pd-about__cta-label {
  display: inline-block;
}

/* Variant: story-split (default) */
.pd-section--about[data-pd-module][data-pd-variant="story-split"] .pd-about__inner {
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .pd-section--about[data-pd-module][data-pd-variant="story-split"][data-has-media="true"] .pd-about__inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--pd-space-8);
  }
}

/* Variant: story-centered */
.pd-section--about[data-pd-module][data-pd-variant="story-centered"] .pd-about__inner {
  grid-template-columns: 1fr;
}

.pd-section--about[data-pd-module][data-pd-variant="story-centered"] .pd-about__content {
  max-width: 42rem;
  margin-inline: auto;
  text-align: left;
}

.pd-section--about[data-pd-module][data-pd-variant="story-centered"] .pd-about__header {
  text-align: left;
}

.pd-section--about[data-pd-module][data-pd-variant="story-centered"] .pd-about__body-paragraph {
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Variant: story-signed */
.pd-section--about[data-pd-module][data-pd-variant="story-signed"] .pd-about__inner {
  grid-template-columns: 1fr;
}

.pd-section--about[data-pd-module][data-pd-variant="story-signed"] .pd-about__content {
  max-width: 48rem;
  margin-inline: auto;
}

/* PASS 4BN: CTA reduced-motion override moved into components.css
 * .pd-button rule. About no longer needs a per-package override. */