/* =============================================================
   cjs-banner-stack.css — homepage promo banners on PHONES (2026-09-20)

   At <=550px the homepage slider used to be hidden (media.css). Instead, the
   same slides (templates/__master/Panels/Header_banner.html) are shown as a
   stack of compact cards you scroll through: art + headline on top, the
   picker underneath with its first two rows and a "Show N more" button.

   - Owl is NOT started on #top-slider at this width (guard in Panels/Footer.html),
     so the slides are plain .item divs. If a desktop window is narrowed after
     Owl has started, the slider is simply hidden, as before.
   - Companion script: /javascript/cjsBannerStack.js (jump chips + row folding).
   - Every layout rule is inside the media query; the only un-wrapped rule is
     the display:none default for the elements the script creates.
   - Linked from Header_banner.html, so only the homepage loads it.
   Rollback: remove the <link>/<script> pair from Header_banner.html.
   ============================================================= */
.cjs-mjump,
.cjs-mmore {
    display: none;
}

@media (max-width: 550px) {
    .slider-banner-wrap .main-slider { display: block; float: none; width: 100% !important; left: 0 !important; }
    .slider-banner-wrap .main-slider:has(#top-slider.owl-loaded) { display: none; }
    .main-slider .text-slide { display: none; }

    /* jump chips: seven banners is a long scroll, so let people hop */
    .cjs-mjump { display: flex; gap: 6px; overflow-x: auto; padding: 10px 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cjs-mjump::-webkit-scrollbar { display: none; }
    .cjs-mjump button { flex-shrink: 0; -webkit-appearance: none; appearance: none; margin: 0; padding: 8px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: #12161f; color: #fff; font: 700 12px/1 'Open Sans', Arial, sans-serif; white-space: nowrap; cursor: pointer; }

    #top-slider { display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 14px; border: 0; }
    #top-slider > .item { scroll-margin-top: 62px; }
    #top-slider .cjs-promo { height: auto; border-radius: 16px; background-color: #060d1c; background-size: 0 0; box-shadow: 0 8px 22px rgba(10,16,30,.28); }
    #top-slider .cjs-promo-in { display: block; height: auto; padding: 0; container-type: normal; background-image: inherit; background-size: 0 0; background-repeat: no-repeat; }

    /* hero: the slide art moves onto the copy block and fades into the card */
    #top-slider .fc27-copy { position: relative; display: flex; flex: none; min-height: 128px; padding: 14px 16px 8px; justify-content: flex-end; background-image: inherit; background-size: cover; background-position: 30% center; background-repeat: no-repeat; }
    #top-slider .fc27-copy::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg,rgba(6,13,28,.05) 0,rgba(6,13,28,.5) 55%,#060d1c 100%),linear-gradient(90deg,rgba(4,9,21,.7),rgba(4,9,21,0) 80%); }
    #top-slider .fc27-copy > * { position: relative; }
    #top-slider .fc27-kicker { margin-top: 10px; font-size: 13px; letter-spacing: 5px; }
    #top-slider .fc27-title,
    #top-slider .fm-title { font-size: 52px; letter-spacing: -2px; }
    #top-slider .fc27-strip { margin-top: 10px; font-size: 15px; padding: 5px 24px 5px 11px; }
    #top-slider .fc27-strip2,
    #top-slider .fc27-date,
    #top-slider .gp-points { display: none; }
    #top-slider .fm-kicker { margin-top: 10px; font-size: 12px; letter-spacing: 5px; }
    #top-slider .gp-title,
    #top-slider .ms-title,
    #top-slider .sw-title,
    #top-slider .sp-title { margin-top: 10px; font-size: 30px; letter-spacing: -1px; }
    #top-slider .gp-title b,
    #top-slider .sp-title b { display: inline; }
    #top-slider .gp-title b { margin-left: .22em; } /* "Game Pass<b>Ultimate</b>" has no space in the markup */
    #top-slider .gp-sub,
    #top-slider .fm-sub,
    #top-slider .ms-sub,
    #top-slider .sw-sub,
    #top-slider .sp-sub { margin-top: 8px; font-size: 13.5px; max-width: none; }

    /* picker: full width under the hero, thumb-sized targets */
    #top-slider .fc27-panel { flex: none; max-width: none; margin: 0 10px 10px; padding: 12px; }
    #top-slider .fc27-panel-h,
    #top-slider .fc27-plat { display: none; }
    #top-slider .cjs-promo .fc27-tabs button { font-size: 12px; padding: 11px 2px; }
    #top-slider .cjs-promo .fc27-tabs button img { display: none !important; }
    #top-slider .cjs-promo .fc27-tabs[style*="--n:2"] button img { display: block !important; }
    #top-slider .fc27-opt > a { min-height: 52px; padding: 7px 10px; }
    #top-slider .fc27-ed { white-space: normal; line-height: 1.2; }
    #top-slider .fc27-tags { flex-wrap: wrap; }
    #top-slider .cjs-promo .fc27-opt:hover { transform: none; }
    #top-slider .cjs-promo .fc27-reg a { padding: 7px 9px; font-size: 11px; }
    #top-slider .cjs-promo .fc27-pts { gap: 12px 6px; margin-top: 4px; }
    #top-slider .cjs-promo .fc27-pt > a { padding: 6px 8px; }
    #top-slider .cjs-promo .gp-tile > a { min-height: 84px; }
    #top-slider .cjs-promo .fc27-list.gp-grid-3.is-on { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
    #top-slider .cjs-promo .gp-grid-3 .gp-tile > a { padding: 10px 9px; }
    #top-slider .gp-grid-3 .gp-len { font-size: 10px; gap: 4px; letter-spacing: .5px; }
    #top-slider .gp-grid-3 .gp-len b { font-size: 26px; }
    #top-slider .gp-grid-3 .gp-badge { top: -1px; right: -1px; border-radius: 0 11px 0 8px; font-size: 8px; padding: 2px 6px; }
    #top-slider .cjs-promo a.fc27-all { margin-top: 6px; padding: 12px 0 2px; text-align: center; }

    /* first two rows per tab; the rest sit behind "Show N more" (cjsBannerStack.js) */
    #top-slider .fc27-list:not(.is-open) .is-extra { display: none; }
    #top-slider .fc27-list.is-on:not(.is-open) .cjs-mmore { display: block; }
    #top-slider .cjs-mmore { list-style: none; margin: 0; padding: 0; }
    #top-slider .cjs-promo .cjs-mmore button { width: 100%; -webkit-appearance: none; appearance: none; margin: 0; border: 1px dashed rgba(255,255,255,.25); background: none; color: var(--hi); font: 700 12px/1 'Open Sans', Arial, sans-serif; padding: 12px; border-radius: 10px; cursor: pointer; }

    /* WARDOGS: the key art carries the game logo, so it runs across the top and
       the copy starts under it (only the pill sits on the art) */
    #top-slider .wd-art { width: 100%; height: 150px; bottom: auto; background-position: center; -webkit-mask-image: linear-gradient(180deg,#000 70%,transparent); mask-image: linear-gradient(180deg,#000 70%,transparent); }
    #top-slider .wd-copy { width: 100%; padding: 134px 14px 16px; }
    #top-slider .wd-pill { position: absolute; top: 14px; left: 14px; background: rgba(20,14,8,.7); }
    #top-slider .cjs-promo a.wd-title { margin-top: 0; font-size: 28px; }
    #top-slider .wd-title small,
    #top-slider .wd-trust { display: none; }
    #top-slider .wd-cards { margin-top: 14px; gap: 8px; }
    #top-slider .cjs-promo a.wd-card { padding: 12px; }
    #top-slider .wd-card-k { font-size: 15px; }
    #top-slider .wd-card-d { font-size: 11px; }
    #top-slider .wd-card-cta { font-size: 12px; padding: 8px 10px; align-self: stretch; text-align: center; }
}