/* ==========================================================================
   Property detail page
   ========================================================================== */
.detail-hero { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-8); }
.detail-gallery { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-3); height: var(--media-height-hero); }
.detail-main-image { grid-row: 1 / 3; grid-column: 1; }
.detail-main-image .image-tags { top: var(--space-4); left: var(--space-4); }
.detail-main-image, .detail-thumb { border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; }
.detail-thumb { display: flex; align-items: center; justify-content: center; }
/* zoom on hover via a pseudo element so the tags stay put */
.detail-main-image::before, .detail-thumb::before { content: ''; position: absolute; inset: 0; background: inherit; border-radius: inherit; z-index: 1; transition: transform var(--transition-slow); }
@media (hover: hover) { .detail-main-image:hover::before, .detail-thumb:hover::before { transform: scale(1.05); } }
.detail-thumb-overlay {
  position: absolute; inset: 0; z-index: var(--z-raised);
  display: flex; align-items: center; justify-content: center; padding: var(--space-3);
  background: var(--accent-overlay-bg); color: var(--neutral-50); font-size: var(--font-size-sm); text-align: center;
  border-radius: inherit; cursor: pointer; transition: background-color var(--transition-normal);
}
.detail-thumb-overlay:hover { background: var(--accent-overlay-bg-hover); }
.detail-thumb-overlay-short { display: none; }

/* Title | price | milestone row */
.detail-info { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr; gap: var(--space-8); padding: var(--space-6) 0; }
.detail-info-section { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.detail-info-section h1 { font-size: var(--font-size-3xl); color: var(--neutral-900); }
.detail-info-section .data-item-row { margin-top: var(--space-3); }

/* Overview tab */
.detail-data-section, .detail-object-section, .detail-value-location { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.detail-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); }
.detail-links .data-item-label { width: 100%; }
.detail-map-container { padding: var(--space-5); align-self: start; }
.detail-map-svg svg { width: 100%; height: auto; }
.detail-map-svg svg #layer6 path { fill: var(--accent-100) !important; stroke: var(--primary-900) !important; stroke-width: 1.5px !important; }
.detail-map-svg svg #layer6 path.highlighted { fill: var(--accent-600) !important; }
.detail-map-svg svg #layer4, .detail-map-svg svg #layer3 { display: none !important; }
.detail-map-svg svg #layer2 path { fill: transparent !important; stroke: var(--primary-900) !important; stroke-width: 2px !important; }
.detail-section-separator { border-top: 1px solid var(--neutral-200); margin: var(--space-10) 0; }
.detail-object-right { display: flex; flex-direction: column; gap: var(--space-5); }
.detail-geo-map { width: 100%; min-height: 400px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--neutral-200); }
.detail-geo-map iframe { width: 100%; height: 100%; border: none; }
.detail-geo-info { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-size-base); }
.detail-geo-coords { color: var(--neutral-700); }
.detail-geo-address { color: var(--neutral-500); }

/* Market value bar */
.detail-value-main { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--neutral-900); text-align: center; margin: var(--space-5) 0 var(--space-6); }
.detail-value-bar-container { position: relative; margin: 0 auto; max-width: 400px; }
.detail-value-labels, .detail-value-scale { display: flex; justify-content: space-between; color: var(--neutral-500); }
.detail-value-labels { font-size: var(--font-size-base); margin-bottom: var(--space-2); }
.detail-value-scale { font-size: var(--font-size-xs); margin-top: var(--space-2); }
.detail-value-bar { position: relative; height: var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(to right, var(--accent-100) 0%, var(--accent-500) 50%, var(--accent-700) 100%); }
.detail-value-marker { position: absolute; top: calc(-1 * var(--space-1)); width: var(--space-1); height: var(--space-6); background: var(--neutral-900); transform: translateX(-50%); }

/* Location ratings */
.detail-location-grid { display: flex; flex-direction: column; gap: var(--space-4); max-width: 500px; }
.detail-location-item { display: grid; grid-template-columns: 180px 40px 1fr; align-items: center; gap: var(--space-3); }
.detail-location-label { font-size: var(--font-size-base); color: var(--neutral-700); }
.detail-location-value { font-size: var(--font-size-base); color: var(--neutral-500); text-align: center; }
.detail-location-stars { display: flex; gap: var(--space-1); }
.detail-location-star { color: var(--color-star-empty); font-size: var(--font-size-xl); }
.detail-location-star.filled { color: var(--color-star); }

/* Milestones tab */
.milestone-list { display: flex; flex-direction: column; }
.milestone-item { display: flex; align-items: flex-start; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--neutral-200); }
.milestone-item:last-child { border-bottom: none; }
.milestone-content { flex: 1; min-width: 0; }
.milestone-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--neutral-900); margin-bottom: var(--space-2); }
.milestone-status { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--font-size-base); color: var(--neutral-600); }
.milestone-status-icon { font-size: var(--font-size-2xl); color: var(--neutral-300); }
.milestone-status-icon.completed { color: var(--priority-normal); }
.milestone-responsibility { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--neutral-300); border-radius: var(--radius-full); font-size: var(--font-size-xs); color: var(--neutral-600); background: var(--neutral-50); }
.milestone-action { flex-shrink: 0; }

/* Documents tab */
.doc-title a { color: var(--neutral-900); text-decoration: none; transition: color var(--transition-normal); }
.doc-title a:hover { color: var(--accent-600); text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 1200px) {
  .detail-data-section, .detail-object-section, .detail-value-location { grid-template-columns: 1fr; }
  .detail-map-container, .detail-object-right { max-width: 500px; }
}
@media (max-width: 1100px) {
  .detail-info { grid-template-columns: 1fr; gap: var(--space-4); }
  .detail-info-section:not(:last-child) { border-bottom: 1px solid var(--neutral-200); padding-bottom: var(--space-4); }
}
@media (max-width: 900px) {
  /* Hero image on top, the four thumbnails in one row below */
  .detail-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; height: auto; gap: var(--space-2); }
  .detail-main-image { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; min-height: 200px; }
  .detail-thumb { aspect-ratio: 4 / 3; }
  .detail-thumb-overlay { font-size: var(--font-size-xs); padding: var(--space-1); }
}
@media (max-width: 768px) {
  .detail-object-section .data-grid { grid-template-columns: 1fr; }
  .data-item-spacer { display: none; } /* only needed to align the 2-column layout */
  .detail-location-item { grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); }
  .detail-location-value { text-align: right; }
  .detail-location-item .progress, .detail-location-stars { grid-column: 1 / -1; }
  .detail-geo-map { min-height: 300px; }
}
@media (max-width: 640px) {
  .detail-main-image { min-height: 180px; }
  .detail-thumb-overlay-label { display: none; }
  .detail-thumb-overlay-short { display: inline; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
  .data-grid { grid-template-columns: 1fr; }
  .detail-info-section h1 { font-size: var(--font-size-2xl); }
  .detail-hero { margin-bottom: var(--space-4); }
  .detail-info { padding: var(--space-4) 0; }
  .detail-section-separator { margin: var(--space-6) 0; }
  .detail-data-section, .detail-object-section, .detail-value-location { gap: var(--space-6); }
  .detail-value-main { font-size: var(--font-size-2xl); }
  .milestone-item { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) 0; }
  .milestone-action { width: 100%; }
  .milestone-action .btn { width: 100%; }
}