/* ==========================================================================
   Denty — Closing CTA banner
   One full-width photo card (assets/фон cta.png — plain blue atmosphere)
   with the offer text on the left and a cutout doctor photo
   (assets/врач для cta.png) anchored bottom-right. Paint order (back to
   front): the CSS background photo, then .cta-banner-card::before's
   left-to-right scrim, then the doctor <img> (a real element, so it
   paints above that scrim and stays undarkened), then the text content.
   Colors reuse existing tokens/components rather than introducing new
   ones — .cta-btn / .cta-arrow are the exact same classes the Header uses
   for its own "Записаться" button (white pill, dark text), not a lookalike.
   ========================================================================== */

.cta-banner {
  width: 100%;
  padding-inline: var(--container-padding);
  /* ~7.3cm below the cases grid (was 5.3cm, pushed down another 2cm). */
  margin-top: 276px;
  margin-bottom: 160px;
}

.cta-banner-inner {
  max-width: var(--container-width);
  margin-inline: auto;
}

.cta-banner-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: clamp(400px, 34vw, 500px);
  display: flex;
  align-items: center;
  background-image: url("../assets/фон cta.png");
  background-size: cover;
  background-position: center;
}

/* The photo's own left side already reads as fairly plain/dark blue, but a
   text layer needs a guaranteed-legible floor under it regardless of
   exactly where the bubbles/glass in the source photo land — a soft
   left-to-right scrim, not a flat tint, so the photo still reads through. */
.cta-banner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 18, 48, 0.55) 0%, rgba(4, 18, 48, 0.28) 42%, rgba(4, 18, 48, 0) 68%);
}

.cta-banner-doctor {
  position: absolute;
  right: 0;
  bottom: 0;
  /* width/height both auto + both max- constraints (not a fixed height)
     is what keeps this proportional — pairing a hard height:100% with a
     max-width cap fights itself: the box goes narrow-but-still-full-height,
     and object-fit:contain then shrinks the whole image to fit that
     distorted box instead of just capping it. */
  width: auto;
  height: auto;
  max-width: 58%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  user-select: none;
}

.cta-banner-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 64px 72px;
}

.cta-banner-title {
  font-family: var(--font-base);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.cta-banner-title-muted {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.cta-banner-actions {
  margin-top: 36px;
}

/* ================================================================== */
/* Responsive                                                          */
/* ================================================================== */

@media (max-width: 1240px) {
  .cta-banner {
    margin-top: 160px;
    margin-bottom: 130px;
  }

  .cta-banner-content {
    padding: 48px 56px;
  }
}

@media (max-width: 860px) {
  .cta-banner {
    margin-top: 120px;
    margin-bottom: 100px;
  }

  .cta-banner-card {
    min-height: auto;
    aspect-ratio: 4 / 5;
    align-items: flex-end;
    border-radius: 20px;
  }

  .cta-banner-card::before {
    background: linear-gradient(0deg, rgba(4, 18, 48, 0.75) 0%, rgba(4, 18, 48, 0.35) 55%, rgba(4, 18, 48, 0.05) 100%);
  }

  .cta-banner-content {
    max-width: none;
    padding: 32px;
  }

  .cta-banner-actions {
    margin-top: 28px;
  }
}

@media (max-width: 560px) {
  .cta-banner {
    margin-top: 90px;
    margin-bottom: 80px;
  }

  .cta-banner-card {
    aspect-ratio: 3 / 4;
  }

  .cta-banner-title {
    font-size: 26px;
  }

  .cta-banner-btn {
    width: 100%;
    justify-content: center;
  }
}