/*
 * ZEVIVO HERO SYSTEM — v39
 * ============================================================
 * Unified Hero Typography + Visual + CTA System
 *
 * 4-Tier Hero Hierarchy:
 *   TIER 1 — Homepage Main Hero (Carousel)  → XL weight
 *   TIER 2 — Campaign / Trading Heroes      → LG weight
 *   TIER 3 — Inner Product Heroes           → MD weight
 *   TIER 4 — Utility / Legal Heroes         → SM weight
 *
 * All tokens sourced from design-tokens.css.
 * No magic numbers permitted in this file.
 * ============================================================
 */

/* ============================================================
   BACKWARD-COMPAT ALIASES
   Kept for any legacy selectors still referencing these names.
   Canonical tokens now live in design-tokens.css.
   ============================================================ */
:root {
  --hero-desc-lg:  var(--body-lg);
  --hero-desc-md:  var(--body-md);
  --hero-eyebrow:  var(--body-sm);
  --hero-padding-y: var(--space-xxl);
}

/* ============================================================
   TIER 1 — HOMEPAGE MAIN CAROUSEL
   Highest visual impact. Maximum typographic weight.
   ============================================================ */

/* Slide 1 — Primary H1 */
.slide-1-hero h1 {
  font-size: var(--hero-title-xl);
  line-height: 1.05;
  font-weight: 800;
  color: var(--color-text-inverse);
}

/* Slide 2 — Stacked H2 with span modifiers */
.slide-2-hero h2 {
  font-size: var(--hero-title-xl);
  line-height: 1;
  font-weight: 800;
  color: var(--color-text-inverse);
}
.slide-2-hero h2 .s1,
.slide-2-hero h2 .s2 {
  font-size: var(--hero-title-xl);
  letter-spacing: clamp(-1px, -0.15vw, -2px);
}

/* Slides 3–5 — Secondary H2 */
.slide-3-hero h2,
.slide-4-hero h2,
.slide-5-hero h2 {
  font-size: var(--hero-title-lg);
  line-height: 1.05;
  font-weight: 800;
  color: var(--color-text-inverse);
}

/* Eyebrow labels on carousel */
.slide-eyebrow,
.t-d,
.b-d {
  font-size: var(--body-sm);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ============================================================
   TIER 2 — CAMPAIGN / TRADING HEROES
   forex, commodities, metals, indices, shares, spreads
   ============================================================ */
.market-hero-title {
  font-size: var(--hero-title-lg);
  line-height: 1.1;
  font-weight: 800;
  color: var(--color-text-inverse);
}
.market-hero-desc {
  font-size: var(--body-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
}

/* ============================================================
   TIER 3 — INNER PRODUCT HEROES
   account-types, vps, partnership, contact
   ============================================================ */
.account-hero-title,
.vps-hero-title,
.partner-hero-title,
.contact-hero-title {
  font-size: var(--hero-title-md);
  line-height: 1.1;
  font-weight: 800;
  color: var(--color-text-inverse);
}

.account-hero-desc,
.vps-hero-desc,
.partner-hero-desc,
.contact-hero-desc {
  font-size: var(--body-md);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;
}

/* ============================================================
   TIER 4 — UTILITY / LEGAL HEROES
   metatrader5, webtrader, economic-calendar, legal pages
   ============================================================ */
.platform-hero-title,
.ec-hero-title,
.legal-hero h1 {
  font-size: var(--hero-title-sm);
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-text-inverse);
}

.platform-hero-desc,
.ec-hero-desc {
  font-size: var(--body-md);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  max-width: 460px;
}

/* ============================================================
   HERO CTA SYSTEM
   Unified CTA placement and spacing for all hero tiers
   ============================================================ */
.hero-btns,
.market-hero-cta,
.account-hero-cta,
.vps-hero-cta,
.partner-hero-cta,
.platform-hero-cta,
.ec-hero-cta,
.contact-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-lg);
}

/* ============================================================
   HERO VISUAL SYSTEM
   All hero images: responsive, no overflow
   ============================================================ */

/* Universal hero image rules */
[class*="-hero"] img,
[class*="hero-visual"] img,
.hero-visual img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Slide 2 MT5 screenshot — constrain on desktop */
.slide-2-hero .hero-visual img,
.slide-2-hero img:not(.logo) {
  max-width: 480px;
  width: 100%;
}

/* Market hero visuals */
.market-hero-visual img {
  max-width: 520px;
  width: 100%;
}

/* Platform hero visuals */
.platform-hero-visual img {
  max-width: 500px;
  width: 100%;
}

/* Download badge images (App Store / Google Play) */
.download-btns img {
  height: clamp(36px, 5vw, 48px);
  width: auto;
  max-width: none;
}

/* ============================================================
   MOBILE OVERRIDES — @media (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Carousel slides */
  .slide-1-hero,
  .slide-2-hero,
  .slide-3-hero,
  .slide-4-hero,
  .slide-5-hero {
    min-height: 420px;
    padding: var(--space-xl) 0 var(--space-lg);
  }

  /* Slide 2 MT5 image — hide on mobile (background image carries the visual) */
  .slide-2-hero .hero-visual,
  .slide-2-hero img:not(.logo) {
    display: none;
  }

  /* Slide 2 h2 letter-spacing reset on mobile */
  .slide-2-hero h2 .s1,
  .slide-2-hero h2 .s2 {
    letter-spacing: -1px;
  }

  /* All hero CTAs — stack vertically, full width, min 44px touch target */
  .hero-btns,
  .market-hero-cta,
  .account-hero-cta,
  .vps-hero-cta,
  .partner-hero-cta,
  .platform-hero-cta,
  .ec-hero-cta,
  .contact-hero-cta {
    flex-direction: column;
    gap: var(--space-xs);
    align-items: stretch;
  }

  .hero-btns .btn,
  .market-hero-cta .btn,
  .account-hero-cta .btn,
  .vps-hero-cta .btn,
  .partner-hero-cta .btn,
  .platform-hero-cta .btn,
  .ec-hero-cta .btn,
  .contact-hero-cta .btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
  }

  /* Market hero visual — hide on mobile */
  .market-hero-visual {
    display: none;
  }

  /* Inner page hero visuals — hide on mobile */
  .vps-hero-visual,
  .partner-hero-visual,
  .platform-hero-visual,
  .ec-hero-visual,
  .contact-hero-visual {
    display: none;
  }

  /* Desc text max-width reset on mobile */
  .market-hero-desc,
  .account-hero-desc,
  .vps-hero-desc,
  .partner-hero-desc,
  .contact-hero-desc,
  .platform-hero-desc,
  .ec-hero-desc {
    max-width: 100%;
  }

  /* Download buttons — wrap on mobile */
  .download-btns-wrapper {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
}