/* ============================================================
   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. */
#property.layout-editorial .gallery-full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

#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;
}

/* Mobile: Leitbild voll oben, Kacheln als 2er-Grid darunter */
@media (max-width: 59.999rem) {
  #property.layout-editorial .hero-grid {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  #property.layout-editorial .hero-grid .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;
  }
}

/* ============================================================
   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) {
  #property.layout-editorial .content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    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 (22rem) → 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;
  }
}