/* ==========================================================================
   Texium Solutions — Hero widget
   Consumes design tokens from theme.css only. Buttons reuse the global
   .texium-btn system — no new button styles are declared here.
   ========================================================================== */

.texium-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--texium-space-lg);
  margin-inline: auto;
  text-align: center;
}

/* Badge */

.texium-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--texium-space-sm);
  padding: var(--texium-space-xs);
  border-radius: var(--texium-radius-pill);
  background: var(--texium-background-soft);
  border: 1px solid var(--texium-border);
  color: var(--texium-text);
  font-size: var(--texium-font-size-sm);
  text-decoration: none;
  transition: border-color var(--texium-transition-fast), background-color var(--texium-transition-fast);
}

a.texium-hero__badge:hover {
  border-color: var(--texium-primary-light);
  background: var(--texium-accent-tint);
}

.texium-hero__badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--texium-radius-pill);
  background: var(--texium-primary);
  color: var(--texium-text-inverse);
  font-size: var(--texium-font-size-xs);
  font-weight: var(--texium-weight-semibold);
}

.texium-hero__badge-text {
  color: var(--texium-text);
}

/* Heading */

.texium-hero__heading {
  margin: 0;
  max-width: 100%;
  font-family: var(--texium-font-heading);
  font-weight: var(--texium-weight-bold);
  line-height: var(--texium-leading-tight);
  letter-spacing: var(--texium-tracking-tight);
  /* Sits between --texium-font-size-h1 and --texium-font-size-display —
     no single token matches, so this widget defines its own clamp using
     the same fluid pattern as the rest of the type scale. */
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  color: #000;
  white-space: normal;
}

:root[data-theme='dark'] .texium-hero__heading {
  color: var(--texium-heading);
}

.texium-hero__gradient-text {
  /* Spans dark navy through to light cyan for real dark/light contrast,
     rather than the two-stop brand gradient (which stays mid-tone). */
  background: linear-gradient(
    100deg,
    var(--texium-primary-dark),
    var(--texium-x-blue) 35%,
    var(--texium-x-cyan) 65%,
    var(--texium-x-bright)
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: texium-hero-gradient-flow 5s ease-in-out infinite;
}

.texium-hero--gradient-premium .texium-hero__gradient-text {
  background: linear-gradient(
    100deg,
    var(--texium-primary-dark),
    var(--texium-primary-light) 40%,
    var(--texium-x-cyan) 70%,
    var(--texium-x-bright)
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.texium-hero--gradient-custom .texium-hero__gradient-text {
  background: linear-gradient(
    100deg,
    var(--texium-primary-dark),
    var(--texium-hero-gradient-from, var(--texium-x-blue)) 40%,
    var(--texium-hero-gradient-to, var(--texium-x-cyan)) 70%,
    var(--texium-x-bright)
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes texium-hero-gradient-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .texium-hero__gradient-text {
    animation: none;
  }
}

/* Subtext */

.texium-hero__subtext {
  margin: 0;
  max-width: 60ch;
  font-size: var(--texium-font-size-h4);
  font-weight: var(--texium-weight-semibold);
  line-height: var(--texium-leading-body);
  color: #000;
}

:root[data-theme='dark'] .texium-hero__subtext {
  color: var(--texium-text-muted);
}

.texium-hero__sparkle {
  display: inline-flex;
  color: currentColor;
}

.texium-hero__sparkle svg {
  width: 1em;
  height: 1em;
}

.texium-hero__actions .texium-btn--text::after {
  content: none;
}

/* Actions */

.texium-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--texium-space-lg);
  margin-top: var(--texium-space-sm);
}

@media (max-width: 600px) {
  .texium-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .texium-hero__actions .texium-btn {
    width: 100%;
  }
}