/* Brand pages (AlphaESS, SAJ, Fronius, SolarEdge) — shared layout.
   Scoped under .brand-page so nothing leaks into shared components.
   Per-page measurements come in as inline CSS custom properties on the section:
     .bk-hero      --hero-p (font-size) --hero-lh (line-height) --hero-mp (mobile font-size) --hero-pb (text padding-bottom)
     .bk-overview  --ov-pad (row padding-top) --ov-pull (image margin-top) --ov-top (text padding-top)
                   --ov-bottom (text padding-bottom) --ov-mw (mobile image width) --ov-mpull (mobile image margin-top)
     .bk-row       --p-lh (paragraph line-height + gap) --li-lh (list line-height + gap) --text-top (text padding-top) */
.brand-page .bk-container { max-width: 1200px; margin: 0 auto; }

/* Hero: photo + 70% black overlay, text left, product image right */
.brand-page .bk-hero { position: relative; padding: 220px 40px 80px; background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; }
.brand-page .bk-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.brand-page .bk-hero__grid { position: relative; display: grid; grid-template-columns: 600px 600px; max-width: 1200px; margin: 0 auto; align-items: start; }
.brand-page .bk-hero__text { padding-bottom: var(--hero-pb, 10px); }
.brand-page .bk-hero h1 { color: #fff; font-size: 60px; line-height: 72px; margin: 10px 0 12px; }
.brand-page .bk-hero__spacer { height: 48px; margin: 0 0 12px; }
.brand-page .bk-hero h2 { color: var(--orange); font-size: 45px; line-height: var(--hero-h2-lh, 54px); margin: 0 0 12px; }
.brand-page .bk-hero p { color: #fff; font-size: var(--hero-p, 18px); line-height: var(--hero-lh, 27px); margin: 0 0 12px; }
.brand-page .bk-hero p:last-child { margin-bottom: 0; }
.brand-page .bk-hero__img { width: 600px; height: auto; }

/* Generic two-column content row */
.brand-page .bk-row { padding: 80px 40px; }
.brand-page .bk-row--grey { background: rgba(242,242,242,.5); }
.brand-page .bk-grid { display: grid; grid-template-columns: 570px 570px; gap: 60px; max-width: 1200px; margin: 0 auto; align-items: start; }
.brand-page .bk-grid > * { min-width: 0; }
.brand-page .bk-row h3 { font-size: 36px; line-height: 54px; color: var(--orange); margin: 0 0 20px; }
.brand-page .bk-row p { font-size: 16px; line-height: var(--p-lh, 19.2px); margin: 0 0 var(--p-lh, 19.2px); }
.brand-page .bk-row p:last-child { margin-bottom: 0; }
.brand-page .bk-row a { color: var(--orange); text-decoration: underline; }
.brand-page .bk-row ul { list-style: disc; padding-left: 32px; }
.brand-page .bk-row li { font-size: 16px; line-height: var(--li-lh, 19.2px); margin-bottom: var(--li-lh, 19.2px); }
.brand-page .bk-row li:last-child { margin-bottom: 0; }
.brand-page .bk-text { padding-top: var(--text-top, 10px); padding-bottom: 10px; }

/* Overview: product image pulled up over the hero */
.brand-page .bk-overview { padding-top: var(--ov-pad, 32px); }
.brand-page .bk-overview__img { width: 550px; height: auto; margin: var(--ov-pull, -180px) 0 0 20px; }
.brand-page .bk-overview__text { padding-top: var(--ov-top, 42px); padding-bottom: var(--ov-bottom, 0); }

/* Feature paragraphs (✔ items): each one is preceded by a blank line on the live site */
.brand-page .bk-features p { line-height: 24px; margin: 0 0 24px; }
.brand-page .bk-features p:last-child { margin-bottom: 0; }

/* Photo with navy accent square behind a corner; vertically centred in its row */
.brand-page .bk-figure { position: relative; width: 550px; margin: 30px 0 0; align-self: center; }
.brand-page .bk-figure::before { content: ""; position: absolute; top: -20px; right: -20px; width: 200px; height: 200px; background: var(--navy); }
.brand-page .bk-figure--left { margin-left: 20px; }
.brand-page .bk-figure--left::before { right: auto; left: -20px; }
.brand-page .bk-figure img { position: relative; width: 550px; height: 367px; object-fit: cover; }
.brand-page .bk-specs .bk-text { padding-top: 41px; }

/* Spec table */
.brand-page .bk-table { width: 100%; height: 249px; border-collapse: collapse; font-size: 16px; line-height: 19.2px; }
.brand-page .bk-table th, .brand-page .bk-table td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; vertical-align: top; }
.brand-page .bk-table th { background: var(--orange); color: #fff; font-weight: 700; }
.brand-page .bk-table th:first-child, .brand-page .bk-table td:first-child { width: 34.5%; }
.brand-page .bk-table tbody tr:nth-child(odd):not(:first-child) { background: #f5f5f5; }
.brand-page .bk-table-wrap { overflow-x: auto; }

@media (max-width: 1100px) {
  .brand-page .bk-hero { padding: 50px 20px 40px; }
  .brand-page .bk-hero__grid { grid-template-columns: 1fr; }
  .brand-page .bk-hero__text { padding-bottom: 0; }
  .brand-page .bk-hero h1 { font-size: 30px; line-height: 36px; margin: 0 0 12px; }
  .brand-page .bk-hero__spacer { height: 36px; }
  .brand-page .bk-hero h2 { font-size: 24px; line-height: 31px; margin: 0 0 12px; }
  .brand-page .bk-hero p { font-size: var(--hero-mp, 14px); line-height: 1.5; margin: 0 0 12px; }
  .brand-page .bk-hero__img { width: 100%; margin-top: 28px; }
  .brand-page .bk-row { padding: 40px 20px; }
  .brand-page .bk-row h3 { font-size: 30px; line-height: 45px; margin: 0 0 12px; }
  .brand-page .bk-row p { font-size: 15px; line-height: calc(var(--p-lh, 19.2px) * 0.9375); margin: 0 0 calc(var(--p-lh, 19.2px) * 0.9375); }
  .brand-page .bk-row ul { padding-left: 30px; margin-bottom: 18px; }
  .brand-page .bk-row li { font-size: 15px; line-height: calc(var(--li-lh, 19.2px) * 0.9375); margin-bottom: calc(var(--li-lh, 19.2px) * 0.9375); }
  .brand-page .bk-grid { grid-template-columns: 1fr; gap: 0; }
  .brand-page .bk-text, .brand-page .bk-specs .bk-text { padding: 0; }
  .brand-page .bk-overview { padding: 0 20px 60px; }
  .brand-page .bk-overview__img { width: var(--ov-mw, 265px); height: var(--ov-mh, auto); object-fit: cover; margin: var(--ov-mpull, -39px) auto 0; }
  .brand-page .bk-overview__text { padding-top: 34px; padding-bottom: 0; }
  .brand-page .bk-figure { width: calc(100% - 20px); margin: 20px 0 20px; align-self: auto; order: -1; }
  .brand-page .bk-figure--left { margin-left: 20px; }
  .brand-page .bk-figure::before { width: 150px; height: 150px; }
  .brand-page .bk-figure img { width: 100%; height: auto; aspect-ratio: 550/367; }
  .brand-page .bk-features p { line-height: 22.5px; margin: 0 0 22.5px; }
  .brand-page .bk-features p:last-child { margin-bottom: 0; }
  .brand-page .bk-table { font-size: 15px; line-height: 18px; height: 249px; }
  .brand-page .bk-table th, .brand-page .bk-table td { white-space: nowrap; width: auto; }
  .brand-page .bk-started { display: none; }
}