/* PlayStation 4 landing page (/playstation-4). Scoped to .ps4, layered on pc_games.css:
   this file only carries the PS4 palette, the closing-copy block and the page's own band
   rhythm. The hero, the cards and the section furniture all come from pc_games.css.

   The palette is the point. /playstation-5 is cold navy lit by a screen; this is the same
   darkness lit by a warm lamp - amber accent, cream copy, PlayStation blue kept for the one
   place it still means "PlayStation" (the platform badge and the co-op promo bar).

   Logical properties throughout, so it mirrors under dir="rtl"; playstation4.rtl.css only
   holds what logical properties cannot express. */

.pcg.ps4 {
    --pcg-bg: #141822;
    --pcg-surface: #1c2333;
    --pcg-surface-2: #1a1f2c;
    --pcg-deep: #0e121a;
    --pcg-border: #2b3346;
    --pcg-text: #f2ece1;
    --pcg-muted: #a79c8c;
    --pcg-brand: #e8a13a;
    --pcg-brand-light: #f3b95e;
    --pcg-on-brand: #141822;
    --pcg-focus: #e8a13a;
    --ps4-blue: #003791;
    --ps4-amber: #e8a13a;
    --ps4-cream: #f2ece1;
}

/* ---------- Accent ----------
   The shared button is lime on /pcgames and blue on /playstation-5; here it is the lamp. */

.ps4 .pcg-btn {
    background: var(--ps4-amber);
    border-color: var(--ps4-amber);
    color: #141822 !important;
}

.ps4 .pcg-btn:hover {
    background: var(--pcg-brand-light);
    border-color: var(--pcg-brand-light);
    color: #141822 !important;
}

.ps4 .pcg-btn--ghost {
    background: transparent;
    color: var(--pcg-text) !important;
    border-color: var(--pcg-border);
}

/* The platform badge is the one piece of the page that stays PlayStation blue. */
.ps4 .pcg-badge--platform {
    background: var(--ps4-blue);
    color: #fff;
    letter-spacing: .06em;
}

.ps4 .pcg-badge--discount {
    background: var(--ps4-amber);
    color: #141822;
}

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

.ps4 .pcg-price__now { color: #fff; }
.ps4 .pcg-price__was { color: var(--pcg-muted); }

/* The hero slide description sat in near-black over dark key art and could not be read. Same
   fix as /nintendo-switch - it is the same copied markup: the text block carries a scrim of its
   own, running from the reading edge outwards. playstation4.rtl.css turns the gradient round,
   because an angle is a physical direction and cannot mirror itself. */
.ps4 .pcg-hero__text {
    background: linear-gradient(90deg, rgba(20, 22, 28, .92) 0%, rgba(20, 22, 28, .65) 45%, transparent 75%);
    padding-inline: 18px 24px;
    padding-block: 14px;
    margin-inline-start: -18px;
    border-radius: 8px;
}

.ps4 .pcg-hero__desc {
    color: #f2ece1;
    opacity: .85;
}

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

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

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

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

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

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

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

/* ---------- Closing copy ----------
   Prose, not a grid: three paragraphs that read one after the other at a comfortable measure. */

.ps4-about {
    border-color: var(--pcg-border);
    background: linear-gradient(180deg, #1c2333 0%, #141822 100%);
    color: #ded5c6;
}

.ps4-about h2 {
    color: var(--ps4-cream);
    border-inline-start: 3px solid var(--ps4-amber);
    padding-inline-start: 10px;
}

.ps4-about p {
    max-width: 72ch;
    font-size: 15px;
    line-height: 1.7;
}

.ps4-about p:last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
    .ps4-about p { font-size: 14.5px; }
}

/* ---------- Written-out comparison (theme 9, static columns) ----------
   Console renders on a transparent panel, short titles, eight rows: the product-driven
   layout's tall image box and three-line title slot are wrong for hardware. */

.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; }
}

/* ---------- 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.ps4 {
    --ps4-band-gap: 26px;
}

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

.ps4 > .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. */
.ps4 > .container > *:not(style):not(script) {
    margin-block-start: var(--ps4-band-gap);
}

.ps4 > .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. */
.ps4 > .container > .theme_1 {
    margin-block-start: var(--ps4-band-gap) !important;
}

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

/* With one gap between every band, the section separators are a second, competing rhythm. */
.pcg.ps4 > .container > .pcg-hr {
    display: none;
}

/* The floating chat button and the back-to-top button sit over the bottom-inline corner, so
   the last band needs room under it or they land on a card. */
.pcg.ps4 {
    padding-block-end: 96px;
}

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

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

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

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

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

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

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

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

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

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

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

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