/* PlayStation 5 landing page (/playstation-5). Scoped to .ps5, layered on pc_games.css:
   this file only carries the PlayStation accent and the two blocks that page does not have
   (the intent tiles and the console hero slide). Logical properties throughout, so it mirrors
   under dir="rtl"; playstation5.rtl.css only holds what logical properties cannot express. */

.pcg.ps5 {
    --pcg-bg: #0b1320;
    --pcg-surface: #111c31;
    --pcg-surface-2: #0f172a;
    --pcg-deep: #060c16;
    --pcg-border: #22304a;
    --pcg-text: #e9eff8;
    --pcg-muted: #9db0cc;
    --pcg-brand: #0070d1;
    --pcg-brand-light: #3f9bff;
    --pcg-on-brand: #ffffff;
    --pcg-focus: #6fc0ff;
    --ps5-deep-blue: #003791;
}

/* The shared button flips to white-on-blue instead of the PC page's lime. */
.ps5 .pcg-btn {
    color: #fff !important;
}

    .ps5 .pcg-btn:hover {
        background: var(--pcg-brand-light);
        border-color: var(--pcg-brand-light);
    }

.ps5 .pcg-btn--ghost {
    color: var(--pcg-text) !important;
}

.ps5 .pcg-badge--platform {
    background: var(--ps5-deep-blue);
    color: #fff;
    letter-spacing: .06em;
}

.ps5 .pcg-badge--discount {
    background: var(--pcg-brand-light);
    color: #04121f;
}

.ps5 .pcg-badge--pre {
    background: #ffdc11;
    color: #10203a;
}

