/* ============================================================
   Atheria Room Details widget
   ============================================================ */

.ath-room-details {
  width: 100%;
  padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0;
}

/* ── Section title ── */
.ath-room-details__section-title {
  font-size: clamp(1.8rem, 1rem + 2.5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 clamp(1.5rem, 0.75rem + 2vw, 2.5rem);
}

/* ── Description ── */
.ath-room-details__desc {
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.92rem);
  line-height: 1.7;
  max-width: 70ch;
  margin: 0 0 clamp(2rem, 1rem + 2.5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* ── Grid ── */
.ath-room-details__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 2rem + 4vw, 6rem);
  row-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-items: start;
}

/* ── Single field ── */
.ath-room-details__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  padding-top: 0.6rem;
}

.ath-room-details__label {
  font-size: clamp(0.58rem, 0.52rem + 0.18vw, 0.68rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  line-height: 1;
}

.ath-room-details__value {
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3rem);
  line-height: 1.2;
  font-weight: 400;
}

.ath-room-details__value sup {
  font-size: 0.6em;
  vertical-align: super;
}

.ath-room-details__value--price::before {
  content: "From €";
  font-size: 0.75em;
  opacity: 0.7;
  margin-right: 0.1em;
}

.ath-room-details__value--price::after {
  content: " /night";
  font-size: 0.7em;
  opacity: 0.6;
  margin-left: 0.15em;
}

/* ── Mobile: single column, like Neighbourhood ── */
@media (max-width: 767px) {
  .ath-room-details {
    padding: clamp(1.5rem, 0.75rem + 2vw, 2.5rem) 0;
  }
  .ath-room-details__grid {
    grid-template-columns: 1fr;
    row-gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  }
  .ath-room-details__field {
    border-top-color: color-mix(in srgb, currentColor 12%, transparent);
  }
  .ath-room-details__value {
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
  }
}

/* ── Animation failsafe ──────────────────────────────────────────────
   If the Motion Engine for any reason does not reveal these elements
   (timing, script error, widget added after init), this CSS animation
   guarantees the content fades in instead of staying invisible. The JS
   reveal, when it runs, overrides these via inline GSAP styles.        */
.ath-js-ready .ath-room-details__grid.ath-stagger[data-ath-stagger-auto] > * {
  animation: ath-rd-failsafe 0.01s linear 2.5s forwards;
}
@keyframes ath-rd-failsafe {
  to { opacity: 1; transform: none; }
}

/* Booking link */
.ath-room-details__cta-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.25s ease;
}
.ath-room-details__cta-link:hover { opacity: 0.6; }

/* ── Conflict guard ──────────────────────────────────────────────────
   When this widget uses the Atheria animation control, Elementor's own
   "Entrance Animation" (which adds .elementor-invisible → visibility:hidden
   and waits for Elementor's animation JS) must NOT also run, or the whole
   widget stays hidden. Force the widget visible; our Motion Engine handles
   the per-field reveal independently.                                   */
.elementor-widget-atheria_room_details.elementor-invisible {
  visibility: visible !important;
}

/* ── Editor ── */
body.elementor-editor-active .ath-room-details { min-height: 80px; }