/* ==========================================================================
   Jämför — opolerad / polerad
   Bakgrunden ligger still. Bara bilen växlar, via en mask i bilens silhuett.
   Skälet: de två fotona är tagna vid olika tillfällen och verkstaden bakom
   skiljer sig i detaljer. Sveper man hela rutan ser man väggen byta innehåll.
   ========================================================================== */

@property --x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.jamfor {
  --x: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 940;
  overflow: hidden;
  background: var(--botten);
  border: 1px solid var(--linje);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  /* lodrätt drag scrollar sidan, vågrätt drag hamnar hos oss */
  touch-action: pan-y;
}

.jamfor__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Opolerad ligger överst, klippt till handtaget OCH maskad till bilen.
   Själva mask-image sätts av jamfor.js från data-mask. Skälet: en relativ
   url() inuti en custom property löses mot CSS-filen, inte mot sidan, så
   assets/img/… hade blivit assets/css/assets/img/…. En inline-stil satt
   från JS löses mot dokumentet och fungerar även under file://. */
.jamfor__fore {
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.jamfor.glider .jamfor__fore,
.jamfor.glider .jamfor__handtag { transition: --x 1.4s cubic-bezier(.14, 1, .34, 1); }
.jamfor.glider { transition: --x 1.4s cubic-bezier(.14, 1, .34, 1); }

/* --- handtaget --- */

.jamfor__handtag {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--x);
  width: 1px;
  background: var(--hexljus);
  box-shadow: 0 0 22px 2px rgba(239, 242, 244, .38);
  pointer-events: none;
}

.jamfor__grepp {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 54px; height: 60px;
  display: grid;
  place-items: center;
  background: var(--hexljus);
  color: var(--botten);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: scale var(--snabb), background var(--snabb);
}
.jamfor:hover .jamfor__grepp { scale: 1.06; }
.jamfor:active .jamfor__grepp { background: var(--guld); }

.jamfor__grepp svg { width: 22px; height: 22px; }

/* --- etiketter --- */

.jamfor__etikett {
  position: absolute;
  bottom: clamp(12px, 1.6vw, 22px);
  z-index: 2;
  padding: .55em .85em;
  font-family: var(--bröd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--botten) 74%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--linje-stark);
  pointer-events: none;
  transition: opacity var(--snabb);
}
.jamfor__etikett--fore  { left:  clamp(12px, 1.6vw, 22px); }
.jamfor__etikett--efter { right: clamp(12px, 1.6vw, 22px); color: var(--guld); border-color: color-mix(in srgb, var(--guld) 45%, transparent); }

/* etiketten tonar bort när handtaget kör över den */
.jamfor[data-x-low="1"]  .jamfor__etikett--fore  { opacity: 0; }
.jamfor[data-x-high="1"] .jamfor__etikett--efter { opacity: 0; }

/* --- instruktion, visas tills man rört reglaget --- */

.jamfor__tips {
  position: absolute;
  top: clamp(12px, 1.6vw, 22px);
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  padding: .6em 1em;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--botten);
  background: var(--hexljus);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s ease, translate .5s ease;
}
.jamfor.rörd .jamfor__tips { opacity: 0; translate: -50% -8px; }

/* --- bildtext --- */

.jamfor-text {
  display: flex;
  flex-wrap: wrap;
  gap: .6em 1.4em;
  margin-top: 1.1em;
  color: var(--text-svag);
  font-size: 13px;
  line-height: 1.5;
}
.jamfor-text b { color: var(--text-dämpad); font-weight: 600; }

@media (max-width: 560px) {
  .jamfor__grepp { width: 44px; height: 49px; }
  .jamfor__etikett, .jamfor__tips { font-size: 11px; letter-spacing: .14em; }
}

/* --- stående före/efter-bilder ---
   Lyktorna och interiören är stående foton. Lyktorna står två och två
   bredvid varandra, staplade på mobil. */
.jamfor--lykta    { aspect-ratio: 7 / 8; }
.jamfor--interior { aspect-ratio: 3 / 4; }

/* Hela reglaget ska synas medan man drar. Stående bilder i full spaltbredd
   blir högre än en laptopskärm (1440×900 lämnar 762 px under sidhuvudet),
   så bredden begränsas av skärmhöjden. 200 px = sidhuvudet plus luft.
   Golvet (320 px, 640 px för paret) håller dem läsbara på liggande mobil. */
.jamfor--interior { width: min(100%, max(320px, calc((100svh - 200px) * 3 / 4))); }
@media (min-width: 861px) {
  .jamfor--interior { margin-inline-start: auto; }
}

.jamfor-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  max-width: max(640px, calc((100svh - 200px) * 7 / 8 * 2 + clamp(14px, 2vw, 28px)));
  margin-top: clamp(28px, 3.5vw, 48px);
}
@media (max-width: 759px) {
  .jamfor-par { grid-template-columns: 1fr; }
}