/* VizTec — service/home <dialog> pop-outs. Load AFTER sovereign-flow.css so these win the cascade.
 *
 * Vizion-AI Home uses the same sovereign-flow.css (no extra pop-out opacity on the <img>).
 * Reference values from Vizion-AI + sovereign-flow:
 *   - .sovereign-flow__dialog::backdrop { background: rgba(4, 8, 18, 0.06); }  (barely-there dim)
 *   - .home-service-dialog::backdrop in Vizion-AI styles.css: same rgba(4, 8, 18, 0.06)
 *   - .sovereign-flow__dialog-inner--audit-bg { background-color: rgba(11, 18, 32, 0.35); backdrop-filter: none; }
 *   - .sovereign-flow__dialog-audit-scrim uses a heavier gradient (~0.6–0.84 alpha) over full-bleed photos
 *
 * Below: match the backdrop to Vizion-AI; use lighter panel/scrim than sovereign’s audit-bg so the
 * page shows through; reduce artwork opacity so pillar SVGs read as transparent glass.
 */

/* ---- Glass panel (lighter than sovereign’s 0.35 audit-bg; add blur for readability) ---- */
.home-service-dialog .sovereign-flow__dialog-inner.sovereign-flow__dialog-inner--audit-bg {
  background: transparent;
  background-color: rgba(11, 18, 32, 0.02);
  -webkit-backdrop-filter: blur(22px) saturate(1.03);
  backdrop-filter: blur(22px) saturate(1.03);
  border: 1px solid rgba(122, 166, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 32px rgba(0, 0, 0, 0.08);
}

.home-service-dialog .sovereign-flow__dialog-inner.sovereign-flow__dialog-inner--audit-bg:hover {
  border-color: rgba(248, 164, 53, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 36px rgba(0, 0, 0, 0.12),
    0 0 22px rgba(91, 140, 255, 0.08);
  transform: translateY(-1px);
}

/* Much lighter than sovereign default scrim — let the page show through the artwork area */
.home-service-dialog .sovereign-flow__dialog-inner--audit-bg .sovereign-flow__dialog-audit-scrim {
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 32, 0.02) 0%,
    rgba(15, 26, 46, 0.05) 50%,
    rgba(11, 18, 32, 0.08) 100%
  );
}

/* Text column: nearly clear; blur keeps copy readable */
.home-service-dialog .sovereign-flow__dialog-inner--audit-bg .sovereign-flow__dialog-audit-body {
  background: linear-gradient(
    180deg,
    rgba(8, 14, 26, 0.01) 0%,
    rgba(11, 18, 32, 0.06) 100%
  );
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Same as Vizion-AI / sovereign-flow “barely-there” page dim */
.home-service-dialog.sovereign-flow__dialog::backdrop {
  background: rgba(4, 8, 18, 0.06);
  backdrop-filter: none;
}

/* Why choose us (pillars page): extra-transparent glass — more page shows through */
.home-service-dialog--extra-transparent .sovereign-flow__dialog-inner.sovereign-flow__dialog-inner--audit-bg {
  background-color: rgba(11, 18, 32, 0.008);
  border-color: rgba(122, 166, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 28px rgba(0, 0, 0, 0.05);
}
.home-service-dialog--extra-transparent .sovereign-flow__dialog-inner--audit-bg .sovereign-flow__dialog-audit-body {
  background: linear-gradient(
    180deg,
    rgba(8, 14, 26, 0) 0%,
    rgba(11, 18, 32, 0.02) 100%
  );
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
  backdrop-filter: blur(12px) saturate(1.02);
}
.home-service-dialog--extra-transparent .sovereign-flow__dialog-inner--audit-bg .sovereign-flow__dialog-audit-scrim {
  background: linear-gradient(
    180deg,
    rgba(11, 18, 32, 0) 0%,
    rgba(15, 26, 46, 0.03) 50%,
    rgba(11, 18, 32, 0.05) 100%
  );
}
.home-service-dialog--extra-transparent.sovereign-flow__dialog::backdrop {
  background: rgba(4, 8, 18, 0.04);
}

/* ---- Artwork: flex-centred (grid here broke img sizing in the absolute layer in some browsers) ---- */
.home-service-dialog .sovereign-flow__dialog-inner--audit-bg .sovereign-flow__dialog-audit-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3.5vh, 2rem) clamp(0.75rem, 2vw, 1.25rem);
  box-sizing: border-box;
  /* Ensure the layer always has height so SVGs don’t collapse */
  min-height: min(28vh, 12rem);
}

