/* ============================================================
   .uk-hero — unified canonical hero (loaded only on /docs/ui-kit)
   ============================================================
   Replaces five legacy hero declarations:
     .hero (style.css, home)
     .price-hero (pricing.css)
     .education-hero (education.css)
     .product-news-hero (product-news.css)
     .locations-hero (locations.css)
     .tools-hero (tools.css)

   Slots (BEM-ish, all optional):
     .uk-hero                       root section
       .uk-hero-container           centred 1280px column, z-index 1
         .uk-hero-badge             eyebrow row (gradient-text label)
         .uk-hero-title             large headline
           .uk-hero-title-line      one block line (stacks on mobile)
           .uk-hero-title-gradient  gradient-painted line
         .uk-hero-subtitle          supporting paragraph
         .uk-hero-cta               wrapper (margin only)
           .uk-hero-cta-cluster     inflex button pair
         .uk-hero-stats             stats row
           .uk-hero-stat            value + label cell
             .uk-hero-stat-value
             .uk-hero-stat-label
           .uk-hero-stat-divider    1px vertical rule between stats
         .uk-hero-visual            dashboard / illustration slot

   Density modifiers:
     default      home-page (clamp(2.5→4.5rem) title, full breathing room)
     --compact    content pages (Pricing/Education/Product News): font-section
     --tight      narrow tops (Locations / Tools): no min-height, slim padding

   Backdrop modifiers (no extra DOM needed):
     --with-grid  dotted grid via ::before
     --with-glow  --gradient-hero overlay via ::after
   ============================================================ */

.uk-hero {
    position: relative;
    overflow: hidden;
    padding: var(--layout-hero-top, 8rem) var(--space-lg) var(--space-4xl);
    text-align: center;
}

.uk-hero--full {
    min-height: 100vh;
    padding-bottom: var(--space-4xl);
}

.uk-hero--compact {
    padding-top: var(--layout-hero-top, 8rem);
    padding-bottom: var(--section-padding-y, 5rem);
}

.uk-hero--tight {
    padding-top: var(--layout-hero-top, 8rem);
    padding-bottom: var(--section-padding-y-tight, 3rem);
}

/* ---- Backdrop modifiers ---- */
.uk-hero--with-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 30%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.uk-hero--with-glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    background: var(--gradient-hero, radial-gradient(ellipse 80% 50% at 50% 0%, rgba(81, 150, 206, 0.15), transparent 70%));
    pointer-events: none;
    z-index: 0;
}

/* ---- Container ---- */
.uk-hero-container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
}

/* ---- Badge ---- */
.uk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 0;
    font-size: var(--font-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-light);
    margin-bottom: var(--space-xl);
}

.uk-hero-badge > * {
    background: linear-gradient(135deg, #5196CE 0%, #F88C21 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Title ---- */
.uk-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-lg);
    color: var(--color-text);
}

.uk-hero--compact .uk-hero-title,
.uk-hero--tight .uk-hero-title {
    font-size: var(--font-section, clamp(2rem, 4vw, 3rem));
    margin-bottom: var(--space-md);
}

.uk-hero-title-line {
    display: block;
}

.uk-hero-title-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
}

/* ---- Subtitle ---- */
.uk-hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--color-text-secondary);
    max-width: 680px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.7;
}

.uk-hero-subtitle strong {
    color: var(--color-text);
    font-weight: 600;
}

.uk-hero--compact .uk-hero-subtitle,
.uk-hero--tight .uk-hero-subtitle {
    font-size: var(--font-xl, clamp(1.05rem, 2vw, 1.25rem));
    max-width: 720px;
    line-height: var(--line-relaxed, 1.7);
    margin-bottom: var(--space-xl);
}

/* ---- CTA ---- */
.uk-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
}

.uk-hero--compact .uk-hero-cta,
.uk-hero--tight .uk-hero-cta {
    margin-bottom: 0;
}

.uk-hero-cta-cluster {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .uk-hero-cta-cluster {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .uk-hero-cta-cluster > .btn {
        width: 100%;
    }
}

/* ---- Stats ---- */
.uk-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.uk-hero-stat {
    text-align: center;
}

.uk-hero-stat-value {
    display: block;
    font-size: var(--font-4xl);
    font-weight: 700;
    line-height: var(--line-tight);
    color: var(--color-text);
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
}

.uk-hero-stat-label {
    font-size: var(--font-md);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.uk-hero-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--color-border);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .uk-hero-stats {
        gap: var(--space-md);
    }

    .uk-hero-stat-divider {
        display: none;
    }
}

/* ---- Visual slot ---- */
.uk-hero-visual {
    max-width: 1000px;
    margin: var(--space-4xl) auto 0;
    position: relative;
}

@media (max-width: 768px) {
    .uk-hero-visual {
        padding: 0 var(--space-lg);
    }
}