/* ============================================================
   LONGEVITY RESORTS — Unterkünfte (plate_suites)
   Karten & Zeilen · Seitenkopf der Detailseite · Galerie-CE
   ------------------------------------------------------------
   Hier steht AUSSCHLIESSLICH Projekt-Optik. Struktur, Box, Schichtung und
   Bedienung kommen aus dem generischen Paket bzw. aus
   `plate_partials → Organisms/PageHero` — dieses Theme setzt deren
   Variablen-Slots (`--ls-*`, `--pl-pagehero-*`) und ergänzt Feinschliff.

   HARTE REGELN, die diese Datei einhält:
   - KEIN Sektions-Hintergrund und KEIN vertikales Sektions-Padding auf einem
     CE-Wrapper. Das machen die generischen Frame-Felder am Element
     (background_color_class, background_image, space_before/after_class,
     frame_layout_inner_*).
   - KEINE eigene Container-/Sektionsbreite (kein max-width/margin:auto/
     Seiten-Padding auf einem Sektions-Wrapper). Die Inhaltsbreite kommt für
     ALLE Elemente vom generischen `.frame-container`; die Detailseite bildet
     dessen Box im Paket-CSS aus denselben Quellen nach.
   - KEINE Wiederholung eines plate_bootstrap-Settings-Slots. Wo eine
     Überschriften-Größe oder eine Farbe aus einem Slot kommt, steht hier die
     Variable, nicht die Zahl.
   - Nichts, was die Bedienung verändert: kein display:none auf Bedienelementen,
     keine pointer-events, keine z-index-Verschiebung an Links oder Knöpfen.
     Die Karte ist ein <article> mit „stretched link" am Titel; die Knopfzeile
     MUSS darüber liegen (das macht bereits das Paket-CSS) — hier wird daran
     nichts gedreht.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens des Pakets auf die Marke mappen
   ------------------------------------------------------------
   `plate_suites` liest jede Farbe, Linie und Rundung über
   `var(--ls-*, <neutraler Fallback>)`. Damit genügt EIN Block, um Listen,
   Detailseite und Galerie in den Longevity-Duktus zu holen — ohne
   Template-Override und ohne Kopie des Block-CSS. */
.frame-type-atomicplan_suiteslist,
.frame-type-atomicplan_suitegallery,
.ls-detail,
.pl-pagehero.ls-suitehero {
  --ls-accent:          var(--lr-bronze);
  --ls-accent-deep:     var(--lr-bronze-ink);
  --ls-accent-contrast: var(--lr-soft-black);
  --ls-line:            var(--lr-line);
  --ls-line-strong:     var(--lr-line-strong);
  --ls-muted:           var(--lr-ink-faint);
  --ls-text-muted:      var(--lr-ink-soft);
  --ls-radius:          0;
  --ls-pill-radius:     999px;
  --ls-btn-radius:      0;
  --ls-btn-padding:     0.85em 1.6em;
  --ls-btn-font-size:   0.78rem;
  --ls-gap:             clamp(1rem, 2vw, 1.6rem);
  --ls-card-min:        21rem;
  --ls-gallery-min:     18rem;
  /* Karten-/Zeilen-Titel: Cormorant wie alle Überschriften der Site. Die GRÖSSE
     kommt aus der Theme-Skala, nicht aus einer wiederholten Zahl. */
  --ls-title-size:      var(--lr-fs-h4);
  --ls-h2-size:         var(--lr-fs-h3);
}

/* ------------------------------------------------------------
   2. Karten & Zeilen
   ------------------------------------------------------------ */
.frame-type-atomicplan_suiteslist .ls-card,
.frame-type-atomicplan_suiteslist .ls-row {
  background: transparent;
}

.frame-type-atomicplan_suiteslist .ls-card {
  border-color: var(--lr-line);
}

.frame-type-atomicplan_suiteslist .ls-card:hover,
.frame-type-atomicplan_suiteslist .ls-card:focus-within {
  border-color: var(--lr-bronze);
}

/* Typzeile = dieselbe Dachzeilen-Optik wie überall (Versalien, weit gesperrt). */
.frame-type-atomicplan_suiteslist .ls-card__type,
.frame-type-atomicplan_suiteslist .ls-row__type {
  font-family: var(--lr-font-body);
  font-size: var(--lr-fs-eyebrow);
  letter-spacing: 0.22em;
  color: var(--lr-bronze-ink);
}

