/* O6 — Mid-page CTA: paper-band in het cream middenrif
   Model: s5-ctabar op de homepage (paper-oppervlak, --r-band, --shadow-card).
   Bewust licht: het navy o4-paneel blijft de enige donkere massa in het
   middenrif. Eén reveal op de hele band, geen interne stagger. */

/* ---------- Ritme: band, geen sectie (strak binnen het lichte middenrif) ---------- */

.oa-band.section {
  padding-block: var(--space-section-s);
}

/* ---------- De band zelf ---------- */

.oa-band .oa-band-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: 2rem 2.5rem;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-band);
  box-shadow: var(--shadow-card);
}

/* ---------- Links: kop + subregel ---------- */

.oa-band .oa-band-copy {
  min-width: 0;
  max-width: 64ch;
}

/* Anton-kop op h3-maat; geen dot: dit is een band-kop, geen sectiekop */
.oa-band .oa-band-title {
  font-size: var(--text-h3);
}

.oa-band .oa-band-sub {
  margin-top: 8px;
  font-size: var(--text-body-size);
  line-height: 1.6;
  color: var(--text-body);
}

/* ---------- Rechts: knop + microcopy ---------- */

.oa-band .oa-band-action {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.oa-band .oa-band-btn {
  white-space: nowrap;
}

.oa-band .oa-band-micro {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Tablet: gecentreerde kolom ---------- */

@media (max-width: 880px) {
  .oa-band .oa-band-bar {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
  }
  .oa-band .oa-band-copy {
    max-width: 46ch;
  }
}

/* ---------- Mobiel ---------- */

@media (max-width: 560px) {
  .oa-band .oa-band-bar {
    padding: 1.75rem 1.25rem;
  }
  /* Subregel weg op mobiel: de band werd er te hoog van (Timo-verzoek).
     Kop + knop dragen de boodschap; de subregel blijft op tablet/desktop. */
  .oa-band .oa-band-sub {
    display: none;
  }
  .oa-band .oa-band-action {
    width: 100%;
  }
  .oa-band .oa-band-btn {
    width: 100%;
    padding-inline: 16px;
    white-space: normal;
  }
}