/* ============================================================
   PICTORIAL HEADER MODULE v1.0
   Lifted from SEASIDE SCI-FI HOME PORTAL v1.9 (section 1, site
   hero, plus its header rules from section 6, breakpoints).
   Architecture: full-width background image | centred logotype |
   optional emblem | optional live strapline and credit lines |
   single composite graphic on phones.

   Per-site settings (set in site.css, not here):
     --hero-height          desktop height, match the hero image
     --hero-height-tablet   height at 1080px and below
     --hero-height-mobile   height at 768px and below
     --hero-position        left for Seaside Sci-Fi, center for Houdini
     --hero-text-colour     strapline and credit colour

   Background image: uses the generic slot name
   assets/img/hero.jpg, so it never needs editing per site.
   Easter egg: anything placed at the outer edge of hero.jpg
   only comes into view on very wide browsers. No code needed.

   v1.0: Header rules separated from the Seaside Sci-Fi home
         portal into a self-contained module. Image name made
         generic (hero.jpg). Height and anchor position moved
         into custom properties with defaults. Atomic bucket
         renamed .hero-emblem (optional). Live strapline and
         credit line styles added for Houdini Window.
   ============================================================ */

:root {
    --hero-height: 279px;
    --hero-height-tablet: 200px;
    --hero-height-mobile: 340px;
    --hero-position: center;
    --hero-text-colour: #ffffff;
}

/* --- 1. THE HEADER PANEL --- */
.site-hero {
    width: 100%;
    height: var(--hero-height);
    background-color: #000000;
    background-image: url('assets/img/hero.jpg');
    background-repeat: no-repeat;
    background-position: var(--hero-position) center;
    background-size: auto 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.site-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}

/* The heading holds the logotype images, so it needs no styling of its own */
.site-hero h1 {
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* --- 2. LOGOTYPE --- */

/* Desktop logotype */
.hero-logotype {
    width: 100%;
    max-width: 720px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Optional emblem, e.g. the Seaside Sci-Fi atomic bucket */
.hero-emblem {
    width: auto;
    height: 130px;
    display: block;
}

/* Mobile composite graphic, hidden on desktop */
.hero-mobile-logo {
    display: none;
    width: 90%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}

/* --- 3. LIVE TEXT (optional) --- */

/* Strapline, e.g. SCI-FI THRILLER. Written in sentence case in the
   HTML; capitals come from the styling. The left padding matches the
   letter spacing, so the extra space after the last letter doesn't
   push the line off centre. */
.hero-strapline {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    padding-left: 0.5em;
    color: var(--hero-text-colour);
    margin: 0;
}

/* Credit line, e.g. by Paul Fillingham */
.hero-credit {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--hero-text-colour);
    margin: 0;
}

/* --- 4. RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1080px) {
    .site-hero { height: var(--hero-height-tablet); }

    .hero-logotype { width: 80%; }

    .hero-emblem { height: 90px; }
}

@media (max-width: 768px) {
    .site-hero {
        height: var(--hero-height-mobile);
        background-position: center center;
    }

    /* Hide desktop graphics */
    .hero-logotype { display: none; }
    .hero-emblem { display: none; }

    /* Show the single mobile composite */
    .hero-mobile-logo { display: block; }

    .hero-strapline { font-size: 16px; }
    .hero-credit { font-size: 14px; }
}