/* ============================================================
   Property Grid pages — layout only
   Pages: #property-list, #search-results, #favorites
   Card markup itself is defined in components/property-card.css.
   This file only contains the grid container, page-level overrides,
   view-toggle, split-view and the search-results map.
   ============================================================ */

/* --- Grid containers --- */

.property-grid {
  display: grid;
  gap: var(--gap-block);
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* .similar-properties nutzt jetzt .card-section + .card-scroller
   (sections/featured-properties.css) — wie latest-/featured-properties. */

/* --- Favorites page: hide heart button, remove-btn takes over --- */

#favorites .property-card .fav-btn {
  display: none;
}

/* Toolbar (Sort + Filter + Anfrage-Button) sitzt direkt vor dem Card-Grid —
   eigener Block mit Abstand zur Grid-Section drunter.
   Layout: Total + Sort + Type-Filter in einer Reihe, Aktions-Button auf eigener
   Zeile drunter mit margin-top. */
#favorites .fav-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--gap-inline);
  margin-block-end: var(--gap-block);
}

#favorites .fav-toolbar > p {
  margin: 0;
  margin-inline-end: auto;
  font-weight: 500;
}

#favorites .fav-toolbar > select {
  width: auto;
  min-width: 12rem;
}

/* Spacer (leerer div) erzwingt Flex-Wrap zwischen Selects und Aktion-Button. */
#favorites .fav-toolbar > .fav-toolbar-break {
  flex-basis: 100%;
  height: 0;
}

/* Aktion-Button (Anfragen) auf eigener Zeile (durch Spacer erzwungen),
   bleibt selbst aber kompakt — width:auto, nur so breit wie sein Inhalt. */
#favorites .fav-toolbar > button,
#favorites .fav-toolbar > .btn {
  width: auto;
  margin-block-start: var(--space-2);
}

/* Tab-Navigation: Favoriten vs. Vergleich. Chip-Style mit Counter-Badge. */
#favorites .fav-tabs {
  display: flex;
  gap: var(--space-2);
  margin-block: var(--space-3) var(--gap-block);
  border-bottom: 0.0625rem solid var(--color-border);
}

#favorites .fav-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 0.125rem solid transparent;
  margin-block-end: -0.0625rem;
  transition: color var(--transition), border-color var(--transition);
}

#favorites .fav-tabs a:hover {
  color: var(--color-text);
}

#favorites .fav-tabs a.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

#favorites .fav-tabs .count {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  font-size: var(--text-sm);
  text-align: center;
  line-height: 1.5rem;
}

#favorites .fav-tabs a.active .count {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* Compare-Button — sitzt INNERHALB der figure (durch figure_extras-Parameter
   in render_image_figure), positioniert relativ zur Bild-Box, daher exakt
   am unteren rechten Rand des Bildes (nicht der ganzen Card).
   Stilistisch analog zu .fav-btn / .remove-btn. */
.property-card figure .compare-btn {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  z-index: 5;
  padding: var(--space-2);
  border: none;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.85);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 0;
  transition: color var(--transition-med), background var(--transition-med), transform var(--transition-med);
}

.property-card figure .compare-btn:hover {
  color: var(--color-primary);
  transform: scale(1.1);
}

.property-card figure .compare-btn.active {
  background: var(--color-primary);
  color: var(--color-bg);
}

.property-card figure .compare-btn.limit {
  animation: shake 0.4s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.25rem); }
  75% { transform: translateX(0.25rem); }
}

/* === Compare-Tab: Vergleichsübersicht === */

#favorites .compare-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-inline);
  margin-block-end: var(--gap-block);
}

#favorites .compare-header h2 {
  margin: 0;
}

#favorites .compare-header .eyebrow {
  margin: 0 0 var(--space-1) 0;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  font-size: var(--text-sm);
  font-weight: 600;
}

#favorites .compare-header p:last-of-type {
  margin: var(--space-2) 0 0 0;
  color: var(--color-text-muted);
}

#favorites .compare-empty {
  padding: var(--padding-card);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}

/* Grid-Layout: Label-Spalte (auto) + N Properties-Spalten (gleich breit).
   --cols wird vom PHP-Renderer gesetzt (Properties + ggf. 1 leerer Slot). */
#favorites .compare-grid {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) repeat(var(--cols), 1fr);
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

#favorites .compare-row {
  display: contents;
}

#favorites .compare-row > .compare-label,
#favorites .compare-row > .compare-cell {
  padding: var(--space-3) var(--space-4);
  border-bottom: 0.0625rem solid var(--color-border);
  display: flex;
  align-items: center;
}

#favorites .compare-row > .compare-cell {
  scroll-snap-align: start;
  justify-content: flex-start;
  text-align: left;
}

#favorites .compare-row > .compare-label {
  font-weight: 600;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

/* Header-Row (Bild/Titel/Preis): linksbündig wie die Daten-Zeilen drunter,
   damit der Preis genau über den Werten ausfluchtet. Bild bleibt full-width. */
#favorites .compare-headers > .compare-cell {
  justify-content: flex-start;
  text-align: left;
}

