/* ============================================================================
   E-Able Power — Unified Banner System (v2)
   ----------------------------------------------------------------------------
   Single source of truth for every NON-HOMEPAGE page banner / hero + facts bar.
   Visual baseline: energy-storage-system.html.

   Structure (semantic classes):
     <section class="site-banner">
       <div class="site-banner__inner">
         <p class="site-banner__eyebrow">…</p>
         <h1 class="site-banner__title">
           <span><em>Line 1</em></span><span><em>Line 2</em></span>
         </h1>
         <p class="site-banner__description">…</p>
         <div class="site-banner__actions">…buttons…</div>
         <figure class="site-banner__media">…optional image…</figure>
       </div>
     </section>

     <section class="banner-facts">
       <div class="banner-facts__item">
         <span class="banner-facts__label">LABEL</span>
         <strong class="banner-facts__value">Value</strong>
       </div>
       … up to 5 items …
     </section>

   Per-page configuration (CSS variables on .site-banner):
     --banner-image           banner background image (default navy gradient)
     --banner-media-position  media placement (right / center)

   Heights:
     Desktop  ≥1024px  banner 680px / facts 112px
     Tablet   768–1023 banner 620px / facts 108px
     Mobile   ≤767px   banner 560px / facts auto (2-col grid)
   ========================================================================= */

/* kill horizontal scroll caused by hidden nav mega-menus (non-homepage only) */
html, body { overflow-x: clip; }

.site-banner {
  position: relative;
  height: 680px;
  min-height: 680px;
  display: flex;
  align-items: flex-start;   /* inner pinned top; padding controls eyebrow y */
  overflow: hidden;
  box-sizing: border-box;
  background: var(--banner-image, linear-gradient(145deg, #062847 0%, #04203c 55%, #031a36 100%));
  background-size: cover;
  background-position: center;
  color: #fff;
}
/* faint radial glow only (no grid texture — keeps every banner identical) */
.site-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 73% 15%, rgba(105, 200, 245, .14), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(232, 177, 60, .07), transparent 30%);
  background-size: auto, auto;
  pointer-events: none;
}
/* text-contrast overlay (image banners) + bottom fade into page */
.site-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 26, 54, .18), rgba(3, 26, 54, .34) 78%),
    var(--banner-overlay, transparent);
  pointer-events: none;
}

/* ---- inner content grid: text column ≤ 56% / media column ---- */
.site-banner__inner {
  position: relative;
  z-index: 2;
  width: min(1370px, 92%);
  margin: 0 auto;
  padding: 192px 0 44px; /* reserve for fixed top nav + breathing room */
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 0 56px;
  align-content: start;   /* eyebrow starts at the same y on every page */
  align-items: start;
  box-sizing: border-box;
}
.site-banner__eyebrow,
.site-banner__title,
.site-banner__description,
.site-banner__actions,
.site-banner__inner .breadcrumbs { grid-column: 1; }
.site-banner__media { grid-column: 2; grid-row: 1 / -1; }