.frame-type-atomicplan_suiteslist .ls-card__title,
.frame-type-atomicplan_suiteslist .ls-row__title {
  font-family: var(--lr-font-display);
  font-weight: 300;
  color: var(--lr-charcoal);
}

.frame-type-atomicplan_suiteslist .ls-card__teaser,
.frame-type-atomicplan_suiteslist .ls-row__teaser {
  font-size: var(--lr-fs-body);
  line-height: 1.6;
  /* Zeilenlänge am TEXT, nicht am Sektions-Wrapper — das ist der erlaubte Fall. */
  max-width: 46ch;
}

/* Icon-Faktenzeile: ruhige Trennlinie darüber, Preis als Akzent. */
.frame-type-atomicplan_suiteslist .ls-facts {
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--lr-line);
  font-family: var(--lr-font-body);
  letter-spacing: 0.02em;
}

.frame-type-atomicplan_suiteslist .ls-facts__item--price {
  color: var(--lr-bronze-ink);
}

/* ------------------------------------------------------------
   3. Knöpfe & Merk-Knopf
   ------------------------------------------------------------
   Die Longevity-Knöpfe (.btn--solid/.btn--line in theme.css) sind an
   Redaktions-Links gebunden; die Knöpfe des Pakets tragen eigene Klassen und
   werden hier auf dieselbe Optik gebracht — Versalien, gesperrt, ohne Rundung. */
.ls-btn,
.ls-fav {
  font-family: var(--lr-font-body);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ls-btn--primary {
  background: var(--lr-charcoal);
  color: var(--lr-ivory);
  border-color: var(--lr-charcoal);
}

.ls-btn--primary:hover,
.ls-btn--primary:focus-visible {
  background: var(--lr-bronze);
  color: var(--lr-soft-black);
  border-color: var(--lr-bronze);
}

.ls-btn--ghost {
  border-color: currentColor;
}

.ls-fav {
  border-color: var(--lr-line-strong);
  color: var(--lr-ink-soft);
}

.ls-fav:hover,
.ls-fav:focus-visible {
  border-color: var(--lr-bronze);
  color: var(--lr-charcoal);
}

.ls-fav[active] {
  border-color: var(--lr-bronze);
  color: var(--lr-bronze-ink);
}

/* Abstand zwischen Herz und Beschriftung: liegt im Shadow-DOM der Komponente
   und ist nur über ihren `part` erreichbar. */
.ls-fav::part(icon-wrapper) {
  gap: 0.55rem;
}

/* ------------------------------------------------------------
   4. Seitenkopf der Unterkunfts-Detailseite
   ------------------------------------------------------------
   Derselbe generische Organism wie bei den Resort-Seiten. Hier stehen NUR
   dessen Slots — dieselben Werte wie an `.lr-pghero` in theme.css, als
   Variablen-Verweise, nicht als wiederholte Zahlen. Insbesondere der Freiraum
   unter dem fixierten Site-Header: ohne ihn läge die oberste Kopfzeile
   unsichtbar darunter. */
.ls-suitehero {
  --pl-pagehero-header-h: var(--lr-header-h);
  --pl-pagehero-header-gap: 50px;
  --pl-pagehero-pad-bottom: clamp(2.6rem, 6vh, 5rem);
  --pl-pagehero-min-height: clamp(52svh, 46svh + 10vw, 68svh);
  --pl-pagehero-color: var(--lr-on-dark);
  --pl-pagehero-scrim: linear-gradient(180deg, rgba(26,27,25,0.55) 0%, rgba(26,27,25,0.35) 40%, rgba(26,27,25,0.86) 100%);
  --pl-pagehero-title-measure: 18ch;
  --pl-pagehero-text-measure: 56ch;
}

/* Ohne Bild: heller Kopf auf Ivory statt heller Schrift auf Nichts.
   Zwei Klassen, weil der Vertrag den bildlosen Kopf bewusst mit (0,2,0)
   adressiert — eine einzelne Klasse verlöre das Rennen. */
.ls-suitehero.pl-pagehero--nomedia { background: var(--lr-ivory-deep); }
.ls-suitehero.pl-pagehero--nomedia .pl-pagehero__title { color: var(--lr-charcoal); }
.ls-suitehero.pl-pagehero--nomedia .pl-pagehero__meta,
.ls-suitehero.pl-pagehero--nomedia .pl-pagehero__eyebrow { color: var(--lr-bronze-ink); }
.ls-suitehero.pl-pagehero--nomedia .pl-pagehero__abstract { color: var(--lr-ink-soft); }

.ls-suitehero .pl-pagehero__meta {
  font-family: var(--lr-font-body);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--lr-stone);
}

