/* ═══ XPLAY αρχική ═══ */

.hero { display: grid; grid-template-columns: 1fr 340px; gap: 32px; padding: 32px 0 0; }
.hero-lead .thumb { aspect-ratio: 16/9; }
.hero-lead h1 { font-size: 48px; margin-top: 16px; }
.hero-lead h1 a:hover { color: var(--accent); }
.hero-lead p.dek { color: var(--ink-2); font-size: 17px; max-width: 60ch; margin: 12px 0 0; }
.hero-lead .meta { margin-top: 10px; }

.hero-rail { display: flex; flex-direction: column; }
.rail-item { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 96px 1fr; gap: 14px; }
.rail-item:first-child { padding-top: 0; }
.rail-item .thumb { aspect-ratio: 1; border-radius: 4px; }
.rail-item h3 { font-family: var(--font-body); font-size: 16.5px; font-weight: 700; line-height: 1.3; margin: 0; }
.rail-item .meta { margin-top: 6px; }

@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; }
	.hero-lead h1 { font-size: 32px; }
}

/* ── «Τώρα παίζουν» ticker ── */
.ticker { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.ticker .wrap { display: flex; gap: 10px; align-items: center; min-height: 46px; overflow-x: auto; padding-top: 6px; padding-bottom: 6px; }
.ticker .label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; margin-right: 6px; flex: none; }
.ticker .chip { font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); background: var(--card); padding: 5px 12px; border-radius: 99px; flex: none; }
.ticker .chip:hover { border-color: var(--accent-2); }

