/**
 * Steam page (/steam, CMS page "steam"): the store-page hero with the Wishlist button switched off until the Steam
 * store page exists, on top of the theme's .bb-page / .bb-btn / .bb-card / .bb-note (bb-pages.css). Own file (server
 * pub/media/steam/steam.css) so no Tailwind rebuild is needed; bump ?v= in the page after a change.
 * To switch the button on: in the page, make the <span class="bb-btn bb-steam-wish is-off"> an
 * <a class="bb-btn bb-steam-wish" href="https://store.steampowered.com/app/<id>/">, and drop the "Coming soon" tag.
 * .bb-steam-buy (2026-10-24): the big amber "Play now: Founder Edition - <price>" button above it (theme template
 * Magento_Cms::steam/get-game.phtml, price from the product).
 */
.bb-steam-hero {
    display: grid; gap: 1.25rem; align-items: center;
    margin: 0 0 1.75rem; padding: 1.5rem 1.4rem; border-radius: 12px;
    border: 1px solid var(--color-bb-line, #2a3756);
    background:
        radial-gradient(40rem 14rem at 100% 0%, rgb(102 192 244 / .14), transparent 65%),
        linear-gradient(135deg, #16203a 0%, #0e1424 75%);
}
@media (min-width: 48rem) { .bb-steam-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 2rem; } }
.bb-steam-hero .bb-lede { margin: 0; }
.bb-steam-hero h2 { margin: 0 0 .5rem; }
.bb-steam-actions { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.bb-steam-actions .bb-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.4rem; font-size: 1.05rem; }
.bb-steam-actions svg { width: 1.4rem; height: 1.4rem; fill: currentColor; flex: none; }
/* switched off until the Steam store page is live: looks like the button, does nothing */
.bb-page .bb-btn.is-off, .bb-page .bb-btn.is-off:hover {
    background: #3a4560; color: #aab3c8; cursor: not-allowed; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
    transform: none; user-select: none;
}
.bb-steam-soon {
    display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #66c0f4; border: 1px solid rgb(102 192 244 / .5);
}
.bb-steam-social { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.bb-steam-social li { margin: 0; }
.bb-page .bb-steam-social a {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1rem; border-radius: 8px;
    border: 1px solid var(--color-bb-line, #2a3756); background: var(--color-bb-panel, #161f36);
    color: var(--color-bb-text, #e8ecf5); font-weight: 700; text-decoration: none;
}
.bb-page .bb-steam-social a:hover { border-color: var(--color-bb-amber, #f59e0b); }
.bb-steam-social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; flex: none; }

/* "Play now: Founder Edition" (theme Magento_Cms::steam/get-game.phtml): first and biggest in the hero */
.bb-page a.bb-steam-buy {
    display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem;
    padding: 1rem 1.8rem; border-radius: 6px; background: var(--color-bb-amber, #f59e0b);
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / .32), inset 0 1px 0 rgb(255 255 255 / .2), 0 .5rem 1.5rem rgb(0 0 0 / .35);
    color: #0e1424; font-family: var(--font-display, inherit); font-size: 1.15rem; font-weight: 700;
    letter-spacing: .04em; text-align: center; text-decoration: none; text-transform: uppercase;
}
.bb-page a.bb-steam-buy:hover { background: var(--color-bb-amber-hi, #fbbf24); color: #0e1424; }
.bb-page a.bb-steam-buy:active { transform: translateY(1px); box-shadow: none; }
.bb-page a.bb-steam-buy:focus-visible { outline: 3px solid var(--color-bb-blue, #38bdf8); outline-offset: 3px; }
.bb-steam-free { margin: -.15rem 0 .6rem; color: var(--color-bb-muted, #9aa6c0); font-size: .9rem; text-align: center; }
@media (max-width: 47.99rem) { .bb-steam-actions { align-items: stretch; } .bb-steam-actions .bb-steam-soon { align-self: center; } }
@media (prefers-reduced-motion: reduce) { .bb-page a.bb-steam-buy:active { transform: none; } }