/* Záverečná CTA poskladaná zo samostatných obrázkov. */
.final-cta {
  /* RUČNÉ NASTAVENIE CELEJ CTA SEKCIE */
  --final-cta-height: clamp(360px, 27vw, 480px);
  --final-cta-radius: 42px;

  /* Záporná hodnota približuje celú CTA sekciu k predchádzajúcej sekcii. */
  --final-cta-section-offset-y: -78px;

  /* Dekorácie zostávajú na pôvodnej polohe. */
  --final-cta-content-offset-y: 0px;

  /*
   * RUČNÉ NASTAVENIE POLOHY TEXTU
   * Kladná hodnota posunie celý textový blok nižšie.
   * Záporná hodnota ho posunie vyššie.
   */
  --final-cta-text-offset-y: 55px;

  /* Kladná hodnota posúva iba modré pozadie nižšie. */
  --final-cta-panel-offset-y: 50px;

  /*
   * Väčšia hodnota zväčší modrý podklad zvislo a vytiahne ho vyššie.
   * Pôvodná hodnota bola 186.2 %.
   */
  --final-cta-panel-height: 186.2%;

  /*
   * RUČNÉ NASTAVENIE KOMPASU
   * Šírka je zväčšená z 17 % na 22.1 % (+30 %).
   * Kladné X posúva doprava, záporné X doľava.
   * Kladné Y posúva dole, záporné Y hore.
   * Kladný uhol otáča kompas v smere hodinových ručičiek.
   */
  --final-cta-compass-width: 35.1%;
  --final-cta-compass-left: -1%;
  --final-cta-compass-y: 52%;
  --final-cta-compass-offset-x: -45px;
  --final-cta-compass-offset-y: -30px;
  --final-cta-compass-rotation: -35deg;

  /*
   * RUČNÉ NASTAVENIE PERGAMENU A STANU
   * Šírka je zväčšená z 23 % na 25.3 % (+10 %).
   * Záporné X posúva doľava, kladné X doprava.
   * Kladné Y posúva dole, záporné Y hore.
   * Kladný uhol otáča v smere hodinových ručičiek.
   */
  --final-cta-paper-width: 29.3%;
  --final-cta-paper-right: 0%;
  --final-cta-paper-y: 58%;
  --final-cta-paper-offset-x: -10px;
  --final-cta-paper-offset-y: -10px;
  --final-cta-paper-rotation: 15deg;

  /*
   * RUČNÉ NASTAVENIE ODTLAČKOV A TRASY
   * Záporné X posúva doľava, kladné X doprava.
   * Kladné Y posúva dole, záporné Y hore.
   * Kladný uhol otáča v smere hodinových ručičiek.
   */
  --final-cta-fingerprints-size: 22.5% auto;
  --final-cta-fingerprints-x: 5%;
  --final-cta-fingerprints-y: 86%;
  --final-cta-fingerprints-offset-x: -50px;
  --final-cta-fingerprints-offset-y: -180px;
  --final-cta-fingerprints-rotation: -10deg;

  position: relative;
  isolation: isolate;
  width: min(calc(100% - 56px), var(--max));
  min-height: var(--final-cta-height);
  display: flex;
  align-items: center;
  margin-top: var(--final-cta-section-offset-y);
  margin-inline: auto;
  padding: 26px 0;
  color: #fff;
  background: transparent;
  border-radius: var(--final-cta-radius) var(--final-cta-radius) 0 0;
  overflow: hidden;
}

/* Päta používa rovnakú maximálnu šírku ako CTA a ostatné hlavné kontajnery. */
.site-footer {
  width: min(calc(100% - 56px), var(--max));
  margin-inline: auto;
}

/*
 * Druhý obrázok je jediný základ celej sekcie.
 * Priehľadný okraj PNG je vykompenzovaný zvislým rozmerom pozadia.
 */
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translateY(var(--final-cta-panel-offset-y));
  border: 0;
  border-radius: 0;
  background-image: url("../assets/images/final-cta-panel.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% var(--final-cta-panel-height);
  pointer-events: none;
}

