/* ==========================================================================
   OSSA — property detail page
   ========================================================================== */

.pd { padding: 120px var(--gutter) 40px; }

/* Title block */
.pd-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.pd-badge {
  align-self: flex-start;
  background: var(--c-orange-60);
  color: var(--c-white);
  padding: 4px 14px;
}
.pd-title-row { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.pd-title-col { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.pd-meta { display: flex; align-items: center; gap: 8px; color: var(--c-text-70); text-transform: uppercase; }
.pd-stats { display: flex; align-items: stretch; gap: 30px; }
.pd-stat { display: flex; flex-direction: column; gap: 6px; padding-left: 30px; border-left: 1px solid var(--c-border); }
.pd-stat:first-child { border-left: 0; padding-left: 0; }
.pd-stat .ps-label { font-family: var(--f-ui); font-size: 12px; color: var(--c-text-70); }

/* Content: gallery + sidebar */
.pd-content { display: flex; gap: 30px; align-items: flex-start; }
.pd-gallery { flex: 1 1 66%; min-width: 0; }
.pd-main {
  position: relative;
  aspect-ratio: 1.5;
  overflow: hidden;
  background: var(--c-grey-bg);
  cursor: zoom-in;
}
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-main .pd-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: var(--c-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease;
}
.pd-main .pd-nav:hover { background: var(--c-white); }
.pd-main .pd-nav svg { width: 18px; height: 18px; }
.pd-main .pd-nav--prev { left: 16px; }
.pd-main .pd-nav--next { right: 16px; }
.pd-count {
  position: absolute; right: 16px; bottom: 14px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--c-white);
  padding: 4px 10px;
  font-family: var(--f-ui); font-size: 11px;
  border-radius: 20px;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.pd-thumbs button { aspect-ratio: 1.5; overflow: hidden; opacity: 0.75; transition: opacity 0.2s ease; }
.pd-thumbs button:hover, .pd-thumbs button.active { opacity: 1; }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Agent sidebar */
.pd-sidebar { flex: 1 1 34%; max-width: 420px; position: sticky; top: 110px; }
.agent-card {
  background: var(--c-grey-bg);
  border: 1px solid var(--c-border);
  display: flex; flex-direction: column;
}
.agent-card .ac-photo { aspect-ratio: 0.9; overflow: hidden; background: var(--c-beige-15); }
.agent-card .ac-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.agent-card .ac-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.agent-card .ac-name { color: var(--c-dark); }
.agent-card .ac-role { font-family: var(--f-ui); font-size: 11px; line-height: 1.5; color: var(--c-text-70); }
.agent-card .ac-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0 6px;
  border-top: 1px solid var(--c-border);
  font-family: var(--f-ui); font-size: 11px; color: var(--c-text-70);
}
.agent-card .ac-row a { color: var(--c-text); }
.agent-card .ac-row a:hover { color: var(--c-orange); }
.agent-card .ac-cta {
  margin: 14px 24px 24px;
  border: 1px solid var(--c-text-45);
  padding: 11px;
  text-align: center;
  color: var(--c-dark);
  transition: background 0.25s ease, color 0.25s ease;
}
.agent-card .ac-cta:hover { background: var(--c-dark); color: var(--c-white); }

/* Description */
.pd-desc { max-width: 900px; margin-top: 44px; }
.pd-desc h4 { margin-bottom: 18px; }
.pd-desc p { margin-bottom: 10px; white-space: pre-line; }

/* Map */
.pd-map { margin-top: 44px; }
.pd-map h4 { margin-bottom: 18px; }
.pd-map .map-frame {
  aspect-ratio: 2.6;
  background: var(--c-beige-15);
  border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
}
.pd-map iframe { width: 100%; height: 100%; border: 0; }

/* Expert form */
.pd-expert { margin-top: 54px; display: flex; gap: 40px; align-items: flex-start; }
.pd-expert .pe-form { flex: 1; }
.pd-expert .pe-form h4 { margin-bottom: 20px; }
.pd-expert form { display: flex; flex-direction: column; }

/* Recommended */
.pd-recommended { margin-top: 60px; }
.pd-recommended h4 { margin-bottom: 30px; }
.pd-recommended .more { display: flex; justify-content: center; margin-top: 36px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox .lb-close { position: absolute; top: 22px; right: 28px; color: #fff; font-size: 30px; line-height: 1; }
.lightbox .lb-prev, .lightbox .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; padding: 20px;
}
.lightbox .lb-prev { left: 8px; }
.lightbox .lb-next { right: 8px; }
.lightbox svg { width: 26px; height: 26px; }

@media (max-width: 1199px) {
  .pd { padding-top: 100px; }
  .pd-content { flex-direction: column; }
  .pd-sidebar { max-width: none; width: 100%; position: static; }
  .pd-expert { flex-direction: column; }
  .pd-thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 809px) {
  .pd-title-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pd-stats { gap: 20px; }
  .pd-thumbs { grid-template-columns: repeat(3, 1fr); }
}