/* 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 ---------- */
.cta--band {
  background: var(--primary);
  color: var(--primary-ink);
  padding-block: var(--space);
}

/* A look with a ground of its own (the band, the photo) is the whole band, edge to edge: the section's space is
   taken inside it, on its colour (the drawer's «space» still sets it) — as the hero over its photo. The plain
   look stands on the section's ground and its space. */
.section:has(> .cta--band), .section:has(> .cta--photo) { padding-block: 0; }
/* …and the last band before the footer meets it, as a band of a palette of its own does. */
main:has(> .section:last-child > .cta--band) ~ .ftr, main:has(> .section:last-child > .cta--photo) ~ .ftr { margin-top: 0; }
/* …in the page's column (a band of normal or narrow width) it is a card on the section's ground: its corners
   rounded, as a photo behind the words is there. */
.container .cta--band, .container .cta--photo { border-radius: var(--radius); overflow: hidden; }

/* 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-block: var(--space); } /* the band's space, as the colour band's: «Відступи» alone sets it */
.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-block: var(--space); }
.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); }

.cta-inner { text-align: center; max-width: 640px; margin: 0 auto; }

.cta--band .cta-inner h2 { color: var(--primary-ink); }

.cta--band .cta-inner p { color: color-mix(in srgb, var(--primary-ink) 82%, transparent); margin-bottom: 2rem; }

.cta--plain .cta-inner p { color: var(--body-text); margin-bottom: 2rem; }