/* Applied via inline CSS custom properties set from the houses table (see common_room.php),
   this file only supplies the generic rules that consume --house-* variables. */

.house-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 48px 32px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)),
        var(--house-motif) center / cover no-repeat,
        var(--house-primary);
    border: 1px solid color-mix(in srgb, var(--house-secondary) 60%, transparent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--house-secondary) 25%, transparent);
}

.house-hero h1 { color: var(--house-secondary); }

.house-crest {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.house-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--house-primary) 70%, black 30%);
    border: 1px solid var(--house-secondary);
    color: var(--house-secondary);
    font-family: var(--font-display);
}

/* Great Hall — shared by the whole school, so it uses a fixed gold/night
   palette instead of a per-house one (see great_hall.php). */
.great-hall-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 48px 32px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.6)),
        var(--color-night-mid);
    border: 1px solid color-mix(in srgb, var(--color-gold) 60%, transparent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--color-gold) 25%, transparent);
}
.great-hall-hero h1 { color: var(--color-gold-bright); }
.great-hall-crest {
    width: 140px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.great-hall-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-night-mid) 70%, black 30%);
    border: 1px solid var(--color-gold);
    color: var(--color-gold-bright);
    font-family: var(--font-display);
}
.great-hall-hero-compact { padding: 22px 28px; }
.great-hall-crest-compact { width: 84px; }
.great-hall-scene {
    display: block;
    width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-gold) 60%, transparent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--color-gold) 15%, transparent);
}

.common-room-scene {
    display: block;
    width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-gold) 60%, transparent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--color-gold) 15%, transparent);
}

.house-hero-compact { padding: 22px 28px; }
.house-crest-compact { width: 84px; height: 84px; }