/* BBL GIS Immobilienportfolio - prototype-simple specific styles */

/* Requires tokens.css and components.css (identical in both prototypes). This file holds what only
   the simple prototype has: the filter search box, the detail page hero and section grid and the share entry of the
   phone menu. */

/* ===== FILTER DRAWER: search box (simple only) ===== */
.filter-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-default);
}

.filter-search .material-symbols-outlined {
  font-size: var(--icon-sm);
  color: var(--grey-400);
}

.filter-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  background: transparent;
}

/* ===== DETAIL HEADER IN THE PAGE HEADER (breadcrumb and actions), like prototype-tabs ===== */
.header-detail {
  display: none;
  flex-direction: column;
  position: relative;
  z-index: 0;
}

body.detail-active .header-detail {
  display: flex;
}

/* The shared .view-nav bar sits inside the page header here: not sticky on its own */
.header-detail .detail-header {
  position: static;
}

/* ===== DETAIL PAGE (hero with photo and map, section grid) ===== */
/* Same box as the API docs content (--content-max-width plus the gutters), under the same view nav */
.detail-page {
  width: 100%;
  max-width: calc(var(--content-max-width) + 2 * var(--page-gutter));
  margin: 0 auto;
}

/* Hero row above the tabs: the photo widget and the map widget (address table under the map) at 50%
   each. Below 850px of content width (the shared container of panel-layout.css) the two stack. The
   row is the same on every tab. */
.detail-hero {
  --hero-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  height: var(--hero-height);
  margin-bottom: var(--space-5);
}

.detail-hero-photo,
.detail-hero-map {
  min-width: 0;
  height: 100%;
}

.detail-hero .carousel {
  height: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.detail-hero .mini-map-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-hero .mini-map-container {
  flex: 1;
  height: auto;
  min-height: 0;
}

.detail-hero .address-table-wrap {
  flex: none;
  margin: 0;
  border-top: var(--border-default);
}

@media screen and (max-height: 700px) {
  .detail-hero { --hero-height: 300px; }
}

@container (max-width: 850px) {
  .detail-hero { grid-template-columns: minmax(0, 1fr); height: auto; }
  .detail-hero-photo { height: 240px; }
  .detail-hero-map { height: auto; }
  .detail-hero .mini-map-container { flex: none; height: 220px; }
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .detail-hero { grid-template-columns: minmax(0, 1fr); height: auto; margin-bottom: var(--space-4); }
  .detail-hero-photo { height: 220px; }
  .detail-hero-map { height: auto; }
  .detail-hero .mini-map-container { flex: none; height: 200px; }
}

/* Tab strip inside the content column */
.detail-tabs.detail-tabs--inline {
  padding: 0;
  background: transparent;
  margin-bottom: var(--space-5);
}

/* Section grid of a tab, the same pattern as prototype-tabs: two columns, one below 850px of content
   width (the shared container rule in panel-layout.css) */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  min-width: 0;
}

.detail-left,
.detail-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* Sections are size containers: their content adapts to the column width, not to the viewport */
.detail-section {
  background: var(--white);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  container-type: inline-size;
}

.detail-section-title {
  background: var(--grey-100);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--grey-900);
  border-bottom: var(--border-strong);
  line-height: var(--leading-snug);
}

.detail-section-content {
  padding: var(--space-5);
}

/* Data grid: label above value, two columns per section */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.data-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.data-label {
  font-size: var(--text-xs);
  color: var(--grey-600);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.data-value {
  font-size: var(--text-sm);
  color: var(--grey-900);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.data-value a {
  color: var(--interactive-blue);
  text-decoration: none;
  font-weight: var(--font-normal);
}

.data-value a:hover {
  text-decoration: underline;
}

.data-value a.disabled {
  pointer-events: none;
  color: var(--grey-400);
  text-decoration: none;
}

/* Two-column data grid collapses to one column in narrow sections (e.g. tablet with drawer open) */
@container (max-width: 400px) {
  .data-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Address table: marker column (hidden in the stacked layout of narrow columns), like prototype-tabs */
.address-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-xs);
  height: var(--control-xs);
  background: var(--primary-red);
  border-radius: var(--radius-full);
  margin-right: var(--space-2);
}

.address-marker .material-symbols-outlined {
  font-size: var(--icon-xs);
  color: var(--white);
}

@container (max-width: 640px) {
  .address-table td.address-marker-cell {
    display: none;
  }
}

/* Phones: one column of sections and of items, tighter spacing (same as prototype-tabs) */
@media screen and (max-width: 767px), screen and (max-height: 500px) and (pointer: coarse) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .detail-left,
  .detail-right {
    gap: var(--space-4);
  }

  .detail-section-content {
    padding: var(--space-4);
  }

  .data-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}