/* CMS homepage hero visual unification */
.cms-hero {
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle 860px at 52% 28%, oklch(64% 0.15 48 / .24) 0%, transparent 64%),
    radial-gradient(circle 640px at 80% 22%, color-mix(in oklch, var(--accent), transparent 68%), transparent 70%),
    radial-gradient(circle 520px at 13% 35%, oklch(52% 0.13 34 / .22), transparent 72%),
    radial-gradient(ellipse 92% 72% at 44% 58%, oklch(22% 0.075 38 / .34), transparent 76%),
    linear-gradient(118deg, oklch(9% 0.04 36) 0%, oklch(13% 0.055 39) 42%, oklch(16% 0.05 50) 64%, oklch(12% 0.032 66) 100%) !important;
}

.cms-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, oklch(100% 0 0 / .028) 1px, transparent 1px),
    linear-gradient(0deg, oklch(100% 0 0 / .02) 1px, transparent 1px),
    radial-gradient(ellipse 54% 58% at 58% 45%, oklch(74% 0.16 56 / .18), transparent 70%),
    radial-gradient(ellipse 38% 50% at 22% 72%, oklch(57% 0.16 31 / .16), transparent 76%);
  background-size: 78px 78px, 78px 78px, auto, auto !important;
  mask-image: radial-gradient(ellipse 88% 64% at 62% 34%, black 0%, transparent 84%) !important;
  opacity: .78 !important;
}

.cms-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, oklch(8% 0.035 36 / .78) 0%, transparent 32%, oklch(13% 0.046 44 / .12) 50%, transparent 70%, oklch(8% 0.025 54 / .34) 100%),
    linear-gradient(180deg, oklch(5% 0.025 40 / .12), transparent 42%, oklch(5% 0.025 40 / .32)) !important;
}

.cms-hero-grid.with-scenes {
  position: relative !important;
  z-index: 6 !important;
  grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr) !important;
  min-height: clamp(480px, 60vh, 700px) !important;
  align-items: center !important;
}

.cms-hero-grid.with-scenes::before,
.cms-hero-grid.with-scenes::after {
  content: '' !important;
  position: absolute !important;
  pointer-events: none !important;
  left: 3vw !important;
  right: 3vw !important;
  height: 1px !important;
  z-index: 8 !important;
  background: linear-gradient(90deg, transparent, oklch(76% 0.14 56 / .2), oklch(76% 0.14 56 / .48), transparent) !important;
  transform-origin: center !important;
}

.cms-hero-grid.with-scenes::before {
  top: 34% !important;
  transform: rotate(-7deg) !important;
  opacity: .44 !important;
}

.cms-hero-grid.with-scenes::after {
  top: 58% !important;
  transform: rotate(8deg) !important;
  opacity: .24 !important;
}

.cms-hero-grid.with-scenes .cms-hero-copy {
  z-index: 12 !important;
  padding: clamp(84px, 10vh, 118px) clamp(28px, 4.2vw, 64px) clamp(48px, 7vh, 72px) clamp(34px, 5.2vw, 72px) !important;
  max-width: 720px !important;
}

