/* ============================================================
   Property Detail — Editorial-Layout (Variante)
   Aktiv via <main id="property" class="layout-editorial"> (property_layout).
   Nur die Galerie weicht ab: Hero-Grid (Leitbild links + 2×2 rechts) statt Slider,
   wahlweise full-bleed (property_gallery=grid|grid-full). Der restliche Body erbt
   das classic-Markup/-CSS (pages/property.css).
   Alles hier streng auf #property.layout-editorial gescoped.
   ============================================================ */

/* --- Hero-Grid (property_gallery = 'grid' / 'grid-full'): Leitbild links + 2×2 rechts.
   Feste Höhen-Bandbreite (kein Aspect-Ratio) → auf breiten/full-bleed Screens nicht zu hoch. */
#property.layout-editorial .hero-grid {
  display: grid;
  gap: var(--space-2);
  height: var(--property-grid-height);
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Full-bleed-Variante: gesamte Galerie über die volle Viewport-Breite.
   100vw zählt die Scrollbar mit → die Galerie ragte je eine halbe Scrollbar-Breite (Windows ~7px) links und
   rechts über den Rand hinaus (abgeschnitten via body overflow-x: clip) und die Badges links standen um diesen
   Betrag weiter außen als der Topbar-Text. Deshalb: body nur auf DIESER Seite als Container, Breite in cqw
   (= Seitenbreite ohne Scrollbar). 100vw bleibt als Fallback für Browser ohne :has()/Container-Einheiten. */
body:has(#property.layout-editorial > .gallery-full) {
  container-type: inline-size;
}
#property.layout-editorial .gallery-full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
}

#property.layout-editorial .hero-grid > a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}

#property.layout-editorial .hero-grid .lead {
  grid-column: 1;
  grid-row: 1 / 3;
}

#property.layout-editorial .hero-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

#property.layout-editorial .hero-grid > a:hover img {
  transform: scale(1.03);
}

/* Degradation nach Kachelzahl (data-count = gerenderte Kacheln) */
#property.layout-editorial .hero-grid[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
#property.layout-editorial .hero-grid[data-count="1"] .lead { grid-row: 1; }

#property.layout-editorial .hero-grid[data-count="2"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
}
#property.layout-editorial .hero-grid[data-count="2"] .lead { grid-row: 1; }

#property.layout-editorial .hero-grid[data-count="3"] {
  grid-template-columns: 2fr 1fr;
}

#property.layout-editorial .hero-grid[data-count="4"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
}
#property.layout-editorial .hero-grid[data-count="4"] .lead { grid-row: 1 / 4; }

/* "Alle Fotos"-Overlay auf der letzten Kachel */
#property.layout-editorial .gallery-all-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--scrim-heavy);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  /* Icon über dem Text, beides zentriert; mehrzeiliger Label-Text mittig. */
  text-align: center;
}

/* --- Badges unten links auf dem Leitbild: dieselben Bausteine wie auf der Kachel
   (PropertyCard::image_badges → .media-badges / .energy-mini / .solar-mini), nur größer.
   Energie + Solar bilden die Zeile ÜBER den Medien-Zählern; deren Höhe steht wie auf der
   Kachel in EINER Variablen (--lead-badge-bottom), s. Begründung in property-card.css.
   Farben der Energieklassen kommen global aus pages/property.css (.energy-mini[data-class]). */
#property.layout-editorial > .gallery {
  --lead-badge-inset: var(--space-3);
}
/* Full-bleed (property_gallery = 'grid-full'): Das Leitbild beginnt am Viewport-Rand. Die Badges links
   (Status oben, Energie/Solar/Medien unten) fluchten mit dem Text der Topbar ganz oben — gleicher
   Randabstand wie #topbar (04-layout.css: --padding-page; unter 79.5rem --space-4, components/header.css;
   Pro-Tier links weiter --padding-page, components/service-nav.css). Ändert sich dort der Abstand,
   hier mitziehen. */
#property.layout-editorial > .gallery-full {
  --lead-badge-inset: var(--padding-page);
}
@media (max-width: 79.499rem) {
  #property.layout-editorial > .gallery-full {
    --lead-badge-inset: var(--space-4);
  }
}
/* Pro: Topbar links wieder --padding-page (Query wortgleich zu components/service-nav.css). */
@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {
  [data-tier="pro"] #property.layout-editorial > .gallery-full {
    --lead-badge-inset: var(--padding-page);
  }
}
#property.layout-editorial .hero-grid .lead {
  --lead-badge-bottom: calc(var(--space-3) + 2.75rem);
}

/* Status-Badge oben links (Verkauft, Dachterrasse …) auf DENSELBEN Randabstand wie die Badges unten links.
   Es erbt sonst die Kachel-Regel aus property-card.css (--space-2 = 8px), unten stehen hier --space-3 (12px) —
   das obere wirkte gegenüber den unteren verrutscht (Nutzerhinweis 30.09.2026). */
