/* Properties carousel on the home page (index.html, de/index.html), mobile first.
   One row with every property, native scroll with scroll-snap, no scrollbar. Like Netflix:
   the row runs to the screen edges, the arrows sit over the left and right edge and show on
   hover (always on touch screens). js/properties-carousel.js adds the arrows and shuffles
   the cards on every page load. */

/* --prop-gutter = the side padding of .properties in styles.css (24px phone, 40px up to
   1100px, 80px above); the row runs into it up to the screen edge, the arrows sit in it.
   --prop-card = card width in % of the content width */
.prop-carousel {
  --prop-gutter: 24px;
  --prop-card: 85;
  position: relative;
  container-type: inline-size;
}

.prop-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--prop-gutter));
  padding: 0 var(--prop-gutter);
  scroll-padding: 0 var(--prop-gutter);
  scrollbar-width: none;
}

.prop-track::-webkit-scrollbar {
  display: none;
}

.prop-track:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* about 85% wide, so the next card peeks in */
.prop-track > .property-card {
  flex: 0 0 calc(var(--prop-card) * 1%);
  scroll-snap-align: start;
}

/* photo 4:3 instead of the fixed heights from styles.css (420px, 240px on phones) */
.prop-track .video-thumb {
  height: auto;
  aspect-ratio: 4 / 3;
}

.prop-track .property-card .thumb {
  height: 100%;
}

/* Arrows: dark bars over the screen edges, as high as the photos (card width × 3/4).
   At the start the left one and at the end the right one is gone (disabled) */
.prop-arrow {
  position: absolute;
  top: 0;
  z-index: 2;
  width: max(var(--prop-gutter), 36px);
  height: calc(var(--prop-card) * 0.75cqw);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(38, 35, 34, 0.5); /* --ink at 50% */
  color: var(--cream);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.prop-arrow-prev {
  left: calc(-1 * var(--prop-gutter));
}

.prop-arrow-next {
  right: calc(-1 * var(--prop-gutter));
}

.prop-arrow svg {
  width: 24px;
  height: 24px;
  transition: scale 0.15s ease;
}

.prop-arrow-prev svg {
  transform: scaleX(-1);
}

.prop-arrow:hover {
  background: var(--ink-80);
}

.prop-arrow:hover svg {
  scale: 1.25;
}

.prop-arrow:disabled {
  visibility: hidden;
}

.prop-arrow:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -4px;
}

/* mouse: the arrows appear when the pointer is over the row (or the keyboard is in it) */
@media (hover: hover) {
  .prop-arrow {
    opacity: 0;
  }

  .prop-carousel:hover .prop-arrow,
  .prop-carousel:focus-within .prop-arrow {
    opacity: 1;
  }
}

/* two cards and a bit */
@media (min-width: 769px) {
  .prop-carousel {
    --prop-gutter: 40px;
    --prop-card: 45;
  }

  .prop-track {
    gap: 24px;
  }
}

/* three cards and a bit */
@media (min-width: 1100px) {
  .prop-carousel {
    --prop-card: 31;
  }
}

/* styles.css keeps 40px side padding up to 1100px, 80px above */
@media (min-width: 1101px) {
  .prop-carousel {
    --prop-gutter: 80px;
  }
}