/* RPA · Closing call to action. Full-bleed band (.rpa-band paints the tone). Left: the
   ask. Right: contact lines as a ruled ledger, bottom-aligned with the button. */

.rpa-cta {
  --_rule: var(--rpa-c-rule, var(--rpa-on-dark-rule));
  --_rule-strong: var(--rpa-c-rule-strong, var(--rpa-on-dark-muted));
  --_muted: var(--rpa-c-muted, var(--rpa-on-dark-muted));
  --_link: var(--rpa-c-link, var(--rpa-link-on-dark));
}

.rpa-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.rpa-cta__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 2rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--_rule);
}
.rpa-cta__note { color: var(--_muted); }

.rpa-cta .rpa-cta__title {
  margin: 0;
  max-width: 12ch;
  font-size: var(--rpa-step-5);
  text-wrap: balance;
}

.rpa-cta.rpa-cta--long .rpa-cta__title {
  max-width: 20ch;
  font-size: var(--rpa-step-4);
}

.rpa-cta__body { margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.rpa-cta .rpa-cta__text {
  margin: 0;
  max-width: 30em;
  color: var(--_muted);
  text-wrap: pretty;
}

.rpa-cta__actions { margin-block-start: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }

/* ---------- Joined to a section of the same colour ----------
   Two bands of one tone in a row add their paddings into a void. When the Elementor section right
   above carries the same tone class (the page builder puts .is-tone-* on its containers), or the
   editor chose "Always join", the band starts with a shell-wide hairline and half the space.
   "Never join" (--flush-no) opts out. Bands with a background picture are never joined. */
.e-con.is-tone-paper + .e-con .rpa-cta.is-tone-paper:not(.rpa-cta--flush-no, .rpa-cta--media),
.e-con.is-tone-bone + .e-con .rpa-cta.is-tone-bone:not(.rpa-cta--flush-no, .rpa-cta--media),
.e-con.is-tone-ink + .e-con .rpa-cta.is-tone-ink:not(.rpa-cta--flush-no, .rpa-cta--media),
.e-con.is-tone-petrol + .e-con .rpa-cta.is-tone-petrol:not(.rpa-cta--flush-no, .rpa-cta--media),
.rpa-cta.rpa-cta--flush-yes {
  position: relative;
  padding-block-start: calc(var(--rpa-section) * 0.5);
}
.e-con.is-tone-paper + .e-con .rpa-cta.is-tone-paper:not(.rpa-cta--flush-no, .rpa-cta--media)::before,
.e-con.is-tone-bone + .e-con .rpa-cta.is-tone-bone:not(.rpa-cta--flush-no, .rpa-cta--media)::before,
.e-con.is-tone-ink + .e-con .rpa-cta.is-tone-ink:not(.rpa-cta--flush-no, .rpa-cta--media)::before,
.e-con.is-tone-petrol + .e-con .rpa-cta.is-tone-petrol:not(.rpa-cta--flush-no, .rpa-cta--media)::before,
.rpa-cta.rpa-cta--flush-yes::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: max(var(--rpa-gutter), calc((100% - var(--rpa-shell)) / 2 + var(--rpa-gutter)));
  border-block-start: 1px solid var(--_rule);
}

/* ---------- Contact ledger ---------- */

.rpa-cta__lines {
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--_rule);
}

.rpa-cta__line {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.3fr) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1.25rem;
  padding-block: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
  border-block-start: 1px solid var(--_rule);
}
.rpa-cta__line:first-child { border-block-start-color: var(--_rule-strong); }

.rpa-cta__line-label { margin: 0; color: var(--_muted); }

