/* ============================================================
   Rocío – Brand Story (HP) + Benefit Banner
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   BRAND STORY – úvodní sekce na HP
────────────────────────────────────────────────────────── */

/* Wrapper – bez bočních glowů */
.brand-story-section {
  position: relative;
  z-index: 5;
  padding: 0 20px 32px;
}

.brand-story-section::before,
.brand-story-section::after {
  display: none !important;
}

/* Karta – bez bílého boxu, volně na béžovém pozadí */
.brand-story-card {
  max-width: 980px;
  margin: 0 auto;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s ease, transform .85s ease;
}

.brand-story-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Eyebrow */
.brand-story-eyebrow {
  display: block;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #AC8B63 !important;
  margin-bottom: 16px;
  font-family: "Neulis Alt", system-ui, sans-serif !important;
}

/* Nadpis */
.brand-story-title {
  font-size: clamp(28px, 3.2vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #003D5B !important;
  margin: 0 0 24px !important;
  letter-spacing: -0.01em;
  font-family: "Neulis Alt", system-ui, sans-serif !important;
}

/* Lead + body – plná barva, ne šedá */
.brand-story-lead {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: #003D5B !important;
  margin: 0 0 16px !important;
  font-family: "Neulis Alt", system-ui, sans-serif !important;
}

.brand-story-body p {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: #003D5B !important;
  margin: 0 0 0 !important;
  font-family: "Neulis Alt", system-ui, sans-serif !important;
}

/* Odkaz */
.brand-story-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #AC8B63 !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(172,139,99,.35);
  padding-bottom: 2px;
  transition: border-color .2s ease, gap .2s ease;
  font-family: "Neulis Alt", system-ui, sans-serif !important;
}

.brand-story-link:hover {
  border-color: #AC8B63;
  gap: 10px;
}

.brand-story-link span {
  transition: transform .2s ease;
}

.brand-story-link:hover span {
  transform: translateX(4px);
}

/* ──────────────────────────────────────────────────────────
   BENEFIT BANNER – tmavý pás
   Inspirace: tmavý strip s ikonami a textem vedle sebe
────────────────────────────────────────────────────────── */

.benefit-banners-full-width {
  padding: 40px 32px !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  position: relative;
}

.benefit-banners-full-width::before,
.benefit-banners-full-width::after {
  display: none !important;
}

.benefit-banners-full-width .container-full-width {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Tmavý pás */
.benefitBanner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  background: #003d5b !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin: 0 !important;
  align-items: stretch !important;
}

.benefitBanner.position--benefitHomepage,
.benefitBanner.position--benefitCategory {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Položka */
.benefitBanner__item {
  padding: 28px 28px !important;
  border-left: 0 !important;
  position: relative;
  transition: background .2s ease;
}

/* Svislý oddělovač */
.benefitBanner__item + .benefitBanner__item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 20px !important;
  bottom: 20px !important;
  right: auto !important;
  width: 1px !important;
  height: auto !important;
  background: rgba(255,255,255,.08) !important;
}

/* Bez zlaté linky nahoře – čistší */
.benefitBanner__item::after {
  display: none !important;
}

/* Hover */
.benefitBanner__item:hover {
  background: rgba(255,255,255,.04) !important;
}

/* Nadpis */
.benefitBanner__title {
  display: block !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em;
  font-family: "Neulis Alt", system-ui, sans-serif !important;
}

.benefitBanner__item:hover .benefitBanner__title {
  text-decoration: none !important;
  color: #D3C5AB !important;
}

/* Popis */
.benefitBanner__data {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.55) !important;
  max-width: none !important;
  font-family: "Neulis Alt", system-ui, sans-serif !important;
}

/* Zlatá linka vlevo jako accent */
.benefitBanner__content {
  padding-left: 16px;
  border-left: 2px solid #AC8B63;
}

/* ── Responsive – tablet ── */
@media (max-width: 768px) {
  .brand-story-section {
    padding: 40px 32px;
  }

  .brand-story-title {
    font-size: 26px !important;
  }

  .benefitBanner,
  .benefitBanner.position--benefitHomepage,
  .benefitBanner.position--benefitCategory {
    grid-template-columns: repeat(2, 1fr) !important;
    border-radius: 16px !important;
  }

  .benefitBanner__item:nth-child(3)::before,
  .benefitBanner__item:nth-child(4)::before {
    top: 0 !important;
    bottom: auto !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    height: 1px !important;
  }

  .benefitBanner__item {
    padding: 22px 20px !important;
  }
}

/* ── Responsive – mobil ── */
@media (max-width: 480px) {
  .brand-story-section {
    padding: 40px 32px;
  }

  .benefitBanner,
  .benefitBanner.position--benefitHomepage,
  .benefitBanner.position--benefitCategory {
    grid-template-columns: 1fr !important;
    border-radius: 14px !important;
  }

  .benefitBanner__item + .benefitBanner__item::before {
    top: 0 !important;
    bottom: auto !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    height: 1px !important;
  }

  .benefitBanner__item {
    padding: 18px 16px !important;
  }

  .brand-story-title {
    font-size: 24px !important;
  }
}