/* RPA · Statement. Full-bleed band (.rpa-band paints the tone, from the theme); this file
   sets the statement's own layout: big serif text on the left nine columns, the
   supporting paragraph hung low-right on its own hairline. */

.rpa-statement {
  --_rule: var(--rpa-c-rule, var(--rpa-on-dark-rule));
  --_muted: var(--rpa-c-muted, var(--rpa-on-dark-muted));
}

.rpa-statement__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.rpa-statement__meta {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block-end: 1rem;
  margin-block-end: clamp(2rem, 1rem + 4vw, 4.5rem);
  border-block-end: 1px solid var(--_rule);
}

.rpa-statement .rpa-statement__text {
  margin: 0;
  max-width: 24em;
  font-size: var(--rpa-step-4);
  line-height: 1.14;
  text-wrap: balance;
}

.rpa-statement__support {
  margin-block-start: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--_rule);
}

.rpa-statement .rpa-statement__support-text {
  margin: 0;
  max-width: 34em;
  color: var(--_muted);
  text-wrap: pretty;
}
.rpa-statement__support .rpa-link-arrow { margin-block-start: 1.5rem; }

@media (min-width: 1000px) {
  .rpa-statement__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--rpa-gap);
  }
  .rpa-statement__meta { grid-column: 1 / -1; }
  .rpa-statement__text { grid-column: 1 / span 11; }
  .rpa-statement__support { grid-column: 8 / -1; }
}

/* ---------- Optional background film / image under a tone-coloured veil ---------- */

.rpa-statement--media { isolation: isolate; overflow: clip; }
.rpa-statement__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rpa-statement__bg-media { position: absolute; inset: 0; }
.rpa-statement .rpa-statement__bg .rpa-statement__bg-image,
.rpa-statement .rpa-statement__bg .rpa-statement__bg-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
/* The veil is the band's own colour, so it works on any tone. Its opacity, and the picture's
   brightness on dark bands, come from the editor's one "Dimming strength" slider (inline styles). */
.rpa-statement__scrim { position: absolute; inset: 0; background: var(--rpa-c-surface, var(--rpa-ink)); }
.rpa-statement--media .rpa-statement__inner { position: relative; z-index: 1; }

/* Over a picture, body copy takes the full text colour: the muted tone is only ~6.3:1 on petrol. */
.rpa-statement--media .rpa-statement__support-text { color: var(--rpa-c-text, var(--rpa-on-dark)); }

/* With scripting off, browsers force native controls onto every <video>. The film is decoration
   and the still underneath is the fallback, so the film only appears once the motion layer is
   running (html.rpa-motion, set by the theme's JS — which is also what starts playback). */
.rpa-statement .rpa-statement__bg .rpa-statement__bg-video { display: none; }
html.rpa-motion .rpa-statement .rpa-statement__bg .rpa-statement__bg-video { display: block; }