/* panels.css — the solar array, wherever it appears.
 *
 * Owner 2026-09-08: "Somewhere in the website you need to be showcasing the
 * product Solar panels in multiple areas since this is a solar solution."
 *
 * Same register as the approved Solutions sheet: framed plates with numbered
 * figure captions, ruled tables, hairline rules. No gradients, no shadows on
 * content, no full-bleed photography — a specification page that happens to have
 * pictures in it, not a brochure.
 *
 * Every colour here is one of site.css's :root
 * tokens. Mobile first: one column is the base rule, wider screens add columns.
 * Class names are prefixed `arr-` so nothing here can collide with site.css.
 */

/* ── the plate: a framed figure at a size you can read ───────────────────── */
.arr-plate{margin:0;background:var(--soft);border:1px solid var(--line);padding:12px}
.arr-plate img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    border:1px solid var(--line);background:var(--white)}
/* A portrait frame in a row of landscape ones makes the row ragged, so every
   plate keeps the same 4/3 window; a tall original is cropped toward its upper
   half, which on these is where the array actually is. */
.arr-plate.arr-high img{object-position:50% 40%}
.arr-plate figcaption{margin:9px 2px 1px;color:var(--muted);font-size:.76rem;line-height:1.45}
.arr-plate figcaption b{display:block;color:var(--ink);font-weight:700;font-size:.7rem;
    letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}

.arr-plates{display:grid;gap:16px;grid-template-columns:1fr}

/* ── technology.php: the array section ──────────────────────────────────── */
.arr-section{border-bottom:1px solid var(--line)}
.arr-section .section-heading .eyebrow{color:var(--muted)}
.arr-lede{max-width:74ch}
.arr-traits{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:0}
.arr-traits li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);
    font-size:.9rem;line-height:1.5}
.arr-traits li:last-child{border-bottom:1px solid var(--line)}
.arr-traits li:before{content:"";position:absolute;left:0;top:20px;width:10px;height:1px;
    background:var(--blue)}
.arr-traits li b{font-weight:700}

/* the ruled table of published array figures */
.arr-data{margin-top:34px;border:1px solid var(--line);border-top:3px solid var(--navy)}
.arr-data h3{margin:0;padding:14px 18px;font-size:.72rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
    background:var(--soft)}
.arr-table{width:100%;border-collapse:collapse;font-size:.86rem}
.arr-table caption{caption-side:bottom;text-align:left;padding:12px 18px;color:var(--muted);
    font-size:.76rem;line-height:1.5}
.arr-table th,.arr-table td{text-align:left;padding:11px 18px;border-top:1px solid var(--line);
    vertical-align:top}
.arr-table thead th{border-top:0;font-size:.66rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);white-space:nowrap}
.arr-table tbody th{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
    letter-spacing:.02em;white-space:nowrap}
.arr-table tbody th a{border-bottom:1px solid var(--line)}
.arr-table tbody th a:hover{border-bottom-color:var(--blue);color:var(--blue)}
.arr-table td b{font-weight:700}
.arr-table .arr-none{color:var(--muted);font-weight:400}
.arr-scroll{overflow-x:auto}

/* ── index.php: the array band ──────────────────────────────────────────── */
.arr-band{background:var(--soft);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);padding:56px 0}
.arr-band-inner{display:grid;gap:26px;grid-template-columns:1fr}
.arr-band .arr-plate{background:var(--white)}
.arr-band-copy .eyebrow{color:var(--muted)}
.arr-band-copy h2{font-size:clamp(1.9rem,5.2vw,2.6rem);line-height:1.08;letter-spacing:-.03em;
    margin:8px 0 12px;text-wrap:balance}
.arr-band-copy>p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.62;max-width:62ch}

/* the featured configuration's published array figures, as data not decoration */
.arr-facts{margin:22px 0 0;border-top:1px solid var(--line)}
.arr-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
    padding:11px 0;border-bottom:1px solid var(--line)}
.arr-facts dt{color:var(--muted);font-size:.8rem}
.arr-facts dd{margin:0;font-weight:700;font-size:.95rem;white-space:nowrap}
.arr-source{margin:10px 0 0;color:var(--muted);font-size:.74rem;line-height:1.5}
.arr-source code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;
    color:var(--ink)}
