/* ============================================================
   css/components/hero.css
   Zolto v8.1.0 — Hero Sections & Banner Components
   ============================================================
   Purpose:
   - .zolto-hero       — full-width hero/banner section
   - Layout variants: centered, split, media-left, media-right
   - Background variants: solid, gradient, image, video
   - Hero sub-elements: eyebrow, title, subtitle, actions, media
   - Presentation title slides reuse these patterns
   - All values via CSS custom properties from variables.css
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Hero Base
   ───────────────────────────────────────────────────────────── */

.zolto-hero {
  position:       relative;
  display:        flex;
  align-items:    center;
  width:          100%;
  overflow:       hidden;
  border-radius:  var(--radius-xl);
  margin-bottom:  var(--prose-block-gap);
  background:     var(--bg-surface);
  border:         1px solid var(--border-subtle);
  min-height:     var(--hero-min-height, 320px);
  padding:        var(--hero-padding-y, var(--space-16))
                  var(--hero-padding-x, var(--space-12));
}

/* Remove radius when hero spans full preview width */
.zolto-hero.zolto-hero-full {
  border-radius: 0;
  border-left:   none;
  border-right:  none;
  margin-left:   calc(-1 * var(--preview-padding-x));
  margin-right:  calc(-1 * var(--preview-padding-x));
  width:         calc(100% + 2 * var(--preview-padding-x));
}


/* ─────────────────────────────────────────────────────────────
   2. Hero Layouts
   ───────────────────────────────────────────────────────────── */

/* Centered (default) */
.zolto-hero-centered {
  justify-content: center;
  text-align:      center;
}

.zolto-hero-centered .zolto-hero-content {
  align-items: center;
}

/* Split — content left, media right */
.zolto-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-10);
}

/* Media left */
.zolto-hero-media-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-10);
}

.zolto-hero-media-left .zolto-hero-media {
  order: -1;
}

/* Tall / editorial */
.zolto-hero-tall {
  min-height: var(--hero-tall-min-height, 480px);
}

/* Compact */
.zolto-hero-compact {
  min-height:        200px;
  padding:           var(--space-8) var(--space-10);
}


/* ─────────────────────────────────────────────────────────────
   3. Hero Background Variants
   ───────────────────────────────────────────────────────────── */

/* Gradient backgrounds */
.zolto-hero-gradient-primary {
  background: linear-gradient(
    135deg,
    var(--accent-primary-subtle)   0%,
    var(--bg-surface)              100%
  );
  border-color: var(--accent-primary-border);
}

.zolto-hero-gradient-success {
  background: linear-gradient(
    135deg,
    var(--intent-success-bg) 0%,
    var(--bg-surface)        100%
  );
  border-color: var(--intent-success-border);
}

.zolto-hero-gradient-danger {
  background: linear-gradient(
    135deg,
    var(--intent-danger-bg) 0%,
    var(--bg-surface)       100%
  );
  border-color: var(--intent-danger-border);
}

.zolto-hero-gradient-dark {
  background: linear-gradient(
    135deg,
    var(--bg-canvas) 0%,
    var(--bg-app)    100%
  );
}

.zolto-hero-gradient-mesh {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.12) 0%, transparent 60%),
    var(--bg-canvas);
}

/* Solid intent fills */
.zolto-hero-primary {
  background:   var(--intent-primary-bg);
  border-color: var(--intent-primary-border);
}

.zolto-hero-glass {
  background:            var(--surface-glass);
  backdrop-filter:       blur(var(--surface-glass-blur));
  -webkit-backdrop-filter: blur(var(--surface-glass-blur));
}

/* Background image — set via inline style --hero-bg-image */
.zolto-hero-image {
  background-image:    var(--hero-bg-image, none);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}

/* Scrim over background image */
.zolto-hero-image::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.30) 60%,
    rgba(0, 0, 0, 0.10) 100%
  );
  pointer-events: none;
}

.zolto-hero-image.zolto-hero-centered::before {
  background: rgba(0, 0, 0, 0.45);
}


/* ─────────────────────────────────────────────────────────────
   4. Hero Content Block
   ───────────────────────────────────────────────────────────── */

.zolto-hero-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  position:       relative;
  z-index:        1;
  max-width:      var(--hero-content-max-width, 560px);
}

