/* ==========================================================================
   קו | תכנון ועיצוב פנים — "Before & After" comparison
   Two pictures side by side in one component, laid out right-to-left like the page:
   "לפני" (Before) is on the right and "אחרי" (After) on the left. No slider, no overlap.
   The optional panel behind the pictures uses one of the logo's colours
   (the same tokens as the logo artwork: sand, blue-grey, sage).
   Used by the project page, the renderings page and the editor's live preview.
   ========================================================================== */
.cmp-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); }

.cmp {
  --cmp-gap: 6px;
  margin: 0;
  direction: rtl;                                        /* first child (Before) on the right, After on the left */
  box-sizing: border-box;
}

/* Logo colours */
.cmp--sand { --cmp-bg: var(--c-panel-sand, #e8e1d2); }
.cmp--blue { --cmp-bg: var(--c-panel-blue, #bcc6c7); }
.cmp--sage { --cmp-bg: var(--c-panel-sage, #b8c2ad); }
.cmp--panel {
  background: var(--cmp-bg);
  padding: clamp(12px, 1.8vw, 20px);
  border-radius: 0;                                      /* square (90-degree) corners */
}

.cmp__head {
  margin: 0 2px clamp(10px, 1.4vw, 16px);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.3;
  color: var(--c-ink);
}

.cmp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));      /* equal widths */
  gap: var(--cmp-gap);                                   /* narrow gap: the two pictures read as one */
}

.cmp__panel {
  position: relative;
  aspect-ratio: 4 / 3;                                   /* shared ratio: both pictures stay aligned */
  overflow: hidden;
  border-radius: 0;
  background: var(--c-panel-sand, #e8e1d2);
}
.cmp__panel picture, .cmp__panel img { display: block; width: 100%; height: 100%; }
.cmp__panel img { max-width: none; object-fit: cover; }

.cmp__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.cmp__zoom:focus-visible { outline: 3px solid var(--c-ink); outline-offset: -3px; }

.cmp__label {
  position: absolute;
  right: 10px;                                           /* same corner on both pictures (bottom right) */
  bottom: 10px;
  padding: 2px 12px 3px;
  background: rgba(24, 28, 34, 0.78);                    /* readable on light and dark photographs */
  color: #fff;
  font-size: clamp(0.8125rem, 0.76rem + 0.25vw, 1rem);
  line-height: 1.4;
  border-radius: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .cmp { --cmp-gap: 4px; }
  .cmp--panel { padding: 10px; }
  .cmp__panel { aspect-ratio: 1 / 1; }                   /* taller panels: both pictures stay readable side by side */
  .cmp__label { right: 6px; bottom: 6px; padding: 1px 8px 2px; font-size: 0.75rem; }
}