/* Entropic HDR: the house frame with a lake-teal subject colour. */

.house-frame:has(.ehdr-cover) {
  --cover-a: #1d5a63;
  --cover-b: #0c2730;
  --cover-glow: rgba(112, 214, 196, .3);
  --cover-warm: rgba(255, 207, 102, .16);
  --accent: #2f6f73;
}

.ehdr-compare, .ehdr-pair { margin: 0; }
.ehdr-compare figcaption, .ehdr-pair figcaption {
  margin-top: 10px; max-width: 68ch; color: var(--h-muted); font: 15px/1.5 var(--h-serif);
}

/* The before/after divide. Without script both frames sit side by side. */
.ehdr-compare-stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.ehdr-compare-stage img, .ehdr-pair img {
  display: block; width: 100%; height: auto;
  border: 1px solid #36455f; border-radius: 3px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 8px 22px rgba(22, 31, 52, .22);
}
.ehdr-compare-tag, .ehdr-compare-range { display: none; }

.ehdr-compare.is-live .ehdr-compare-stage {
  position: relative; display: block; overflow: hidden; touch-action: pan-y; cursor: ew-resize;
  border: 1px solid #36455f; border-radius: 3px;
  box-shadow: 0 10px 28px rgba(22, 31, 52, .28);
}
.ehdr-compare.is-live .ehdr-compare-stage img { border: 0; border-radius: 0; box-shadow: none; }
.ehdr-compare.is-live .ehdr-compare-after {
  position: absolute; inset: 0; height: 100%;
  clip-path: inset(0 0 0 var(--split));
}
.ehdr-compare.is-live .ehdr-compare-stage::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 6px rgba(0, 0, 0, .45); pointer-events: none;
}
.ehdr-compare.is-live .ehdr-compare-tag {
  display: block; position: absolute; bottom: 12px; padding: 4px 10px;
  color: #f4f1e8; font: 700 13px/1.3 var(--h-sans);
  background: rgba(12, 39, 48, .78); border-radius: 4px; pointer-events: none;
}
.ehdr-compare-tag--before { left: 12px; }
.ehdr-compare-tag--after { right: 12px; }
.ehdr-compare.is-live .ehdr-compare-range {
  display: block; width: 100%; margin: 10px 0 0; accent-color: var(--accent);
}

.ehdr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.ehdr-pair figcaption { grid-column: 1 / -1; margin-top: 0; }

.ehdr-settings { display: grid; gap: 0; margin: 18px 0 0; }
.ehdr-settings > div {
  display: grid; grid-template-columns: minmax(150px, 15em) 1fr; gap: 4px 20px;
  padding: 10px 0;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--h-rule) 10%, var(--h-rule) 90%, transparent) 1;
}
.ehdr-settings dt { font-weight: 600; }
.ehdr-settings dd { margin: 0; }

.ehdr-refs { padding-left: 1.1em; font-size: 16px; }

@media (max-width: 720px) {
  .ehdr-compare-stage, .ehdr-pair { grid-template-columns: 1fr; }
  .ehdr-settings > div { grid-template-columns: 1fr; }
}