/* App banner: "car broke down? open the app." A dark card near the end of the page with a night
   photo of a breakdown (an H10 flatbed arriving) on the end side, fading into the card under the
   copy, then two buttons that behave alike: download the app (store picker) and WhatsApp.
   Yellow is text here: the card is dark (base.css yellow rule).
   The card doesn't clip (the store picker's panel may hang below it); the photo rounds its own
   corners instead.
   Phones: photo on top, copy under it. */

.cta-banner {
  padding: 0 16px clamp(64px, 9vh, 112px);
  background: var(--surface-alt);                  /* continues the coverage ground above it */
}
.cta-banner__card {
  position: relative;
  max-width: 1888px; margin-inline: auto;
  min-height: min(640px, 82svh);
  display: grid; align-items: center;
  border-radius: 24px;
  background: var(--h10-ink); color: var(--text-on-dark);
}
.cta-banner__photo {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 56%; margin: 0;
  overflow: hidden;
  border-start-end-radius: 24px; border-end-end-radius: 24px;   /* the card's corners on this side */
}
.cta-banner__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* the photo dissolves into the card under the copy */
.cta-banner__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(22, 24, 28, 0) 55%, var(--h10-ink) 100%);   /* RTL: copy is to the right */
}
.cta-banner__photo:dir(ltr)::after { background: linear-gradient(to left, rgba(22, 24, 28, 0) 55%, var(--h10-ink) 100%); }

.cta-banner__copy {
  position: relative;
  width: 50%;
  padding: 80px clamp(24px, 6vw, 104px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.cta-banner h2 { margin: 0; font-size: clamp(36px, 3.9vw, 64px); line-height: 1.35; font-weight: 700; text-wrap: balance; }
.cta-banner h2 span { color: var(--h10-yellow); }
.cta-banner__lead { margin: 0; max-width: 480px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.8; color: var(--muted-on-dark); }
.cta-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
.cta-banner__or { font-size: 15px; font-weight: 600; color: var(--dim-on-dark); }

/* Phones variant (services page): instead of the photo, two app mockups (css/services.css) rise
   from the bottom of the card on the end side over a yellow glow, and lean toward the mouse
   (js/services-hero.js). Placeholder screens until the real ones arrive. */
.cta-banner--phones { padding-top: clamp(64px, 9vh, 112px); }
.cta-banner__phones {
  --vis-h: min(640px, 82svh);
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 50%; overflow: hidden;
  border-start-end-radius: 24px; border-end-end-radius: 24px;
  perspective: 1400px;
}
.cta-banner__phones .svc-hero__glow { top: 78%; width: 90%; }
.cta-banner__phones .svc-phone { --w: min(clamp(190px, 16vw, 270px), calc(var(--vis-h) * 0.42)); top: auto; }
.cta-banner__phones .svc-phone--back  { left: 22%; bottom: -24%; transform: rotate(-8deg); }
.cta-banner__phones .svc-phone--front { left: 48%; bottom: -34%; transform: rotate(6deg); }
/* rendered mockup with real screenshots: the whole phone and its shadow, centred in the card's
   picture half over the glow */
.cta-banner__mockup img {
  position: absolute; left: 50%; top: 50%;
  height: 90%; width: auto; max-width: none;
  translate: -50% -50%;
  pointer-events: none; user-select: none;
}
.cta-banner__phones:has(.cta-banner__mockup) .svc-hero__glow { top: 50%; }

@media (max-width: 900px) {
  .cta-banner { padding-inline: 12px; }
  .cta-banner__card { display: block; min-height: 0; }
  .cta-banner__photo { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 24px 24px 0 0; }
  .cta-banner__photo::after,
  .cta-banner__photo:dir(ltr)::after { background: linear-gradient(to bottom, rgba(22, 24, 28, 0) 50%, var(--h10-ink) 100%); }
  .cta-banner__copy { width: auto; padding: 8px 20px 32px; gap: 18px; }
  .cta-banner__phones { --vis-h: 560px; position: relative; width: 100%; height: min(78vw, 380px); border-radius: 24px 24px 0 0; }
  .cta-banner__phones .svc-phone { --w: min(40vw, 210px); }
  .cta-banner__phones .svc-phone--back  { left: 14%; bottom: -40%; }
  .cta-banner__phones .svc-phone--front { left: 46%; bottom: -52%; }
  .cta-banner__phones:has(.cta-banner__mockup) { height: min(112vw, 480px); }
}