/* Aktionen-Row: Buttons oben ausrichten — alle Spalten starten auf gleicher Höhe,
   auch wenn sie unterschiedlich viele Buttons enthalten (z.B. leerer Slot mit nur
   "Objekt suchen" vs. ausgefüllt mit "Details"+"Anfragen"). */
#favorites .compare-actions > .compare-cell {
  justify-content: flex-start;
  text-align: center;
}

#favorites .compare-row:last-child > .compare-label,
#favorites .compare-row:last-child > .compare-cell {
  border-bottom: none;
}

/* Row-Hover als optische Hilfe — alle Cells einer Daten-Zeile werden gemeinsam
   hervorgehoben, damit man sieht welche Werte zusammengehören. Header- und
   Aktionen-Row ausgenommen (keine Datenvergleichs-Zeilen). */
#favorites .compare-row:not(.compare-headers):not(.compare-actions):hover > .compare-cell,
#favorites .compare-row:not(.compare-headers):not(.compare-actions):hover > .compare-label {
  background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  transition: background-color var(--transition);
}

/* Header-Row mit Bild + Titel + Preis */
#favorites .compare-headers > .compare-cell {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-4);
  position: relative;
}

#favorites .compare-headers .compare-img {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
}

#favorites .compare-headers .compare-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#favorites .compare-headers h3 {
  margin: 0;
  font-size: var(--text-base);
}

#favorites .compare-headers h3 a {
  color: var(--color-text);
  text-decoration: none;
}

#favorites .compare-headers h3 a:hover {
  color: var(--color-primary);
}

#favorites .compare-headers .compare-price {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary);
}

/* X-Button auf der Header-Card — identische Optik + Position wie der
   .remove-btn auf der Property-Card in der Merkliste (property-card.css:274).
   Nahe am Bild-Eck — top/right space-2 (compare-cell-padding wird optisch
   ignoriert, weil Button leicht über den padding-Bereich ragt). */
#favorites .compare-remove {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 5;
  padding: var(--space-2);
  border: none;
  border-radius: 50%;
  background: var(--scrim-medium);
  color: var(--color-text-inverse);
  cursor: pointer;
  line-height: 0;
  transition: background var(--transition-med), transform var(--transition-med);
}

#favorites .compare-remove:hover {
  background: var(--color-heart);
  transform: scale(1.15);
}

/* Leerer Slot: Plus-Icon + Hinweis */
#favorites .compare-empty-slot {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

#favorites .compare-empty-slot .add-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-text-muted);
  text-decoration: none;
  border: 0.125rem dashed var(--color-border);
  border-radius: var(--radius);
  width: 100%;
  height: 100%;
  justify-content: center;
}

#favorites .compare-empty-slot .add-slot:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

#favorites .compare-empty-cell {
  color: var(--color-text-muted);
}

/* Aktionen-Row: Buttons untereinander */
#favorites .compare-actions > .compare-cell {
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

#favorites .compare-actions .btn {
  width: 100%;
  justify-content: center;
}

/* Mobile: engere Paddings, größere Min-Spaltenbreite damit Inhalte (Bild +
   Werte) lesbar bleiben — Container scrollt horizontal wenn Summe der Spalten
   den Viewport übersteigt. */
@media (max-width: 47.999rem) {
  #favorites .compare-grid {
    grid-template-columns: minmax(7rem, max-content) repeat(var(--cols), minmax(13rem, 1fr));
  }
  #favorites .compare-row > .compare-label,
  #favorites .compare-row > .compare-cell {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }
  /* Aktionen-Row + Buttons darin kompakter — die globale .btn-Mobile-Regel
     in 05-buttons.css greift erst ab 44.999rem, im compare-Bereich (≤47.999rem)
     wären die Buttons sonst noch im Desktop-Padding. */
  #favorites .compare-actions > .compare-cell {
    padding: var(--space-3);
  }
  #favorites .compare-actions .btn {
    padding: var(--space-2) var(--space-3);
  }
}

/* Favorites-Auth-Sections (Login / Forgot / Reset / Reset-Success) tragen
   class="narrow" (siehe Favorites.php) — Layout via globale .narrow-Regel
   in 04-layout.css. Die Card-Grid-Section bleibt unbeschränkt. */

/* --- Filter summary (search results) — chip/pill layout --- */

#search-results > aside {
  margin-block-end: var(--gap-block);
}

#search-results > aside:empty {
  display: none;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-pill);
}

.filter-chip > span {
  line-height: 1;
}

.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 0;
  transition: background var(--transition), color var(--transition);
}

.filter-chip-remove:hover {
  background: var(--color-heart);
  color: var(--color-text-inverse);;
}

/* Hide submit button on results page — live update replaces it */
#search-results #property-search-form button[type="submit"] {
  display: none;
}

/* --- Sort dropdown --- */

#search-sort {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  margin-block-start: var(--space-3);
}

/* --- View toggle (grid / split / map) --- */

.view-toggle {
  display: flex;
  gap: var(--space-1);
  margin-block-start: var(--space-3);
}

