/* ==========================================================
   RESTART METABOLISMU – POSLEDNÍ CTA
   Text vlevo, zvětšený a jemně rozplynutý mockup vpravo
========================================================== */

.rm-final-cta {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  padding: 82px 30px 84px !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      ellipse at 92% 50%,
      rgba(93, 169, 66, .055),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfaf7 100%
    ) !important;
  box-sizing: border-box !important;
}

.rm-final-cta *,
.rm-final-cta *::before,
.rm-final-cta *::after {
  box-sizing: border-box !important;
}

/* Jemné oddělení od předchozí sekce */

.rm-final-cta::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: min(1180px, calc(100% - 60px)) !important;
  height: 1px !important;
  background: rgba(24, 61, 51, .08) !important;
  transform: translateX(-50%) !important;
}

/* ==========================================================
   VNITŘNÍ ROZLOŽENÍ
========================================================== */

.rm-final-cta__inner {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns:
    minmax(420px, .86fr)
    minmax(580px, 1.14fr) !important;
  align-items: center !important;
  gap: 26px !important;
  width: min(1240px, calc(100% - 24px)) !important;
  min-height: 510px !important;
  margin: 0 auto !important;
}

/* ==========================================================
   TEXTOVÁ ČÁST
========================================================== */

.rm-final-cta__content {
  position: relative !important;
  z-index: 3 !important;
  max-width: 550px !important;
  padding-left: 8px !important;
}

.rm-final-cta__eyebrow {
  margin: 0 0 18px !important;
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #5da942 !important;
}

.rm-final-cta__title {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 !important;
}

.rm-final-cta__title .small {
  display: block !important;
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(26px, 2.3vw, 34px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
  color: #6f706d !important;
}

.rm-final-cta__title .big {
  display: block !important;
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(48px, 4.6vw, 66px) !important;
  font-weight: 700 !important;
  line-height: 1.03 !important;
  letter-spacing: -.05em !important;
  color: #183d33 !important;
}

/* ==========================================================
   ZELENÉ TLAČÍTKO
========================================================== */

.rm-final-cta__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  min-width: 310px !important;
  min-height: 62px !important;
  margin-top: 42px !important;
  padding: 17px 34px !important;
  border: 1px solid rgba(60, 120, 45, .18) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      135deg,
      #68a942 0%,
      #4f913d 100%
    ) !important;
  box-shadow:
    0 16px 32px rgba(79, 145, 61, .20),
    0 3px 9px rgba(48, 55, 49, .04) !important;
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #ffffff !important;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease !important;
}

.rm-final-cta__button::after {
  content: "→" !important;
  display: inline-block !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transition: transform .25s ease !important;
}

.rm-final-cta__button:hover,
.rm-final-cta__button:focus {
  background:
    linear-gradient(
      135deg,
      #609f3d 0%,
      #438333 100%
    ) !important;
  box-shadow:
    0 21px 38px rgba(79, 145, 61, .25),
    0 4px 11px rgba(48, 55, 49, .05) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-3px) !important;
}

.rm-final-cta__button:hover::after,
.rm-final-cta__button:focus::after {
  transform: translateX(5px) !important;
}

.rm-final-cta__button:focus-visible {
  outline: 3px solid rgba(93, 169, 66, .24) !important;
  outline-offset: 5px !important;
}

/* ==========================================================
   OBRÁZEK – ZVĚTŠENÍ, OŘEZ A FADE
========================================================== */

.rm-final-cta__image {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: stretch !important;
  min-width: 0 !important;
  margin-right: -86px !important;
}

/*
   Jemné bílé rozplynutí mezi textem a obrázkem.
   Překrývá pouze levou část mockupu.
*/

.rm-final-cta__image::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: -10% !important;
  bottom: -10% !important;
  left: -2px !important;
  width: 25% !important;
  background:
    linear-gradient(
      90deg,
      #fcfbf8 0%,
      rgba(252, 251, 248, .92) 25%,
      rgba(252, 251, 248, .48) 63%,
      transparent 100%
    ) !important;
  pointer-events: none !important;
}

/* Měkká záře pod produktem */

.rm-final-cta__image::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 14% !important;
  right: 5% !important;
  bottom: 10% !important;
  left: 18% !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .78) !important;
  filter: blur(42px) !important;
  pointer-events: none !important;
}

