/*!
 * Aurelia Room Selector — frontend styles
 * Alle kleuren en maten komen uit CSS-variabelen die Elementor vult.
 */

.aur-rooms{
  --aur-accent: #C8A96A;
  --aur-text: #F2EEE6;
  --aur-muted: rgba(242,238,230,.60);
  --aur-desc: rgba(242,238,230,.60);
  --aur-specs: rgba(242,238,230,.82);
  --aur-line: rgba(242,238,230,.14);
  --aur-stage-bg: #0B131C;
  --aur-ratio: 3 / 4;
  --aur-radius: 0px;
  --aur-pos: center center;
  --aur-gap: 72px;
  --aur-col-list: 1fr;
  --aur-row-pad: 26px;
  --aur-dur: 1050ms;
  --aur-dim: .72;
  --aur-scrim: .82;
  --aur-ease: cubic-bezier(.22,1,.36,1);
  --aur-marker: 26px;
}

.aur-rooms__grid{
  display:grid;
  grid-template-columns: var(--aur-col-list) .92fr;
  gap: var(--aur-gap);
  align-items: start;
}
.aur-media-left .aur-rooms__grid{ grid-template-columns: .92fr var(--aur-col-list); }
.aur-media-left .aur-rooms__col{ order: 2; }
.aur-media-left .aur-stage{ order: 1; }

/* ── lijst ───────────────────────────────────────────── */
.aur-list{ border-top: 1px solid var(--aur-line); }

.aur-item{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  width: 100%;
  margin: 0;
  padding: var(--aur-row-pad) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--aur-line);
  border-radius: 0;
  color: var(--aur-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: padding-left var(--aur-dur) var(--aur-ease);
}
.aur-item:focus-visible{ outline: 1px solid var(--aur-accent); outline-offset: 4px; }

.aur-item::before{
  content:"";
  position: absolute;
  left: 0; top: 50%;
  width: var(--aur-marker); height: 1px;
  background: var(--aur-accent);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  transition: transform var(--aur-dur) var(--aur-ease);
}
.aur-item:hover,
.aur-item.is-active{ padding-left: calc(var(--aur-marker) + 16px); }
.aur-item:hover::before,
.aur-item.is-active::before{ transform: translateY(-50%) scaleX(1); }

.aur-item__idx{
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--aur-accent);
  opacity: .55;
  transition: opacity calc(var(--aur-dur) * .5) var(--aur-ease);
}
.aur-item.is-active .aur-item__idx{ opacity: 1; }

.aur-item__title{
  font-size: clamp(21px, 2.35vw, 34px);
  line-height: 1.15;
  font-weight: 300;
  opacity: var(--aur-dim);
  transition: opacity calc(var(--aur-dur) * .5) var(--aur-ease);
}
.aur-item:hover .aur-item__title,
.aur-item.is-active .aur-item__title{ opacity: 1; }

.aur-item__price{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aur-muted);
  white-space: nowrap;
}
.aur-item__price b{
  margin-left: 8px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--aur-text);
}

/* ── beschrijving (gestapeld, wisselt mee) ───────────── */
.aur-panels{
  display: grid;
  margin-top: clamp(24px, 3vw, 42px);
  max-width: 46ch;
}
.aur-panel{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity calc(var(--aur-dur) * .6) var(--aur-ease),
              transform calc(var(--aur-dur) * .6) var(--aur-ease),
              visibility 0s linear calc(var(--aur-dur) * .6);
}
.aur-panel.is-active{
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
.aur-panel__text{
  margin: 0;
  color: var(--aur-desc);
  font-size: 15px;
  line-height: 1.95;
}
.aur-panel__link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
  padding-bottom: 7px;
  color: var(--aur-text);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.aur-panel__link::after{
  content:"";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--aur-line);
  transition: background calc(var(--aur-dur) * .5) var(--aur-ease);
}
.aur-panel__link:hover::after{ background: var(--aur-accent); }
.aur-panel__link svg{ transition: transform calc(var(--aur-dur) * .5) var(--aur-ease); }
.aur-panel__link:hover svg{ transform: translateX(6px); }

/* ── beeld ───────────────────────────────────────────── */
.aur-stage{
  position: relative;
  aspect-ratio: var(--aur-ratio);
  overflow: hidden;
  border-radius: var(--aur-radius);
  background: var(--aur-stage-bg);
}
.aur-rooms .aur-stage__slide{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--aur-dur) var(--aur-ease);
}
.aur-stage__slide.is-active{ opacity: 1; }

/* Hoge specificiteit + !important: Elementor forceert `.elementor img{height:auto}`
   en dat wint anders van deze regel, waardoor de foto de hoogte niet vult. */
.aur-rooms .aur-stage .aur-stage__slide > img.aur-stage__img,
.aur-rooms .aur-stage figure > img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0;
  min-height: 0;
  object-fit: cover !important;
  object-position: var(--aur-pos);
  display: block;
  border-radius: 0;
  transform: scale(1.06);
  transition: transform calc(var(--aur-dur) * 1.5) var(--aur-ease);
}
.aur-rooms[data-zoom="0"] .aur-stage .aur-stage__img{ transform: none; transition: none; }
.aur-rooms .aur-stage__slide.is-active > img.aur-stage__img{ transform: scale(1); }

.aur-stage::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(4,8,13,var(--aur-scrim)) 100%);
}

/* ── specificaties over het beeld ────────────────────── */
.aur-plaque{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: grid;
  padding: clamp(18px, 2.6vw, 32px);
}
.aur-specs{
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity calc(var(--aur-dur) * .6) var(--aur-ease),
              transform calc(var(--aur-dur) * .6) var(--aur-ease);
}
.aur-specs.is-active{ opacity: 1; transform: none; }
.aur-specs li{
  display: flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aur-specs);
}
.aur-specs li + li::before{
  content:"";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--aur-accent);
  margin-right: 12px;
}

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1024px){
  .aur-rooms__grid{ grid-template-columns: 1fr; }
  .aur-media-left .aur-rooms__grid{ grid-template-columns: 1fr; }
  .aur-rooms__col{ order: 2 !important; }
  .aur-stage{ order: 1 !important; }
  .aur-panels{ max-width: none; }
}
@media (max-width: 600px){
  .aur-item{ grid-template-columns: auto 1fr; gap: 14px; }
  .aur-item__price{ grid-column: 2; }
}

/* Wanneer de hoogte de originele verhouding moet volgen. */
.aur-rooms[data-ratio="auto"] .aur-stage{ aspect-ratio: auto; }
.aur-rooms[data-ratio="auto"] .aur-stage__slide{ position: absolute; }
.aur-rooms[data-ratio="auto"] .aur-stage__slide:first-child{ position: relative; }
.aur-rooms[data-ratio="auto"] .aur-stage .aur-stage__slide:first-child > img.aur-stage__img{
  position: relative;
  height: auto !important;
}

@media (prefers-reduced-motion: reduce){
  .aur-rooms *{ transition-duration: 1ms !important; }
  .aur-rooms .aur-stage__img{ transform: none !important; }
}