.zolto-hero-centered .zolto-hero-content {
  max-width: var(--hero-content-max-width, 680px);
}


/* ─────────────────────────────────────────────────────────────
   5. Hero Text Elements
   ───────────────────────────────────────────────────────────── */

/* Eyebrow — small label above title */
.zolto-hero-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1-5);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--accent-primary);
  line-height:    1;
}

/* Eyebrow with pill background */
.zolto-hero-eyebrow-pill {
  background:    var(--accent-primary-subtle);
  border:        1px solid var(--accent-primary-border);
  border-radius: var(--radius-full);
  padding:       0.3em 0.75em;
}

/* Title */
.zolto-hero-title {
  font-family:    var(--font-sans);
  font-size:      clamp(var(--heading-2), 4vw, var(--heading-1));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--text-heading);
  margin:         0;
}

/* Title on image background */
.zolto-hero-image .zolto-hero-title {
  color: #ffffff;
}

/* Display / editorial title (larger, serif) */
.zolto-hero-title-display {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--weight-normal);
}

/* Gradient text */
.zolto-hero-title-gradient {
  background: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

/* Subtitle */
.zolto-hero-subtitle {
  font-size:   clamp(var(--text-base), 2vw, var(--text-xl));
  color:       var(--text-mute);
  line-height: var(--leading-relaxed);
  max-width:   52ch;
  margin:      0;
}

.zolto-hero-image .zolto-hero-subtitle {
  color: rgba(255, 255, 255, 0.80);
}

/* Body copy below subtitle */
.zolto-hero-body {
  font-size:   var(--text-base);
  color:       var(--text-mute);
  line-height: var(--leading-relaxed);
  margin:      0;
}


/* ─────────────────────────────────────────────────────────────
   6. Hero Actions Row
   ───────────────────────────────────────────────────────────── */

.zolto-hero-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-wrap:   wrap;
  margin-top:  var(--space-2);
}

.zolto-hero-centered .zolto-hero-actions {
  justify-content: center;
}

/* Social proof / trust line below actions */
.zolto-hero-trust {
  font-size:   var(--text-xs);
  color:       var(--text-faint);
  display:     flex;
  align-items: center;
  gap:         var(--space-1-5);
  flex-wrap:   wrap;
  line-height: var(--leading-snug);
}

.zolto-hero-trust-dot {
  width:         3px;
  height:        3px;
  border-radius: var(--radius-full);
  background:    var(--text-faint);
  flex-shrink:   0;
}


/* ─────────────────────────────────────────────────────────────
   7. Hero Media (image / illustration / video side)
   ───────────────────────────────────────────────────────────── */

.zolto-hero-media {
  position:  relative;
  z-index:   1;
  flex:      1;
  min-width: 0;
}

.zolto-hero-media img,
.zolto-hero-media video {
  width:         100%;
  height:        auto;
  border-radius: var(--radius-lg);
  display:       block;
  object-fit:    cover;
}

/* Media with shadow for depth */
.zolto-hero-media.zolto-hero-media-elevated img {
  box-shadow: var(--shadow-2xl);
}

/* Media with border */
.zolto-hero-media.zolto-hero-media-bordered img {
  border: 1px solid var(--border-normal);
}

/* Browser/phone mockup frame */
.zolto-hero-browser-frame {
  background:    var(--bg-surface);
  border:        1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-xl);
}

.zolto-hero-browser-bar {
  height:     36px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
  display:    flex;
  align-items: center;
  padding:    0 var(--space-4);
  gap:        var(--space-1-5);
}

.zolto-hero-browser-dot {
  width:         10px;
  height:        10px;
  border-radius: var(--radius-full);
}

