/* ===== Promotions — kartoosh mobile skin ===== */

.prm {
    display: none;
}

/* style.css sets .main-content to `overflow-y:auto` + `overscroll-behavior-y:contain`,
   which makes it a scroll sink. On this page nothing constrains its height, so it
   grows to fit its content, has no overflow of its own, and swallows every wheel
   and swipe instead of letting the document scroll - the page then looks frozen.
   Releasing overflow here hands the gesture back to the document. */
.main-content.promo-page {
    overflow-y: visible;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
}

/* Nothing on this page is a link: no href is emitted in the markup, and these
   rules make any stray click inert as well. */
.prm-item,
.promo-card {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: default;
}

@media (max-width: 1023px) {
    .promo-page .promo-breadcrumb,
    .promo-page .promo-hero,
    .promo-page .promo-grid {
        display: none !important;
    }

    .sportsbook-body .main-content.promo-page,
    .main-content.promo-page {
        padding: 112px 0 20px;
        max-width: none;
        margin: 0;
        background: #04121b;
    }

    .prm {
        display: block;
    }

    .prm-cats {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 92px;
        padding: 10px 7px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .prm-cats::-webkit-scrollbar {
        display: none;
    }

    .prm-cats button {
        flex: 0 0 auto;
        min-width: 80px;
        height: 72px;
        padding: 0 10px;
        border-radius: 6px;
        font-family: inherit;
        font-size: 11px;
        font-weight: 600;
        color: #dfe7f2;
        background: #0f2534;
        border: 1px solid rgba(255, 255, 255, 0.07);
        white-space: nowrap;
        cursor: pointer;
        pointer-events: auto;
    }

    .prm-cats button.is-active {
        color: #04121b;
        background: #f8c524;
        border-color: #f8c524;
        font-weight: 700;
    }

    .prm-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 7px 12px;
    }

    /* Was an <a>; now a plain block so the card cannot navigate. */
    .prm-item__card {
        display: flex;
        flex-direction: column;
        height: 250px;
        border-radius: 6px;
        overflow: hidden;
        text-decoration: none;
        background: #0b1c28;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    }

    .prm-item__art {
        position: relative;
        flex: 0 0 auto;
        display: block;
        width: 100%;
        aspect-ratio: 2 / 1;
        background-color: #0f2534;
        overflow: hidden;
    }

    /* object-fit keeps the 2:1 art filling whatever box it lands in, so the
       photos never letterbox or distort. */
    .prm-item__img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .prm-item__tag {
        position: absolute;
        left: 12px;
        bottom: 12px;
        z-index: 1;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #04121b;
        background: #f8c524;
    }

    .prm-item__title {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        padding: 0 12px;
        display: flex;
        align-items: center;
        font-size: 13px;
        font-weight: 700;
        color: #f4f7fb;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .prm-item.is-hidden {
        display: none;
    }
}

/* ---------- desktop: photo cards ---------- */

/* .promo-grid had no desktop rules at all, so it stayed display:block and every
   card ran the full 1425px width, upscaling the 900px art by 1.58x. A real
   multi-column grid keeps each card near the art's natural size. */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    align-items: start;
}

@media (min-width: 1024px) {
    .promo-grid {
        padding: 0 24px;
    }
}

.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: #0b1c28;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.promo-card__art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    background-color: #0f2534;
    overflow: hidden;
}

.promo-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.promo-card__tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    padding: 5px 11px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #04121b;
    background: #f8c524;
}

.promo-card__title {
    margin: 14px 16px 0;
    font-size: 17px;
    font-weight: 700;
    color: #f4f7fb;
}

.promo-card__text {
    margin: 8px 16px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(244, 247, 251, 0.66);
}

/* Was an <a>. Now a label, so it looks the same but goes nowhere. */
.promo-card__cta {
    display: inline-block;
    margin: 0 16px 18px;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #04121b;
    background: #f8c524;
    align-self: flex-start;
}