/* ---- eyebrow (gold, uppercase, tracked) ---- */
.site-banner__eyebrow {
  margin: 0;
  color: var(--gold, #e8b13c);
  font: 800 11px/1.6 Manrope, Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ---- H1 title: max 2 semantic lines ---- */
.site-banner__title {
  max-width: 900px;
  margin: 20px 0 0;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 700;
  text-wrap: balance;
  color: #fff;
}
.site-banner__title span {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
}
.site-banner__title em {
  display: block;
  font-style: normal;
}

/* ---- description (fixed 3-line height for uniform banner rhythm) ---- */
.site-banner__description {
  margin: 22px 0 0;
  max-width: 560px;
  color: var(--line, #c9dde8);
  font-size: 16px;
  line-height: 1.75;
  min-height: calc(1.75em * 3);   /* always reserve 3 lines */
}

/* ---- actions / buttons ---- */
.site-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.site-banner__actions .button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  min-width: 190px;
  padding: 0 22px;
  box-sizing: border-box;
  background: var(--gold, #e8b13c);
  color: var(--navy, #031a36);
  border: 1px solid var(--gold, #e8b13c);
  font: 800 11px/1 Manrope, Arial, sans-serif;
  letter-spacing: .055em;
  text-decoration: none;
  transition: transform .22s, background .22s, border-color .22s, box-shadow .22s;
}
.site-banner__actions .button:hover {
  background: var(--gold-hi, #f4c85f);
  border-color: var(--gold-hi, #f4c85f);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(3, 26, 54, .3);
}
.site-banner__actions .button.ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .72);
}
.site-banner__actions .button.ghost:hover {
  background: #fff;
  color: var(--navy, #031a36);
  border-color: #fff;
}

/* ---- optional media (product/project image) ---- */
.site-banner__media {
  position: relative;
  z-index: 2;
  margin: 0;
  pointer-events: none;
  justify-self: var(--banner-media-position, center);
}
.site-banner__media img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 42px 38px rgba(0, 0, 0, .42));
}

/* ---- breadcrumbs (inside banner content, never crowding the title) ---- */
.site-banner__inner .breadcrumbs {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  color: #a7c2d4;
  font-size: 12px;
  letter-spacing: .02em;
}
.site-banner__inner .breadcrumbs a { color: var(--gold, #e8b13c); text-decoration: none; }

/* ============================================================================
   Entrance animation (transform + opacity only)
   Eyebrow 80ms → title lines (750ms, second line +120ms) → media 220ms
   → description 340ms → CTA 460ms
   ========================================================================= */
@keyframes banner-eyebrow { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes banner-line    { from { transform: translateY(115%); } to { transform: none; } }
@keyframes banner-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes banner-rise    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes banner-up      { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes banner-media   { from { opacity: 0; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } }

body.hero-ready .site-banner__eyebrow  { animation: banner-eyebrow .6s  .08s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }
body.hero-ready .site-banner__title span:nth-child(1) em { animation: banner-line .75s .14s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }
body.hero-ready .site-banner__title span:nth-child(2) em { animation: banner-line .75s .26s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }
body.hero-ready .site-banner__title span:nth-child(3) em { animation: banner-line .75s .38s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }
body.hero-ready .site-banner__title:not(:has(span)) { animation: banner-fade .7s .14s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }
body.hero-ready .site-banner__media       { animation: banner-media .9s .22s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }
body.hero-ready .site-banner__description { animation: banner-rise .6s .34s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }
body.hero-ready .site-banner__actions     { animation: banner-up   .6s .46s var(--ease, cubic-bezier(.16, 1, .3, 1)) both; }

/* ============================================================================
   Facts bar (.banner-facts)
   Overlap: 1/4 of its own height rises into the banner via translateY(25%),
   the remaining 3/4 sits on the light page background below.
   ========================================================================= */
.banner-facts {
  position: relative;
  z-index: 5;
  width: min(1180px, 92vw);
  margin: -30px auto 0;       /* overlap the banner by ~30px (compact spec) */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border-top: 3px solid #e8b13c;
  box-sizing: border-box;
  box-shadow: 0 14px 30px rgba(3, 26, 54, .10);
}

/* Fixed 32px gap between the tag-bar and the first content block on every page */
.banner-facts + * {
  padding-top: 32px !important;
}
.banner-facts__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 74px;           /* compact cell height */
  min-width: 0;
  padding: 0 22px;
  border-right: 1px solid var(--line, #d7e3ef);
  box-sizing: border-box;
}
.banner-facts__item:last-child { border-right: 0; }
.banner-facts__label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--blue, #0c638d);
  font: 800 9px/1.4 Manrope, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.banner-facts__value {
  display: block;
  margin-top: 4px;
  color: var(--navy, #031a36);
  font: 800 15px/1.25 Manrope, Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}

/* ---- facts bar entrance: rise from below, shadow fades in ---- */
@keyframes banner-facts-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes banner-facts-in-mobile {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
body.hero-ready .banner-facts {
  animation: banner-facts-in .7s .52s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
}

/* ============================================================================
   Reduced motion — kill all banner/facts movement, show final state
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .site-banner__eyebrow,
  .site-banner__title,
  .site-banner__title span,
  .site-banner__title em,
  .site-banner__description,
  .site-banner__actions,
  .site-banner__media,
  .site-banner__media img,
  .banner-facts {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================================
   Responsive
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-banner { height: 620px; min-height: 620px; }
  /* single-column content so titles always fit in 2 lines at tablet width */
  .site-banner__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 108px 0 40px;
  }
  .site-banner__title { max-width: 760px; font-size: clamp(38px, 5.4vw, 54px); line-height: 1.05; }
  .site-banner__description { max-width: 620px; }
  .site-banner__media { margin: 24px auto 0; max-width: 420px; justify-self: center; }
  .banner-facts { margin-top: -30px; }
  .banner-facts__item { padding: 0 16px; }

  /* Let the banner grow with its content so the info card (.brief-panel),
     which reflows below the title/description/CTAs, is never clipped by the
     fixed tablet height (matches the contactus reference page). */
  .site-banner:has(.brief-panel) { height: auto !important; min-height: 0 !important; }
  .site-banner__inner { min-height: 0; }
}

@media (max-width: 767px) {
  .site-banner { height: 560px; min-height: 560px; }
  .site-banner__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 96px 0 36px;
  }
  .site-banner__title {
    max-width: 340px;
    font-size: clamp(36px, 10.5vw, 48px);
    line-height: 1.06;
  }
  .site-banner__description { font-size: 15px; }
  .site-banner__actions .button { width: 100%; justify-content: center; }
  .site-banner__media { margin: 28px auto 0; max-width: 360px; justify-self: center; }

  /* Let the banner grow with its content so the always-present info card
     (.brief-panel) can reflow BELOW the title/description/CTAs without being
     clipped by the fixed mobile height (matches the contactus reference page).
     Scoped to banner inners that hold a .brief-panel so pages without the card
     keep their original fixed-height banner. */
  .site-banner:has(.brief-panel) { height: auto !important; min-height: 0 !important; }
  .site-banner__inner { min-height: 0; }

  /* facts bar: 2-column grid, content never compressed */
  .banner-facts {
    grid-template-columns: 1fr 1fr;
    margin-top: -18px;
    box-shadow: 0 16px 32px rgba(3, 26, 54, .10);
  }
  body.hero-ready .banner-facts {
    animation: banner-facts-in-mobile .7s .52s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
  }
  .banner-facts__item { padding: 12px 16px; min-height: 0; }
  .banner-facts__item:nth-child(even) { border-right: 0; }
  .banner-facts__item:nth-child(n + 3) { border-top: 1px solid var(--line, #d7e3ef); }
  .banner-facts__value { white-space: normal; font-size: 13px; line-height: 1.3; }
}

/* ---- mobile touch targets (SEO/a11y) ---- */
@media (max-width: 768px) {
  .site-header .nav > a,
  .site-header .nav-item > .nav-link,
  .site-header .mega > a,
  .site-header .third-menu a,
  .site-footer a {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================================
   Floating info label card (.brief-panel)
   ----------------------------------------------------------------------------
   Single source of truth for the Hero/Banner right-side floating info card.
   Visual + layout baseline: contactus.html. Reused verbatim across every
   NON-HOMEPAGE page. Content lives in each page's own <aside class="brief-panel">
   markup; only the shared style/animation lives here.

   Structure:
     <aside class="brief-panel" aria-label="…">
       <small>SECTION LABEL</small>
       <h2>One-line explanation.</h2>
       <ol><li>…</li><li>…</li><li>…</li></ol>
     </aside>

   Placed as the last child of .site-banner__inner. On desktop it is pinned to the
   right column (right: 0), top-aligned to the eyebrow line exactly like the
   reference card. It never pushes the banner title, actions or navigation.
   ========================================================================= */

/* ---- card surface (identical to contactus.html) ---- */
.brief-panel {
  padding: 27px 26px;
  background: linear-gradient(145deg, rgba(5, 37, 67, .94), rgba(3, 24, 52, .84));
  border-top: 2px solid var(--gold, #e8b13c);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
  backdrop-filter: blur(8px);
  color: #fff;
  box-sizing: border-box;
}

/* ---- desktop placement: pinned inside the grid, never occluding the text ---- */
.site-banner__inner .brief-panel {
  position: absolute;
  top: 174px;
  right: 0;
  z-index: 3;
  width: min(400px, 100%);
}

.brief-panel small {
  display: block;
  color: var(--gold, #e8b13c);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.brief-panel h2 {
  margin: 12px 0 15px;
  font-family: var(--font-display, 'Poppins', Arial, sans-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.18;
  color: #fff;
}
.brief-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}
.brief-panel li {
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
  color: #dceaf2;
  font-size: 12px;
  line-height: 1.55;
  counter-increment: steps;
}
.brief-panel li::before {
  content: '0' counter(steps);
  display: inline-block;
  width: 32px;
  color: var(--gold, #e8b13c);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

/* ---- entry: soft rise + fade alongside the rest of the banner (transform/opacity only) ---- */
@keyframes brief-panel-in {
  from { opacity: 0; transform: translateX(18px) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
body.hero-ready .site-banner__inner .brief-panel {
  animation: brief-panel-in .7s .34s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
}

/* ---- responsive: tablet + mobile reflow below the title/description/buttons ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-banner__inner .brief-panel {
    position: static;
    top: auto;
    right: auto;
    width: min(455px, 100%);
    margin: 28px auto 0;
    z-index: 2;
  }
}

@media (max-width: 767px) {
  .site-banner__inner .brief-panel {
    position: static;
    top: auto;
    right: auto;
    width: min(455px, 100%);
    margin: 28px auto 0;
    z-index: 2;
  }
  .brief-panel { padding: 22px; }
}

/* ---- reduced motion: show final state ---- */
@media (prefers-reduced-motion: reduce) {
  .site-banner__inner .brief-panel {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- mobile touch/FAQ safety: keep ordered lists readable on small screens ---- */
@media (max-width: 520px) {
  .brief-panel { padding: 22px; }
}

/* ============================================================================
   Parameter / spec data tables — center all non-first-column cells.
   Applies site-wide to product-detail datasheet data tables (e.g. Model
   Performance Matrix, Key Specifications, Technical Specification Matrix).
   Scope: only tables whose cells carry a light data-cell border (a signature
   of parameter tables). Feature-grid / certification tables are unaffected,
   and the first (label) column is left intact.
   ========================================================================= */
body table:has(td[style*='border: 1px solid']) td:not(:first-child),
body table:has(td[style*='border:1px solid']) td:not(:first-child),
body table:has(td[style*='border: 1px solid']) th:not(:first-child),
body table:has(td[style*='border:1px solid']) th:not(:first-child) {
  text-align: center !important;
  vertical-align: middle !important;
}

/* ===== 4th-level nav product cards: small thumb left, text right, vertically centered ===== */
.fourth-item{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;padding:6px 4px!important;color:#d9e8f3!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.08)!important;text-decoration:none!important;font:400 12px/1.35 Manrope,Arial,sans-serif!important}
.fourth-item img{width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;flex:0 0 44px!important;object-fit:contain!important;border-radius:5px!important;background:#eef2f6!important;border:1px solid rgba(255,255,255,.14)!important;margin:0!important}
.fourth-item span{flex:1 1 auto!important;min-width:0!important;line-height:1.3!important;white-space:normal!important}
.fourth-item:hover{color:#e8b13c!important;background:rgba(232,177,60,.06)!important}
.fourth-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px 16px!important}