#property.layout-editorial > .gallery > mark {
  top: var(--space-3);
  left: var(--lead-badge-inset);
}

#property.layout-editorial .lead .media-badges {
  position: absolute;
  bottom: var(--space-3);
  left: var(--lead-badge-inset);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-inverse);
  background: var(--scrim-medium);
  border-radius: var(--radius);
}

#property.layout-editorial .lead :is(.energy-mini, .solar-mini) {
  position: absolute;
  left: var(--lead-badge-inset);
  bottom: var(--lead-badge-bottom);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
}

#property.layout-editorial .lead .energy-mini {
  min-width: 2.25rem;
  padding: 0 var(--space-3);
  padding-inline-end: calc(var(--space-3) + 0.625rem);
  font-size: var(--text-base);
  font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 0.625rem) 0, 100% 50%, calc(100% - 0.625rem) 100%, 0 100%);
}

#property.layout-editorial .lead .solar-mini {
  width: 2.25rem;
  border-radius: var(--radius);
  background: hsl(45 93% 47%);   /* wie Kachel: Sonnengelb, theme-unabhängig */
  color: hsl(30 60% 15%);
}
/* Energieklasse vorhanden → Solar daneben statt darauf. Plakette hier 44–46px breit, „A+" 53px (gemessen
   07.10.2026) → ~5px Luft hinter der Pfeilspitze, wie auf der Kachel (components/property-card.css). */
#property.layout-editorial .lead .energy-mini ~ .solar-mini {
  left: calc(var(--lead-badge-inset) + 3.125rem);
}
#property.layout-editorial .lead .energy-mini[data-class="A+"] ~ .solar-mini {
  left: calc(var(--lead-badge-inset) + 3.625rem);
}

/* Handy: Badges in Kachelgröße und nah am Bildrand — die großen Desktop-Maße nahmen am Handy ein
   Viertel des Leitbilds ein (Nutzerhinweis ips.saarland 01.10.2026). Werte 1:1 aus
   components/property-card.css; ändern sich die dort, hier mitziehen. Icons 14px wie auf der Kachel
   (PHP liefert 18px, die CSS-Größe gewinnt gegen das width/height-Attribut). */
@media (max-width: 44.999rem) {
  #property.layout-editorial > .gallery,
  #property.layout-editorial > .gallery-full {
    --lead-badge-inset: var(--space-2);
  }
  #property.layout-editorial > .gallery > mark {
    top: var(--space-2);
  }
  #property.layout-editorial .hero-grid .lead {
    --lead-badge-bottom: calc(var(--space-2) + 2rem);
  }
  #property.layout-editorial .lead .media-badges {
    bottom: var(--space-2);
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
  #property.layout-editorial .lead .media-badges svg {
    width: 14px;
    height: 14px;
  }
  #property.layout-editorial .lead :is(.energy-mini, .solar-mini) {
    height: 1.75rem;
  }
  #property.layout-editorial .lead .energy-mini {
    min-width: 1.75rem;
    padding: 0 var(--space-2);
    padding-inline-end: calc(var(--space-2) + 0.5rem);
    font-size: var(--text-sm);
    clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 50%, calc(100% - 0.5rem) 100%, 0 100%);
  }
  #property.layout-editorial .lead .solar-mini {
    width: 1.75rem;
  }
  #property.layout-editorial .lead .solar-mini svg {
    width: 14px;
    height: 14px;
  }
  #property.layout-editorial .lead .energy-mini ~ .solar-mini {
    left: calc(var(--lead-badge-inset) + 2.5rem);
  }
  #property.layout-editorial .lead .energy-mini[data-class="A+"] ~ .solar-mini {
    left: calc(var(--lead-badge-inset) + 3rem);
  }
}

/* Tablet: Zwischenstufe zwischen Handy und Desktop — die Desktop-Maße wirkten auf dem Tablet zu wuchtig
   (Nutzerhinweis 08.10.2026). Plakette 32px statt 36/28, Schrift text-sm, Icons 16px. */
@media (min-width: 45rem) and (max-width: 79.499rem) {
  #property.layout-editorial .hero-grid .lead {
    --lead-badge-bottom: calc(var(--space-3) + 2.25rem);
  }
  #property.layout-editorial .lead .media-badges {
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
  }
  #property.layout-editorial .lead .media-badges svg {
    width: 16px;
    height: 16px;
  }
  #property.layout-editorial .lead :is(.energy-mini, .solar-mini) {
    height: 2rem;
  }
  #property.layout-editorial .lead .energy-mini {
    min-width: 2rem;
    padding: 0 var(--space-2);
    padding-inline-end: calc(var(--space-2) + 0.5625rem);
    font-size: var(--text-sm);
    clip-path: polygon(0 0, calc(100% - 0.5625rem) 0, 100% 50%, calc(100% - 0.5625rem) 100%, 0 100%);
  }
  #property.layout-editorial .lead .solar-mini {
    width: 2rem;
  }
  #property.layout-editorial .lead .solar-mini svg {
    width: 16px;
    height: 16px;
  }
  #property.layout-editorial .lead .energy-mini ~ .solar-mini {
    left: calc(var(--lead-badge-inset) + 2.5rem);
  }
  #property.layout-editorial .lead .energy-mini[data-class="A+"] ~ .solar-mini {
    left: calc(var(--lead-badge-inset) + 3rem);
  }
}

