/*
 * Hub pages: the home page and the Assets / Games / Apps listings (layout: listing, or `hub: true`).
 * A calm warm canvas so each product's own colors carry the page; vertical "poster" cards
 * (_includes/poster.html). Colors, fonts, buttons, crumbs and the .adoc-hl marker come from
 * asset-docs.css. Everything here is scoped under .hs.
 */

.hs {
    --hs-card-w: 210px;
    --hs-ratio: 2 / 3;

    max-width: 1240px;
    margin: 0 auto;
    padding: 2.5rem 0 7rem; /* bottom: room for the fixed navigation bar */
    font-family: Nunito, system-ui, sans-serif;
    color: var(--adoc-ink);
}

.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
.hs h1, .hs h2, .hs h3 { font-family: inherit; font-weight: 700; color: inherit; letter-spacing: -.02em; text-transform: none; margin: 0; }
.hs p { margin: 0; }

.hs-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--adoc-muted); margin-bottom: 1rem !important; }
.hs-card:focus-visible { outline: 3px solid var(--adoc-yellow); outline-offset: 4px; }

/* ---- Home hero: copy + a fan of three posters ---------------------------- */

.hs-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 1rem 0 1.5rem; }
.hs-title { font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; margin-bottom: 1.4rem !important; }
.hs-hero .adoc-actions { margin-top: 2rem; }
.hs-fan { position: relative; height: 440px; --hs-ratio: 9 / 16; }
.hs-fan .hs-card { position: absolute; top: 50%; left: 50%; width: 210px; transition: transform .3s ease; }
.hs-fan .hs-card h3, .hs-fan .hs-card p { display: none; }
.hs-fan .hs-art { box-shadow: 0 30px 60px rgba(20, 22, 31, .22); }
.hs-fan .hs-card:nth-child(1) { transform: translate(-115%, -48%) rotate(-9deg); }
.hs-fan .hs-card:nth-child(2) { transform: translate(-50%, -54%); z-index: 1; }
.hs-fan .hs-card:nth-child(3) { transform: translate(15%, -48%) rotate(9deg); }
.hs-fan:hover .hs-card:nth-child(1) { transform: translate(-125%, -50%) rotate(-12deg); }
.hs-fan:hover .hs-card:nth-child(3) { transform: translate(25%, -50%) rotate(12deg); }

/* ---- Shelves (home): one horizontal row per collection ------------------- */

.hs-shelf { margin-top: 3.5rem; }
.hs-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.hs-shelf-head h2 { font-size: 1.8rem; }
.hs-shelf-head a { font-weight: 700; color: var(--adoc-ink); text-decoration: none; white-space: nowrap; }
.hs-shelf-head a:hover { color: var(--adoc-ink); text-decoration: underline; text-underline-offset: .25em; }

.hs-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: var(--hs-card-w); gap: 1.25rem;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .25rem 1.25rem; margin: 0 -.25rem;
    scrollbar-width: thin; scrollbar-color: var(--adoc-line) transparent;
}
.hs-row > * { scroll-snap-align: start; }

/* ---- Listing pages ------------------------------------------------------- */

.hs-page-head { padding: 1rem 0 3rem; }
.hs-page-head h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1.05; margin-bottom: 1.2rem; }
.hs-page-head .adoc-actions, .hs-page-head .adoc-meta { margin-top: 1.5rem; }
.hs-count {
    top: -1.6em; margin-left: .5rem; font-size: .3em; letter-spacing: 0; padding: .3em .7em; border-radius: 999px;
    background: var(--adoc-ink); color: #fff; vertical-align: baseline;
}
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--hs-card-w), 1fr)); gap: 2.25rem 1.5rem; }

/* ---- Poster card --------------------------------------------------------- */

.hs-card { display: block; color: inherit; text-decoration: none; }
.hs-card:hover { color: inherit; }
.hs-art {
    position: relative; isolation: isolate; /* keeps the inner z-index below the fixed navigation bar */
    aspect-ratio: var(--hs-ratio); border-radius: var(--adoc-radius); overflow: hidden; background: #ECE8DE;
    box-shadow: var(--adoc-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hs-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.hs-card:hover .hs-art { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--adoc-shadow-hover); }
.hs-card:hover .hs-art img { transform: scale(1.04); }

/* Landscape art until a real poster exists: the image floats on a blurred copy of itself. */
.hs-art.is-auto { display: flex; align-items: center; padding: 12px; }
.hs-art.is-auto::before {
    content: ""; position: absolute; inset: -30%; background: var(--art) center / cover;
    filter: blur(30px) saturate(1.5); transform: scale(1.2);
}
.hs-art.is-auto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)); }
.hs-art.is-auto img { position: relative; z-index: 1; height: auto; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }

.hs-card h3 { font-size: 1.12rem; margin: 1rem 0 .3rem; }
.hs-card time { display: block; font-size: .8rem; font-weight: 700; color: var(--adoc-muted); margin-bottom: .3rem; }
.hs-card p { font-size: .9rem; line-height: 1.45; color: var(--adoc-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 991px) {
    .hs { padding-top: 1.5rem; }
    .hs-hero { grid-template-columns: 1fr; gap: 1rem; padding-top: 0; }
    .hs-fan { height: 340px; }
    .hs-fan .hs-card { width: 160px; }
}

@media (max-width: 575px) {
    .hs { --hs-card-w: 160px; }
    .hs-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
    .hs-fan { height: 280px; }
    .hs-fan .hs-card { width: 130px; }
    .hs-card h3 { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hs * { transition: none !important; }
}