/* cta — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* On the primary-coloured band the button is the band's INK, not the page
   background: with a dark palette --bg and --primary are both near black,
   and the call to action would read as plain text. */
.cta--band .btn { background: var(--primary-ink); border-color: var(--primary-ink); color: var(--primary); }
.cta--band .btn:hover { background: color-mix(in srgb, var(--primary-ink) 88%, var(--primary)); }

/* ---------- CTA section (sections/cta) ---------- */
.cta--band {
  background: var(--primary);
  color: var(--primary-ink);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.cta--plain { padding: clamp(3rem, 6vw, 5rem) 0; }

/* photo — the picture behind the words, under a scrim: a scrim is not a brand colour, so here a literal
   colour is right (as in the hero). With no picture it is the band. */
.cta-backdrop { display: none; }
.cta--photo:has(.cta-backdrop) { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); padding: clamp(5rem, 11vw, 8.5rem) 0; }
.cta--photo .cta-backdrop { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta--photo:has(.cta-backdrop)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, .58)); }
.cta--photo:has(.cta-backdrop) .cta-inner h2 { color: #fff; }
.cta--photo:has(.cta-backdrop) .cta-inner p { color: rgba(255, 255, 255, .88); margin-bottom: 2rem; }
.cta--photo:not(:has(.cta-backdrop)) { background: var(--primary); color: var(--primary-ink); padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.cta--photo:not(:has(.cta-backdrop)) .cta-inner h2 { color: var(--primary-ink); }
.cta--photo:not(:has(.cta-backdrop)) .cta-inner p { color: color-mix(in srgb, var(--primary-ink) 82%, transparent); margin-bottom: 2rem; }
.cta--photo:not(:has(.cta-backdrop)) .btn { background: var(--primary-ink); border-color: var(--primary-ink); color: var(--primary); }