/**
 * CGI Frontpage Hero Widget Stylesheet
 * 
 * Standards:
 * - 1rem = 10px (HTML font-size: 62.5%)
 * - Strict Mobile-First (zero max-width media queries)
 * - BEM architecture
 */

.cgi-hero {
    --cgi-hero-padding-block: 14rem;
    --cgi-hero-padding-inline: 0;
    --cgi-hero-h1-size: 3.2rem;
    --cgi-hero-eyebrow-size: 1.4rem;
    position: relative;
    background-color: var(--cgi-color-dark, #1B2232);
    color: var(--cgi-color-text-light, #C9D1DE);
    padding: var(--cgi-hero-padding-block, 4.8rem) var(--cgi-hero-padding-inline, 2rem) var(--cgi-hero-padding-block, 4.8rem);
    overflow: hidden;
}

.cgi-hero__container {
    max-width: var(--cgi-container-max, 132rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
}

.cgi-hero__content {
    width: 100%;
}

.cgi-hero .cgi-hero__eyebrow,
.cgi-hero p.cgi-hero__eyebrow,
p.cgi-hero__eyebrow {
    margin: 0 0 1.4rem;
    color: var(--cgi-color-accent, #F68701);
    font-size: var(--cgi-hero-eyebrow-size, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
}

.cgi-hero .cgi-hero__headline,
.cgi-hero h1.cgi-hero__headline,
h1.cgi-hero__headline {
    margin: 0 0 2.4rem;
    color: var(--cgi-color-white, #FFFFFF);
    font-size: var(--cgi-hero-h1-size, 3.2rem);
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
}

.cgi-hero__text {
    margin: 0 0 3.2rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--cgi-color-text-light, #C9D1DE);
}

.cgi-hero__text p {
    margin: 0 0 1.6rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: inherit;
}

.cgi-hero__text p:first-child {
    font-size: 1.8rem;
    color: var(--cgi-color-text-bright, #E8ECF3);
}

.cgi-hero__text a {
    color: var(--cgi-color-accent-subtle, #FFB45C);
    text-decoration: underline;
    transition: var(--cgi-transition, all 0.2s ease-in-out);
}

.cgi-hero__text a:hover {
    color: var(--cgi-color-accent, #F68701);
}

.cgi-hero__buttons {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.cgi-hero .cgi-hero__btn,
a.cgi-hero__btn,
.cgi-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.4rem 2.8rem;
    font-family: var(--cgi-font-primary, 'Titillium Web', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--cgi-radius-sm, 0.4rem);
    transition: var(--cgi-transition, all 0.2s ease-in-out);
    text-align: center;
}

.cgi-hero__btn-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.cgi-hero__btn:hover .cgi-hero__btn-arrow {
    transform: translateX(0.4rem);
}

/* Button 1: Solid Accent */
.cgi-hero a.cgi-hero__btn.cgi-hero__btn--primary,
a.cgi-hero__btn.cgi-hero__btn--primary,
.cgi-hero__btn.cgi-hero__btn--primary {
    background-color: var(--cgi-color-accent, #F68701);
    color: var(--cgi-color-white, #FFFFFF);
    border: 0.1rem solid var(--cgi-color-accent, #F68701);
}

.cgi-hero a.cgi-hero__btn.cgi-hero__btn--primary:hover,
a.cgi-hero__btn.cgi-hero__btn--primary:hover,
.cgi-hero__btn.cgi-hero__btn--primary:hover {
    background-color: var(--cgi-color-accent-hover, #E4701D);
    border-color: var(--cgi-color-accent-hover, #E4701D);
    color: var(--cgi-color-white, #FFFFFF);
    text-decoration: none;
}

/* Button 2: Outline Accent */
.cgi-hero a.cgi-hero__btn.cgi-hero__btn--outline,
a.cgi-hero__btn.cgi-hero__btn--outline,
.cgi-hero__btn.cgi-hero__btn--outline {
    background-color: transparent;
    color: var(--cgi-color-accent, #F68701);
    border: 0.1rem solid var(--cgi-color-accent, #F68701);
}

.cgi-hero a.cgi-hero__btn.cgi-hero__btn--outline:hover,
a.cgi-hero__btn.cgi-hero__btn--outline:hover,
.cgi-hero__btn.cgi-hero__btn--outline:hover {
    background-color: var(--cgi-color-accent, #F68701);
    color: var(--cgi-color-white, #FFFFFF);
    text-decoration: none;
}

/* Button 3: Outline Emergency Red */
.cgi-hero a.cgi-hero__btn.cgi-hero__btn--emergency,
a.cgi-hero__btn.cgi-hero__btn--emergency,
.cgi-hero__btn.cgi-hero__btn--emergency {
    background-color: transparent;
    color: var(--cgi-color-emergency-light, #FF6B6B);
    border: 0.2rem solid var(--cgi-color-emergency, #E5383B);
}

.cgi-hero a.cgi-hero__btn.cgi-hero__btn--emergency:hover,
a.cgi-hero__btn.cgi-hero__btn--emergency:hover,
.cgi-hero__btn.cgi-hero__btn--emergency:hover {
    background-color: var(--cgi-color-emergency, #E5383B);
    color: var(--cgi-color-white, #FFFFFF);
    text-decoration: none;
}

.cgi-hero__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

.cgi-hero__btn-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

/* Media / Image Container */
.cgi-hero__media {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--cgi-radius-md, 0.8rem);
    overflow: hidden;
}

.cgi-hero__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: var(--cgi-radius-md, 0.8rem);
}

.cgi-hero__placeholder {
    width: 100%;
    min-height: 28rem;
    background-color: var(--cgi-color-dark-photo-bg, #2A3550);
    border: 0.1rem solid var(--cgi-color-dark-border, #3B4866);
    border-radius: var(--cgi-radius-md, 0.8rem);
    display: flex;
    align-items: flex-end;
    padding: 1.8rem;
    color: var(--cgi-color-text-light, #C9D1DE);
    font-size: 1.3rem;
}

/* Tablet Upward: xm (768px / 76.8rem) */
@media (min-width: 48em) {
    .cgi-hero {
        --cgi-hero-padding-block: 15rem;
        --cgi-hero-padding-inline: 2.4rem;
        --cgi-hero-h1-size: 4.4rem;
    }

    .cgi-hero__text p:first-child {
        font-size: 2rem;
    }

    .cgi-hero__text p {
        font-size: 1.7rem;
    }

    .cgi-hero__buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cgi-hero .cgi-hero__btn,
    a.cgi-hero__btn,
    .cgi-hero__btn {
        flex: 0 0 auto;
        font-size: 1.6rem;
    }
}

/* Desktop Upward: l (992px / 99.2rem) */
@media (min-width: 62em) {
    .cgi-hero {
        --cgi-hero-padding-block: 16rem;
        --cgi-hero-padding-inline: 2.4rem;
        --cgi-hero-h1-size: 5.4rem;
    }

    .cgi-hero__container {
        flex-direction: row;
        gap: 4.8rem;
        align-items: center;
    }

    .cgi-hero__content {
        flex: 999 1 56rem;
        min-width: 0;
    }

    .cgi-hero__media {
        flex: 1 1 42rem;
        min-width: 0;
    }

    .cgi-hero__placeholder {
        min-height: 44rem;
    }
}