/* Hero Banner Tournament block (blocks/hero-banner-tournament)
   Fully self-contained: every class here is prefixed hero-banner-tournament-
   so it never collides with hero-banner.css, since both stylesheets load
   unconditionally on every page. */
.hero-banner-tournament {
    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.
       Unlike the original Hero Banner, this block rounds all four corners
       (not just the top) since Tournament pages tend to use it as the sole
       block inside that wrapper - a square bottom would otherwise expose a
       sliver of the wrapper's own gold border along the bottom edge. */
    border-radius: 2rem;
    background-color: #0B0B0C;
    background-image: var(--hero-banner-tournament-bg-desktop);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}
.hero-banner-tournament-mask {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
}
.hero-banner-tournament-mask-mobile {
    display: none;
}
.hero-banner-tournament-content {
    position: relative;
    z-index: 2;
    max-inline-size: 45rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 2.25rem;
}
.hero-banner-tournament-content .hero-banner-tournament-cta {
    color: #101828;
}

/* Status badge + countdown, shown side by side above the title. */
.hero-banner-tournament-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 15px;
}
.hero-banner-tournament-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #fff;
    padding: .5rem 1.25rem;
}
.hero-banner-tournament-status-active {
    background: #34D399;
}
.hero-banner-tournament-status-upcoming {
    background: #E2C562;
}
.hero-banner-tournament-status-finished {
    background: #9A9A9A;
}
.hero-banner-tournament-countdown {
    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-tournament-countdown .hero-banner-tournament-countdown-value {
    text-transform: lowercase;
    color: #E2C562;
    font-size: 16px;
}

.hero-banner-tournament-title {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.05;
    margin: 0;
}
.hero-banner-tournament-title-white {
    color: #FFFFFF;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 54px;
}
.hero-banner-tournament-title-gold {
    color: var(--yellow-span, #E2C562);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 66px;
}

/* Placed right after the title, inside the content column - left-aligned
   and naturally constrained by .hero-banner-tournament-content's own
   max-inline-size, unlike the original Hero Banner's centered/below-banner
   treatment. */
.hero-banner-tournament-desc {
    margin: 1rem 0 0;
    text-align: left;
    color: #9A9A9A;
    font-size: 18px;
    line-height: 1.6;
}
/* Scoped as ".hero-banner-tournament .hero-banner-tournament-desc p" (not
   just ".hero-banner-tournament-desc p") 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 class+tag selector loses to a two-class+tag
   selector) - without editing style.css. 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-tournament .hero-banner-tournament-desc p {
    margin: 0 0 .5rem;
    font-size: inherit;
    line-height: inherit;
}
.hero-banner-tournament .hero-banner-tournament-desc p:last-child {
    margin-bottom: 0;
}
.hero-banner-tournament .hero-banner-tournament-desc a {
    color: var(--yellow-span, #E2C562);
    font-weight: 700;
    font-size: inherit;
}

.hero-banner-tournament-prize {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.hero-banner-tournament-prize-label {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.hero-banner-tournament-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-tournament-cta-row {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    inline-size: 100%;
}
.hero-banner-tournament-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-tournament-cta:hover {
    filter: brightness(1.05);
}
.hero-banner-tournament-cta-row .hero-banner-tournament-cta {
    font-size: 24px;
}

/* 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-tournament {
        background-image: var(--hero-banner-tournament-bg-mobile, var(--hero-banner-tournament-bg-desktop));
    }
    .hero-banner-tournament-mask-desktop {
        display: none;
    }
    .hero-banner-tournament-mask-mobile {
        display: block;
    }
}

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