.rm-final-cta__image img {
  display: block !important;
  width: 800px !important;
  max-width: none !important;
  height: 500px !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: 44% 50% !important;
  opacity: .97 !important;
  filter:
    brightness(1.025)
    contrast(.97)
    saturate(.96)
    drop-shadow(0 24px 34px rgba(48, 55, 49, .09)) !important;

  /*
     Samotný obrázek se vlevo postupně rozpouští.
     WebKit verze je důležitá hlavně pro Safari.
  */

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, .18) 7%,
      rgba(0, 0, 0, .82) 20%,
      #000 35%,
      #000 100%
    ) !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, .18) 7%,
      rgba(0, 0, 0, .82) 20%,
      #000 35%,
      #000 100%
    ) !important;

  transition:
    transform .35s ease,
    filter .35s ease !important;
}

/* Jemná interakce pouze na zařízeních s myší */

@media (hover: hover) and (pointer: fine) {
  .rm-final-cta__image:hover img {
    transform: translateX(-5px) scale(1.012) !important;
    filter:
      brightness(1.035)
      contrast(.98)
      saturate(.98)
      drop-shadow(0 28px 39px rgba(48, 55, 49, .11)) !important;
  }
}

/* ==========================================================
   MENŠÍ DESKTOP
========================================================== */

@media (max-width: 1180px) {
  .rm-final-cta__inner {
    grid-template-columns:
      minmax(390px, .9fr)
      minmax(520px, 1.1fr) !important;
    gap: 20px !important;
    width: min(1080px, calc(100% - 24px)) !important;
  }

  .rm-final-cta__image {
    margin-right: -105px !important;
  }

  .rm-final-cta__image img {
    width: 730px !important;
    height: 470px !important;
  }
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {
  .rm-final-cta {
    padding: 70px 24px 20px !important;
  }

  .rm-final-cta__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    min-height: 0 !important;
    text-align: center !important;
  }

  .rm-final-cta__content {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
  }

  .rm-final-cta__title .small {
    font-size: 28px !important;
  }

  .rm-final-cta__title .big {
    font-size: clamp(44px, 7vw, 56px) !important;
  }

  .rm-final-cta__button {
    margin-top: 35px !important;
  }

  .rm-final-cta__image {
    justify-content: center !important;
    align-self: auto !important;
    width: min(820px, calc(100% + 70px)) !important;
    margin: 0 -35px -18px !important;
  }

  .rm-final-cta__image::before {
    display: none !important;
  }

  .rm-final-cta__image img {
    width: 100% !important;
    max-width: 820px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;

    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
      ) !important;

    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
      ) !important;
  }
}

/* ==========================================================
   MOBIL
========================================================== */

@media (max-width: 640px) {
  .rm-final-cta {
    padding: 54px 17px 8px !important;
  }

  .rm-final-cta::before {
    width: calc(100% - 34px) !important;
  }

  .rm-final-cta__inner {
    width: 100% !important;
    gap: 27px !important;
  }

  .rm-final-cta__eyebrow {
    margin-bottom: 14px !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }

  .rm-final-cta__title {
    gap: 14px !important;
  }

  .rm-final-cta__title .small {
    font-size: 21px !important;
    line-height: 1.35 !important;
  }

  .rm-final-cta__title .big {
    font-size: clamp(36px, 11.5vw, 46px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
  }

  .rm-final-cta__button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin-top: 29px !important;
    padding: 15px 20px !important;
    font-size: 15.5px !important;
  }

  .rm-final-cta__image {
    width: calc(100% + 52px) !important;
    margin: 0 -26px -4px !important;
  }

  .rm-final-cta__image::after {
    top: 12% !important;
    right: 5% !important;
    bottom: 6% !important;
    left: 5% !important;
    filter: blur(26px) !important;
  }

  .rm-final-cta__image img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    opacity: .98 !important;
    filter:
      brightness(1.025)
      contrast(.98)
      saturate(.97)
      drop-shadow(0 16px 21px rgba(48, 55, 49, .07)) !important;

    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
      ) !important;

    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
      ) !important;
  }
}

/* ==========================================================
   MALÉ MOBILY
========================================================== */

@media (max-width: 380px) {
  .rm-final-cta__title .small {
    font-size: 19px !important;
  }

  .rm-final-cta__title .big {
    font-size: 35px !important;
  }

  .rm-final-cta__button {
    font-size: 14.5px !important;
  }
}

/* ==========================================================
   OMEZENÍ ANIMACÍ
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .rm-final-cta__button,
  .rm-final-cta__button::after,
  .rm-final-cta__image img {
    transition: none !important;
  }

  .rm-final-cta__button:hover,
  .rm-final-cta__button:focus,
  .rm-final-cta__image:hover img {
    transform: none !important;
  }
}