.rpa-cta__line-value {
  margin: 0;
  font-family: var(--rpa-serif);
  font-size: var(--rpa-step-2);
  font-weight: 350;
  font-variant-numeric: lining-nums;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* As a card: the lines stand on a block of their own tone (.is-tone-* on the <dl> flips the
   theme's colour aliases; the widget's private aliases are re-read here so rules and links follow). */
.rpa-cta .rpa-cta__lines--panel {
  --_rule: var(--rpa-c-rule, var(--rpa-on-dark-rule));
  --_rule-strong: var(--rpa-c-rule-strong, var(--rpa-on-dark-muted));
  --_muted: var(--rpa-c-muted, var(--rpa-on-dark-muted));
  --_link: var(--rpa-c-link, var(--rpa-link-on-dark));
  padding: clamp(0.5rem, 0.25rem + 1vw, 1rem) clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  border-block-end: 0;
  border-radius: var(--rpa-radius);
  background: var(--rpa-c-surface, var(--rpa-petrol-deep));
  color: var(--rpa-c-text, var(--rpa-on-dark));
}
.rpa-cta .rpa-cta__lines--panel .rpa-cta__line:first-child { border-block-start: 0; }

/* A link must look like a link without hovering: coloured and always underlined. */
.rpa-cta .rpa-cta__line-link {
  color: var(--_link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  transition: text-decoration-color var(--rpa-dur-1) var(--rpa-ease);
}
/* Hover must be visible on the petrol card too: the underline fills in AND thickens, and on dark
   grounds the text lifts from the link tint to the full light colour. */
.rpa-cta .rpa-cta__line-link { transition: text-decoration-color var(--rpa-dur-1) var(--rpa-ease), color var(--rpa-dur-1) var(--rpa-ease), text-decoration-thickness var(--rpa-dur-1) var(--rpa-ease); }
.rpa-cta .rpa-cta__line-link:hover,
.rpa-cta .rpa-cta__line-link:focus-visible { text-decoration-color: currentColor; text-decoration-thickness: 2.5px; }
.rpa-cta.is-tone-ink .rpa-cta__line-link:hover,
.rpa-cta.is-tone-petrol .rpa-cta__line-link:hover,
.rpa-cta .rpa-cta__lines--panel.is-tone-ink .rpa-cta__line-link:hover,
.rpa-cta .rpa-cta__lines--panel.is-tone-petrol .rpa-cta__line-link:hover { color: var(--rpa-on-dark); }

@media (max-width: 479.98px) {
  .rpa-cta__line { grid-template-columns: minmax(0, 1fr); row-gap: 0.25rem; }
  /* the email address sets on one line down to 320px — never broken mid-word */
  .rpa-cta__line-value { font-size: min(var(--rpa-step-2), 6.2vw); }
}

@media (min-width: 1000px) {
  .rpa-cta__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--rpa-gap);
    align-items: end;
  }
  .rpa-cta__meta { grid-column: 1 / -1; }
  .rpa-cta__main { grid-column: 1 / span 6; }
  .rpa-cta__lines { grid-column: 8 / -1; }
  .rpa-cta--solo .rpa-cta__main { grid-column: 1 / span 9; }
  /* The card's padding comes out of the column: one column wider, so the email sets on one line. */
  .rpa-cta__lines--panel { grid-column: 7 / -1; }
  .rpa-cta__lines--panel .rpa-cta__line { grid-template-columns: 5rem minmax(0, 1fr); }
}
@media (min-width: 1000px) and (max-width: 1279.98px) {
  .rpa-cta__lines--panel .rpa-cta__line-value { font-size: var(--rpa-step-1); }
}

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

.rpa-cta--media { isolation: isolate; overflow: clip; }
.rpa-cta__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rpa-cta__bg-media { position: absolute; inset: 0; }
.rpa-cta .rpa-cta__bg .rpa-cta__bg-image,
.rpa-cta .rpa-cta__bg .rpa-cta__bg-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
}
/* 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-cta__scrim { position: absolute; inset: 0; background: var(--rpa-c-surface, var(--rpa-ink)); }
.rpa-cta--media .rpa-cta__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-cta--media .rpa-cta__text { color: var(--rpa-c-text, var(--rpa-on-dark)); }

/* Over a picture the contact ledger stands on its own ground: a flat, square panel of the band
   colour. The film's moving highlight passes behind these links; without the panel they dip
   below 7:1 for part of the loop (measured — see docs/board/widgets-a.md). */
.rpa-cta--media .rpa-cta__lines {
  padding-inline: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  background: color-mix(in srgb, var(--rpa-c-surface, var(--rpa-petrol-deep)) 70%, transparent);
  border-radius: var(--rpa-radius);
}

/* 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-cta .rpa-cta__bg .rpa-cta__bg-video { display: none; }
html.rpa-motion .rpa-cta .rpa-cta__bg .rpa-cta__bg-video { display: block; }