.view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.view-toggle button.active {
  background: var(--color-text);
  color: var(--color-text-inverse);
  border-color: var(--color-text);
}

.view-toggle button:hover:not(.active) {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* --- Split view (grid + map side by side) ---
   Listenansicht: Bild 1/3 links, Content 2/3 rechts.
   Die Card selbst (.property-card) wird als Grid umgebaut. */

#search-results-content.split-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  /* Gemeinsame Höhe für Grid-Liste + Sticky-Map. Statisch bezogen auf --header-height
     (kein Jump bei Header-Toggle) und mit Padding-Abzug, damit der box-sizing:border-box
     Container inkl. Padding sauber innerhalb der vorgesehenen Viewport-Allowance bleibt.
     Komponenten:
       100dvh             = sichtbarer Viewport (mobile-bar-aware)
     − --header-height    = Header-Bereich freihalten
     − --space-4 * 2      = Top/Bottom-Reserve zum Viewport
     − --space-3 * 2      = Eigenes Padding (oben+unten) der Container */
  --split-h: calc(100dvh - var(--header-height) - var(--space-4) * 2 - var(--space-3) * 2);
}

#search-results-content.split-view #search-results-grid {
  height: var(--split-h);
  overflow-y: auto;
  /* overflow-y: auto erzwingt overflow-x: clip → Card-Box-Shadow im Hover würde
     links/rechts abgeschnitten. Padding rundherum gibt Schatten + Lift-Transform Luft. */
  padding: var(--space-3);
  grid-template-columns: 1fr;
  align-content: start;
}

/* Card → horizontale Listenansicht */
#search-results-content.split-view .property-card {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr;
  grid-template-rows: auto 1fr auto;
  min-height: 14rem;
  max-height: 18rem;
  margin-right: var(--space-2);
}

#search-results-content.split-view .property-card .card-img {
  grid-column: 1;
  grid-row: 1 / -1;
}

#search-results-content.split-view .property-card .card-body {
  grid-column: 2;
  grid-row: 1 / -1;
}

#search-results-content.split-view .property-card figure {
  aspect-ratio: auto;
  height: 100%;
}

/* Sticky-Map: top folgt dem dynamischen Header (--sticky-offset, springt aber nicht
   sichtbar weil die HÖHE statisch bleibt). Höhe via --split-h (siehe Parent-Block). */
#search-results-content.split-view #search-results-map {
  position: sticky;
  top: calc(var(--sticky-offset, 0px) + var(--space-4));
  height: var(--split-h);
  padding: var(--space-3);
}

/* Innerer Map-Container (eigentliche Karte oder Consent-Box) bekommt eigenen
   border-radius + overflow:hidden, da der äußere Container Padding trägt und
   sein eigener border-radius die Map-Tiles nicht clippt. */
#search-results-content.split-view #search-results-map > * {
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 64rem) {
  #search-results-content.split-view {
    grid-template-columns: 1fr;
  }

  #search-results-content.split-view #search-results-grid {
    height: auto;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  }

  /* Mobile: Listenansicht auflösen, zurück zum Standard-Card-Layout */
  #search-results-content.split-view .property-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    margin-right: 0;
  }

  #search-results-content.split-view .property-card .card-img,
  #search-results-content.split-view .property-card .card-body {
    grid-column: unset;
    grid-row: unset;
  }

  #search-results-content.split-view .property-card figure {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  #search-results-content.split-view #search-results-map {
    position: static;
  }
}

/* --- Map container --- */

#search-results-map {
  border-radius: var(--radius);
  overflow: hidden;
  height: calc(100vh - var(--space-8));
}

#search-results-map [data-map-consent] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  /* Consent-Box füllt Parent (#search-results-map) komplett — erbt damit die
     korrekte Höhe (--split-h im split-view bzw. eigene height im default-state),
     statt eigener calc, die unterm Parent-overflow:hidden geclippt würde. */
  height: 100%;
  background: var(--color-bg-alt);
  text-align: center;
  padding: var(--space-6);
}

#search-results-map .map-info {
  max-width: 280px;
}

#search-results-map .map-info img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-block-end: var(--space-2);
}

#search-results-map .map-info h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-block-end: var(--space-1);
}

#search-results-map .map-info p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-block-end: var(--space-1);
}

#search-results-map .map-info a {
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  /* Browser-Default a img border (1px blue) + focus-Outline nullen — Google
     InfoWindow rendert in eigenem Container, da kann ein vergessener
     Default-Style den blauen Strich unterm Bild erzeugen. */
  border: none;
  outline: none;
}

#search-results-map .map-info a img {
  border: none;
}

/* Google InfoWindow Close-Button (X) sitzt per Default mit ~38px Inset ins
   Card hinein — sieht "verloren" aus. Auf den Card-Rand ziehen. Beide möglichen
   Container ansprechen (Google ändert die Class-Names mit API-Updates).
   !important nötig, weil Google die Werte inline setzt. */
#search-results-map .gm-ui-hover-effect,
#search-results-map .gm-style-iw-chr > button {
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}