/* Black Week 2026 hero (includes/index/box_promo_hero.inc.php).
   Background: render on the campaign backdrop, mat on the right (desktop 1983 x 793 = 5:2,
   phones 1080 x 1350 = 4:5, mat in the lower half). Copy sits on the dark left / top part.
   The section keeps its own dark palette in night mode too. */

.alu-promo-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid #ee780e;
    background: #070707;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.alu-promo-hero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* below the design width the image is cropped from the left and the mat comes closer to the copy */
.alu-promo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(7, 7, 7, .85) 0%, rgba(7, 7, 7, .55) 38%, rgba(7, 7, 7, 0) 62%);
    pointer-events: none;
}

.alu-promo-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: clamp(500px, 40vw, 793px);
    padding: 56px clamp(24px, 5vw, 110px);
}

/* night mode paints every div/p/h1; keep the campaign colours */
html.night-mode .alu-promo-hero div.darkModeDiv,
html.night-mode .alu-promo-hero section.darkModeSection { background-color: transparent !important; }
html.night-mode .alu-promo-hero .alu-promo-hero__title,
html.night-mode .alu-promo-hero p { color: #ffffff; }

.alu-promo-hero__eyebrow {
    margin: 0 0 6px;
    font-size: clamp(16px, 1.7vw, 34px);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ffffff;
}

.alu-promo-hero__eyebrow span { color: #ee780e; }

/* custom.css sets h1 to 22px !important */
.alu-promo-hero__title {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: clamp(24px, 2.5vw, 50px) !important;
    line-height: 1.12;
    color: #ffffff;
}

.alu-promo-hero__big {
    margin-left: -.04em;
    font-size: 4.6em;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.03em;
    color: #ee780e;
}

.alu-promo-hero__big small {
    margin-left: .04em;
    font-size: .62em;
    vertical-align: .32em;
}

.alu-promo-hero__lead {
    max-width: 15em;
    margin-top: .1em;
    font-weight: 700;
}

.alu-promo-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin-top: clamp(18px, 1.6vw, 30px);
    font-size: clamp(15px, 1.5vw, 30px);
}

.alu-promo-hero__code {
    padding: .3em .75em;
    border: 3px dashed #ee780e;
    border-radius: 12px;
    font-weight: 600;
}

.alu-promo-hero__code b {
    font-weight: 800;
    letter-spacing: .04em;
}

.alu-promo-hero__date {
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

.alu-promo-hero__btn,
.alu-promo-hero__btn:hover,
.alu-promo-hero__btn:focus {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    margin-top: clamp(20px, 1.6vw, 30px);
    padding: .6em 1.15em;
    border-radius: 10px;
    background: #ee780e;
    color: #ffffff;
    font-size: clamp(16px, 1.5vw, 30px);
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease;
}

.alu-promo-hero__btn:hover { background: #d4690b; }

/* style.css colours every link on hover (a:not(.btn):not(.badge):hover -> #EE780E), which made
   the label orange on orange; this selector outranks it */
.alu-promo-hero .alu-promo-hero__content a.alu-promo-hero__btn:hover,
.alu-promo-hero .alu-promo-hero__content a.alu-promo-hero__btn:focus,
.alu-promo-hero .alu-promo-hero__content a.alu-promo-hero__btn:active {
    color: #ffffff;
    text-decoration: none;
}

.alu-promo-hero .alu-promo-hero__content a.alu-promo-hero__btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.alu-promo-hero__btn svg { width: .9em; height: .9em; }

/* phones: 4:5 artwork, copy on the dark top, mat in the lower half */
@media (max-width: 767.98px) {
    .alu-promo-hero::before {
        background: linear-gradient(180deg, rgba(7, 7, 7, .6) 0%, rgba(7, 7, 7, .25) 45%, rgba(7, 7, 7, 0) 60%);
    }

    .alu-promo-hero__bg img { object-position: center bottom; }

    .alu-promo-hero__content {
        justify-content: flex-start;
        min-height: 125vw;
        padding: 7vw 7vw 8vw;
    }

    .alu-promo-hero__eyebrow { font-size: 3.7vw; }
    .alu-promo-hero__title { font-size: 5vw !important; }
    .alu-promo-hero__row { font-size: 3.2vw; gap: 2vw 3vw; margin-top: 3vw; }
    .alu-promo-hero__code { border-width: 2px; }
    .alu-promo-hero__btn { margin-top: auto; font-size: 4.2vw; }
}