/* =====================================================================
   Homepage - "Shop by platform"
   =====================================================================
   Four tiles under the SEO block, one per platform landing page. The whole tile opens the
   landing page through the CTA's stretched link; the category links sit above it. Logical
   properties throughout, so the layout mirrors in Arabic. */

.hp { padding-block: 16px 14px; }
.hp__title { font-size: 32px; font-weight: 900; letter-spacing: -.5px; margin: 0; }
.hp__sub { margin: 6px 0 20px; color: #9aa6c4; font-size: 16px; }

/* Desktop: the heading is visually hidden - the SEO block above already heads this. */
@media (min-width: 576px) {
    .hp__title, .hp__sub {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
}

.hp__grid {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: 240px 240px; gap: 16px;
}
.hp__tile--ps5 { grid-row: 1 / 3; }
.hp__tile--nsw { grid-column: 2 / 4; }

.hp__tile {
    position: relative; overflow: hidden; border-radius: 24px; padding: 30px 32px;
    display: flex; flex-direction: column; justify-content: space-between; isolation: isolate;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 48px -24px rgba(0,0,0,.7);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hp__tile:hover { transform: translateY(-4px); }

.hp__tile--ps5 { background: radial-gradient(60% 55% at 70% 45%, rgba(0,112,209,.6), transparent 70%), linear-gradient(165deg,#0d3268,#040c1d); }
.hp__tile--ps4 { background: radial-gradient(70% 90% at 88% 20%, rgba(232,161,58,.3), transparent 60%), linear-gradient(165deg,#222a3d,#12151f); }
.hp__tile--nsw { background: radial-gradient(60% 90% at 85% 30%, rgba(255,255,255,.22), transparent 60%), linear-gradient(165deg,#ff2b3d,#a8000d); }
.hp__tile--pc  { background: radial-gradient(70% 90% at 88% 20%, rgba(164,198,57,.25), transparent 60%), linear-gradient(165deg,#1b2433,#0b1017); }

.hp__sym {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
/* PS5 sits in the band between the wordmark and the link row: at 300px, centred, it ran into
   both. PS4 is a little smaller for the same reason (it reached its "Accessories" link). */
.hp__tile--ps5 .hp__sym { inset-inline-end: 6%; bottom: 90px; width: 200px; }
.hp__tile--nsw .hp__sym { inset-inline-end: 48px; top: 50%; transform: translateY(-50%); height: 176px; }
.hp__tile--ps4 .hp__sym { inset-inline-end: 34px; top: 26px; width: 104px; }
.hp__tile--pc  .hp__sym { inset-inline-end: 34px; top: 36px; width: 136px; }

.hp__top, .hp__bottom { position: relative; z-index: 1; }
.hp__kicker { display: block; font-size: 12px; letter-spacing: .2em; font-weight: 800; opacity: .72; text-transform: uppercase; color: #fff; }
.hp__wm {
    display: block; margin-top: 6px; font-weight: 800; letter-spacing: -4px; line-height: 1;
    background: linear-gradient(180deg,#fff 35%,rgba(255,255,255,.72));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp__tile--ps5 .hp__wm { font-size: 110px; }
.hp__tile--nsw .hp__wm { font-size: 80px; }
.hp__tile--ps4 .hp__wm, .hp__tile--pc .hp__wm { font-size: 80px; }

.hp__links { position: relative; z-index: 2; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); }
.hp__links a { color: inherit; text-decoration: none; }
.hp__links a:first-child { color: #fff; font-weight: 700; }
.hp__links a:hover { color: #fff; text-decoration: underline; }
.hp__links i { font-style: normal; opacity: .4; margin: 0 8px; }

.hp__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; font-weight: 800; font-size: 17px; text-decoration: none; }
.hp__cta:hover { text-decoration: none; }
/* The whole tile is the CTA's link target; the category links above sit over it. */
.hp__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hp__bottom { position: static; }
.hp__cta span {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.15); font-size: 18px; transition: transform .25s ease;
}
.hp__tile:hover .hp__cta span { transform: translateX(4px); }
.hp__tile--ps5 .hp__cta { color: #8fd0ff; }
.hp__tile--ps4 .hp__cta { color: #f0b35a; }
.hp__tile--nsw .hp__cta { color: #fff; }
.hp__tile--pc  .hp__cta { color: #c2e063; }

[dir="rtl"] .hp__cta span { transform: scaleX(-1); }
[dir="rtl"] .hp__tile:hover .hp__cta span { transform: translateX(-4px) scaleX(-1); }

/* Light sweep, once as the tile scrolls into view - CSS only. */
.hp__tile::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(100deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);
    transform: translateX(-100%); animation: hp-sweep 1.6s ease-out .2s 1 both;
}
@keyframes hp-sweep { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .hp__tile, .hp__cta span { transition: none; }
    .hp__tile:hover { transform: none; }
    .hp__tile::before { animation: none; display: none; }
}

/* Narrow desktop: 992-1299. The three-column grid is at its tightest here - the PS5 link row
   wraps to two lines and the wordmarks reach across to the symbols - so both scale down. */
@media (min-width: 992px) and (max-width: 1299.98px) {
    .hp__tile--nsw .hp__wm { font-size: 80px; }
    .hp__tile--ps4 .hp__wm, .hp__tile--pc .hp__wm { font-size: 64px; }
    .hp__tile--nsw .hp__sym { top: 24px; transform: none; height: 110px; }
    .hp__tile--ps4 .hp__sym { inset-inline-end: 24px; width: 90px; }
    .hp__tile--pc .hp__sym { inset-inline-end: 24px; top: 50px; width: 96px; }
}
/* The PS5 link row keeps wrapping until the tile is about 440px wide. */
@media (min-width: 992px) and (max-width: 1439.98px) {
    .hp__tile--ps5 .hp__wm { font-size: 110px; }
    .hp__tile--ps5 .hp__sym { bottom: 118px; width: 150px; }
}

/* Tablet: 576-991 */
@media (min-width: 576px) and (max-width: 991.98px) {
    .hp__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 210px 210px; }
    .hp__tile--ps5, .hp__tile--nsw { grid-column: 1 / 3; grid-row: auto; }
    .hp__tile--ps5 .hp__wm { font-size: 110px; }
    /* One row high here: the symbols move up into the top-end corner, clear of the link rows,
       and the half-width tiles take the narrow-desktop sizes. */
    .hp__tile--ps5 .hp__sym { bottom: auto; top: 16px; width: 150px; }
    .hp__tile--nsw .hp__sym { top: 18px; transform: none; height: 120px; }
    .hp__tile--ps4 .hp__wm, .hp__tile--pc .hp__wm { font-size: 64px; }
    .hp__tile--ps4 .hp__sym { inset-inline-end: 24px; width: 90px; }
    .hp__tile--pc .hp__sym { inset-inline-end: 24px; top: 50px; width: 96px; }
}

/* Mobile */
@media (max-width: 575.98px) {
    .hp { padding-inline: 10px; }
    .hp__title { font-size: 24px; }
    .hp__sub { font-size: 13px; margin: 4px 0 14px; }
    .hp__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 230px 190px 190px; gap: 10px; }
    .hp__tile--ps5, .hp__tile--nsw { grid-column: 1 / 3; grid-row: auto; }
    .hp__tile { padding: 18px; border-radius: 18px; }
    .hp__tile--ps5 .hp__wm { font-size: 76px; }
    .hp__tile--nsw .hp__wm { font-size: 58px; }
    .hp__tile--ps4 .hp__wm, .hp__tile--pc .hp__wm { font-size: 46px; }
    .hp__links { font-size: 13px; }
    .hp__tile--ps4 .hp__links, .hp__tile--pc .hp__links { display: none; }
    .hp__cta { font-size: 14px; }
    .hp__cta span { width: 30px; height: 30px; }
    .hp__tile--ps5 .hp__sym { inset-inline-end: 14px; top: 14px; bottom: auto; transform: none; width: 118px; }
    /* 70px, not 84: taller, the Joy-Con reached down into the wrapped link row. */
    .hp__tile--nsw .hp__sym { inset-inline-end: 18px; top: 18px; transform: none; height: 70px; }
    /* 48px at 10px from the edge (not 58 at 14): on a 360px phone it touched the "PS4" wordmark. */
    .hp__tile--ps4 .hp__sym { inset-inline-end: 10px; top: 58px; width: 48px; }
    .hp__tile--pc  .hp__sym { inset-inline-end: 12px; top: 66px; width: 66px; }
}