.zolto-hero-browser-dot:nth-child(1) { background: #ef4444; }
.zolto-hero-browser-dot:nth-child(2) { background: #f59e0b; }
.zolto-hero-browser-dot:nth-child(3) { background: #22c55e; }

.zolto-hero-browser-content img {
  border-radius: 0;
  display:       block;
}


/* ─────────────────────────────────────────────────────────────
   8. Hero Stats Row
   ───────────────────────────────────────────────────────────── */

.zolto-hero-stats {
  display:        flex;
  gap:            var(--space-8);
  flex-wrap:      wrap;
  padding-top:    var(--space-4);
  border-top:     1px solid var(--border-faint);
  margin-top:     var(--space-2);
}

.zolto-hero-centered .zolto-hero-stats {
  justify-content: center;
}

.zolto-hero-stat {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-0-5);
}

.zolto-hero-stat-value {
  font-size:       var(--text-3xl);
  font-weight:     var(--weight-bold);
  color:           var(--text-heading);
  line-height:     var(--leading-none);
  letter-spacing:  var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.zolto-hero-stat-label {
  font-size:   var(--text-xs);
  color:       var(--text-faint);
  font-weight: var(--weight-medium);
}

.zolto-hero-image .zolto-hero-stat-value,
.zolto-hero-image .zolto-hero-stat-label {
  color: rgba(255, 255, 255, 0.85);
}


/* ─────────────────────────────────────────────────────────────
   9. Hero Logo Strip
   ───────────────────────────────────────────────────────────── */

.zolto-hero-logos {
  display:         flex;
  align-items:     center;
  gap:             var(--space-6);
  flex-wrap:       wrap;
  padding-top:     var(--space-4);
  border-top:      1px solid var(--border-faint);
  margin-top:      var(--space-2);
}

.zolto-hero-centered .zolto-hero-logos {
  justify-content: center;
}

.zolto-hero-logos-label {
  font-size:      var(--text-xs);
  color:          var(--text-faint);
  font-weight:    var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  white-space:    nowrap;
}

.zolto-hero-logo {
  height:     24px;
  width:      auto;
  opacity:    0.45;
  filter:     grayscale(100%);
  transition: opacity var(--duration-fast) var(--ease-out),
              filter  var(--duration-fast) var(--ease-out);
}

.zolto-hero-logo:hover {
  opacity: 0.75;
  filter:  grayscale(0%);
}


/* ─────────────────────────────────────────────────────────────
   10. Announcement Banner (narrow hero)
   ───────────────────────────────────────────────────────────── */

.zolto-banner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  padding:         var(--space-3) var(--space-6);
  background:      var(--accent-primary-subtle);
  border:          1px solid var(--accent-primary-border);
  border-radius:   var(--radius-full);
  font-size:       var(--text-sm);
  color:           var(--text-main);
  margin-bottom:   var(--prose-block-gap);
  line-height:     var(--leading-snug);
  flex-wrap:       wrap;
  text-align:      center;
}

.zolto-banner-tag {
  background:    var(--accent-primary);
  color:         #ffffff;
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  padding:       0.2em 0.6em;
  border-radius: var(--radius-full);
  flex-shrink:   0;
  white-space:   nowrap;
}

.zolto-banner-link {
  color:           var(--accent-primary);
  font-weight:     var(--weight-medium);
  text-decoration: none;
  white-space:     nowrap;
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
}

.zolto-banner-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ─────────────────────────────────────────────────────────────
   11. Presentation Slide Title Layout
       Reuses hero tokens for consistency in presentations
   ───────────────────────────────────────────────────────────── */

.zolto-slide-title .zolto-hero-title {
  font-size:   clamp(var(--heading-2), 5vw, var(--heading-1));
}

.zolto-slide-title .zolto-hero-subtitle {
  font-size:   clamp(var(--text-base), 2.5vw, var(--text-xl));
}


/* ─────────────────────────────────────────────────────────────
   12. Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .zolto-hero {
    padding:    var(--space-10) var(--space-6);
    min-height: 260px;
  }

  .zolto-hero-split,
  .zolto-hero-media-left {
    grid-template-columns: 1fr;
  }

  .zolto-hero-media-left .zolto-hero-media {
    order: 0;
  }

  .zolto-hero-stats {
    gap: var(--space-5);
  }

  .zolto-hero-stat-value {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  .zolto-hero {
    padding:       var(--space-8) var(--space-4);
    border-radius: var(--radius-lg);
    min-height:    200px;
  }

  .zolto-hero-full {
    border-radius: 0;
    margin-left:   calc(-1 * var(--space-3));
    margin-right:  calc(-1 * var(--space-3));
    width:         calc(100% + var(--space-6));
  }

  .zolto-hero-actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .zolto-hero-logos {
    gap: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zolto-hero-title-gradient {
    -webkit-text-fill-color: var(--accent-primary);
  }
}