/* Mobile: Leitbild voll oben, Kacheln als 2er-Grid darunter.
   ⚠ Selektoren mit [data-count]: Die Degradations-Regeln oben (.hero-grid[data-count="3"] → 2fr 1fr,
   [data-count="4"] .lead → grid-row 1/4) sind spezifischer als ein schlichtes .hero-grid und gewannen
   sonst auch am Handy — die rechte Kachel war dann nur halb so breit und (4:3) halb so hoch wie die
   linke (gemeldet 07.10.2026). */
@media (max-width: 59.999rem) {
  #property.layout-editorial .hero-grid,
  #property.layout-editorial .hero-grid[data-count] {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  #property.layout-editorial .hero-grid .lead,
  #property.layout-editorial .hero-grid[data-count] .lead {
    grid-column: 1 / 3;
    grid-row: auto;
    aspect-ratio: var(--property-hero-aspect);
  }
  #property.layout-editorial .hero-grid > a:not(.lead) {
    aspect-ratio: 4 / 3;
  }
  /* Bleibt eine Kachel allein in der letzten Reihe (2 oder 4 Fotos), nimmt sie die volle Breite
     statt einer leeren Hälfte daneben. Kind 1 ist das Leitbild → allein steht sie bei gerader Position. */
  #property.layout-editorial .hero-grid > a:not(.lead):nth-child(even):last-child {
    grid-column: 1 / 3;
    aspect-ratio: var(--property-hero-aspect);
  }
}

/* ============================================================
   Phase B.2 — Editorial Content-Restyle (rein CSS)
   ============================================================ */

/* --- Typografie: großer, ruhiger Titel + prominenter Preis --- */
#property.layout-editorial article > header h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-4);
}

#property.layout-editorial article > section.price > h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-heading);
}

/* Mehr Luft zwischen den Inhalts-Sektionen (Editorial-Rhythmus). */
#property.layout-editorial article > section {
  margin-block-end: var(--gap-section);
}

/* --- 2-Spalten ab Desktop: Inhalt + sticky Kontakt-Aside --- */
@media (min-width: 64rem) {
  /* Aside exakt so breit wie EINE Hero-Spalte: dann fluchtet ihre linke Kante mit der
     Fuge zwischen den beiden rechten Bildkacheln — und ihre rechte Kante ohnehin.

     Warum gerechnet statt fest: Das Hero-Raster ist proportional (2fr 1fr 1fr = 4 Einheiten
     + 2 Gaps), eine feste Aside-Breite trifft es nur bei genau EINER Fensterbreite. Die
     vorherigen 22rem passten bei ~1440px; bei der gedeckelten Seitenbreite (95rem = 1520px)
     war die Aside 24px zu schmal, darunter zu breit. Ändert sich --space-2 (Hero-Gap) oder
     das Spaltenverhältnis, muss der Divisor hier mitgezogen werden.

     Untergrenze --sidebar-width (= classic-Aside): Das Editorial-Grid startet schon bei
     64rem, dort wäre die gerechnete Spalte nur ~15.75rem und würde die Kontaktkarte
     quetschen. Bis ~89rem gewinnt also die Untergrenze (kein Fluchten, aber benutzbar),
     darüber die Rasterbindung. */
  #property.layout-editorial .content {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      max(var(--sidebar-width), calc((100% - 2 * var(--space-2)) / 4));
    gap: var(--gap-section);
    align-items: start;
  }

  /* Kontakt/Aktionen bleiben beim Scrollen sichtbar. --sticky-offset wird von
     header.js mit der echten Header-Höhe befüllt (wie bei der Preis-Section). */
  #property.layout-editorial .content > aside {
    position: sticky;
    top: calc(var(--sticky-offset, 0px) + var(--space-5));
    /* Aside steht ab hier NEBEN dem Content (eine Hero-Spalte breit) → wieder einspaltig. Hebt die
       geteilte Tablet-2-Spalten-Regel (property-aside.css, bis 79.5rem) auf, deren
       Bereich sich sonst mit diesem früheren Editorial-Grid (64rem) überschneidet
       und die schmale Aside fälschlich zweispaltig quetscht. */
    flex-direction: column;
    flex-wrap: nowrap;
  }
  #property.layout-editorial .content > aside > section {
    flex: 0 1 auto;
  }
}