/* NT2 Credibility Split — dark card + split content. The card styling
   (background, body color) comes from .nt2-section-card--dark in the
   shared stylesheet; this file only tunes the inner layout. */

.nt2-cred__section { padding-top: var(--nt2-section-pt); padding-bottom: var(--nt2-section-pb); }

/* The card uses brand-token utilities (bg-{token} text-{token}) for
   its palette. The shared .nt2-h2 / .nt2-body-copy rules set explicit
   colors that would otherwise override the inherited text color from
   text-{token}, so re-anchor them to inherit. The lockup divider and
   muted label use color-mix against currentColor so they tint to
   whatever text color the editor picks. */
.nt2-cred__card .nt2-h1,
.nt2-cred__card .nt2-h2,
.nt2-cred__card .nt2-h3,
.nt2-cred__card .nt2-body-copy,
.nt2-cred__card .nt2-lede {
  color: inherit;
}

.nt2-cred__eyebrow {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clr-tertiary);
  font-weight: 500;
}
/* Text elements are now richtext blocks: their copy lives inside a child
   tag (<p>/<h2>). Collapse the wrapper's intrinsic margins onto the inner
   element so spacing matches the prior single-element markup, and let the
   eyebrow's typographic styling cascade into its child paragraph. */
.nt2-cred__eyebrow.rte > :last-child { margin-bottom: 0; }
.nt2-cred__eyebrow.rte > :first-child { margin-top: 0; }
.nt2-cred__eyebrow.rte > * {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  font-weight: inherit;
}
.nt2-cred__headline.rte > :first-child { margin-top: 0; }
.nt2-cred__headline.rte > :last-child { margin-bottom: 0; }
.nt2-cred__headline > *,
.nt2-cred__headline h1, .nt2-cred__headline h2, .nt2-cred__headline h3, .nt2-cred__headline h4, .nt2-cred__headline h5, .nt2-cred__headline h6, .nt2-cred__headline p {
  margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; line-height: inherit; color: inherit;
}
.nt2-cred__body > *,
.nt2-cred__body h1, .nt2-cred__body h2, .nt2-cred__body h3, .nt2-cred__body h4, .nt2-cred__body h5, .nt2-cred__body h6, .nt2-cred__body p {
  font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; line-height: inherit; color: inherit;
}

/* The content image is now its own block wrapped in .nt2-cred__media-block;
   the wrapper is layout-transparent so the inner .nt2-cred__media-frame keeps
   its original sizing and the 4:3 aspect ratio is unchanged. */
.nt2-cred__media-block { display: block; }
.nt2-cred__media-block.rounded-sm,
.nt2-cred__media-block.rounded,
.nt2-cred__media-block.rounded-md,
.nt2-cred__media-block.rounded-lg,
.nt2-cred__media-block.rounded-xl,
.nt2-cred__media-block.rounded-2xl,
.nt2-cred__media-block.rounded-3xl,
.nt2-cred__media-block.rounded-full { overflow: hidden; }

.nt2-cred__body { margin-top: var(--space-xl); max-width: 460px; }
.nt2-cred__body.rte > :last-child { margin-bottom: 0; }
.nt2-cred__body.rte > :first-child { margin-top: 0; }

.nt2-cred__lockup {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  /* Divider and muted label tint to whatever text color the editor
     picks via the brand-token text-{token} utility. currentColor
     keeps these in sync with the card's chosen palette instead of
     hard-coding white. */
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.nt2-cred__lockup-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-weight: 500;
}
.nt2-cred__lockup-brand {
  font-family: var(--font-primary);
  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-4xl));
  letter-spacing: -0.02em;
  color: inherit;
}

/* Mobile: tighten the card so the section doesn't dominate the fold.
   The shared .nt2-section-card paints var(--space-3xl) top/bottom
   padding at mobile widths, and .nt2-split adds var(--space-2xl) gap
   between text and media. Both are tuned for sections that are the
   page's centerpiece — credibility is a supporting beat, so dial
   them down. */
@media (max-width: 1023px) {
  .nt2-cred__card {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  .nt2-cred__grid {
    gap: var(--space-lg);
  }
  .nt2-cred__body {
    margin-top: var(--space-md);
  }
  .nt2-cred__lockup {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
  }
}

/* On desktop give the text column a touch more horizontal room so the
   editorial paragraph sits comfortably next to the landscape media. */
@media (min-width: 1024px) {
  .nt2-cred__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

  /* Trim the card's vertical padding so a landscape media frame
     doesn't push the section to fill a tall viewport. The shared
     .nt2-section-card desktop rule uses --space-4xl top/bottom; this
     scoped override pulls it back to --space-3xl, while keeping
     horizontal padding intact. */
  .nt2-cred__card {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }

  /* Cap the media's height so an extra-tall card content column
     (long copy) doesn't stretch the image awkwardly. The 4:3 aspect
     ratio is preserved; the image just stops growing past this cap. */
  .nt2-cred__media-frame {
    max-height: 480px;
  }
}