.home-service-dialog .sovereign-flow__dialog-inner--audit-bg .sovereign-flow__dialog-audit-img.sovereign-flow__dialog-audit-img--viztec-key {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
  align-self: center;
  width: min(100%, 24rem);
  max-width: 100%;
  min-width: 0;
  height: auto;
  max-height: min(32vh, 14rem);
  margin: 0;
  object-fit: contain;
  object-position: center center;
  display: block;
  /* Visible again — previous 0.48 read as “missing” on some screens; keep slight transparency if desired */
  opacity: 0.92;
  filter: brightness(1.05) contrast(1.05) saturate(1.05);
  background: transparent;
}

/* About us: portrait photos as full-bleed glass background (Vizion-style transparency) */
.home-service-dialog .sovereign-flow__dialog-inner--audit-bg .sovereign-flow__dialog-audit-img.sovereign-flow__dialog-audit-img--team-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0.4;
  filter: brightness(1.06) contrast(1.04) saturate(1.04);
  background: transparent;
}
.home-service-dialog--extra-transparent .sovereign-flow__dialog-inner--audit-bg .sovereign-flow__dialog-audit-img.sovereign-flow__dialog-audit-img--team-photo {
  opacity: 0.36;
}

/* Two CTAs in one dialog (e.g. office vs home renovation links) */
.home-service-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.25rem;
}

/* ---- Inline figure: click to enlarge (caption only in lightbox) ---- */
/* Tighter than default .card padding so the image sits closer to the border */
.card.soft.viztec-inline-figure {
  padding: 0.3rem 0.35rem 0.4rem;
}

.viztec-inline-photo-grid {
  gap: var(--s-3);
}

@media (min-width: 901px) {
  .viztec-inline-photo-grid {
    gap: var(--s-2);
  }
}

.viztec-inline-figure {
  margin: 0;
}
.viztec-inline-figure__trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: inherit;
  font: inherit;
  color: inherit;
  text-align: left;
}
.viztec-inline-figure__trigger img {
  display: block;
  width: 100%;
  height: auto;
}
.viztec-inline-figure__trigger:focus-visible {
  outline: 2px solid rgba(248, 164, 53, 0.85);
  outline-offset: 3px;
}

/* Single centered image (e.g. home renovation kitchen before/after) */
.viztec-inline-figure--centered .viztec-inline-figure__trigger {
  max-width: 80%;
  margin-inline: auto;
}

/* Modified shipping containers: main before/after (replaces ~50% / 480px box) */
.card.soft.viztec-inline-figure.viztec-inline-figure--narrow {
  max-width: min(480px, 92vw);
  margin-inline: auto;
}

/* Custom Designs page: equal-height thumbnails (replaces image-caption-row--equal) */
.custom-designs-gallery .viztec-inline-figure__trigger img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center;
}

/* Modified shipping: three-up row — align with smart-tech gallery image sizing */
.modified-shipping-gallery .viztec-inline-figure__trigger img {
  max-height: 220px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  object-position: center;
}

/* Home renovation: single row of three compact, equal visual weight */
.home-renovation-photo-row .viztec-inline-figure__trigger img {
  max-height: 200px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 901px) {
  .home-renovation-photo-row .viztec-inline-figure__trigger img {
    max-height: 220px;
  }
}

/* Office renovation service page: three thumbnails */
.office-renovation-page-photo-row .viztec-inline-figure__trigger img {
  max-height: 200px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 901px) {
  .office-renovation-page-photo-row .viztec-inline-figure__trigger img {
    max-height: 220px;
  }
}

/* Photo lightbox (general maintenance gallery, etc.) */
.viztec-lightbox-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: min(96vw, 960px);
  width: min(96vw, 960px);
  background: rgba(11, 18, 32, 0.94);
  color: var(--text);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
}
.viztec-lightbox-dialog::backdrop {
  background: rgba(4, 8, 18, 0.62);
  backdrop-filter: blur(5px);
}
.viztec-lightbox-dialog__inner {
  position: relative;
  padding: 2.75rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  box-sizing: border-box;
}
.viztec-lightbox-dialog__inner img {
  max-width: 100%;
  max-height: min(78vh, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}
.viztec-lightbox-dialog__caption {
  margin: 0;
  max-width: 42rem;
  text-align: center;
  font-style: italic;
  color: rgba(232, 238, 252, 0.85);
  font-size: 0.95rem;
  line-height: 1.45;
}
.viztec-lightbox-dialog .sovereign-flow__dialog-close {
  top: 0.55rem;
  right: 0.55rem;
}