/* The AC pump conversion page — only what the shared sheets do not already carry.
 *
 * The page is built out of the site's own blocks: .section, .section--pale,
 * .container, .section__head, .section__sub, .eyebrow, .cards (the three-column
 * row), .cards--four, .card, .card__body, .card__image, .card__photo,
 * .card__link, .product-note, .resource-link, .text-link and the buttons all
 * come from style.css, sections.css and pages.css, and the four sections that
 * are components of their own bring their own sheets —
 * assets/css/conversion-compare.css, conversion-diagram.css, acn-sections.css
 * and conversion-form.css. The application cards are the site's own product
 * card, so they carry no class of their own. Three things are genuinely this
 * page's own, and every class below is printed by
 * page-ac-pump-solar-conversion.php and by no other template:
 *
 *   .page-hero__inset  — the labelled bar under the hero photograph, which shows
 *                        the inverter a conversion adds.
 *   .acn-biz__icon     — the line icon on a business card.
 *   .acn-biz__actions  — the row the page's one distributor ask stands in.
 *
 * The closing section's ground is this page's too: the inquiry section is the
 * site's own project form component, and the colour it stands on is decided
 * here rather than inside a component the other solution pages read.
 *
 * Every colour, radius and space comes from assets/css/tokens.css. Nothing here
 * is positioned absolutely and nothing relies on hover, so the page holds at
 * 320px as well as it does at 1440px. */

/* ----------------------------------------------------------------- Hero -- */
/* The shared solution sheet gives a solution hero's drawing the larger column,
   which is right for the six pages that open on a drawing and wrong for this one:
   the conversion page opens on a photograph of an installation. The picture is
   shown at its own proportions and fills the panel's width, so the whole
   installation is in the frame at every width — nothing of it is cropped to a
   height this page guessed at. */
.solution-page .page-hero__photo{
  height:auto;
  padding:0;
  object-fit:contain;
}

/* The bar under it: the unit a conversion adds, at its own proportions in a
   strip of its own, with the line that says what the reader is looking at. It
   is a row inside the hero's media panel rather than a picture beside the
   photograph, so a wide site shot keeps the whole panel above it. */
.page-hero__inset{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) clamp(16px,2vw,22px);
  border-top:1px solid var(--color-line);
  background:var(--color-surface);
}

.page-hero__inset-photo{
  flex:none;
  width:auto;
  max-width:96px;
  height:56px;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.page-hero__inset-label{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:var(--color-muted);
}

/* ---------------------------------------------------- Business cards -- */
/* One line icon above the heading, in the chip the site already uses for a
   capability mark: a pale ground, the accent for the stroke, 24px inside 44px. */
.acn-biz__icon{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:0 0 18px;
  border-radius:var(--radius-md);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

/* The one ask this section makes, under the three cards rather than inside one
   of them: a request for distributor cooperation belongs to the trade the
   section is written for, not to a single card. */
.acn-biz__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-4);
}

/* --------------------------------------------------------- The inquiry -- */
/* The closing section is the site's own project form, which is framed white with
   a shadow. On the six solution pages it sits on a pale or white ground; here it
   closes the page, so it stands on the navy the header and the hero are cut from
   and the form card is the only white object in it. The rule applies to this
   page's own inquiry section and to nothing else. */
.acn-inquiry{
  background:var(--color-navy);
}

.acn-inquiry .eyebrow{
  color:#bed8fa;
}

.acn-inquiry .sol-project__intro h2,
.acn-inquiry .sol-project__intro h3{
  color:var(--color-surface);
}

.acn-inquiry .sol-project__intro > p,
.acn-inquiry .sol-project__intro .note-line{
  color:#cbd9e7;
}

/* ------------------------------------------------------- Small screens -- */
@media (max-width:760px){
  .page-hero__inset-photo{
    max-width:80px;
    height:48px;
  }
}