.cms-hero-grid.with-scenes .cms-hero-title {
  font-size: clamp(2.6rem, 5vw, 4.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
  margin-bottom: clamp(22px, 3vh, 30px) !important;
  text-shadow: 0 18px 54px oklch(0% 0 0 / .34) !important;
}

.cms-hero-grid.with-scenes .cms-hero-sub {
  max-width: 46ch !important;
  font-size: clamp(1rem, 1.18vw, 1.1rem) !important;
  line-height: 1.62 !important;
  color: oklch(94% 0.01 75 / .88) !important;
}

.cms-hero-grid.with-scenes .cms-hero-actions {
  margin-top: clamp(28px, 4vh, 38px) !important;
}

.cms-hero-grid.with-scenes .cms-hero-visual {
  position: relative !important;
  z-index: 9 !important;
  min-height: clamp(390px, 48vh, 520px) !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

.cms-hero-grid.with-scenes .cms-hero-visual::before {
  content: '' !important;
  position: absolute !important;
  inset: 7% auto 5% -26% !important;
  width: 50% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, oklch(74% 0.14 54 / .18), transparent) !important;
  filter: blur(28px) !important;
  opacity: .74 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.cms-hero-grid.with-scenes .cms-hero-visual::after {
  content: '' !important;
  position: absolute !important;
  inset: -5% -3% -4% -34% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, oklch(10% 0.042 40 / .58) 0%, oklch(10% 0.042 40 / .2) 16%, transparent 38%),
    radial-gradient(ellipse 70% 60% at 44% 50%, transparent 42%, oklch(9% 0.034 42 / .36) 100%) !important;
}

.cms-hero-grid.with-scenes .hero-carousel {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 660px) !important;
  height: clamp(390px, 48vh, 520px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 38px !important;
  transform: translateX(-2%) !important;
  mask-image: radial-gradient(ellipse 76% 68% at 54% 50%, black 0%, black 56%, transparent 84%) !important;
}

.cms-hero-grid.with-scenes .hc-track,
.cms-hero-grid.with-scenes .hc-visual {
  min-height: 0 !important;
  height: 100% !important;
}

.hero-featured-cards-wrap {
  z-index: 14 !important;
}

.hero-benefit-labels {
  justify-content: center !important;
  gap: clamp(.8rem, 2vw, 2rem) !important;
  margin-bottom: 1.1rem !important;
  padding-left: 0 !important;
}

.hero-benefit-item {
  font-size: .64rem !important;
  letter-spacing: .11em !important;
  color: oklch(100% 0 0 / .5) !important;
}

.hero-benefit-item svg {
  width: .86rem !important;
  height: .86rem !important;
}

.hero-featured-cards {
  grid-template-columns: repeat(8, minmax(142px, 1fr)) !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 12px 0 .4rem !important;
}

.hero-featured-cards.standalone {
  grid-template-columns: repeat(var(--cols, 3), 1fr) !important;
  overflow-x: visible !important;
  flex-wrap: wrap !important;
}

.hero-featured-cards::-webkit-scrollbar {
  display: none !important;
}

.hero-featured-card {
  min-height: 176px !important;
  padding: .98rem .92rem .86rem !important;
  border-radius: 18px !important;
  gap: .55rem !important;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / .075) 0%, oklch(100% 0 0 / .03) 55%, oklch(70% 0.13 46 / .075) 100%),
    oklch(15% 0.04 42 / .74) !important;
}

.hero-featured-icon {
  width: 2.12rem !important;
  height: 2.12rem !important;
  border-radius: 11px !important;
}

.hero-featured-icon svg {
  width: 1.02rem !important;
  height: 1.02rem !important;
}

.hero-featured-card h3 {
  font-size: 1rem !important;
  line-height: 1.14 !important;
}

.hero-featured-card p {
  font-size: .78rem !important;
  line-height: 1.45 !important;
  color: oklch(84% 0.018 70 / .78) !important;
}

.hero-featured-card span {
  font-size: .62rem !important;
  letter-spacing: .07em !important;
}

.card-content {
  gap: .4rem !important;
}

.card-arrow {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 auto !important;
}

