/* HELL LORDS GLOBAL.CSS */
/* ==================== HELL LORDS GLOBAL.CSS ==================== */
:root {
    --bg: #0a0a0a;
    --card: #111111;
    --text: #e0e0e0;
    --muted: #888888;
    --red: #c8102e;
    --red-dark: #a00;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    line-height: 1.5;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: white; text-decoration: underline; }

.index-hero { position: relative; width: 100%; overflow: hidden; margin-bottom: 30px; }
.index-banner { width: 100%; height: auto; display: block; }

/* NAV */
.nav-strip {
    display: flex; justify-content: center; gap: 1.5rem;
    padding: 1.25rem 0; background: #111; border-bottom: 1px solid #222;
}
.nav-btn {
    padding: 0.75rem 1.5rem; background: #1a1a1a; border: 1px solid #333;
    border-radius: 9999px; color: var(--red); font-weight: 700;
    transition: all 0.3s;
}
.nav-btn:hover {
    background: var(--red); color: white; transform: translateY(-3px);
}

/* MOVIE GRID (used on home + genre pages) */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 24px;
}
.movie-card {
    background: var(--card); border-radius: 12px; overflow: hidden;
    border: 1px solid #222; transition: all 0.3s;
}
.movie-card:hover {
    border-color: var(--red); transform: translateY(-8px);
}
.movie-card img {
    width: 100%; aspect-ratio: 2/3; object-fit: cover;
}
.movie-card .info {
    padding: 14px;
}
.movie-card h3 {
    font-size: 1.1rem; margin: 0 0 6px; line-height: 1.3;
}
.movie-card .year { color: var(--muted); font-size: 0.9rem; }
.movie-card .stars {
    font-size: 0.85rem; color: var(--red); margin-top: 8px;
}

/* CATALOGUE */
.cat-wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.cat-title {
    text-align: center; font-size: 3rem; font-weight: 900;
    color: var(--red); margin-bottom: 2rem;
}
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.cat-card {
    background: var(--card); border: 1px solid #222; border-radius: 12px;
    padding: 1.5rem; transition: all 0.3s;
}
.cat-card:hover { border-color: var(--red); transform: translateY(-6px); }

.cat-card summary {
    font-size: 1.4rem; font-weight: 700; color: var(--red); cursor: pointer;
}
.count { color: var(--muted); font-size: 0.95rem; margin-left: 8px; }

.pages {
    margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.page-link {
    padding: 0.6rem 1.2rem; background: #1a1a1a; border: 1px solid #333;
    border-radius: 8px; color: var(--text); font-size: 0.95rem;
}
.page-link:hover {
    background: var(--red); color: white; border-color: var(--red);
}

/* MOVIE CARD */
.movie-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:24px; }
.movie-card {
    background:var(--card); border-radius:12px; overflow:hidden;
    border:1px solid #222; transition:all .3s;
}
.movie-card:hover { border-color:var(--red); transform:translateY(-8px); }
.movie-card img { width:100%; aspect-ratio:2/3; object-fit:cover; }
.movie-card .info { padding:14px; }
.movie-card h3 { font-size:1.1rem; margin:0 0 6px; line-height:1.3; }
.movie-card .year { color:var(--muted); font-size:0.9rem; }
.movie-card .stars { font-size:0.85rem; color:var(--red); margin-top:8px; display:flex; flex-wrap:wrap; gap:4px; }