/* ───── KARAFT image-compare (Prestige Allure clone) ─────
   Eyebrow + heading, two stacked images with a draggable vertical divider
   that reveals the "after" image via clip-path. */

.kf-ic { padding: var(--section-gap, 96px) 0; }

.kf-ic__head { text-align: center; margin-bottom: 48px; }
.kf-ic__heading {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: var(--track-heading, 0.16em);
  margin: 14px 0 0;
}

.kf-ic__compare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-placeholder);
  user-select: none;
  touch-action: none;
}

/* Both layers fill the compare box; the after layer is clipped via clip-path
   (set inline + by JS) so the underlying scene stays full-bleed, never squashed. */
.kf-ic__layer {
  position: absolute;
  inset: 0;
}
.kf-ic__img,
.kf-ic__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kf-ic__img { object-fit: cover; }
.kf-ic__placeholder { background: var(--color-placeholder); }
.kf-ic__placeholder--alt { background: var(--color-border); }

.kf-ic__label {
  position: absolute;
  bottom: 20px;
  z-index: 4;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: var(--track-eyebrow, 0.22em);
  text-transform: uppercase;
  color: var(--color-dark-fg);
  background: rgba(28, 28, 28, 0.55);
  padding: 8px 14px;
}
.kf-ic__label--before { left: 20px; }
.kf-ic__label--after  { right: 20px; }

.kf-ic__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  z-index: 5;
  width: 2px;
  background: var(--color-surface);
  transform: translateX(-50%);
  cursor: ew-resize;
}
.kf-ic__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.kf-ic__handle:focus-visible { outline: 2px solid var(--color-dark-fg); }

.kf-ic__cta { display: flex; justify-content: center; margin-top: 40px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .kf-ic__compare { aspect-ratio: 4 / 3; }
  .kf-ic__head { margin-bottom: 32px; }
}
@media (max-width: 375px) {
  .kf-ic { padding: 64px 0; }
  .kf-ic__compare { aspect-ratio: 3 / 4; }
  .kf-ic__grip { width: 40px; height: 40px; }
  .kf-ic__label { bottom: 12px; font-size: 11px; padding: 6px 10px; }
  .kf-ic__label--before { left: 12px; }
  .kf-ic__label--after  { right: 12px; }
}