@media (max-width: 1120px) {
  .cms-hero-grid.with-scenes {
    grid-template-columns: 1fr .92fr !important;
  }

  .hero-featured-cards {
    grid-template-columns: repeat(4, minmax(168px, 1fr)) !important;
  }

  .hero-featured-cards.standalone {
    grid-template-columns: repeat(min(var(--cols, 3), 4), minmax(168px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .cms-hero-grid.with-scenes {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .cms-hero-grid.with-scenes .cms-hero-copy {
    padding-top: 78px !important;
    padding-bottom: 24px !important;
  }

  .cms-hero-grid.with-scenes .cms-hero-visual {
    min-height: 320px !important;
    opacity: .86 !important;
  }

  .cms-hero-grid.with-scenes .hero-carousel {
    width: min(100%, 560px) !important;
    height: 320px !important;
    transform: none !important;
  }

  .hero-benefit-labels {
    justify-content: flex-start !important;
  }

  .hero-featured-cards {
    grid-template-columns: repeat(2, minmax(168px, 1fr)) !important;
  }
  
  .hero-featured-cards.standalone {
    grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(168px, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .cms-hero {
    background:
      radial-gradient(circle 420px at 72% 26%, color-mix(in oklch, var(--accent), transparent 72%), transparent 70%),
      radial-gradient(circle 360px at 12% 38%, oklch(50% 0.12 35 / .2), transparent 72%),
      radial-gradient(ellipse 90% 70% at 44% 58%, oklch(21% 0.07 38 / .3), transparent 76%),
      linear-gradient(128deg, oklch(9% 0.04 38), oklch(14% 0.046 46) 58%, oklch(11% 0.028 70)) !important;
  }

  .cms-hero-grid.with-scenes .cms-hero-copy {
    padding: 64px 20px 18px !important;
  }

  .cms-hero-grid.with-scenes .cms-hero-title {
    font-size: clamp(2.34rem, 13vw, 3.35rem) !important;
    margin-bottom: 20px !important;
  }

  .cms-hero-grid.with-scenes .cms-hero-sub {
    font-size: .98rem !important;
    line-height: 1.55 !important;
  }

  .cms-hero-grid.with-scenes .cms-hero-visual {
    min-height: 245px !important;
    opacity: .72 !important;
    overflow: hidden !important;
  }

  .cms-hero-grid.with-scenes .hero-carousel {
    height: 245px !important;
    width: 100% !important;
  }

  .hero-featured-cards-wrap {
    margin-top: 0 !important;
    padding-inline: 20px !important;
  }

  .hero-benefit-labels {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .72rem !important;
  }

}

@media (prefers-reduced-motion: reduce) {
  .cms-hero-grid.with-scenes .hero-carousel,
  .hero-featured-card,
  .card-arrow {
    transition: none !important;
    animation: none !important;
  }
}

/* --- New Card Styles --- */

/* text-only: Hide icon, adjust padding */
.hero-featured-cards.style-text-only .hero-featured-icon {
  display: none !important;
}
.hero-featured-cards.style-text-only .hero-featured-card {
  padding: 1.4rem 1.4rem !important;
}

/* list-item: Row layout, compact */
.hero-featured-cards.style-list-item {
  grid-template-columns: 1fr !important;
}
.hero-featured-cards.style-list-item .hero-featured-card {
  flex-direction: row !important;
  align-items: center !important;
  min-height: auto !important;
  padding: 1.1rem 1.4rem !important;
  gap: 1.2rem !important;
}
.hero-featured-cards.style-list-item .card-content {
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
}
.hero-featured-cards.style-list-item .card-content h3 {
  flex: 1 !important;
  margin: 0 !important;
}
.hero-featured-cards.style-list-item .card-content p {
  flex: 2 !important;
  margin: 0 !important;
}
.hero-featured-cards.style-list-item .card-footer {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

/* borderless: No visible border or card background */
.hero-featured-cards.style-borderless .hero-featured-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hero-featured-cards.style-borderless .hero-featured-card:hover {
  transform: translateY(-4px) !important;
}

/* index-card: Very minimal directory card */
.hero-featured-cards.style-index-card .hero-featured-icon {
  display: none !important;
}
.hero-featured-cards.style-index-card .hero-featured-card {
  min-height: auto !important;
  padding: 1.1rem 1.2rem !important;
  gap: .25rem !important;
}
.hero-featured-cards.style-index-card .card-footer {
  display: none !important;
}