/* RSHOF mobile special readability fixes · 27.08.2026
 * Keeps the premium two-card layout while making the live rail and official
 * brand assets readable on phones. Loaded after all seasonal/PBB styles.
 */

/* The author CSS sets display on rail links. Make the HTML `hidden` state
 * authoritative so only the current rotating headline can ever be visible. */
.rshof-seasonal-hub__rail a[hidden] {
    display: none !important;
}

/* The official PBB logo is predominantly light. A white canvas makes it
 * disappear, therefore the logo receives its own dark, branded stage. */
.rshof-pbb-special__status figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin: 0 0 18px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(212, 173, 86, .42);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 42%, rgba(212, 173, 86, .14), transparent 52%),
        linear-gradient(145deg, #02090e, #0b202c 62%, #102f3e) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .035),
        0 18px 38px rgba(0, 0, 0, .24);
}

.rshof-pbb-special__status figure::after {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .045);
    border-radius: 12px;
}

.rshof-pbb-special__official-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 390px) !important;
    height: auto !important;
    max-height: 160px !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}

@media (max-width: 700px) {
    .rshof-seasonal-hub {
        width: 100%;
        margin: 0;
        border-radius: 22px;
    }

    .rshof-seasonal-hub__live {
        display: block;
        padding: 14px 14px 12px;
    }

    .rshof-seasonal-hub__label {
        display: flex;
        width: 100%;
        margin: 0 0 10px;
        color: #f3d18a;
        font-size: 11px;
        line-height: 1.25;
        letter-spacing: .13em;
    }

    .rshof-seasonal-hub__pulse {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
    }

    .rshof-seasonal-hub__rail {
        display: block;
        width: 100%;
        min-height: 64px;
        overflow: hidden;
        white-space: normal;
    }

    .rshof-seasonal-hub__rail a {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 9px;
        width: 100%;
        min-height: 58px;
        padding: 10px 11px;
        border: 1px solid rgba(240, 202, 124, .2);
        border-radius: 13px;
        background: rgba(0, 0, 0, .2);
        color: #f5f7f8 !important;
        font-size: 13px;
        line-height: 1.38;
    }

    .rshof-seasonal-hub__rail b {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 76px;
        min-height: 28px;
        padding: 6px 8px;
        border: 1px solid rgba(240, 202, 124, .35);
        border-radius: 999px;
        background: rgba(240, 202, 124, .1);
        color: #f3cf83;
        font-size: 10px;
        line-height: 1;
        letter-spacing: .08em;
        white-space: nowrap;
    }

    .rshof-seasonal-hub__rail span {
        display: -webkit-box;
        min-width: 0;
        overflow: hidden;
        color: #edf2f4;
        font-size: 13px;
        font-weight: 720;
        line-height: 1.38;
        white-space: normal;
        text-overflow: clip;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .rshof-seasonal-hub__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
    }

    .rshof-seasonal-card {
        min-height: 188px;
        padding: 14px 12px 13px;
        border-radius: 17px;
    }

    .rshof-seasonal-card__flag {
        top: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
        padding: 5px 8px;
        font-size: 8px;
        line-height: 1.2;
        letter-spacing: .09em;
    }

    .rshof-seasonal-card__brand {
        margin-bottom: 7px;
        font-size: clamp(18px, 5vw, 23px);
        line-height: 1.04;
    }

    .rshof-seasonal-card small {
        display: block;
        color: rgba(255, 255, 255, .88);
        font-size: 10.5px;
        font-weight: 650;
        line-height: 1.42;
    }

    .rshof-seasonal-card__cta {
        margin-top: 9px;
        font-size: 9.5px;
        line-height: 1.25;
        letter-spacing: .07em;
    }

    .rshof-pbb-special__status {
        padding: 20px;
    }

    .rshof-pbb-special__status figure {
        min-height: 190px;
        padding: 22px 16px;
        border-radius: 18px;
    }

    .rshof-pbb-special__official-logo {
        width: min(100%, 430px) !important;
        max-height: 176px !important;
    }

    .rshof-pbb-special__status small {
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: .13em;
    }

    .rshof-pbb-special__status strong {
        margin: 9px 0;
        font-size: clamp(27px, 7vw, 34px);
        line-height: 1.18;
    }

    .rshof-pbb-special__status p {
        font-size: 16px;
        line-height: 1.55;
    }
}

@media (max-width: 420px) {
    .rshof-seasonal-hub__live {
        padding-inline: 11px;
    }

    .rshof-seasonal-hub__rail a {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .rshof-seasonal-hub__rail b {
        justify-self: start;
        min-width: 0;
    }

    .rshof-seasonal-hub__cards {
        gap: 7px;
        padding: 9px;
    }

    .rshof-seasonal-card {
        min-height: 180px;
        padding-inline: 10px;
    }

    .rshof-seasonal-card__brand {
        font-size: 17px;
    }

    .rshof-seasonal-card small {
        font-size: 9.5px;
    }

    .rshof-seasonal-card__cta {
        font-size: 8.7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rshof-seasonal-hub__pulse {
        animation: none !important;
    }
}