/* =========================================================
   File: css/components/hero.css
   Title: Hero — Logo Styling Only (layout controls layout)
   Version: 2025-12-04 — CLEAN + COMPATIBLE WITH layout.css
   ---------------------------------------------------------
   EXPECTED HTML:

   <div id="hero-bg" class="area-dark area-cell hero-container">
     <div class="hero-media">
       <img src="visual/ai/aerial/aerial-7-lg.jpg"
            alt="Aerial view of Invent City"
            class="hero-img">
     </div>

     <section id="hero">
       <div id="siteHeader" class="hero-header">
         <img src="visual/ai/logos/site-header.svg"
              alt="Invent City Header Logo"
              class="hero-header-img">
       </div>
     </section>
   </div>
   ========================================================= */


/* ---------------------------------------------------------
   1. HERO HEADER / LOGO
   --------------------------------------------------------- */

/* Wrapper for the site header logo */
#hero .hero-header {
  position: relative;
  z-index: 3;     /* safely above background image */
  text-align: center;
}

/* Site header SVG sizing */
#hero .hero-header-img {
  display: block;
  max-width: min(80%, 520px);
  height: auto;
  margin: 0 auto;
}

/* Small screen adjustments */
@media (max-width: 767.98px) {
  #hero .hero-header-img {
    max-width: 80%;
  }
}

/* =========================================================
   END OF FILE — css/components/hero.css
   ========================================================= */