/* ── Game Hubs row: art-led κάρτες, τίτλος πάνω στην εικόνα ── */
.hub-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hub-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; display: flex; align-items: flex-end;
            background: linear-gradient(135deg, #241b38, #6D28D9 75%, #E100FF 140%); transition: transform 0.15s, box-shadow 0.15s; }
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hub-card .thumb { position: absolute; inset: 0; border-radius: 0; }
.hub-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 7, 16, 0.9), rgba(10, 7, 16, 0.25) 55%, transparent 75%); }
.hub-card .body { position: relative; z-index: 1; padding: 14px 16px; color: #fff; width: 100%; }
.hub-card h3 { font-size: 21px; margin: 0; line-height: 1.05; color: #fff; }
.hub-card .meta { margin-top: 4px; color: rgba(255, 255, 255, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-card .score { position: absolute; z-index: 1; top: 12px; right: 12px; font-family: var(--font-display); font-weight: 800; font-size: 15px;
                   color: #fff; background: rgba(10, 7, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(6px);
                   padding: 4px 10px; border-radius: 8px; }

/* ── Κυκλοφορίες strip ── */
.rel-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.rel-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--card); }
.rel-card:hover { border-color: var(--accent); }
.rel-card .date { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent-2); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.rel-card h3 { font-size: 17px; margin-top: 6px; line-height: 1.15; }
.rel-card .plat { font-size: 12px; color: var(--ink-2); margin-top: 6px; }

/* ── Category blocks ── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.home-card { display: block; }
.home-card .thumb { aspect-ratio: 16/10; }
.home-card h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 700; line-height: 1.35; margin: 10px 0 0; }
.home-card .meta { margin-top: 5px; }

/* ── Στήλες: κάθε στήλη με το δικό της accent ── */
.cols-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.col-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/8; display: flex; align-items: flex-end;
            background: linear-gradient(135deg, #16121f, var(--col-accent, #6D28D9) 170%); transition: transform 0.15s, box-shadow 0.15s;
            border-bottom: 3px solid var(--col-accent, var(--accent)); }
.col-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.col-card .thumb { position: absolute; inset: 0; border-radius: 0; }
.col-card::after { content: ""; position: absolute; inset: 0;
                   background: linear-gradient(to top, rgba(10, 7, 16, 0.92), rgba(10, 7, 16, 0.3) 50%, transparent 72%); }
.col-card .body { position: relative; z-index: 1; padding: 16px 18px; color: #fff; width: 100%; display: flex; align-items: baseline; gap: 12px; }
.col-card h3 { font-size: 24px; margin: 0; color: #fff; }

@media (max-width: 900px) {
	.hub-row, .cat-grid { grid-template-columns: repeat(2, 1fr); }
	.rel-strip { grid-template-columns: repeat(2, 1fr); }
	.cols-row { grid-template-columns: 1fr; }
}

/* ── Ταινίες & Σειρές: editorial grid ── */
.screen-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 20px; }
.screen-card { position: relative; border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end;
               background: linear-gradient(135deg, #241b38, #6D28D9 75%, #E100FF 140%); transition: transform 0.15s, box-shadow 0.15s; }
.screen-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.screen-card .thumb { position: absolute; inset: 0; border-radius: 0; }
.screen-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 7, 16, 0.92), rgba(10, 7, 16, 0.3) 55%, transparent 78%); }
.screen-card .body { position: relative; z-index: 1; padding: 14px 16px; color: #fff; width: 100%; }
.screen-card .badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
                      color: #fff; background: rgba(225, 0, 255, 0.75); border-radius: 4px; padding: 2px 8px; margin-bottom: 8px; }
.screen-card h3 { margin: 0; color: #fff; line-height: 1.15; }
.screen-card.s-lead { grid-column: span 2; grid-row: span 2; aspect-ratio: 16/12; }
.screen-card.s-lead h3 { font-size: 30px; }
.screen-card.s-med { grid-column: span 1; aspect-ratio: 16/11; }
.screen-card.s-med h3 { font-size: 18px; }
.screen-card.s-small { grid-column: span 1; aspect-ratio: 16/11; }
.screen-card.s-small h3 { font-size: 15.5px; }
.screen-card.s-small .badge { margin-bottom: 5px; }

/* ── Reviews block ── */
.reviews-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start; }
.review-featured { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); transition: transform 0.15s, box-shadow 0.15s; }
.review-featured:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.review-featured .thumb { aspect-ratio: 16/9; border-radius: 0; }
.review-featured .body { padding: 16px 18px 18px; position: relative; }
.review-featured .rscore { position: absolute; top: -26px; right: 16px; font-family: var(--font-display); font-weight: 800; font-size: 24px;
                           color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-radius: 10px; padding: 8px 14px; line-height: 1; }
.review-featured .rscore small { font-size: 13px; opacity: 0.8; }
.review-featured h3 { font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; }
.review-featured .meta { margin-top: 6px; }
.review-list { display: grid; gap: 12px; }
.review-row { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: var(--card); }
.review-row:hover { border-color: var(--accent); }
.review-row .thumb { aspect-ratio: 1; border-radius: 6px; }
.review-row h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0; }
.review-row .meta { margin-top: 4px; }

@media (max-width: 900px) {
	.screen-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	/* Στο κινητό το ύψος το ορίζει το κείμενο, όχι το aspect-ratio — αλλιώς κόβονται τίτλοι */
	.screen-card.s-lead { grid-column: span 2; grid-row: span 1; aspect-ratio: auto; min-height: 250px; }
	.screen-card.s-med, .screen-card.s-small { aspect-ratio: auto; min-height: 180px; }
	.screen-card .body { padding-top: 56px; }
	.screen-card::after { background: linear-gradient(to top, rgba(10, 7, 16, 0.94), rgba(10, 7, 16, 0.55) 60%, rgba(10, 7, 16, 0.15)); }
	.screen-card.s-med h3, .screen-card.s-small h3 { font-size: 14.5px; }
	.reviews-grid { grid-template-columns: 1fr; }
}

/* ── Κινητό: μεγαλύτερη τυπογραφία στα sections της αρχικής ── */
@media (max-width: 760px) {
	.rail-item h3 { font-size: 17px; line-height: 1.35; }
	.home-card h3 { font-size: 16.5px; line-height: 1.4; }
	.rel-card h3 { font-size: 17.5px; }
	.rel-card .date { font-size: 12px; }
	.rel-card .plat { font-size: 13px; }
	.screen-card.s-med h3, .screen-card.s-small h3 { font-size: 16px; }
	.screen-card .badge { font-size: 11.5px; }
	.ticker .label { font-size: 12px; }
	/* Στόχοι αφής στη λωρίδα «Τώρα παίζουν» */
	.ticker a { padding: 9px 14px; }
}

/* Οδηγοί: 3 στήλες μόνο σε desktop — στο κινητό μία, με κανονικές κάρτες */
.cat-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cat-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
	.cat-grid, .cat-grid--3 { grid-template-columns: 1fr; }
	.cat-grid .home-card h3 { font-size: 17.5px; }
}