/* ============================================================================
   WOW — HERO Component (Visuals Only)
   File: wow_css/basics/hero.css
   ----------------------------------------------------------------------------
   Uses semantic theme tokens provided by the canvas:
     --bg, --bg-1, --bg-2, --text, --text-muted, --border, --fresh-1, --fresh-2
   Structure: HEAD (bg-1) → MEDIA (cover + gradients) → DOWN (bg-1)
   Each section may override direction (rtl|ltr) and color theme.
   ========================================================================== */

/* noop anchor (easy to find file when scanning) */
#wow_hero_reset { display: none; }


/* ------------------------------------------------------------
   1) ROOT CONTAINER
   ------------------------------------------------------------ */
#wow_hero {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg-1);
  color: var(--text-muted);
  overflow: hidden;
  box-sizing: border-box;
}

/* direction handling */
#wow_hero[dir="rtl"] * { text-align: right; }
#wow_hero[dir="ltr"] * { text-align: left; }


/* ------------------------------------------------------------
   2) HEAD STRIP (TOP)
   ------------------------------------------------------------ */
#wow_hero_head {
  background: var(--bg-1);
  border-bottom: none;
  padding: 18px 16px 14px 16px;
}

.wow_hero_head_label {
  font-size: 16px;
  line-height: 1.25;
  opacity: 0.95;
}

.wow_hero_head_sublabel {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-muted);
}


/* ------------------------------------------------------------
   3) MEDIA (CENTER SECTION)
   ------------------------------------------------------------ */
#wow_hero_media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000; /* safety fallback */
}

/* media slot (video or image) */
.wow_hero_media_slot {
  display: block;
  width: 100%;
  height: auto;           /* instead of fixed clamp */
  aspect-ratio: 16 / 9;   /* optional, to control height ratio */
  object-fit: cover;
  object-position: center;
  max-height: 100vh;      /* safety limit */
}


/* gradient overlays */
.wow_hero_gradient_top,
.wow_hero_gradient_bottom {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.wow_hero_gradient_top {
  top: 0;
  height: 28%;
}

.wow_hero_gradient_bottom {
  bottom: 0;
  height: 36%;
}





/* ------------------------------------------------------------
   4) DOWN STRIP (BOTTOM)
   ------------------------------------------------------------ */
#wow_hero_down {
  background: var(--bg-1);
  border-top: none;
  padding: 16px 24px 0px 16px;
  margin-bottom: -50px;
}

/* meta row */
.wow_hero_down_meta {
  margin-bottom: 8px;
}

.wow_hero_by_label {
  opacity: 0.8;
}

.wow_hero_by_value {
  margin-inline-start: 8px;
}

/* text blocks inherit from wow_core typography */
.wow_hero_title {
  margin: 0;
  line-height: 0.7;
  color: var(--text-muted);
}

.wow_hero_subtitle {
  margin: 12px 0px 16px 32px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
}

.wow_hero_text {
  margin: 12px 0px 0px 0px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.95;
}

.wow_hero_text { white-space: pre-line; }

/* ------------------------------------------------------------
   5) RESPONSIVE POLISH
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  #wow_hero_head { padding: 14px 12px; }
  #wow_hero_down { padding: 14px 12px; }
}


/* ------------------------------------------------------------
   6) POSITION ADJUSTMENTS
   ------------------------------------------------------------ */
#wow_hero_down {
  position: relative;
}

#wow_hero_down > * {
  position: relative;
  top: -50px;
}