.arr-band-copy .text-link{display:inline-block;margin-top:16px}

/* ── applications.php: the array on site ────────────────────────────────── */
.arr-field{padding:56px 0;border-top:1px solid var(--line)}
.arr-field .arr-head{max-width:64ch;margin-bottom:26px}
.arr-field .arr-head h2{font-size:clamp(1.8rem,5vw,2.4rem);line-height:1.1;letter-spacing:-.03em;
    margin:8px 0 12px}
.arr-field .arr-head p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.arr-field .arr-note{margin:20px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5;
    border-left:2px solid var(--orange);padding-left:12px;max-width:76ch}

/* ── tablet ─────────────────────────────────────────────────────────────── */
@media(min-width:680px){
  .arr-plates{grid-template-columns:1fr 1fr}
  .arr-plates>.arr-lead{grid-column:1/-1}
  .arr-band{padding:64px 0}
  .arr-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
}

/* ── desktop ────────────────────────────────────────────────────────────── */
@media(min-width:1000px){
  .arr-plates{grid-template-columns:repeat(3,1fr)}
  /* Two plates keep the same plate size as three, rather than growing to fill the
     shell — the register is a figure you can read, not a spread. */
  .arr-plates.arr-plates-2{grid-template-columns:repeat(2,1fr);max-width:846px}
  .arr-plates>.arr-lead{grid-column:auto}
  .arr-band-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:start}
  .arr-facts{grid-template-columns:1fr;gap:0}
}

/* ── index.php: photographs as rounded cards, smaller ─────────────────────
   Owner 2026-09-10: "the image should be in a card design. and smaller" and "it
   starts with panels needs rounded card image". One device for both home frames;
   the class is the home page's alone, so technology and applications keep their
   plates. */
.home-card{margin:0;background:var(--white);border:1px solid var(--line);border-radius:14px;
    overflow:hidden;box-shadow:0 1px 2px rgba(6,29,59,.05),0 10px 28px rgba(6,29,59,.07)}
.home-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft)}
.home-card figcaption{padding:10px 14px 12px;border-top:1px solid var(--line);color:var(--muted);
    font-size:.76rem;line-height:1.45}
.home-card figcaption b{display:block;margin-bottom:2px;color:var(--ink);font-size:.66rem;
    font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.home-proof{background:var(--white);padding:56px 0}
.home-proof-inner{display:grid;gap:28px;grid-template-columns:1fr}
.home-proof-copy h2{margin:8px 0 14px;font-size:clamp(2rem,5vw,3rem);line-height:1.05;letter-spacing:-.04em}
.home-proof-copy>p{margin:0;color:var(--muted);font-size:1rem;line-height:1.62;max-width:52ch}
.home-proof-copy .check-list{margin:22px 0 0}
.home-proof-copy .text-link{display:inline-block;margin-top:18px}
@media(min-width:1000px){
  .arr-band-inner{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center}
  .home-proof{padding:72px 0}
  .home-proof-inner{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:center}
  .home-card{max-width:520px}
  .home-proof .home-card{justify-self:end}
}

/* THE FOUR PILLARS, NAMED. Owner 2026-09-11 keyword map: the four links under the
   home intro say what is at the other end, so each one reads as the search that page
   is written for rather than a one-word nav label. */
/* THE ROW SPANS THE WHOLE INTRO. The intro is a three-column grid — eyebrow,
   heading, paragraph — so a fourth item dropped into it lands in the 150px eyebrow
   column and stacks one link per line, which is what it did. It is also a <p>, and
   .brand-home-intro p draws the rule above the paragraph; a row of links is not that
   paragraph. */
.brand-home-intro .home-explore{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 32px;
  margin:30px 0 0;padding-top:0;border-top:0}
.home-explore .text-link{white-space:nowrap}
@media(max-width:760px){.brand-home-intro .home-explore{gap:10px 20px;margin-top:18px}
  .home-explore .text-link{white-space:normal}}