/* ======================================================================
   FEATURED GAME CARD  (extracted 2026-08-21)
   ======================================================================

   The full-width promo card rendered by ~/Views/Partials/_FeaturedGame.cshtml
   (via PartialFeaturedGameController). Today it carries the Phonics Screening
   Check practice game on the phase 4 and 5 game lists; it is built to be dropped
   into the screening-check ARTICLE pages too.

   WHY THIS FILE EXISTS AT ALL. The card started life inside the games list page
   and leaned on that page's generic .card / .card-header / .card-body rules in
   css/pages/uk/game/list/_all.css. An article page does not load that stylesheet,
   so the card would have rendered there as a bare white Bootstrap box - no colour,
   no radius, no layout - with no error anywhere. So this file carries the card's
   OWN copy of the chrome it needs, every selector scoped under .pb-featured-game
   so it cannot leak onto the grid cards sitting directly above it.

   LOADED GLOBALLY from _Layout's head, not per page. A component that is supposed
   to be droppable anywhere must not have a stylesheet step the host can forget -
   that is the exact failure this file was created to prevent. It is small and
   fully scoped, so the cost is one tiny render-blocking request. It is NOT wired
   to the HttpContext.Items flag that pb-game-tooltip.css uses: that link is
   emitted at the BOTTOM of the body, which would flash an unstyled card.

   DELIBERATE DUPLICATION. The chrome values below (#DAF7FE, the 1em radius, the
   header/footer treatment) also exist unscoped in game/list/_all.css for the grid
   cards. Retuning the grid cards will NOT follow through to here. That is the
   price of the card being self-contained; the two files point at each other.

   _Layout cache-busts this with ?v={PhonicsBloomAppSetting_CssVersion} - bump the
   appSetting in _configs/Web.config-*.txt when you edit this file. */


/* ---------------------------------------------------------------- chrome
   Copies of the generic card rules from game/list/_all.css, scoped. Without
   these the card is unstyled anywhere that sheet is not loaded. */

.pb-featured-game {
    margin-bottom: var(--pb-row-gap);
}

.pb-featured-game .card {
    border: none !important;
}

.pb-featured-game .card-header {
    border-collapse: collapse !important;
    border-radius: 1em 1em 0em 0em !important;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
}

/* The h2 is a normal document heading, so on an article page it would otherwise
   inherit the site's content h2 sizing and break the card header. Pinned here. */
.pb-featured-game .card-header h2 {
    margin: 0px;
    padding: 0px;
    font-size: 1.2em;
    letter-spacing: 0.06em;
}

.pb-featured-game .card-header a,
.pb-featured-game .card-header a:hover,
.pb-featured-game .card-header a:active,
.pb-featured-game .card-header a:visited {
    color: #FFF;
    text-decoration: none !important;
}

.pb-featured-game .card-body {
    background-color: #DAF7FE;
}

.pb-featured-game .card-body img {
    margin: 0em 1em 1em 0em !important;
}

.pb-featured-game .card-body p {
    font-size: 1.2em;
}

.pb-featured-game .card-footer {
    background-color: #DAF7FE;
    color: #000 !important;
    border-radius: 0em 0em 1em 1em !important;
    border: none;
    padding-bottom: 1.4em;
    text-align: center !important;
}

.pb-featured-game .skills-taught {
    clear: both;
    font-size: 1.1em !important;
    color: #249AD1 !important;
}

.pb-featured-game .skills-taught span {
    font-weight: bold;
}

.pb-featured-game .btn-play-games {
    width: 30%;
    margin: auto;
}


/* ---------------------------------------------- featured-specific overrides
   These are what make it a FEATURED card rather than a grid card. Carried over
   verbatim from game/list/_all.css, where they were authored against the card
   at full container width. */

/* Darkens the phase colour so the featured card reads as a step up from the
   grid cards using the same palette. */
.pb-featured-game .card-header,
.pb-featured-game .btn-play-games {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

/* The grid cards float the thumbnail left. At full width that leaves the text
   running the entire container and the card reads as a paragraph with a picture
   stuck to the side of it, so the body becomes a flex row instead. The float on
   the grid cards is an inline style on the <img>, not a rule, so there is nothing
   to unset - this card simply never sets it. */
.pb-featured-game .card-body {
    display: flex;
    /* Thumbnail pinned to the TOP of the text, not centred against it (owner,
       2026-08-20). The text column is taller than the 170px image once the
       description and skills line are stacked in it, so centring left the icon
       floating in the middle with dead space above it. */
    align-items: flex-start;
}

/* The anchor wrapping the thumbnail is the flex child, not the image. Without
   this it stretches and the 170px image floats about inside it. The gap comes
   from .card-body img's margin above, so no gap is set here - one lever, not two. */
.pb-featured-game .card-body > a {
    flex: 0 0 auto;
}

.pb-featured-game-text {
    flex: 1 1 auto;
}

/* .btn-play-games is a PERCENTAGE width tuned for a half-width grid card: 30% of
   a ~555px card is ~166px, but 30% of the full ~1140px container is ~342px, which
   reads as a different button from the ones in the grid directly above it. The cap
   brings it back to roughly grid size and margin:auto still centres it. */
.pb-featured-game .btn-play-games {
    max-width: 220px;
}


/* ------------------------------------------------------------- breakpoints
   The percentage button widths follow the game list sheet so the featured card
   and the grid cards stay in step where both are on screen. The max-width cap
   above stops applying in practice once the percentages fall under 220px. */

/* Large devices (desktops, up to 1200px) */
@media (max-width: 1200px) {
    .pb-featured-game .btn-play-games {
        width: 50%;
        margin: auto;
    }
}

/* Medium devices (tablets, up to 993px) */
@media (max-width: 993px) {
    .pb-featured-game .btn-play-games {
        width: 70%;
        margin: auto;
    }
}

/* Small devices (mobile, up to 768px) */
@media (max-width: 767.98px) {
    /* NOT the grid's 50% here. That percentage was tuned for "PLAY NOW!" (84px of
       text); this button says "Practice now", which needs 113px plus the icon, and
       50% of a 351px card leaves a 120px content box - about 3px of clearance each
       side, which reads as a button too small for its own label. 70% takes it to the
       220px cap set above, so it lands on the SAME width as the desktop card rather
       than an arbitrary new one. Measured on a 375px viewport. */
    .pb-featured-game .btn-play-games {
        width: 70%;
    }

    /* On mobile the card is already the full viewport width, the same as every
       stacked grid card, so the flex row buys nothing and just squeezes the text
       into a narrow column beside a 170px image. Back to normal block flow, which
       puts the thumbnail above the text. */
    .pb-featured-game .card-body {
        display: block;
    }
}