/* ==========================================================================
   Premium Section Heading widget
   BEM: .jivhala-eyebrow__*, .jivhala-title__*, .jivhala-decorative--*
   Global component reused by every future section widget.
   ========================================================================== */

.jivhala-section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.jivhala-section-heading[data-align="center"] { align-items: center; }
.jivhala-section-heading[data-align="right"] { align-items: flex-end; }
.jivhala-section-heading[data-align="justify"] { align-items: stretch; }

/* ---------- Glass wrapper variant ---------- */

.jivhala-section-heading--glass-yes {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-soft);
}

/* ---------- Eyebrow ---------- */

.jivhala-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--color-primary);
}

.jivhala-eyebrow--uppercase {
  text-transform: uppercase;
}

.jivhala-eyebrow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1em;
  line-height: 1;
}

.jivhala-eyebrow__icon svg {
  width: 1em;
  height: 1em;
}

/* ---------- Title ---------- */

.jivhala-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-heading);
  margin: 0;
}

.jivhala-title__highlight {
  color: var(--color-primary);
}

.jivhala-title--gradient {
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* When gradient text is active, a per-word highlight still needs to
   read clearly rather than inheriting the transparent fill. */
.jivhala-title--gradient .jivhala-title__highlight {
  -webkit-text-fill-color: currentColor;
}

/* ---------- Subtitle ---------- */

.jivhala-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-body);
  margin: 0;
}

/* ---------- Decorative element ---------- */

.jivhala-decorative {
  display: block;
  background-color: var(--color-primary);
}

.jivhala-decorative--line {
  width: 60px;
  height: 4px;
  border-radius: var(--radius-full);
}

.jivhala-decorative--gradient-line {
  width: 60px;
  height: 4px;
  border-radius: var(--radius-full);
  background-image: var(--gradient-primary);
  background-color: transparent;
}

.jivhala-decorative--dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
}

.jivhala-decorative--underline {
  width: 48px;
  height: 3px;
  border-radius: var(--radius-full);
  margin-top: calc(-1 * var(--space-xs));
}

/* ---------- Animation hook ----------
   Uses the same paused/is-visible pattern as the theme's global
   animations.css so this widget's motion stays consistent with the
   rest of the site, driven by assets/js/widgets/section-heading.js. */

.jivhala-animate {
  opacity: 0;
  animation-play-state: paused;
}

.jivhala-animate.is-visible {
  animation-play-state: running;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
  .jivhala-section-heading {
    text-align: left;
  }
}