/* ============================================================
   Property Detail — Sidebar (aside)
   Page: #property > .content > aside
   Includes: Contact Card, Sidebar Actions (Share/Download/Print/Fav/QR),
             Share-Dialog (rendered outside aside via queue_dialog).
   ============================================================ */

#property aside {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* --- Tablet: Aside-Sections 2-spaltig, Reihenfolge gedreht (letzte Section zuerst).
       Desktop regelt 04-layout.css via Grid, Mobile bleibt vertikaler Stack. --- */
@media (min-width: 45rem) and (max-width: 79.499rem) {
  #property aside {
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    gap: var(--gap-block);
  }

  #property aside > section {
    flex: 1 1 calc(50% - var(--gap-block) / 2);
    min-width: 0;
  }
}

/* Aside-Sections (.contact-card, .actions) tragen "panel"-Klasse — bg/padding/
   radius/border kommen aus globaler .panel-Regel in 02-base.css. */

#property aside h2 {
  font-size: var(--text-lg);
  font-family: var(--font-body), sans-serif;
  margin-block-end: var(--gap-inline);
}

/* --- Request-Expose CTA (prominenter Schnellkontakt-Trigger) ---
   Eigenstaendige Section oberhalb der Contact-Card. Flex-Column + align-items:
   center wie .contact-actions — so ist der `.btn` ein Flex-Item und seine
   prozentuale Breite (width: clamp(... 80%)) loest in allen Browsern zuverlaessig
   auf. (Als inline-flex in einem Block fiel Chrome sonst auf das clamp-Minimum
   zurueck → Button zu kurz; Firefox rechnete korrekt.) */

#property .request-expose {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-end: var(--gap-inline);
}

/* CTA-Buttons (Termin/Anfrage UND Expose) einheitlich: content-width (80%),
   zentriert via align-items:center der Container. Der clamp loest jetzt zuverlaessig
   auf, weil beide Buttons echte Flex-Items sind (Container = flex-column) UND die
   Scrollbar-Gutter-Reservierung auf .request-expose entfernt wurde (war die Ursache
   fuer den frueher rechts kuerzeren Expose-Button). */
#property .contact-actions .btn,
#property .request-expose .btn {
  width: clamp(12.5rem, 100%, 80%);
  justify-content: center;
}

/* Mobile: volle Breite fuer maximale Touch-Flaeche. */
@media (max-width: 44.999rem) {
  #property .contact-actions .btn,
  #property .request-expose .btn {
    width: 100%;
  }
}

/* Desktop: Sticky-CTA — bleibt beim Scrollen im Sichtfeld. Tablet hat
   row-reverse Layout (siehe oben) — Sticky funktioniert dort nicht
   sinnvoll. Mobile: Stack ist kurz genug, Sticky wuerde nur stoeren. */
@media (min-width: 79.5rem) {
  #property .request-expose {
    position: sticky;
    /* Gleicher Abstand zum oberen Rand wie die Sticky-Preis-Section
       (section.price: --sticky-offset + --space-5) — beide bündig. */
    top: calc(var(--sticky-offset, 0px) + var(--space-5));
    z-index: 1;
  }
}

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

#property .contact-card {
  text-align: center;
}

#property .contact-card > img {
  width: 8rem;
  height: 8rem;
  margin-inline: auto;
  margin-block-start: var(--space-2);
  margin-block-end: var(--space-2);
}

#property .contact-card .contact-avatar {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  margin-inline: auto;
  margin-block-end: var(--gap-block);
}

#property .contact-card > div {
  margin-block-end: var(--gap-inline);
}

#property .contact-card > div p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* WCAG 2.5.8 Target Size: ≥24px Center-to-Center-Abstand zwischen
   benachbarten Touch-Targets. Da das umgebende <p> sonst margin:0 hat,
   kleben die Tel-/Mail-Links zu eng. Margin auf den <p>-Wrappers, die
   einen Tel-/Mail-Link enthalten — visueller Abstand statt aufgeblähter
   Hit-Area (sauberer als padding auf den <a>-Elementen). */
#property .contact-card > div p:has(a[href^="tel:"]),
#property .contact-card > div p:has(a[href^="mailto:"]) {
  margin-block: var(--space-2);
}

#property .contact-card strong {
  display: block;
  font-size: var(--text-base);
  margin-block-end: var(--space-2);
}

#property .contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--gap-inline);
}

/* --- Sidebar Actions (Share/Download/Print/Fav/QR) --- */

#property aside .actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#property aside .actions button,
#property aside .actions a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}

#property aside .actions button:hover,
#property aside .actions a:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}

#property aside .actions img {
  display: block;
  margin-block-start: var(--space-3);
  margin-block-end: var(--space-3);
  margin-inline: auto;
  padding: var(--space-2) var(--space-3);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  background: white;
}

/* Fav-Button im Sidebar-Actions-Kontext — komplett anderer Look als auf Cards.
   Überschreibt die Card-Variante aus components/property-card.css. */
#property aside .actions .fav-btn {
  position: static;
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  line-height: inherit;
  transform: none;
}

#property aside .actions .fav-btn:hover {
  transform: none;
}

#property aside .actions .fav-btn.active {
  color: var(--color-primary);
}

/* --- Share Dialog — rendered outside aside (queue_dialog), thematically belongs here --- */

.share-copy {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--gap-inline);
}

.share-copy input {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.share-copy button {
  white-space: nowrap;
}

#share-dialog .share-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Layout-only — Farben + Hover kommen aus .btn.medium (siehe 05-buttons.css).
   Selektor bewusst nicht spezifischer als nötig, damit btn-Modifier greift. */
#share-dialog .share-links .btn {
  flex: 1 0 calc(50% - var(--space-2));
}

/* --- Print: hide sidebar actions but keep QR image --- */

@media print {
  #property aside .actions button,
  #property aside .actions a {
    display: none !important;
  }

  #property aside .actions {
    border: none;
    padding: 0;
    background: none;
  }

  #property aside .actions img {
    display: block;
  }
}