/* Samostatná vrstva s odtlačkami a trasou. */
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 1;
  transform-origin: center;
  transform:
    translate(
      var(--final-cta-fingerprints-offset-x),
      calc(
        var(--final-cta-content-offset-y) +
          var(--final-cta-fingerprints-offset-y)
      )
    )
    rotate(var(--final-cta-fingerprints-rotation));
  border: 0;
  border-radius: 0;
  background-image: url("../assets/images/final-cta-fingerprints-route.png");
  background-repeat: no-repeat;
  background-position:
    var(--final-cta-fingerprints-x)
    var(--final-cta-fingerprints-y);
  background-size: var(--final-cta-fingerprints-size);
  pointer-events: none;
}

.final-cta .cta-decoration {
  position: absolute;
  z-index: 2;
  display: block !important;
  max-width: none;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.final-cta .cta-left {
  width: var(--final-cta-compass-width);
  left: calc(var(--final-cta-compass-left) + var(--final-cta-compass-offset-x));
  right: auto;
  top: var(--final-cta-compass-y);
  bottom: auto;
  transform-origin: center;
  transform:
    translateY(
      calc(
        -50% + var(--final-cta-content-offset-y) +
          var(--final-cta-compass-offset-y)
      )
    )
    rotate(var(--final-cta-compass-rotation));
}

.final-cta .cta-right {
  width: var(--final-cta-paper-width);
  right: var(--final-cta-paper-right);
  left: auto;
  top: var(--final-cta-paper-y);
  bottom: auto;
  transform-origin: center;
  transform:
    translate(
      var(--final-cta-paper-offset-x),
      calc(
        -50% + var(--final-cta-content-offset-y) +
          var(--final-cta-paper-offset-y)
      )
    )
    rotate(var(--final-cta-paper-rotation));
}

.final-cta .final-cta-inner {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding-block: 20px;
  transform: translateY(var(--final-cta-text-offset-y));
}

.final-cta .cta-copy {
  width: min(44vw, 660px);
  max-width: 660px;
  margin-left: -1%;
  text-align: left;
}

.final-cta .cta-copy h2 {
  margin-bottom: 12px;
  color: #fff !important;
  font-size: clamp(2.2rem, 3.35vw, 3.45rem);
}

.final-cta .cta-copy p,
.final-cta .cta-meta {
  color: #fff;
}

.final-cta .cta-copy p strong {
  color: var(--yellow);
}

@media (max-width: 1050px) {
  .final-cta {
    --final-cta-section-offset-y: -52px;
    --final-cta-compass-width: 29.9%;
    --final-cta-compass-left: -12%;
    --final-cta-paper-width: 28.6%;
    --final-cta-paper-right: -12%;
    --final-cta-fingerprints-size: 46% auto;
    --final-cta-fingerprints-x: 44%;

    width: min(calc(100% - 32px), var(--max));
    min-height: 410px;
  }

  .site-footer {
    width: min(calc(100% - 32px), var(--max));
  }

  .final-cta .cta-copy {
    width: min(60vw, 620px);
  }
}

@media (max-width: 700px) {
  .final-cta {
    --final-cta-radius: 28px;
    --final-cta-section-offset-y: -24px;
    --final-cta-content-offset-y: 0px;
    --final-cta-panel-offset-y: 14px;
    --final-cta-panel-height: 200%;
    --final-cta-compass-width: 58.5%;
    --final-cta-compass-left: -42%;
    --final-cta-compass-y: 82%;
    --final-cta-paper-width: 50.6%;
    --final-cta-paper-right: -48%;
    --final-cta-paper-y: 84%;
    --final-cta-fingerprints-size: 67.5% auto;
    --final-cta-fingerprints-x: 48%;
    --final-cta-fingerprints-y: 72%;

    width: 100%;
    min-height: 500px;
    align-items: flex-start;
    margin-inline: 0;
    padding: 34px 0 150px;
  }

  .site-footer {
    width: 100%;
    margin-inline: 0;
  }

  /*
   * Mobilný PNG podklad má priehľadné časti. Pevná farba pod obrázkom
   * zabráni zobrazeniu krémového pozadia medzi CTA a pätou.
   */
  .final-cta::before {
    background-color: var(--navy);
  }

  .final-cta .final-cta-inner {
    width: min(calc(100% - 32px), 620px);
    padding: 0;
  }

  .final-cta .cta-copy {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .final-cta .cta-copy h2 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .final-cta .button-large {
    width: 100%;
    min-width: 0;
  }

  .final-cta .cta-meta {
    justify-content: center;
  }
}