/* =========================================================
   ALPHA STRIKE — HERO COMPONENT
   Version: 1.0
   Status: Locked
   ========================================================= */


/* =========================================================
   1. DEMO FOUNDATION
   ========================================================= */

.alpha-hero-demo {
    max-width: var(--alpha-container-max);
    margin: 0 auto;
    padding: var(--alpha-spacing-6);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-body);
}


/* =========================================================
   2. HERO FOUNDATION
   ========================================================= */

.alpha-hero {
    position: relative;

    display: flex;
    align-items: center;

    /* 520px -> 440px, 2026-08-13: with the v1.2 type scale (H1 now
       51px/two lines vs. the old 29px) the content itself takes up
       more of the box, so the old fixed min-height was leaving a lot
       of dead air below the CTA row before the next section started.
       Paired with .as-section--flush-top on the section immediately
       after each hero, which removes the double top-padding that was
       stacking on top of this. */
    min-height: 440px;

    padding:
        var(--alpha-spacing-12)
        0;
}


/* =========================================================
   3. HERO CONTENT
   ========================================================= */

.alpha-hero__content {
    max-width: 760px;
}


/* =========================================================
   4. EYEBROW
   ========================================================= */

.alpha-hero__eyebrow {
    margin: 0 0 var(--alpha-spacing-3);

    color: var(--alpha-text-accent);

    font-size: var(--alpha-font-size-caption);
    font-weight: var(--alpha-font-weight-bold);

    letter-spacing: var(--alpha-letter-spacing-label);
    text-transform: uppercase;
}


/* =========================================================
   5. TITLE
   ========================================================= */

.alpha-hero__title {
    margin: 0;

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-chapter-title);
    font-weight: var(--alpha-font-weight-bold);

    line-height: var(--alpha-line-height-tight);
}


/* =========================================================
   6. DESCRIPTION
   ========================================================= */

.alpha-hero__description {
    max-width: 680px;

    margin:
        var(--alpha-spacing-5)
        0
        0;

    color: var(--alpha-text-secondary);

    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-body);
}


/* =========================================================
   7. ACTIONS
   ========================================================= */

.alpha-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--alpha-spacing-3);

    margin-top: var(--alpha-spacing-6);
}


/* =========================================================
   7B. VISUAL (featured graphic, division pages only)
   Additive, not part of the original locked spec: fills the
   empty right-hand column .alpha-hero leaves when its flex
   content maxes out at 760px on wide viewports. Desktop only -
   on mobile the hero is already tight, and a second column
   would just push the real content down. Per imagery.md Sec 6/8:
   structured data/network diagram, single accent colour, no
   fabricated screenshots or photography.
   ========================================================= */

.alpha-hero__visual {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.alpha-hero__visual svg {
    width: 100%;
    max-width: 420px;
    height: auto;
}

@media (min-width: 1024px) {
    .alpha-hero__visual {
        display: flex;
    }
}


/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .alpha-hero-demo {
        padding: var(--alpha-spacing-4);
    }

    .alpha-hero {
        min-height: auto;

        padding:
            var(--alpha-spacing-8)
            0;
    }

    .alpha-hero__content {
        max-width: none;
    }

    .alpha-hero__title {
        font-size: var(--alpha-font-size-h1);
    }

    .alpha-hero__description {
        max-width: none;
    }

    .alpha-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .alpha-hero__actions .alpha-button {
        width: 100%;
    }
}


/* =========================================================
   9. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .alpha-hero__actions .alpha-button {
        transition: none;
    }
}