/* Installation explainer: intact artwork, readable HTML flow, optional image viewer. */
.page-home .home-installation { background: var(--mz-arch-white); }
.home-installation__figure { max-width: 1000px; margin-inline: auto; margin-block: 0; }
.home-installation__image-link { position: relative; display: block; cursor: zoom-in; }
.home-installation__image-link img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.home-installation__image-link:focus-visible { outline: 2px solid var(--mz-deep-sage); outline-offset: 5px; }
.home-installation__expand { display: flex; align-items: center; gap: 1rem; position: absolute; right: 1rem; bottom: 1rem; padding: .6rem .9rem; background: var(--mz-card); border: 1px solid var(--mz-line-strong); color: var(--mz-deep-sage); font-size: .8rem; }
.home-installation__expand > span { font-size: 1.15rem; }
.home-installation__figure figcaption { padding-block: .85rem 1.5rem; color: var(--mz-muted); font-size: .75rem; line-height: 1.8; }
.home-installation__guide { padding-block: 1.5rem; border-block: 1px solid var(--mz-line-strong); }
.home-installation__label { margin: 0 0 1.2rem; font-size: .8rem; color: var(--mz-muted); }
.home-installation__flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: 1.5rem; }
.home-installation__flow li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem 1rem; }
.home-installation__number { grid-column: 1; color: var(--mz-muted); font: 400 .75rem/1.5 var(--font-latin); }
.home-installation__flow strong { grid-column: 1; color: var(--mz-ink); font: 500 1.15rem/1.7 var(--font-display); }
.home-installation__flow .home-installation__system strong { color: var(--mz-deep-sage); }
.home-installation__arrow { grid-column: 2; grid-row: 1 / 3; color: var(--mz-sage); font-size: 1.7rem; }
.home-installation__footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.4rem; }
.home-installation__footer p { margin: 0; color: var(--mz-muted); font-size: .8rem; line-height: 1.9; }
.home-installation__footer a { flex-shrink: 0; }

/* Native modal keeps focus inside the image viewer; the underlying page stays put. */
html.installation-viewer-open { overflow: hidden; }
.installation-viewer { width: min(1440px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--mz-line-strong); color: var(--mz-ink); background: var(--mz-arch-white); overflow: hidden; }
.installation-viewer[open] { display: flex; flex-direction: column; }
.installation-viewer::backdrop { background: rgb(25 33 28 / .78); }
.installation-viewer__toolbar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--mz-line-strong); background: var(--mz-card); }
.installation-viewer__toolbar h2 { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.5; }
.installation-viewer__actions { display: flex; gap: .5rem; }
.installation-viewer button { min-height: 44px; padding: .6rem .9rem; border: 1px solid var(--mz-line-strong); background: var(--mz-card); color: var(--mz-deep-sage); font: inherit; font-size: .85rem; cursor: pointer; }
.installation-viewer button:hover,
.installation-viewer button[aria-pressed="true"] { background: var(--mz-pale-sage); }
.installation-viewer button:focus-visible,
.installation-viewer__canvas:focus-visible { outline: 2px solid var(--mz-deep-sage); outline-offset: -3px; }
.installation-viewer__canvas { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.installation-viewer__canvas img { display: block; width: 100%; max-width: 100%; height: auto; max-height: calc(100dvh - 190px); object-fit: contain; }
.installation-viewer__canvas.is-zoomed img { width: 1536px; max-width: none; max-height: none; }
#installation-viewer-note { flex-shrink: 0; margin: 0; padding: .7rem 1rem; color: var(--mz-muted); font-size: .75rem; line-height: 1.7; }

@media (max-width: 760px) {
  .home-installation__expand { position: static; justify-content: flex-end; padding: .5rem 0; border: 0; background: transparent; font-size: .8rem; }
  .home-installation__figure figcaption { padding-block: .1rem 1.2rem; font-size: .72rem; }
  .home-installation__guide { padding-block: 1.2rem; }
  .home-installation__flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-installation__flow li { grid-template-columns: 1.8rem 1fr; gap: .5rem; padding-block: .45rem; }
  .home-installation__number { grid-column: 1; }
  .home-installation__flow strong { grid-column: 2; font-size: 1rem; }
  .home-installation__arrow { grid-column: 2; grid-row: auto; justify-self: start; transform: rotate(90deg); font-size: 1.25rem; line-height: 1; }
  .home-installation__footer { flex-direction: column; align-items: flex-start; gap: .7rem; margin-top: 1.1rem; }
  .home-installation__footer p { font-size: .78rem; }
  .home-installation__footer br { display: none; }
  .installation-viewer { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  .installation-viewer__toolbar { align-items: flex-start; flex-direction: column; gap: .5rem; padding: .8rem; }
  .installation-viewer__actions { justify-content: space-between; width: 100%; }
  .installation-viewer__toolbar h2 { font-size: .95rem; }
  .installation-viewer button { font-size: .8rem; }
  .installation-viewer__canvas img { max-height: calc(100dvh - 210px); }
  .installation-viewer__canvas.is-zoomed img { width: 1100px; max-height: none; }
  #installation-viewer-note { padding: .7rem .8rem; font-size: .7rem; }
}