.ps5 .pcg-head__title {
    text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

/* ---------- Console slide: the hero opens on the console ---------- */

/* A clean render on a PlayStation gradient rather than a game-s blurred key art. */
.ps5-hero__console .pcg-hero__backdrop {
    background: linear-gradient(135deg, var(--pcg-brand) 0%, #00215c 55%, #060c16 100%);
}

/* Slide 0 has no product art behind it, so the depth is painted: a blue bloom sitting at 72%
   across - where the console render is - over a darker field. The 72% is deliberate; centring it
   puts the light somewhere the hardware is not. */
/* The !important is doing real work, not papering over anything: this div carries both
   .pcg-hero__backdrop and .ps5-hero__stage, and the flat gradient it used to show comes from
   `.ps5-hero__console .pcg-hero__backdrop`, which is two classes to this rule's one and wins the
   cascade. Same for the ::after, which `.ps5 .pcg-hero__backdrop::after` outranks. Raising this
   rule's weight is the only way to repaint the stage without editing rules that are out of
   scope for this change. */
.ps5-hero__stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(60% 90% at 72% 50%, rgba(0,112,209,.55), transparent 65%),
        radial-gradient(90% 120% at 20% 10%, #123a6b 0%, transparent 60%),
        linear-gradient(160deg, #0b2a56 0%, #071c3a 55%, #050f22 100%) !important;
}

.ps5-hero__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(55% 55% at 72% 45%, rgba(255,255,255,.20), transparent 70%) !important;
}

/* The four face buttons, drifting slowly behind the console. currentColor is why the SVG is
   inline in the view rather than a file. */
.ps5-hero__shapes {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    color: #fff;
    opacity: .10;
    animation: ps5-shape-drift 26s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes ps5-shape-drift {
    to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}

.ps5-hero__console .pcg-hero__body {
    align-items: center;
}

.ps5-hero__console .pcg-hero__cover {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    aspect-ratio: auto;
}

.ps5-hero__render img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}

.ps5-hero__from {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--pcg-muted);
}

@media (max-width: 767.98px) {
    /* The poster slot is a landscape render here, so it must not be forced to 3:4. */
    .ps5-hero__console .pcg-hero__cover,
    .ps5-hero__console .pcg-hero__cover picture,
    .ps5-hero__console .pcg-hero__cover img {
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

@media (min-width: 768px) {
    /* Wins over the shared cover width below, which is sized for a game poster. */
    .ps5 .ps5-hero__console .pcg-hero__cover {
        width: 380px;
    }
}

@media (min-width: 1200px) {
    .ps5 .ps5-hero__console .pcg-hero__cover {
        width: 460px;
    }
}

/* ---------- Intent tiles ---------- */

.ps5-intent {
    margin-block: 20px 28px;
}

    .ps5-intent ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ps5-intent a {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 100%;
        min-height: 68px;
        padding: 14px;
        border: 1px solid var(--pcg-border);
        border-radius: var(--pcg-radius);
        background: linear-gradient(160deg, var(--pcg-surface) 0%, var(--pcg-surface-2) 100%);
        color: var(--pcg-text);
        text-decoration: none !important;
        transition: border-color .15s, background-color .15s, transform .15s;
    }

        .ps5-intent a:hover {
            border-color: var(--pcg-brand-light);
            background: linear-gradient(160deg, #16274a 0%, #101c33 100%);
            transform: translateY(-2px);
        }

    .ps5-intent svg {
        flex: none;
        color: var(--pcg-brand-light);
    }

    .ps5-intent a > span {
        display: block;
        min-width: 0;
    }

    .ps5-intent strong {
        display: block;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
    }

        .ps5-intent strong + span {
            display: block;
            color: var(--pcg-muted);
            font-size: 12px;
            line-height: 1.35;
            margin-block-start: 2px;
        }

@media (min-width: 768px) {
    .ps5-intent ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .ps5-intent a {
        min-height: 80px;
        padding: 16px 18px;
    }

    .ps5-intent svg {
        width: 28px;
        height: 28px;
    }

    .ps5-intent strong {
        font-size: 16px;
    }

        .ps5-intent strong + span {
            font-size: 13px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .ps5-intent a {
        transition: none;
    }

        .ps5-intent a:hover {
            transform: none;
        }
}

/* ---------- Closing copy ---------- */

.ps5-about {
    border-color: var(--pcg-border);
    background: linear-gradient(180deg, #0f1b30 0%, #0b1320 100%);
}

    .ps5-about h2 {
        color: #fff;
    }

    .ps5-about .pcg-about__item {
        border-color: var(--pcg-border);
    }

        .ps5-about .pcg-about__item h3 {
            color: #d6e6ff;
        }

/* ---------- Desktop hero balance ----------
   The shared hero puts the cover on the left and lets the copy run the full width, which left
   the right 60% of a 1440px frame as bare backdrop. Here the copy holds a readable column on
   one side and the art anchors the other, so the composition fills the frame. Phones are
   untouched - the stacked poster layout there is already right. */

@media (min-width: 768px) {
    .ps5 .pcg-hero__body {
        flex-direction: row-reverse; /* mirrors on its own under dir="rtl" */
        justify-content: space-between;
        gap: clamp(20px, 4vw, 56px);
    }

    .ps5 .pcg-hero__text {
        flex: 1 1 auto;
        max-width: 58ch;
    }

    .ps5 .pcg-hero__cover {
        width: 230px;
        align-self: flex-end;
    }

    .ps5 .pcg-hero__desc {
        max-width: none;
    }

    /* The gradient has to lift the copy on the reading side, not only the bottom. */
    .ps5 .pcg-hero__backdrop::after {
        background: linear-gradient(to top, rgba(6, 12, 22, .95) 0%, rgba(6, 12, 22, .35) 60%, rgba(6, 12, 22, .1) 100%), linear-gradient(to right, rgba(6, 12, 22, .85) 0%, rgba(6, 12, 22, .45) 45%, transparent 75%);
    }
}

@media (min-width: 1200px) {
    .ps5 .pcg-hero__cover {
        width: 300px;
    }
}

/* ---------- Closing copy ----------
   Six narrow columns were unreadable on a wide screen; two or three wide ones are not. */

.ps5-about .pcg-about__grid {
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 576px) {
    .ps5-about .pcg-about__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .ps5-about .pcg-about__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px 24px;
    }
}

.ps5-about .pcg-about__item p {
    font-size: 14.5px;
    line-height: 1.6;
}

/* ---------- One spacing scale ----------
   Every band on the page is a direct child of the container, so the gap between them is set
   in one place instead of depending on whichever theme happens to sit there. */

.pcg.ps5 {
    --ps5-band-gap: 26px;
}

@media (min-width: 768px) {
    .pcg.ps5 {
        --ps5-band-gap: 40px;
    }
}

.ps5 > .container > * {
    margin-block: 0;
}

    /* The themes ship their own <style> and <script> tags between the bands; those carry no box,
   so the gap has to be owned by the bands themselves rather than by whatever precedes them. */
    .ps5 > .container > *:not(style):not(script) {
        margin-block-start: var(--ps5-band-gap);
    }

    .ps5 > .container > *:first-child {
        margin-block-start: 0;
    }

/* theme 1 sets margin:0 !important in the shared theme sheet, so the page scale has to say
   it louder for those bands - the value is the same one every other band uses. */
.ps5 > .container > .theme_1 {
    margin-block-start: var(--ps5-band-gap) !important;
}

    .ps5 > .container > .theme_1:first-child {
        margin-block-start: 0 !important;
    }

/* With one gap between every band, the section separators are a second, competing rhythm. Not
   scoped to direct children: the two wrapped bands carry their separator one level further down. */
.pcg.ps5 .pcg-hr {
    display: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {
    /* The dark page is full bleed; its contents are not flush against the glass. */
    .ps5 > .container {
        padding-inline: 16px;
    }

    /* The H1 ran to three lines before anything else was visible. */
    .ps5 .pcg-head__title {
        font-size: clamp(1.15rem, .85rem + 1.7vw, 1.5rem);
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .ps5 .pcg-head__lead {
        font-size: 14px;
        margin-bottom: 0;
    }

    /* Hero copy: badges, title, text, price and button need room to read as separate things. */
    .ps5 .pcg-hero__body {
        gap: 16px;
        padding: 20px 18px 24px;
    }

    .ps5 .pcg-hero__badges {
        margin-block-end: 12px;
        gap: 8px;
    }

    .ps5 .pcg-hero__title {
        margin-block-end: 10px;
        line-height: 1.25;
    }

    .ps5 .pcg-hero__publisher {
        margin-block-end: 10px;
    }

    .ps5 .pcg-hero__desc {
        margin-block-end: 16px;
        line-height: 1.55;
    }

    .ps5 .pcg-hero__buy {
        gap: 12px;
        width: 100%;
        justify-content: center;
    }

        .ps5 .pcg-hero__buy .pcg-btn {
            flex: 1 1 auto;
            min-width: 160px;
        }

    .ps5 .pcg-hero__controls {
        margin-block-start: 14px;
    }
}

/* ---------- Written-out comparison ----------
   Console renders on a transparent panel, short titles, twelve rows: the product-driven
   layout's tall image box and three-line title slot are wrong for it. */

.theme_9--static .theme_9_card {
    grid-template-rows: auto auto 1fr;
}

.theme_9--static .theme_9_media {
    background: transparent;
}

    .theme_9--static .theme_9_media img {
        display: block;
        width: 100%;
        height: 150px;
        object-fit: contain;
        padding: 4px;
    }

.theme_9--static .theme_9_title {
    min-height: 0;
    text-align: center;
    font-size: 17px;
}

.theme_9--static .theme_9_spec {
    min-height: 40px;
}

    .theme_9--static .theme_9_spec dd {
        font-weight: 600;
        font-size: 12.5px;
    }

@media (min-width: 768px) {
    .theme_9--static .theme_9_media img {
        height: 190px;
    }
}

/* The sweep used to live on this section's wide promo bar. It is on the per-card pre-order
   badge instead now (see .preorder_badge in list_product_themes.css) - that badge is the thing
   a customer actually reads, and on a phone the bar has scrolled away by the time the cards are.

   The wrapper is a hook, not a layout element: the band keeps the page's own spacing. */
.ps5 > .container > .ps5-reserve {
    margin-block-start: var(--ps5-band-gap);
}

.ps5-reserve > .theme_1 {
    margin-block: 0 !important;
}

/* ---------- The football shelf ----------
   Mown turf, in CSS. Two alternating strips of light and shade across the band, which is what
   reads as a pitch without anyone having to draw one. */

/* Three layers: a fine blade texture, the mower's wide bands, and a light falling from behind
   the far touchline. The bands are 103deg on purpose - off-vertical reads as turf receding away
   from you, where 90deg reads as a grid of squares. Do not straighten them. */
/* Two layers behind the cards: the photographic grass, and the mow stripes drawn in CSS so they
   scale with the band instead of repeating with the tile.

   Both sit on pseudo-elements at negative z-index, with `isolation: isolate` on the band so that
   stacking stays inside it and the product cards are untouched. The band itself is never
   blurred - a filter on the element blurs the cards sitting on top of it, so the grass is held
   back with opacity and brightness instead. */
.ps5-fc-band {
    position: relative;
    background-color: #0e5c2c;
    isolation: isolate;
    border-radius: var(--pcg-radius);
    overflow: hidden;
}

    /* 300px against a 370px tile on purpose: the grain comes out finer and the repeat period is
   harder to pick out. */
    .ps5-fc-band::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image: url("/web/img/textures/turf-tile.webp");
        background-repeat: repeat;
        background-size: 300px 300px;
        opacity: .45;
        filter: saturate(.95) brightness(.72);
    }

    .ps5-fc-band .theme_3 {
        background: transparent;
    }

    .ps5-fc-band .card_art_fill {
        display: none !important;
    }
    .ps5-fc-band .theme_3 .swiper-slide.card {
        background-color: #0000006b !important;
    }
    .ps5-fc-band .theme_3 .image_container {
        background-color: #00000030 !important;
    }
    /* 103deg on purpose: off-vertical reads as turf receding away from you, where 90deg reads as a
   grid of squares. playstation5.rtl.css leans it the other way for Arabic. */
    .ps5-fc-band::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
        /* The corners fall into shadow so the pitch does not run flat to the border. First in
           the list, so it sits on top of the stripes. */
        radial-gradient(120% 100% at 50% 45%, transparent 45%, rgba(0,0,0,.55) 100%), repeating-linear-gradient(103deg, rgba(255,255,255,.08) 0 90px, rgba(0,0,0,.08) 90px 180px), radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.12), transparent 60%);
    }

.ps5 > .container > .ps5-fc-band {
    margin-block-start: var(--ps5-band-gap);
}

.ps5-fc-band > .theme_3 {
    margin-block: 0 !important;
}

/* ---------- Theme 10's light sweep ----------
   The shared sheet's sweep is there but nobody sees it: a 16% highlight in a narrow band moving
   fast enough to be missed. Wider, brighter and slower, on this page only. */

.ps5 .theme_10::before {
    background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .22) 50%, transparent 66%);
}

.ps5 .theme_10.is-animated::before {
    animation-duration: 5s;
}

@media (prefers-reduced-motion: reduce) {
    .ps5-reserve .promo-bar::after {
        animation: none;
    }

    .ps5 .theme_10.is-animated::before {
        animation: none !important;
    }

    .ps5-hero__shapes {
        animation: none;
    }
}

/* ---------- Phones (mobile review pass) ---------- */
@media (max-width: 575.98px) {
    /* Big releases: the tilted three-card stage does not fit a phone - it came out as one large
       card over two small ones. Here it is three equal cards in a swipeable row, biggest release
       first; the desktop stage is untouched. */
    .site-content.pcg.ps5 .theme_8_stage {
        display: flex; grid-template-areas: none; align-items: stretch; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline-end: calc(-1 * var(--g2e-gutter, 26px));
        padding-inline-end: var(--g2e-gutter, 26px);
        padding-block-end: 4px;
    }
    .site-content.pcg.ps5 .theme_8_stage::-webkit-scrollbar { display: none; }
    .site-content.pcg.ps5 .theme_8_item {
        flex: 0 0 72vw; scroll-snap-align: start; grid-area: auto;
    }
    .site-content.pcg.ps5 .theme_8_item.slot-centre { order: -1; }
    .site-content.pcg.ps5 .theme_8_item.slot-centre .theme_8_price .now { font-size: inherit; }

    /* Pre-order bar: two short lines, not one long one that wraps. */
    .site-content.pcg.ps5 .ps5-reserve .theme_1 .promo-bar { padding: 12px 14px; row-gap: 2px; }
    .site-content.pcg.ps5 .ps5-reserve .theme_1 .promo-bar strong {
        font-size: 15px; font-weight: 800; white-space: normal; line-height: 1.3;
    }
    .site-content.pcg.ps5 .ps5-reserve .theme_1 .promo-bar .promo-extra {
        display: block; font-size: 12.5px; line-height: 1.35; -webkit-line-clamp: none;
    }
}