/* ============================================
   HOMEPAGE BILLBOARD
   Optional background + text box at the top of the homepage.
   Gradient backgrounds reuse .promo-hero--animationN from
   promo-hero-animations.css rather than redefining them.
   ============================================ */

.billboard {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-surface-inverse, #0e1628);
}

.billboard__background {
    position: absolute;
    inset: 0;
    background-image: var(--billboard-bg-image);
    background-position: var(--billboard-bg-position, center);
    background-size: cover;
    z-index: 1;
}

.billboard__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 1;
}

.billboard__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: var(--space-xl) var(--space-md);
}

.billboard__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--space-sm) 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.billboard__title--solo {
    font-size: var(--font-size-3xl);
    margin-bottom: 0;
}

.billboard__body {
    font-size: var(--font-size-md);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.billboard__body--solo {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.billboard__link-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
}