/* Hero Banner block (blocks/hero-banner) */
.hero-banner {
    position: relative;
    overflow: hidden;
    /* The theme's .post-info wrapper around single-post content has a 1px
       gold border at border-radius:33px with no padding between it and this
       block, so this radius has to nest inside that curve (33px - 1px
       border = 32px) or the near-square corner pokes past the outer curve. */
    border-radius: 2rem;
    background-color: #0B0B0C;
    background-image: var(--hero-banner-bg-desktop);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.hero-banner-mask {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
}
.hero-banner-mask-mobile {
    display: none;
}
.hero-banner-content {
    position: relative;
    z-index: 2;
    max-inline-size: 40rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 2.25rem;
}
.hero-banner-content .hero-banner-cta {
    color:#101828;
}
.hero-banner-countdown {
    margin-bottom:15px;
    display: inline-flex;
    align-items: baseline;
    gap: .375rem;
    background: #0F1115;
    
    border: 1px solid #4A4A50;;
    border-radius: 6.25rem;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .375rem .875rem;
}
.hero-banner-countdown .hero-banner-countdown-value {
    text-transform: lowercase;
    color:#E2C562;
    font-size: 16px;
}

.hero-banner-title {
    display: flex;
    flex-direction: column;
    text-align:left;
    line-height: 1.05;
    margin: 0;
}
.hero-banner-title-white {
    color: #FFFFFF;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 54px;
}
.hero-banner-title-gold {
    color: var(--yellow-span, #E2C562);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 66px;
}
.hero-banner-prize {
    display: flex;
    flex-direction: column;
    margin-top:20px;
}
.hero-banner-prize-label {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.hero-banner-prize-value {
    color: var(--yellow-span, #E2C562);
    background: var(--Linear, linear-gradient(180deg, #F7DE7C 12.81%, #FFF3A5 49.05%, #B27F2B 82.19%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 60px;
    line-height: 1em;
}
.hero-banner-cta-row {
    margin-top:30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    inline-size: 100%;
}
.hero-banner-cta {
    display: inline-block;
    background: var(--yellow-span, #E2C562);
    color: #1A1400;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    padding: .75rem 2rem;
    border-radius: 12px;
    margin-block-start: .25rem;
}
.hero-banner-cta:hover {
    filter: brightness(1.05);
}
.hero-banner-cta-row .hero-banner-cta {
    font-size: 24px;
}
/* Scoped as ".hero-banner .hero-banner-date" (not just ".hero-banner-date")
   so this reliably beats the theme's ".post-content P" rule in style.css,
   which targets this same <p> tag with higher specificity (a plain single
   class loses to a class+tag selector) - without editing style.css. That
   rule was silently forcing this date's line-height to 200% and its
   letter-spacing to 0. */
.hero-banner .hero-banner-date {
    color: #EAECF0;
    font-size: 16px;
    line-height: normal;
    letter-spacing: .05em;
    margin: 0;
}
.hero-banner-desc {
    max-inline-size: 613px;
    margin: 1.5rem auto 0;
    padding: 0 1.25rem;
    text-align: center;
    color: #9A9A9A;
    font-size: 18px;
    line-height: 1.6;
}
/* .hero-banner-desc renders as a sibling AFTER .hero-banner closes (not
   nested inside it), so there's no real ancestor to scope against here -
   the class is doubled instead purely to add a second class to the
   selector's specificity, matching ".post-content P" / ".post-content a"'s
   class+tag specificity so these explicit font-size/line-height values
   reliably win instead of style.css's without editing that file. Without
   this, .post-content P's font-size:16px/line-height:200% was silently
   overriding this description's intended 18px/1.6 sizing. */
.hero-banner-desc.hero-banner-desc p {
    margin: 0 0 .5rem;
    font-size: inherit;
    line-height: inherit;
}
.hero-banner-desc.hero-banner-desc p:last-child {
    margin-bottom: 0;
}
.hero-banner-desc.hero-banner-desc a {
    color: var(--yellow-span, #E2C562);
    font-weight: 700;
    font-size: inherit;
}

/* Background image swap: mobile image/mask below 1024px, desktop above.
   Kept as its own breakpoint since it's tied to image asset dimensions
   rather than the theme's general ≤576px typography/layout breakpoint. */
@media (max-width: 1024px) {
    .hero-banner {
        background-image: var(--hero-banner-bg-mobile, var(--hero-banner-bg-desktop));
    }
    .hero-banner-mask-desktop {
        display: none;
    }
    .hero-banner-mask-mobile {
        display: block;
    }
}

/* Mobile (matches the theme's established ≤576px breakpoint) */
@media (max-width: 576px) {
    .hero-banner {
        margin-left: 16px;
        margin-right:16px;
        border: 1px solid #E2C562;
        border-radius: 18px;
    }
    .hero-banner-content {
        max-inline-size: 100%;
        padding: 1.5rem 1.25rem;
    }
    .hero-banner-content .hero-banner-cta {
        width:fit-content;
    }
    .hero-banner-title-white {
        font-size: 20px;
    }
    .hero-banner-title-gold {
        font-size: 26px;
    }
    .hero-banner-prize-label {
        font-size: 10px;
    }
    .hero-banner-prize-value {
        font-size: 30px;
    }
    .hero-banner-cta {
        inline-size: 100%;
        box-sizing: border-box;
        text-align: center;
        font-size: 14px;
    }
    .hero-banner-cta-row .hero-banner-cta {
        font-size: 18px;
    }
    .hero-banner-desc {
        max-inline-size: 100%;
        padding: 0 1.25rem;
        font-size: 14px;
    }
    .hero-banner .hero-banner-date {
        position:absolute;
        bottom:1.5rem;
        right:1.25rem;
        font-size: 10px;
    }
    .hero-banner-countdown {
        font-size: 8px;
        margin-bottom:10px;
    }
    .hero-banner-countdown .hero-banner-countdown-value {
        font-size: 10px;
    }
    .hero-banner-cta-row {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        margin-top:22px;
    }
}