/* ==========================================================================
   Unsere Unterkünfte — drei Karten nebeneinander.

   Setzt styles/sections/spaces.css voraus: Karten, Schleier, Falze, Marker
   und die gesamte Aufklapp-Mechanik kommen von dort unverändert. Hier steht
   nur, was drei Angebote von sechs Eindrücken unterscheidet — die Zeile ist
   höher, die Kennzeichnung nennt die Art statt einer Nummer, und im
   geöffneten Zustand erscheint ein Knopf zur Unterseite.
   ========================================================================== */

.stays {
  --spaces-gap: clamp(0.7rem, 1.1vw, 1.15rem);
}

/* Drei statt sechs Karten: die Reihe darf etwas mehr Raum bekommen. */
.stays .spaces__stage {
  height: clamp(500px, 70vh, 720px);
}

/* Aus "01" wird "Zimmer" bzw. "Ferienwohnung" — dieselbe Optik. */
.stay-card .space-card__index {
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- CTA -- */

/*
   Der Knopf liegt im Detail-Falz und klappt mit ihm auf. Er braucht eine
   eigene Ebene über der unsichtbaren Klickfläche der Karte
   (.space-card__toggle::after, z-index 2) — sonst ließe er sich nicht
   anklicken, weil die Karte darüber liegt und nur auf- und zuklappt.
*/
.stay-card__cta {
  position: relative;
  z-index: 3;
  margin-block-start: clamp(1.1rem, 1.8vw, 1.5rem);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    color var(--dur-hover) var(--ease-out-soft),
    border-color var(--dur-hover) var(--ease-out-soft);
  /* Geschlossen ist er nicht anklickbar — sichtbar ist er ohnehin nicht. */
  pointer-events: none;
}

.space-card.is-active .stay-card__cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  /* Nach der Beschreibung und den Merkmalen. */
  transition-delay: 360ms;
}

/*
   Hier stand die Merkmalzeile der Zimmer-Unterseiten — dieselben Pillen wie
   auf den Karten, nur auf hellem Grund. Sie ist mit ihrem Markup entfallen,
   siehe js/components/stay-detail.js. Die Pillen der Karten bleiben oben in
   `.stay-card__features`; nur die helle Zweitfassung ist weg.
*/

/* ------------------------------------------------------------ Responsive -- */

@media (max-width: 900px) {
  .stays .spaces__stage {
    /* Senkrecht gestapelt — dieselbe Mechanik, mehr Höhe pro Karte. */
    height: clamp(560px, 88vh, 820px);
  }
}