/* Kontextpfad „Zimmer & Suiten › <Resort> › <Unterkunft>". */
.ls-crumbs {
  font-family: var(--lr-font-body);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Der Kontextpfad steht auf dem Kopfbild an dessen HELLSTER Stelle (oben, wo
     der Scrim nur 0.35 traegt). Mit --lr-on-dark-soft (Alpha 0.68) und ohne
     Schatten war er auf einem Schneemotiv praktisch nicht lesbar. Deshalb hier
     die volle Textfarbe plus derselbe Schatten, den auch Titel und Einleitung
     des Kopfes tragen — die Zuruecknahme in der Hierarchie leisten Groesse,
     Laufweite und Versalien, nicht die Deckkraft. */
  color: var(--lr-on-dark);
  text-shadow: 0 1px 18px rgba(26, 27, 25, 0.55);
}

.ls-crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ls-crumbs a:hover,
.ls-crumbs a:focus-visible { border-bottom-color: currentColor; }

.ls-suitehero.pl-pagehero--nomedia .ls-crumbs { color: var(--lr-ink-soft); text-shadow: none; }

/* Auf dem abgedunkelten Kopfbild erbt der Geister-Knopf die helle Textfarbe;
   der Merk-Knopf bekommt sie ausdrücklich (er steht sonst auf --ls-*-Tokens). */
.ls-suitehero .ls-hero-ctas .ls-fav {
  border-color: var(--lr-line-on-dark);
  color: var(--lr-on-dark);
}

.ls-suitehero .ls-hero-ctas .ls-fav:hover,
.ls-suitehero .ls-hero-ctas .ls-fav:focus-visible,
.ls-suitehero .ls-hero-ctas .ls-fav[active] {
  border-color: var(--lr-stone);
  color: var(--lr-stone);
}

/* Klebrige Bodenleiste (schmale Viewports): das Paket fixiert die Reihe, hier
   nur ihre Farben. Die Knöpfe stehen dort NICHT mehr auf dem Kopfbild. */
@media (max-width: 47.99em) {
  .ls-suitehero .ls-hero-ctas {
    --ls-ctabar-bg: var(--lr-ivory);
    --ls-ctabar-color: var(--lr-ink);
  }

  .ls-suitehero .ls-hero-ctas .ls-fav {
    border-color: var(--lr-line-strong);
    color: var(--lr-ink-soft);
  }

  .ls-suitehero .ls-hero-ctas .ls-btn--ghost {
    border-color: var(--lr-line-strong);
    color: var(--lr-charcoal);
  }
}

/* ------------------------------------------------------------
   5. Detailseite: Textkörper, Fakten-Kasten, „Gehört zu"
   ------------------------------------------------------------ */
.ls-detail__prose {
  font-size: var(--lr-fs-body);
  line-height: 1.75;
  max-width: var(--lr-measure);
}

.ls-detail__h {
  font-family: var(--lr-font-display);
  font-weight: 300;
  color: var(--lr-charcoal);
}

.ls-detail__aside {
  background: var(--lr-ivory-deep);
  border-color: transparent;
}

.ls-detail__facts dt {
  font-family: var(--lr-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lr-ink-faint);
}

.ls-pill {
  font-family: var(--lr-font-body);
  letter-spacing: 0.08em;
  border-color: var(--lr-line);
}

.ls-parent__eyebrow { color: var(--lr-bronze-ink); }

.ls-parent__title {
  font-family: var(--lr-font-display);
  font-weight: 300;
  color: var(--lr-charcoal);
}

/* ------------------------------------------------------------
   6. Galerie-CE
   ------------------------------------------------------------ */
.frame-type-atomicplan_suitegallery .ls-gallery__caption {
  font-family: var(--lr-font-body);
  color: var(--lr-ink-faint);
}

.frame-type-atomicplan_suitegallery .ls-gallery--slider {
  --atomic-slider-transition-time: 1.1s;
}