/*
Theme Name: GS Infinite
Theme URI:  https://infinite.genomestudios.ca
Author:     Genome Studios
Description: The Genome Infinite media-core hub theme — a dark, Netflix-style media gallery (hero + channel
             rows). The default presentation for the hub; properties like SPK ride their own skins over the
             same core data.
Version:    0.2.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: gs-infinite
*/

/* ==========================================================================
   Base
   ========================================================================== */
:root {
    --bg:        #0b0d12;
    --surface:   #14161f;
    --text:      #ececf2;
    --muted:     #9aa0b4;
    --accent:    #ff4d6d;
    --radius:    8px;
}
* { box-sizing: border-box; }
body.gs-infinite {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* ==========================================================================
   Top nav
   ========================================================================== */
.gs-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: baseline; gap: .8rem;
    padding: 1rem 4vw;
    background: linear-gradient(180deg, rgba(11,13,18,.96), rgba(11,13,18,.55) 80%, transparent);
}
.gs-brand {
    font-weight: 800; font-size: 1.25rem; letter-spacing: .02em;
    color: var(--accent); text-decoration: none;
}
.gs-nav-tag { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; }

/* ==========================================================================
   Hero
   ========================================================================== */
.gs-hero {
    position: relative;
    min-height: 56vh;
    display: flex; align-items: flex-end;
    margin-top: -4.4rem;            /* tuck under the sticky nav */
    padding: 0 4vw 3.5rem;
    background-size: cover; background-position: center;
}
.gs-hero::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(11,13,18,.85), rgba(11,13,18,.25) 55%, transparent),
        linear-gradient(0deg, var(--bg), transparent 45%);
}
.gs-hero-inner { position: relative; z-index: 1; max-width: 640px; }
.gs-hero-kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; margin: 0 0 .6rem; }
.gs-hero-title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0 0 .8rem; }
.gs-hero-desc  { color: var(--muted); font-size: 1.05rem; line-height: 1.5; margin: 0 0 1.4rem; }
.gs-hero-actions { display: flex; gap: .7rem; }

.gs-btn {
    display: inline-block; padding: .6rem 1.4rem; border-radius: var(--radius);
    font-weight: 700; cursor: pointer; user-select: none; font-size: .95rem;
}
.gs-btn-play  { background: var(--accent); color: #fff; }
.gs-btn-ghost { background: rgba(255,255,255,.14); color: var(--text); }

/* ==========================================================================
   Channel rows
   ========================================================================== */
.gs-rows { padding: 1rem 0 4rem; }
.gs-row { margin: 2.2rem 0; }
.gs-row-title { margin: 0 0 .8rem; padding: 0 4vw; font-size: 1.15rem; font-weight: 700; }

.gs-track {
    display: flex; gap: 1rem; padding: .4rem 4vw 1rem;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.gs-track::-webkit-scrollbar { display: none; }

/* ==========================================================================
   Cards
   ========================================================================== */
.gs-card { flex: 0 0 auto; scroll-snap-align: start; }
.gs-poster {
    position: relative;
    width: 168px; aspect-ratio: 2 / 3;
    border-radius: var(--radius); overflow: hidden;
    background-size: cover; background-position: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.gs-poster::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 55%);
}
.gs-card:hover .gs-poster {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 28px rgba(0,0,0,.6);
}
.gs-kind {
    position: absolute; top: .55rem; left: .55rem; z-index: 1;
    font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: .2rem .5rem; border-radius: 4px;
    background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(2px);
}
.gs-card-title {
    position: relative; z-index: 1;
    padding: .7rem .7rem .8rem; font-size: .85rem; font-weight: 600; line-height: 1.25;
}

/* ==========================================================================
   Empty state + footer
   ========================================================================== */
.gs-empty { max-width: 640px; margin: 6rem auto; padding: 0 4vw; text-align: center; }
.gs-empty h1 { color: var(--accent); }
.gs-empty p  { color: var(--muted); }

.gs-foot {
    padding: 2rem 4vw 3rem; color: var(--muted); font-size: .8rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
    .gs-poster { width: 132px; }
    .gs-hero { min-height: 64vh; }
}