/* ─────────────────────────────────────────────────────────────────────────
   henrysGhostSagaHomeStyles.css
   TNT | Henry's Ghost Saga — Home Page
   Dark purple / ghost / spooky theme.
   Card layout mirrors Creative Cross Training home; colors swapped to violet.
──────────────────────────────────────────────────────────────────────────── */

:root {
    --hgs-dark:   #0d0a14;
    --hgs-panel:  #160f20;
    --hgs-panel2: #1e1428;
    --hgs-purple: #7c3aed;
    --hgs-violet: #a855f7;
    --hgs-ghost:  #c4b5fd;
    --hgs-teal:   #4dd9e8;
    --hgs-muted:  rgba(255,255,255,0.62);
}

body { background: var(--hgs-dark); }

/* ── Back bar ───────────────────────────────────────────────────────────── */
.hgs-back-bar {
    background: #08060f;
    border-bottom: 2px solid var(--hgs-purple);
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: 0.5rem; padding: 0.55rem 1.2rem; font-size: 0.88rem;
}
.hgs-back-bar a { color: var(--hgs-ghost); font-weight: 700; text-decoration: none; }
.hgs-back-bar a:hover { color: #fff; }
.hgs-back-bar span { color: rgba(255,255,255,0.30); font-size: 0.80rem; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
#hgsHero {
    min-height: 62vh;
    background:
        linear-gradient(135deg, rgba(13,10,20,0.68) 0%, rgba(50,20,90,0.52) 56%, rgba(13,10,20,0.82) 100%),
        url('../images/multipleGhosts-background.gif') center / cover no-repeat;
    background-color: var(--hgs-dark);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 5rem 1rem 4rem;
}
.hgs-hero-content { max-width: 860px; }
.hgs-eyebrow {
    color: rgba(255,255,255,0.45); display: block;
    font-size: 0.72rem; letter-spacing: 3px;
    margin-bottom: 0.85rem; text-transform: uppercase; font-weight: 700;
}
.hgs-hero-title {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(2.45rem, 6vw, 4.25rem);
    line-height: 1.08; margin-bottom: 1.15rem;
    color: var(--hgs-ghost);
    text-shadow: 0 0 40px rgba(168,85,247,0.55);
}
.hgs-hero-subtitle {
    color: rgba(255,255,255,0.72);
    font-size: clamp(0.95rem, 2.2vw, 1.12rem);
    line-height: 1.72; margin-bottom: 2.1rem;
}
.hgs-hero-cta {
    display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
}
.btn-hgs-primary, .btn-hgs-secondary {
    border-radius: 50px; display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'Boogaloo', cursive; font-size: 1.15rem;
    padding: 0.62rem 1.85rem; text-decoration: none;
    transition: transform 0.15s, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-hgs-primary  { background: var(--hgs-purple); border: 2px solid var(--hgs-purple); color: #fff; }
.btn-hgs-secondary { background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.42); color: #fff; }
.btn-hgs-primary:hover, .btn-hgs-secondary:hover { color: #fff; transform: translateY(-2px); }
.btn-hgs-primary:hover { background: var(--hgs-violet); border-color: var(--hgs-violet); }
.btn-hgs-secondary:hover { border-color: var(--hgs-ghost); color: var(--hgs-ghost); }

/* ── "What is the Saga?" section ────────────────────────────────────────── */
#hgsWhat {
    background: #f0eef8; color: #1e1030; padding: 5rem 0;
}
#hgsWhat .hgs-section-label { color: #6d28d9; }
.hgs-section-label {
    font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
}
.hgs-section-title {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(1.85rem, 4vw, 2.75rem); margin-bottom: 1.15rem;
}
#hgsWhat p { color: #4a3a5f; font-size: 0.96rem; line-height: 1.78; }
.hgs-principle-card {
    background: #fff;
    border: 1.5px solid rgba(60,20,90,0.12);
    border-top: 4px solid var(--hgs-purple);
    border-radius: 14px; height: 100%;
    padding: 1.55rem 1.4rem;
    box-shadow: 0 12px 28px rgba(60,20,90,0.08);
}
.hgs-principle-icon {
    align-items: center; background: #f3e8ff; border-radius: 50%;
    color: #6d28d9; display: inline-flex; font-size: 1.25rem;
    height: 42px; justify-content: center; margin-bottom: 0.75rem; width: 42px;
}
.hgs-principle-title { color: #1e1030; font-family: 'Boogaloo', cursive; font-size: 1.18rem; margin-bottom: 0.45rem; }
.hgs-principle-desc { color: #5a4a5f; font-size: 0.875rem; line-height: 1.62; margin: 0; }
.hgs-note {
    background: rgba(124,58,237,0.07); border-left: 4px solid var(--hgs-purple);
    border-radius: 0 8px 8px 0; color: #4a3a5f;
    font-size: 0.9rem; margin-top: 1.2rem; padding: 0.85rem 1.1rem;
}

/* ── Entries section ────────────────────────────────────────────────────── */
#hgsEntries {
    background:
        radial-gradient(circle at 15% 10%, rgba(124,58,237,0.18), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(77,217,232,0.10), transparent 24%),
        var(--hgs-dark);
    color: #fff; padding: 5rem 0;
}
#hgsEntries .hgs-section-label { color: var(--hgs-ghost); }
.hgs-entries-subtitle {
    color: rgba(255,255,255,0.45); font-size: 0.9rem; margin-bottom: 3rem;
}

/* ── Entry cards ────────────────────────────────────────────────────────── */
.hgs-entry-card {
    background: linear-gradient(180deg, var(--hgs-panel) 0%, var(--hgs-panel2) 100%);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 18px; color: #fff;
    display: flex; flex-direction: column; height: 100%;
    overflow: hidden; text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.hgs-entry-link:hover {
    border-color: var(--hgs-purple);
    box-shadow: 0 16px 42px rgba(0,0,0,0.62);
    color: #fff; cursor: pointer; transform: translateY(-5px);
}
.hgs-entry-thumb {
    align-items: center; background: #0c080c;
    display: flex; height: 180px; justify-content: center;
    overflow: hidden; position: relative;
}
.hgs-entry-thumb-bg {
    background-position: center; background-repeat: no-repeat; background-size: cover;
    inset: 0; opacity: 0.72; position: absolute;
    transition: opacity 0.3s, transform 0.4s;
}
.hgs-entry-link:hover .hgs-entry-thumb-bg { opacity: 0.95; transform: scale(1.05); }
.hgs-entry-thumb::after {
    background: linear-gradient(180deg, transparent 35%, rgba(13,10,20,0.78) 100%);
    content: ''; inset: 0; position: absolute;
}
.hgs-entry-body {
    display: flex; flex: 1; flex-direction: column; padding: 1.4rem;
}
.hgs-entry-header {
    align-items: flex-start; display: flex; gap: 0.75rem; margin-bottom: 0.65rem;
}
.hgs-entry-icon {
    align-items: center; background: rgba(168,85,247,0.12);
    border: 1px solid rgba(168,85,247,0.28); border-radius: 50%;
    color: var(--hgs-ghost); display: inline-flex; flex-shrink: 0;
    font-size: 1.1rem; height: 38px; justify-content: center; width: 38px;
}
.hgs-entry-stage {
    color: var(--hgs-teal); font-size: 0.67rem; font-weight: 700;
    letter-spacing: 2px; margin-bottom: 0.25rem; text-transform: uppercase;
}
.hgs-entry-title { font-family: 'Boogaloo', cursive; font-size: 1.38rem; line-height: 1.18; margin: 0; }
.hgs-entry-desc { color: var(--hgs-muted); flex: 1; font-size: 0.86rem; line-height: 1.58; margin-bottom: 1rem; }
.hgs-entry-langs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.hgs-lang-badge {
    border: 1px solid; border-radius: 50px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px; padding: 0.18rem 0.65rem;
}
.hgs-lang-js   { border-color: #f7df1e; color: #f7df1e; }
.hgs-lang-java { border-color: #5ac8f5; color: #5ac8f5; }
.hgs-lang-py   { border-color: #4ade80; color: #4ade80; }
.hgs-entry-source {
    border-top: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.34);
    font-size: 0.76rem; margin-top: auto; padding-top: 0.7rem;
}
.hgs-entry-source a { color: rgba(255,255,255,0.54); font-weight: 400; text-decoration: underline; }
.hgs-entry-source a:hover { color: var(--hgs-ghost); }

/* Queued (coming soon) card */
.hgs-entry-card.hgs-queued { opacity: 0.55; pointer-events: none; }
.hgs-queued-badge {
    background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.30);
    border-radius: 50px; color: var(--hgs-ghost); display: inline-block;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px;
    margin-top: 0.6rem; padding: 0.22rem 0.8rem; text-transform: uppercase;
}

/* ── Queue section ──────────────────────────────────────────────────────── */
.hgs-upcoming {
    border-top: 1px solid rgba(255,255,255,0.08); margin-top: 3.5rem; padding-top: 2.5rem;
}
.hgs-upcoming-label {
    color: var(--hgs-ghost); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 3px; margin-bottom: 1rem; text-transform: uppercase;
}
.hgs-queue-item {
    align-items: center; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
    color: rgba(255,255,255,0.38); display: flex; gap: 1rem; padding: 0.9rem 1.2rem;
}
.hgs-queue-num {
    color: rgba(255,255,255,0.22); font-family: 'Boogaloo', cursive;
    font-size: 1.05rem; min-width: 1.4rem; text-align: center;
}
.hgs-queue-name { flex: 1; font-weight: 600; }
.hgs-queue-why  { color: rgba(255,255,255,0.24); font-size: 0.77rem; text-align: right; }

/* ── Page nav ───────────────────────────────────────────────────────────── */
#hgsPageNav { background: #0a0714; border-top: 1px solid rgba(124,58,237,0.18); padding: 2rem 0; }
.hgs-nav-links { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.hgs-nav-btn {
    align-items: center; border-radius: 50px; display: inline-flex;
    font-size: 0.875rem; font-weight: 600; gap: 0.5rem;
    padding: 0.55rem 1.4rem; text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.hgs-nav-btn:hover { transform: translateY(-1px); text-decoration: none; }
.hgs-nav-btn-back { border: 1.5px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.70); }
.hgs-nav-btn-back:hover { background: rgba(255,255,255,0.08); color: #fff; }
.hgs-nav-btn-ct { background: rgba(124,58,237,0.12); border: 1.5px solid rgba(124,58,237,0.42); color: var(--hgs-ghost); }
.hgs-nav-btn-ct:hover { background: rgba(124,58,237,0.22); color: var(--hgs-ghost); }

@media (max-width: 575px) {
    #hgsHero { min-height: 56vh; }
    .hgs-back-bar { justify-content: center; text-align: center; }
    .hgs-queue-why { display: none; }
}