/* The before-and-after comparison — the second section of the conversion page.
   Two panels, the installation as it runs today beside the installation after
   the power source is changed, each holding a tag, the picture of that
   arrangement and the parts of it as a list.

   A panel shows the illustration component's own drawing, or a photograph when
   the caller named one for that panel. Neither picture is drawn here: every part
   of the drawing belongs to illustrations.css, which prints the two arrangements
   of it and runs its power flow, and the photograph is the file the Media
   Library holds, printed by the theme's own image helper inside the component's
   figure. This sheet frames both — a column for the drawing, one fixed wide box
   for the photograph — and stays out of the internals of either.

   Both panels give their picture the same shape at the same width, so the two
   shots read as one comparison and the two lists of parts under them begin
   together however different the two photographs are.

   The before panel is the quiet one — white ground, a thin line, a muted tag —
   and the after panel is the one the eye should land on, marked the way the
   drawings already mark the part a page is about: a pale accent ground under an
   accent border. No colour here is new, and nothing on this sheet animates on
   its own — the only motion in the block is the drawing's own reveal, which
   motion.css and illustrations.css already answer for a reader who asks for
   less of it. */


/* Two panels from 861px up. They are left to share a height, so the two lists of
   parts under them meet at the same line however tall the two drawings
   themselves are. */
.conversion-compare{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,32px);
}

/* The panel as it is printed: this is the before state's own look — white
   ground, one thin line — and the modifier it carries needs no rule of its own.
   The after panel is the one that changes. */
.conversion-compare__panel{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.8vw,20px);
  min-width:0;
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

.conversion-compare__panel--after{
  border-color:var(--color-accent);
  background:var(--color-accent-pale);
}

/* The panel's own label. It is quieter than a section eyebrow: it names the
   state the panel shows and carries no figure. */
.conversion-compare__tag{
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.conversion-compare__panel--after .conversion-compare__tag{color:var(--color-accent)}

/* The wrapper the drawing sits in takes the room the panel has left over, so the
   drawing sits in the middle of that space and the list follows at the bottom of
   the panel. It carries no rule for anything inside the drawing.

   The 400px cap is this wrapper's own and applies to the drawing alone: it keeps
   the stacked arrangement near the size its labels are drawn for. The photograph
   has a figure of its own below and is not capped by this rule. */
.conversion-compare__figure{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  max-width:400px;
  margin-inline:auto;
}

/* Which of the drawing's two arrangements is shown is decided by the width of the
   window (illustrations.css), and this block is what gives the drawing half of
   it: two panels share the section, so a drawing that prints its wide arrangement
   would be read at about half the size its labels are drawn for. The block
   therefore answers for the column it hands the drawing and shows the stacked
   arrangement the drawing's own sheet falls back to on a narrow screen, which is
   the same drawing with the same parts and the same flow. The cap keeps that
   arrangement near the size its labels are drawn for instead of stretching it to
   the panel's full width. */
.conversion-compare .diagram__svg--wide{display:none}
.conversion-compare .diagram__svg--stack{display:block}

/* The photograph a panel shows instead of its drawing, when the caller names one:
   the component's own <figure>, holding the image and the caller's caption.

   The image element is the frame. It is one fixed wide box — 16 / 10 — on the
   site's pale ground, and the picture is contained inside it. A photograph here
   is a record of an installation, so it is never cropped or stretched to a shape
   this block picked: the box is the shape the two panels share and the picture
   is letterboxed inside it, which is the correct result for a shot that is
   narrower or wider than the box, and the pale ground is what the letterboxing
   shows. No height is set in pixels, so the box follows the panel's width — the
   same width in both panels — which is what gives the two shots one shape and
   starts the two lists of parts on the same line.

   The box fills the panel's width, so nothing here caps it: the drawing
   wrapper's 400px above belongs to the drawing. The frame is the same in both
   panels — one line, one pale ground — because it is the comparison's frame and
   not a second place for the after panel's accent to land. */
.conversion-compare__photo{
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
}

.conversion-compare__image{
  width:100%;
  aspect-ratio:16/10;
  object-fit:contain;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-pale);
}

/* The line under the photograph: the site's muted small type, the same type the
   shared .figure carries under a picture, so the qualification sits under the
   shot rather than on it. */
.conversion-compare__caption{
  display:block;
  margin:12px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--color-muted);
}

/* The parts of the arrangement, marked per line with the tick the site's own
   checklists carry, so a list of parts reads here the way it reads elsewhere on
   the site. The marker is muted in the before panel and takes the accent in the
   after one, which is the same quiet-to-accent move the panels themselves make.
   A long line wraps rather than widening the panel. */
.conversion-compare__list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:clamp(14px,1.8vw,18px) 0 0;
  border-top:1px solid var(--color-line);
  list-style:none;
}

.conversion-compare__list li{
  display:flex;
  gap:10px;
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--color-text);
  overflow-wrap:break-word;
}

.conversion-compare__list li::before{
  content:"✓";
  flex:none;
  font-weight:700;
  color:var(--color-muted);
}

.conversion-compare__panel--after .conversion-compare__list li::before{color:var(--color-accent)}

/* Below 861px there is no room for two drawings side by side, so the two states
   are read one after the other, the before state first. */
@media (max-width:860px){
  .conversion-compare{grid-template-columns:minmax(0,1fr);gap:20px}
}