/* ============================================================
   CAAT Hero — Component CSS
   AEM client library: caat/components/hero/clientlibs/css
   Depends on: tokens.css (consumes SEMANTIC tokens)
   ============================================================ */

.caat-composable-hero { position: relative; }

.caat-hero-frame {
  position: relative;
  border-radius: var(--caat-radius-lg);
  overflow: visible;
}

.caat-hero-media {
  min-height: 22rem;
  border-radius: var(--caat-radius-lg);
  background: linear-gradient(135deg, var(--caat-blue-100) 0%, var(--caat-grey-200) 38%, var(--caat-blue-300) 100%);
  box-shadow: var(--caat-shadow);
  position: relative;
  overflow: hidden;
}
.caat-hero-media > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  position: absolute; inset: 0;
}
.caat-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--caat-overlay-side);
  z-index: 1;
}

/* Layout only — the visual skin (glass background, signature corner,
   hover lift) comes from the canonical .caat-hero-panel (caat-base.css);
   compose both classes in markup. */
.caat-hero-card {
  width: min(28rem, calc(100% - 2rem));
  position: absolute;
  left: 2rem; bottom: 1.5rem; top: auto;
  transform: none;
  z-index: 2;
}

.caat-hero-card .accent-rule {
  width: 12rem; max-width: 70%; height: .35rem;
  background: var(--caat-green); /* decorative brand accent — spacing via .caat-stack */
}
.caat-hero-card .caat-hero-card__title {
  color: var(--caat-white) !important;
}
.caat-hero-card .caat-hero-card__summary {
  color: var(--caat-white-88) !important;
}
.caat-hero-card .btn { border-color: var(--caat-white); color: var(--caat-color-text-inverse); }
.caat-hero-card .btn:hover,
.caat-hero-card .btn:focus-visible { background: var(--caat-white); color: var(--caat-color-action-primary); }

/* ── Slight overlap variant ────────────────────────────────── */
.caat-hero-slight-overlap .caat-hero-media {
  min-height: 22rem !important;
  border-radius: var(--caat-radius-lg) var(--caat-radius-lg) 0 0 !important;
}
.caat-hero-slight-overlap .caat-hero-card {
  position: absolute !important;
  left: 2rem !important; top: auto !important; right: auto !important; bottom: 1.5rem !important;
  transform: none !important; margin: 0 !important;
  width: min(28rem, calc(100% - 4rem)) !important;
  background: var(--caat-color-bg-brand) !important;
  border-radius: 0 0 3rem 0 !important;
  padding: 1.5rem !important;
  box-shadow: var(--caat-shadow) !important;
  z-index: 2;
}
.caat-hero-slight-overlap .caat-hero-card:hover {
  transform: translateY(var(--caat-lift-row)) !important;
}
.caat-hero-slight-overlap .caat-hero-card .accent-rule {
  height: .25rem;
}

/* ── Stats strip ──────────────────────────────────────────────
   COMPOSES the Stat/KPI component (.caat-stat-strip / .caat-stat-item,
   stat.css). The trust bar stays square; no extra radius is applied here. */

.caat-hero-media--gradient {
  background:
    radial-gradient(circle at 18% 18%, rgba(149,227,92,.30), transparent 28%),
    radial-gradient(circle at 78% 28%, rgba(157,210,237,.34), transparent 32%),
    linear-gradient(135deg, var(--caat-green-100) 0%, #cfeaf4 24%, #66b6d8 52%, var(--caat-blue) 76%, var(--caat-blue-900) 100%);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .caat-hero-media { min-height: 18rem; }
  .caat-hero-card {
    position: relative; left: auto; top: auto; bottom: auto;
    transform: none; margin: -3rem 1rem 0; width: auto;
  }
  .caat-hero-slight-overlap .caat-hero-media { min-height: 15rem !important; }
  .caat-hero-slight-overlap .caat-hero-card {
    left: .75rem !important;
    width: calc(100% - 1.5rem) !important;
    padding: 1.15rem !important;
    border-radius: 0 0 2.5rem 0 !important;
  }
}

@media (max-width: 575.98px) {
  .caat-hero-media { min-height: 14rem; border-radius: var(--caat-radius); }
  .caat-hero-card { margin: -2.5rem .75rem 0; padding: 1.15rem; border-radius: 0 0 2.5rem 0; }
  .caat-hero-card h3 { font-size: 1.35rem; }
  .caat-hero-card .accent-rule {
    height: .25rem;
    width: 8rem;
    margin-inline: auto;
  }
}