/* Interior pages — the shared layer the page templates build on.
   The homepage keeps its own layout in style.css; this file holds the page
   hero, the card grid and the closing band that the interior pages share.
   Every value comes from assets/css/tokens.css. */

/* ------------------------------------------------------------- Page hero -- */
.site-main.site-main--page{padding-block:0}
.page-hero{background:var(--color-navy);color:#d2deea;padding-block:clamp(44px,6vw,76px)}
.page-hero__inner{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.page-hero__inner--solo{grid-template-columns:1fr}
.page-hero .eyebrow{color:var(--color-sun)}
.page-hero__title{color:#fff;font-size:clamp(30px,3.6vw,48px)}
.page-hero__lede{margin-top:20px;max-width:560px;color:rgba(255,255,255,.88);font-size:18px}
.page-hero .btn{background:var(--color-sun);border-color:var(--color-sun);color:var(--color-navy)}
.page-hero .btn:hover{background:#ffd873;border-color:#ffd873}
.page-hero .btn--outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6);color:#fff}
.page-hero .btn--outline:hover{background:rgba(255,255,255,.18);border-color:#fff}
/* The tag strip under the hero lede: the figures a buyer scans first. It wraps
   on its own, so a page may carry five of them or eight without a rule of its
   own. */
.page-hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.page-hero__tags li{padding:6px 13px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.07);color:#fff;font-size:13px;font-weight:600}
.page-hero__media{overflow:hidden;background:#f5f7fa;border-radius:var(--radius-lg)}
.page-hero__photo{width:100%;height:280px;padding:30px;object-fit:contain}
.page-hero__label{margin:0;padding:14px 22px;background:var(--color-surface);color:var(--color-navy);font-size:13px;font-weight:600}

/* ------------------------------------------------------------ Card grid -- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards--four{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.card__image{position:relative;height:210px;padding:24px;background:#f5f7fa}
.card__photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.card__body{display:flex;flex:1;flex-direction:column;padding:26px}
.card__body h3{margin:0}
.card__body > p{margin:15px 0 0;font-size:15px;color:var(--color-muted)}
.card__link{margin-top:auto;padding-top:22px}
.card__meta{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}

/* A two-card row: .cards is three columns, this variant is two. */
.cards--two{grid-template-columns:repeat(2,1fr)}

/* In a two-card row that carries a specification list and a card link, the list
   follows the paragraph and the link keeps the bottom of the card, so only one
   of them takes the leftover height instead of both. */
.cards--two .card .specs{margin-top:22px}

/* A three-step row: .steps is four columns, this variant is three. */
.steps--three{grid-template-columns:repeat(3,1fr)}

/* ----------------------------------------------------------- Closing band -- */
/* The band carries a photograph when the 'cta_band' slot has one, under a navy
   scrim that keeps the copy and the buttons readable over it; the navy below is
   the colour the band falls back to. The footer underneath is that same navy, so
   the band keeps a hairline on its lower edge: the closing block reads as its
   own band above the footer instead of running into it as one slab. */
.cta-band{position:relative;isolation:isolate;background:var(--color-navy);color:#d2deea;padding-block:var(--section-space);border-bottom:1px solid rgba(255,255,255,.3)}
.cta-band--photo{background-image:var(--cta-band-photo);background-position:center;background-size:cover}
.cta-band--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(18,48,74,.9) 0%,rgba(18,48,74,.74) 55%,rgba(18,48,74,.62) 100%)}
.cta-band__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px 56px}
.cta-band__copy{max-width:640px}
.cta-band h2{color:#fff}
.cta-band .eyebrow{color:#bed8fa}
.cta-band__text{margin:0;max-width:520px;color:#d2deea;font-size:16px}
.cta-band__actions{margin-top:0}
.cta-band .btn{background:var(--color-sun);border-color:var(--color-sun);color:var(--color-navy)}
.cta-band .btn:hover{background:#ffd873;border-color:#ffd873}
.cta-band .btn--outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn--outline:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ------------------------------------------- Panel: picture beside copy -- */
.panel{overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}
.panel__image{width:100%;height:300px;padding:30px;object-fit:contain;background:#f5f7fa}
.panel__label{margin:0;padding:16px 24px;border-top:1px solid var(--color-line);font-size:13px;font-weight:600;color:var(--color-navy)}

/* ---------------------------------------------------------- Long copy -- */
.prose{max-width:70ch}
.prose h2{margin-top:48px}
.prose > h2:first-child{margin-top:0}
.prose h3{margin-top:34px}
.prose ul{margin:0 0 1em;padding-left:20px;font-size:15px;color:var(--color-muted)}
.prose li{margin:8px 0}

/* ---------------------------------- Accessibility helpers -- */
/* The pattern used for a caption or label that belongs to the accessibility
   tree only: present for a screen reader, off the visual page. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ------------------------------------------- Photo placeholder -- */
/* A slot that is still waiting for its shot keeps the layout shaped. The
   dashed box names the slot and the wanted photograph, so a reviewer reads
   exactly what goes there; it is replaced silently once the slot maps to a
   real attachment. */
.img-todo{display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;height:100%;margin:0;padding:20px;background:repeating-linear-gradient(135deg,#f5f7fa 0,#f5f7fa 10px,#eef2f7 10px,#eef2f7 20px);border:1px dashed var(--color-field-line);border-radius:var(--radius-sm);color:var(--color-muted);text-align:center}
.img-todo__tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}
.img-todo__note{font-size:13px;line-height:1.5}

/* ------------------------------------------------ Duty list -- */
/* A set of applications read as named rows rather than boxed cards: quicker
   to scan, and every row is itself the link that opens the inquiry. */
.jobs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.jobs-list__item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);font-size:15px;font-weight:600;color:var(--color-navy);text-decoration:none}
.jobs-list__item .arrow{color:var(--color-accent)}
.jobs-list__item:hover{border-color:var(--color-accent);background:var(--color-accent-pale)}

/* ------------------------------ Selection entry band (product pages) -- */
/* The way into the online selection from a product page: a framed band at the
   foot of a pale section, the invitation on the left and the button on the
   right. Each page carries its own class and both bands are read from these
   rules. The frame is the same token ground, hairline and float shadow the
   cards use, so it sits on the pale section rather than beside it, and the
   flex row wraps on its own instead of needing a breakpoint of its own. */
.solar-water-pump__select,
.solar-pumping-inverter__select{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) 56px;margin-top:var(--space-4);padding:clamp(24px,3vw,36px);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}
.solar-water-pump__select-copy,
.solar-pumping-inverter__select-copy{max-width:640px}
.solar-water-pump__select-copy h3,
.solar-pumping-inverter__select-copy h3{margin:0}
.solar-water-pump__select-text,
.solar-pumping-inverter__select-text{margin:14px 0 0;color:var(--color-muted);font-size:15px}
.solar-water-pump__select-actions,
.solar-pumping-inverter__select-actions{margin-top:0}

/* ---------------------------------------------------------- Responsive -- */
@media(max-width:1180px){
  .cards--four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .page-hero__inner{grid-template-columns:1fr;gap:32px}
  .page-hero__photo{height:240px}
  .cards{grid-template-columns:1fr 1fr}
  .jobs-list{grid-template-columns:1fr 1fr}
  .steps--three{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cards,.cards--four{grid-template-columns:1fr}
  .jobs-list{grid-template-columns:1fr}
  .cta-band__inner{flex-direction:column;align-items:flex-start}
  .page-hero__photo{height:220px;padding:20px}
  .steps--three{grid-template-columns:1fr}
}