/* ==========================================================================
   Spaces — six expanding cards on two rows.

   Sizing model: every card is `flex-grow: 1` (equal thirds). The active card
   becomes `flex-grow: 3`, so within its row it takes 60 % and the other two
   settle at 20 % each. The same rule governs the vertical stack on mobile.

   Rows and cards share one gap value, so the grid reads as a single field of
   six rather than two separate bands.

   Der Abschnitt selbst ruht — "Sechs Eindrücke" steht auf keiner Seite mehr,
   siehe js/components/spaces.js. Diese Datei bleibt trotzdem im Einsatz und
   gehört auf jede Seite, die Karten zeigt: die Unterkunftskarten der
   Startseite werden von hier bedient, stays.css ergänzt nur ihre
   Abweichungen. Kartenlose Seiten binden sie nicht mehr ein.
   ========================================================================== */

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

.spaces__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
}

/* Der Punkt selbst steht in styles/ui.css — ihn benutzt auch die Galerie. */

/* ---------------------------------------------------------------- Stage -- */

.spaces__gallery {
  display: grid;
  gap: var(--spaces-gap);
  margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
}

.spaces__stage {
  display: flex;
  gap: var(--spaces-gap);
  height: clamp(460px, 64vh, 660px);
}

/* ----------------------------------------------------------------- Card -- */

.space-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-sand);
  box-shadow: var(--shadow-md);
  isolation: isolate;
  /*
     The entrance transition has to be declared here rather than inherited
     from [data-reveal] in ui.css: both selectors weigh the same and this
     file loads later, so any `transition` here replaces that one wholesale.
     Per-property delays stagger only the entrance — flex-grow keeps a zero
     delay so expanding on click still answers immediately.
  */
  transition: flex-grow var(--dur-base) var(--ease-in-out),
    box-shadow var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) var(--ease-out) calc(var(--i) * 120ms),
    transform var(--dur-slow) var(--ease-out) calc(var(--i) * 120ms);
}

@media (hover: hover) {
  .space-card:hover {
    box-shadow: var(--shadow-lg);
  }
}

.spaces__stage.has-active .space-card.is-active {
  flex-grow: 3;
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------- Media -- */

.space-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/*
   Hover is direct manipulation, so it answers fast (300 ms) — while the
   click-to-expand zoom stays cinematic. The image is absolutely positioned
   inside an overflow-hidden frame, so scaling never moves the layout.
   The 1.005 resting scale only guards against subpixel edge seams.
*/
.space-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.005);
  transition: transform var(--dur-image-hover) var(--ease-out-soft);
  will-change: transform;
}

@media (hover: hover) {
  .space-card:hover .space-card__media img {
    transform: scale(1.08);
  }
}

/* Declared last so an open card keeps the slow zoom even while hovered. */
.space-card.is-active .space-card__media img,
.space-card.is-active:hover .space-card__media img {
  transform: scale(1.1);
  transition-duration: var(--dur-cinematic);
  transition-timing-function: var(--ease-out);
}

/*
   Zwei Schleier, wie beim Aufschlag der Startseite: einer von unten für
   Titel und Beschreibung, einer von oben für Kennung und Knopf.

   Der obere rechnet in rem, nicht in Prozent. Die Karte ist mal 227 px
   hoch (zwei nebeneinander) und mal 720 px (drei in einer Reihe), die
   Kennung sitzt aber immer 20 bis 52 px unter der Oberkante. Ein
   Prozentwert deckt entweder die kurze Karte zu weit ab oder die lange
   nicht weit genug; ein Pixelband trifft beide.
*/
.space-card__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(24, 17, 19, 0.58) 0,
      rgba(24, 17, 19, 0.52) 3.5rem,
      rgba(24, 17, 19, 0.14) 6rem,
      transparent 7.5rem
    ),
    linear-gradient(
      to top,
      rgba(24, 17, 19, 0.76) 0%,
      rgba(24, 17, 19, 0.4) 34%,
      rgba(24, 17, 19, 0.04) 66%,
      transparent 100%
    );
}

