/* =====================================================================
   Before / after (javascript/before-after.js): the grid of tiles (half before, half after, comparable in place), the large comparer, and the
   small carousel of older pairs on the contact page. The page's generic rules (".body div div { margin: 10% }", ".body img { width: 200px }")
   are undone here.
   ===================================================================== */
#beforeAfterRoot { width: 100%; margin: 0 !important; overflow-x: clip; }
#beforeAfterRoot .main-title { margin-inline: 0; }
#beforeAfterRoot div, #beforeAfterOlderRoot div, #beforeAfterOlderRoot section { margin: 0 !important; }
/* space between the title band and the grid (more specific than the reset above) */
#beforeAfterRoot .ba-grid { margin: clamp(28px, 4.5vw, 64px) 0 clamp(6px, 1vw, 14px) !important; }
#beforeAfterRoot img, #beforeAfterOlderRoot img, .ba-modal img { width: 100%; max-width: none; }

/* ---------- the tile ---------- */
.ba-tile {
  --ba: 50%;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #111111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ba-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32); }
.ba-tile:focus-visible { outline: 3px solid #e63946; outline-offset: 3px; }
.ba-tile__stage { position: relative; display: block; width: 100%; height: 100%; min-height: 190px; aspect-ratio: 4 / 3; direction: ltr; touch-action: pan-y; }
.ba-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-tile__img--before { clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-tile__split { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); pointer-events: none; }
.ba-tile__grip {
  position: absolute;
  top: 50%;
  left: var(--ba);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #e63946;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  cursor: ew-resize;
  touch-action: none;
}
.ba-tile__tag {
  position: absolute;
  top: 10px;
  padding: 2px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  pointer-events: none;
}
.ba-tile__tag--before { left: 10px; }
.ba-tile__tag--after { right: 10px; }
.ba-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 12px 9px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}
.ba-tile__open {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ba-tile:hover .ba-tile__open, .ba-tile:focus-visible .ba-tile__open { opacity: 1; }
@media (hover: none) { .ba-tile__open { opacity: 0.85; } }

/* ---------- the home page: a grid that fills the width. One large tile and four smaller ones ---------- */
.ba-grid {
  display: grid;
  gap: 14px;
  width: 100%;
  padding-inline: clamp(10px, 2vw, 32px);
  box-sizing: border-box;
  margin: 3vw 0 1vw !important;
}
.ba-grid--1 { grid-template-columns: minmax(0, 1fr); }
.ba-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ba-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ba-grid--1 .ba-tile__stage { aspect-ratio: 16 / 9; }
.ba-grid--5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(clamp(190px, 17vw, 320px), 1fr)); }
.ba-grid--5 .ba-tile:first-child { grid-row: span 2; }
.ba-grid--5 .ba-tile__stage, .ba-grid--5 .ba-tile { aspect-ratio: auto; }
.ba-grid--5 .ba-tile__stage { min-height: 100%; }
.ba-hint { margin: 0 0 4vw; color: #8b8b93; font-size: 14px; text-align: center; }
@media (max-width: 720px) {
  .ba-grid, .ba-grid--3, .ba-grid--4, .ba-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 10px; width: 100%; }
  .ba-grid--5 .ba-tile, .ba-grid--5 .ba-tile__stage { aspect-ratio: auto; height: auto; }
  .ba-grid .ba-tile:first-child { grid-column: span 2; grid-row: auto; }
  .ba-grid .ba-tile:first-child .ba-tile__stage { aspect-ratio: 16 / 10; min-height: 0; }
  .ba-grid .ba-tile__stage { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---------- contact page: the small carousel of older pairs, with the arrows on the two sides ---------- */
.ba-older { width: min(1000px, 92%); margin: 34px auto 40px !important; direction: rtl; }
.ba-older__head { margin-bottom: 12px !important; }
.ba-older__title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.ba-older__wrap { position: relative; }
.ba-older__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -27px !important;
  padding: 0 0 3px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(15, 15, 18, 0.78);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background 0.2s;
}
.ba-older__btn--right { right: -10px; }
.ba-older__btn--left { left: -10px; }
.ba-older__btn:hover { background: #e63946; border-color: #e63946; }
.ba-older__btn:focus-visible { outline: 3px solid #e63946; outline-offset: 2px; }
.ba-older__track { display: flex; gap: 12px; padding: 4px 2px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ba-older__track .ba-tile { flex: 0 0 min(250px, 62%); height: auto; scroll-snap-align: start; }
.ba-older__track .ba-tile__stage { min-height: 0; }
.ba-older__track:focus-visible { outline: 3px solid #e63946; outline-offset: 2px; }
@media (max-width: 600px) { .ba-older__btn--right { right: -4px; } .ba-older__btn--left { left: -4px; } }

/* ---------- the large comparer: the frame takes the shape of the picture and the picture fills it ---------- */
html.ba-lock { overflow: hidden; scrollbar-gutter: stable; }   /* the page must not jump sideways when the scrollbar goes away */
.ba-modal {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: grid;
  place-items: center;
  padding: 12px 8px;
  background: rgba(6, 6, 8, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: baFade 0.25s ease both;
}
.ba-modal__box { position: relative; width: 100%; max-width: 1900px; direction: rtl; color: #ffffff; text-align: center; }
.ba-modal__close {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.ba-modal__close:hover { background: #e63946; }
.ba-modal__stage {
  --ba: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0 auto !important;
  overflow: hidden;
  border-radius: 10px;
  background: #111111;
  direction: ltr;
  user-select: none;
  touch-action: pan-y;
}
.ba-modal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-modal__img--before { clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-modal__handle { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 3px; margin-left: -1.5px; background: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); pointer-events: none; }
.ba-modal__handle::after {
  content: "\2194";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #e63946;
  color: #ffffff;
  font-size: 22px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.ba-modal__tag { position: absolute; top: 12px; padding: 3px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #ffffff; font-size: 14px; font-weight: 700; pointer-events: none; }
.ba-modal__tag--before { left: 12px; }
.ba-modal__tag--after { right: 12px; }
.ba-modal__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-modal__stage:focus-within { outline: 3px solid #e63946; outline-offset: 2px; }
.ba-modal__caption { margin: 12px 0 0; font-size: 1.05rem; color: #ffffff; }
.ba-modal__bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 12px !important; }
.ba-modal__nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.ba-modal__nav:hover { background: #e63946; }
.ba-modal__nav:focus-visible, .ba-modal__close:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.ba-modal__count { min-width: 60px; font-size: 0.95rem; color: #d0d0d6; }
@keyframes baFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ba-modal { animation: none; } .ba-tile { transition: none; } .ba-tile:hover { transform: none; } }