/*
 * V3 section package: content-block
 *
 * Canonical CSS variables used:
 *   --pd-color-surface, --pd-color-surface-alt, --pd-color-text,
 *   --pd-color-muted, --pd-color-border, --pd-color-accent,
 *   --pd-color-primary, --pd-color-secondary
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5, --pd-space-6, --pd-space-8, --pd-space-12
 *   --pd-radius-sm, --pd-radius-md, --pd-radius-lg
 *   --pd-font-heading, --pd-font-body
 *
 * CSS isolation: rooted under .pd-section--content-block[data-pd-module].
 */

.pd-section--content-block[data-pd-module] {
  background: var(--pd-color-surface);
  color: var(--pd-color-text);
}

/* Background tones via data attribute lookup. */
.pd-section--content-block[data-pd-module][data-background-tone="surface"] {
  background: var(--pd-color-surface);
  color: var(--pd-color-text);
}

.pd-section--content-block[data-pd-module][data-background-tone="surface-alt"] {
  background: var(--pd-color-surface-alt);
  color: var(--pd-color-text);
}

.pd-section--content-block[data-pd-module][data-background-tone="primary"] {
  background: var(--pd-color-primary);
  color: var(--pd-color-surface);
}

.pd-section--content-block[data-pd-module][data-background-tone="secondary"] {
  background: var(--pd-color-secondary);
  color: var(--pd-color-surface);
}

.pd-section--content-block[data-pd-module][data-background-tone="transparent"] {
  background: transparent;
  color: var(--pd-color-text);
}

.pd-section--content-block[data-pd-module][data-text-alignment="center"] .pd-content-block__text,
.pd-section--content-block[data-pd-module][data-text-alignment="center"] .pd-content-block__banner,
.pd-section--content-block[data-pd-module][data-text-alignment="center"] .pd-content-block__centered {
  text-align: center;
}

.pd-section--content-block[data-pd-module][data-text-alignment="center"] .pd-content-block__actions {
  justify-content: center;
}

/* PASS 4BO: content-block section header typography moved to shared
 * .pd-eyebrow / .pd-section-heading rules in components.css. The
 * package-level __eyebrow / __headline classes survive only as
 * margin layout hooks. The variant modifier --headline--banner keeps
 * its larger clamp() size as a legitimate variant-specific override
 * (allowlisted in the regression test). */
.pd-section--content-block[data-pd-module] .pd-content-block__eyebrow {
  margin: 0 0 var(--pd-space-2) 0;
}

.pd-section--content-block[data-pd-module] .pd-content-block__headline {
  margin: 0 0 var(--pd-space-3) 0;
}

.pd-section--content-block[data-pd-module] .pd-content-block__headline--banner {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

.pd-section--content-block[data-pd-module] .pd-content-block__body {
  font-size: 1rem;
  line-height: 1.6;
}

.pd-section--content-block[data-pd-module] .pd-content-block__body > * {
  margin: 0 0 var(--pd-space-3) 0;
}

.pd-section--content-block[data-pd-module] .pd-content-block__body > *:last-child {
  margin-bottom: 0;
}

.pd-section--content-block[data-pd-module] .pd-content-block__body [href] {
  color: var(--pd-color-primary);
  text-decoration: underline;
}

.pd-section--content-block[data-pd-module] .pd-content-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-3);
  margin-top: var(--pd-space-4);
}

/* PASS 4BN: content-block CTAs compose .pd-button + .pd-button--primary
 * / .pd-button--ghost (and .pd-button--large for the fullwidth-cta
 * variant). Visual styling, hover/focus, transitions, and tone-aware
 * contrast all live in theme/assets/css/components.css. The package-
 * specific __cta / __cta--primary / __cta--secondary / __cta--large
 * classes survive only as layout / placement hooks for the section's
 * .pd-content-block__actions row. */

/* PASS 4BO: __eyebrow tone-aware contrast moved to shared
 * [data-background-tone] .pd-eyebrow rules in components.css. */

.pd-section--content-block[data-pd-module][data-background-tone="primary"] .pd-content-block__body [href],
.pd-section--content-block[data-pd-module][data-background-tone="secondary"] .pd-content-block__body [href] {
  color: var(--pd-color-surface);
}

/* Variant: centered-prose */
.pd-section--content-block[data-pd-module][data-pd-effective-variant="centered-prose"] .pd-content-block__centered {
  max-width: 45rem;
  margin-inline: auto;
}

/* Variant: two-column */
.pd-section--content-block[data-pd-module][data-pd-variant="two-column"] .pd-content-block__two-column {
  display: grid;
  gap: var(--pd-space-5);
  grid-template-columns: 1fr;
  align-items: baseline;
}

@media (min-width: 48rem) {
  .pd-section--content-block[data-pd-module][data-pd-variant="two-column"] .pd-content-block__two-column {
    grid-template-columns: 2fr 3fr;
    gap: var(--pd-space-8);
  }
}

/* Variant: split (image-text variants) */
.pd-section--content-block[data-pd-module] .pd-content-block__split {
  display: grid;
  gap: var(--pd-space-5);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 48rem) {
  .pd-section--content-block[data-pd-module] .pd-content-block__split {
    grid-template-columns: 1fr 1fr;
    gap: var(--pd-space-8);
  }
}

.pd-section--content-block[data-pd-module] .pd-content-block__media {
  order: 0;
}

.pd-section--content-block[data-pd-module] .pd-content-block__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pd-radius-md);
  object-fit: cover;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.pd-section--content-block[data-pd-module] .pd-content-block__media:hover .pd-content-block__image {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -24px rgba(15, 23, 42, 0.45);
}

/* Variant: fullwidth-cta */
.pd-section--content-block[data-pd-module][data-pd-effective-variant="fullwidth-cta"] {
  padding-block: var(--pd-space-12);
}

.pd-section--content-block[data-pd-module][data-pd-effective-variant="fullwidth-cta"] .pd-content-block__banner {
  display: grid;
  gap: var(--pd-space-3);
  justify-items: center;
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.pd-section--content-block[data-pd-module][data-pd-effective-variant="fullwidth-cta"] .pd-content-block__actions {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .pd-section--content-block[data-pd-module] .pd-content-block__image {
    transition: none;
  }
  .pd-section--content-block[data-pd-module] .pd-content-block__media:hover .pd-content-block__image {
    transform: none;
    box-shadow: none;
  }
}