/* A second, deeper veil fades in behind the longer active copy. */
.space-card__veil::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(
    to top,
    rgba(24, 17, 19, 0.72) 0%,
    rgba(24, 17, 19, 0.5) 45%,
    rgba(24, 17, 19, 0.18) 78%,
    transparent 100%
  );
  transition: opacity var(--dur-slow) var(--ease-out);
}

.space-card.is-active .space-card__veil::after {
  opacity: 1;
}

/* ---------------------------------------------------------------- Panel -- */

.space-card__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 2.15rem);
  color: #fff;
}

.space-card__index {
  position: absolute;
  top: clamp(1.25rem, 2vw, 2.15rem);
  left: clamp(1.25rem, 2vw, 2.15rem);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  /*
     Volles Weiß wie Titel und Bildunterschriften. Die Kennung tritt
     ohnehin zurück — 0,65 rem, Versalien, weite Sperrung —, dafür braucht
     sie keine halbe Deckkraft. Die kostete auf hellen Fotos die
     Lesbarkeit: über dem Dachfenster der Ferienwohnung stand sie
     zuletzt bei 1,3:1.
  */
  color: #fff;
}

.space-card__title {
  color: #fff;
  font-size: var(--fs-title);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 16px rgba(22, 16, 18, 0.4);
  transition: font-size var(--dur-base) var(--ease-in-out);
}

/* Collapsed siblings recede a little. */
.spaces__stage.has-active .space-card:not(.is-active) .space-card__title {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}

.space-card__toggle {
  /* Static so the ::after hit area resolves against the card panel. */
  position: static;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}

.space-card__toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.space-card__toggle:focus-visible {
  outline: none;
}

.space-card:has(.space-card__toggle:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ----------------------------------------------------------- Text folds -- */

.space-card__fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-base) var(--ease-in-out),
    opacity var(--dur-fast) var(--ease-out);
}

.space-card__fold-inner {
  overflow: hidden;
  min-height: 0;
}

.space-card__excerpt,
.space-card__description {
  padding-block-start: 0.7rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.65;
  max-width: 34ch;
  text-shadow: 0 1px 12px rgba(22, 16, 18, 0.35);
}

.space-card__description {
  max-width: 48ch;
}

/* Idle: excerpt shown, detail collapsed. */
.space-card__fold--detail {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* Any open card collapses every excerpt, including its own. */
.spaces__stage.has-active .space-card__fold--excerpt {
  grid-template-rows: 0fr;
  opacity: 0;
}

.space-card.is-active .space-card__fold--detail {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 90ms;
}

/* --------------------------------------------------------- Feature tags -- */

.space-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.15rem;
}

.space-card__features li {
  /* Roomy enough that the pill radius never crowds a descender. */
  padding: 0.52rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.space-card.is-active .space-card__features li {
  opacity: 1;
  transform: none;
  transition-delay: calc(260ms + var(--i) * 80ms);
}

/* --------------------------------------------------------------- Marker -- */

.space-card__marker {
  position: absolute;
  z-index: 3;
  top: clamp(1.1rem, 1.8vw, 1.9rem);
  right: clamp(1.1rem, 1.8vw, 1.9rem);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.space-card__marker::before,
.space-card__marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-in-out);
}

.space-card__marker::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.space-card:hover .space-card__marker {
  background: rgba(255, 255, 255, 0.2);
}

.space-card.is-active .space-card__marker {
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: rotate(180deg);
}

.space-card.is-active .space-card__marker::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

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

@media (max-width: 900px) {
  .spaces__stage {
    flex-direction: column;
    height: clamp(600px, 92vh, 860px);
  }

  .spaces__stage.has-active .space-card:not(.is-active) .space-card__title {
    font-size: 1.15rem;
  }

  .space-card__description {
    font-size: 0.9rem;
    max-width: 46ch;
  }

  .space-card__features {
    margin-block-start: 0.9rem;
  }
}

@media (max-width: 480px) {
  .space-card__features li {
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
  }
}