/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/

/* ============================================================
   INVESTMENT PAGE — Compare Packages (Robustní Grid)
   ============================================================ */

section#brxe-fdpkix {
    padding-bottom: 3px !important;
}

.compare-section {
  background-color: #fff !important;
  padding-bottom: 90px;
}

.compare-table-scroll {
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
  
  /* Povolení scrollu */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; 
}
.compare-table-scroll::-webkit-scrollbar {
  display: none;
}

.compare-table {
  /* Zabrání smrsknutí sloupců na mobilu, vynutí scroll */
  min-width: 760px; 
  width: 100%;
  border-top: 1px solid var(--surface-tan);
}

/* Každý řádek tvoří vlastní 100% lícující grid */
.compare-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.3fr 1fr 1fr 1fr;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border-bottom: 1px solid var(--surface-tan);
}

.compare-label, 
.compare-value {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  padding: 18px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* ── Levé sloupce (štítky) ── */
.compare-label {
  position: sticky;
  left: 0;
  background-color: #fff; /* Skryje text scrolující pod ním */
  z-index: 2;
  color: var(--text-label);
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

/* ── Pravé sloupce (hodnoty) ── */
.compare-value {
  color: var(--text-primary);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

/* ── Hlavička tabulky ── */
.compare-row--header {
  border-bottom: 2px solid var(--surface-tan);
}

.compare-row--header .compare-label,
.compare-row--header .compare-value {
  padding-block: 12px 20px;
}

.compare-row--header .compare-value {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 24px;
  color: var(--primary-color);
}

/* Zelené zvýraznění slova "included" */
.compare-value--highlight {
  color: var(--primary-color);
  font-weight: 400;
}

/* ── Mobilní úpravy ── */
/* ── Mobilní úpravy ── */
@media (max-width: 680px) {
  .compare-table-scroll {
    /* 1. Zrušíme levý padding kontejneru - opona půjde až ke kraji obrazovky */
    padding-left: 0 !important;
  }
  
  .compare-row {
    /* 2. Zvětšíme první sloupec o chybějící padding (původních 120px + 20px) */
    -ms-grid-columns: 140px 1fr 1fr 1fr;
    grid-template-columns: 140px 1fr 1fr 1fr; 
  }
  
  .compare-label {
    /* 3. Padding přesuneme přímo dovnitř sticky buňky. Její bílé pozadí teď text schová. */
    padding-left: 20px !important;
    -webkit-box-shadow: 4px 0 8px -4px rgba(55, 44, 39, 0.08);
            box-shadow: 4px 0 8px -4px rgba(55, 44, 39, 0.08); 
  }

  /* 4. Pevné bílé pozadí zaručíme i pro první (prázdnou) buňku v hlavičce s   */
  .compare-row--header .compare-label {
    background-color: #fff !important;
  }
  
  .compare-table {
    min-width: 680px; 
  }
  
  .compare-row--header .compare-value {
    font-size: 18px; 
  }
  
  .compare-value {
    font-size: 14px;
    padding-inline: 8px;
  }
}

/* ============================================================
   COMPARE PACKAGES - ELEGANT REVEAL (AKORDEON)
   ============================================================ */

/* Výchozí stav - skrytý obal */
.compare-collapse-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.6s ease;
  transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.6s ease;
  transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.6s ease, -ms-grid-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}

/* Vnitřní obsah je oříznutý a neviditelný */
.compare-collapse-inner {
  overflow: hidden;
  opacity: 0;
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
}

/* Otevřený stav po kliknutí (třídu přidává JS) */
.compare-collapse-wrapper.is-open {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  margin-top: 48px; /* Krásné odskočení tabulky od tlačítka dolů */
}

/* Rozšířený stav zviditelní obsah plynulým fade-in efektem */
.compare-collapse-wrapper.is-open > .compare-collapse-inner {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 0.6s ease 0.2s, -webkit-transform 0.6s ease 0.2s;
  transition: opacity 0.6s ease 0.2s, -webkit-transform 0.6s ease 0.2s;
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s, -webkit-transform 0.6s ease 0.2s; /* Zpoždění pro plynulost */
}

/* ============================================================
   INVESTMENT PAGE — Customise Your Experience
   Postaveno na existující .process-section (stejná sekce jako
   "A Stress-Free Experience..." na homepage) — jen nová třída
   pro zvýraznění ceny (process-step-price), zbytek dědí beze
   změny z homepage stylu.
   ============================================================ */

.process-step-price {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  background-color: var(--background-color);
  border: 1px solid var(--primary-color);
  border-radius: 20px;
  padding: 6px 18px;
  margin: 12px auto 16px;
}

@media (max-width: 680px) {
  .process-step-price { font-size: 13px; padding: 6px 16px; }
}

/* ============================================================
   INVESTMENT PAGE — Closing CTA banner
   Vlastní třída (investment-cta-*), ne "brand-intro" — obsahově
   je to jiný layout (centrovaný text, žádné foto duo), ale barvy
   a typografie jsou převzaté 1:1 z .brand-intro (mocha pozadí,
   krémový italický nadpis) tak, aby to ladilo se zbytkem webu.
   ============================================================ */

.investment-cta-section {
  background-color: var(--secondary-color);
  padding-block: var(--section-pad-y);
  text-align: center;
  overflow: hidden;
}

.investment-cta-heading {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  color: var(--background-color);
  font-size: var(--heading-lg);
  line-height: 1.3;
  max-width: 640px;
  margin: 0 auto 16px;
}

.investment-cta-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--background-color);
  margin: 0 auto 32px;
}

.investment-cta-btn {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid var(--background-color);
  border-radius: var(--radius-control);
  color: var(--background-color) !important;
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 15px;
  text-decoration: none !important;
  -webkit-transition: background-color .18s ease, color .18s ease;
  transition: background-color .18s ease, color .18s ease;
}
.investment-cta-btn:hover {
  background-color: var(--background-color);
  color: var(--secondary-color) !important;
}

@media (max-width: 680px) {
  .investment-cta-heading { font-size: 24px; }
}