/* ============================================================
   aziHero.css
   Landing page hero and pages hero (Services, Products, etc.)
   Class names match the approved Default.aspx design.

   All colour values come from tokens in aziBase.css.
   ============================================================ */


/* ============================================================
   LANDING PAGE HERO  (.hero)
   Full-bleed dark section with photo zone, SVG mesh overlay,
   eyebrow label, title, subtitle, buttons, and stats bar.
   ============================================================ */

.hero {
    position:   relative;
    overflow:   hidden;
    background: var(--color-navy);
    padding:    68px 0 80px;
}


/* ── Geometric mesh SVG ─────────────────────────────────── */
/* Place inline SVG with class="hero-mesh" immediately inside .hero */

.hero-mesh {
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    pointer-events: none;
    z-index:        1;
    opacity:        0.12;
}


/* ── Right-side photo zone ──────────────────────────────── */
/* Gradient placeholder when no image is set.
   To use a real photograph:
   1. Set background-image via inline style or the has-photo class
   2. Add class="hero-photo-zone has-photo" to the div
   The ::after gradient keeps the text legible regardless.       */

.hero-photo-zone {
    position:            absolute;
    right:               0;
    top:                 0;
    bottom:              0;
    width:               50%;
    z-index:             0;
    background-size:     cover;
    background-position: center right;
    /* Gradient placeholder — overridden when has-photo is set  */
    background-image:    linear-gradient(
                           135deg,
                           #0B3A5C 0%,
                           #1565A0 40%,
                           var(--color-primary) 80%,
                           var(--color-primary-lt) 100%
                         );
    opacity:             0.32;
}

/* When a real photograph is supplied — raise opacity and let
   the ::after gradient provide the text-protection overlay    */
.hero-photo-zone.has-photo {
    opacity:    1;
    transition: opacity 0.7s ease;  /* crossfade duration — match FADE_MS in aziHeroPreload.js */
}

.hero-photo-zone::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
                  to right,
                  var(--color-navy) 0%,
                  rgba(7, 24, 40, 0.70) 40%,
                  rgba(7, 24, 40, 0.20) 75%,
                  transparent 100%
                );
}


/* ── Photo placeholder hint ─────────────────────────────── */
/* Visual indicator shown until a real photograph is placed   */

.hero-photo-hint {
    position:       absolute;
    right:          90px;
    top:            50%;
    transform:      translateY(-50%);
    z-index:        2;
    text-align:     center;
    opacity:        0.28;
    pointer-events: none;
}

.hero-photo-hint i {
    font-size:     2.4rem;
    color:         var(--white);
    display:       block;
    margin-bottom: 6px;
}

.hero-photo-hint span {
    font-family:    var(--font-heading);
    font-size:      0.54rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--white);
}


/* ── Hero content wrapper ───────────────────────────────── */

.hero-content {
    position:   relative;
    z-index:    2;
    max-width:  580px;
}


/* ── Eyebrow label ──────────────────────────────────────── */

.eyebrow {
    display:        block;
    font-family:    var(--font-heading);
    font-size:      0.62rem;
    font-weight:    500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color:          var(--hero-eyebrow);
    margin-bottom:  14px;
    opacity:        0.90;
}


/* ── Hero title ─────────────────────────────────────────── */

.hero-title {
    font-family:    var(--font-heading);
    font-size:      2.35rem;
    font-weight:    300;
    line-height:    1.22;
    color:          var(--white);
    margin-bottom:  1.1rem;
    letter-spacing: 0.02em;
}

/* Accent colour span — teal highlight within title */
.hero-title .acc {
    color:       var(--hero-title-accent);
    font-weight: 400;
}


/* ── Hero subtitle ──────────────────────────────────────── */

.hero-sub {
    font-size:     0.95rem;
    color:         rgba(255, 255, 255, 0.50);
    line-height:   1.76;
    font-weight:   300;
    margin-bottom: 2rem;
}


/* ── Hero buttons row ───────────────────────────────────── */

.hero-btns {
    display:   flex;
    gap:       14px;
    flex-wrap: wrap;
}


/* ── Stats bar ──────────────────────────────────────────── */

.hero-stats {
    display:      flex;
    gap:          44px;
    margin-top:   48px;
    padding-top:  26px;
    border-top:   1px solid var(--hero-stat-divider);
    flex-wrap:    wrap;
}

.stat-n {
    font-family:    var(--font-heading);
    font-size:      1.8rem;
    font-weight:    300;
    color:          var(--hero-stat-number);
    display:        block;
    letter-spacing: 0.02em;
}

.stat-l {
    font-size:      0.6rem;
    color:          var(--hero-stat-label);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top:     2px;
}


/* ============================================================
   PAGES HERO  (.pages-hero)
   Compact hero used on Services, Products, Contact, and
   individual product sub-pages.
   ============================================================ */

.pages-hero {
    position:   relative;
    overflow:   hidden;
    background: var(--color-navy-hero);
    padding:    42px 0;
}

/* Same mesh SVG works here — just add class="hero-mesh" */

.pages-hero .eyebrow {
    color: var(--hero-pages-eyebrow);   /* primary teal for pages */
}

.pages-hero h1 {
    font-family:    var(--font-heading);
    font-size:      1.9rem;
    font-weight:    300;
    letter-spacing: 0.03em;
    color:          var(--white);
    margin-bottom:  0.65rem;
    line-height:    1.2;
    position:       relative;
    z-index:        2;
}

.pages-hero p {
    color:       var(--hero-pages-subtitle);
    font-size:   0.92rem;
    line-height: 1.72;
    max-width:   600px;
    font-weight: 300;
    margin:      0;
    position:    relative;
    z-index:     2;
}

/* Hardware pages — darker base, hw-teal accents */
.pages-hero.hw-hero {
    background: var(--color-navy);
}

.pages-hero.hw-hero .eyebrow {
    color: var(--color-hw-lt);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    .hero {
        padding: 44px 0 52px;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .hero-sub {
        font-size: 0.92rem;
    }

    .hero-btns {
        flex-direction: column;
        align-items:    flex-start;
    }

    .hero-stats {
        gap: 28px;
    }

    .stat-n {
        font-size: 1.55rem;
    }

    /* Hide photo zone and hint on mobile */
    .hero-photo-zone,
    .hero-photo-hint {
        display: none;
    }

    .pages-hero {
        padding: 32px 0;
    }

    .pages-hero h1 {
        font-size: 1.55rem;
    }
}