@charset "utf-8";

/* =================================================================
   3@1 PROPERTIES - PROPERTY DETAIL PAGE STYLES
   Loaded alongside css/styles.css (which must come first - this file
   uses its :root tokens, reset, and shared components like .btn,
   .icon, .eyebrow, .property-card, .team-card and .mandate-badge).
   Only rules specific to individual listing pages live here, so the
   homepage's stylesheet never has to change when this one does.
   Sections:
   1. Buttons - outline & WhatsApp variants
   2. Breadcrumb
   3. Listing hero & gallery
   4. Lightbox
   5. Listing body (description, features, details, agent card)
   6. Location & town callout
   7. Similar properties
   8. Sold state
   ================================================================= */

/* ---------- 1. Buttons - outline & WhatsApp variants ---------- */
.btn--outline {
  background: transparent;
  color: var(--color-navy-900);
  border: 2px solid var(--color-navy-900);
  padding: calc(0.85em - 2px) calc(1.75em - 2px);
}
.btn--outline:hover { background: var(--color-navy-900); color: var(--color-white); }
.btn--outline .icon { width: 1em; height: 1em; }

/* WhatsApp's own brand green - the one deliberate non-navy/gold button on
   the page, so it reads instantly as "WhatsApp" the way the phone icon
   reads as "call". Hover darkened ~15%, matching .btn--accent:hover. */
.btn--whatsapp {
  background: var(--color-navy-900);
  color: #16ff6d;
  box-shadow: var(--shadow-sm);
}
.btn--whatsapp:hover { background: #00df53; box-shadow: var(--shadow-md); color: var(--color-navy-900) }
.btn--whatsapp .icon { width: 1em; height: 1em; }

/* ---------- 2. Breadcrumb ---------- */
.breadcrumb { padding-block: calc(var(--header-height) + var(--space-md)) var(--space-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--color-muted); }
.breadcrumb a { font-weight: var(--fw-medium); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--color-gold-600); }
.breadcrumb li:not(:last-child)::after { content: '/'; color: var(--color-border); margin-inline: var(--space-2xs); }
.breadcrumb li[aria-current] { color: var(--color-navy-900); font-weight: var(--fw-medium); }

/* ---------- 3. Listing hero & gallery ---------- */
.listing-hero { padding-block-end: var(--space-2xl); }

.listing-gallery { margin-bottom: var(--space-lg); padding-top: 80px; }
.listing-gallery__stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-2); aspect-ratio: 16 / 10; }
.listing-gallery__main { display: block; width: 100%; height: 100%; }
.listing-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.listing-gallery__main:hover img { transform: scale(1.02); }

/* Video sits in the same stage slot as .listing-gallery__main - only
   one of the two is ever visible at a time (toggled by script.js's
   showMedia()), so it just fills the box the same way: the stage's own
   aspect-ratio (above) is what gives the box its size, not either
   child. */
.listing-gallery__main-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-navy-900); }
.listing-gallery__video-expand {
  position: absolute;
  top: var(--space-sm); right: var(--space-sm);
  z-index: 2;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(0, 18, 55, 0.72);
  transition: background-color var(--t-fast);
}
.listing-gallery__video-expand:hover { background: rgba(0, 18, 55, 0.9); }
.listing-gallery__video-expand .icon { width: 1.25rem; height: 1.25rem; }

.listing-gallery__view-all {
  position: absolute;
  right: var(--space-sm); bottom: var(--space-sm);
  padding: 0.5em 1em;
  border-radius: var(--radius-full);
  background: rgba(0, 18, 55, 0.72);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}
.listing-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xs); margin-top: var(--space-2xs); }
.listing-gallery__thumb { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; opacity: 0.65; transition: opacity var(--t-fast), box-shadow var(--t-fast); }
.listing-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.listing-gallery__thumb:hover { opacity: 0.9; }
.listing-gallery__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--color-gold-500); }

/* Video thumbnails - same tile as a photo thumb (sizing/opacity/active
   state all inherited from .listing-gallery__thumb above), plus a play
   badge so it reads as "video" even before/if the browser manages to
   paint a first-frame preview into the <video>. */
.listing-gallery__thumb--video video { width: 100%; height: 100%; object-fit: cover; background: var(--color-navy-900); }
.listing-gallery__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: rgba(0, 18, 55, 0.35);
  pointer-events: none;
}
.listing-gallery__thumb-play .icon { width: 1.75rem; height: 1.75rem; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }

/* "+N Photos" tile - replaces the last visible thumbnail whenever
   property.php's $visibleThumbCap leaves photos out of the strip. Sits at
   full opacity (unlike the dimmed default) since it's an invitation to act,
   not just a passive preview. */
.listing-gallery__thumb:has(.listing-gallery__thumb-more) { opacity: 1; }
.listing-gallery__thumb-more {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  text-align: center;
  line-height: 1.2;
  color: var(--color-white);
  background: rgba(0, 18, 55, 0.72);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition: background-color var(--t-fast);
}
.listing-gallery__thumb-more-count { font-size: var(--fs-md); font-weight: var(--fw-extrabold); }
.listing-gallery__thumb:hover .listing-gallery__thumb-more { background: rgba(0, 18, 55, 0.85); }

.listing-summary { display: flex; flex-direction: column; gap: var(--space-md); }
.listing-summary__address { display: flex; align-items: center; gap: var(--space-3xs); color: var(--color-muted); margin-top: var(--space-2xs); font-size: var(--fs-base); }
.listing-summary__address .icon { color: var(--color-gold-600); }
.listing-summary__price { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--color-navy-900); }
.listing-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }

.listing-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.listing-facts li { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--color-navy-900); }
.listing-facts .icon { width: 1.5rem; height: 1.5rem; color: var(--color-gold-600); flex-shrink: 0; }
.listing-facts strong { font-size: var(--fs-md); font-weight: var(--fw-extrabold); margin-right: var(--space-3xs); }

@media (min-width: 640px) {
  /* Fluid columns instead of a fixed count: a 4-photo listing gets a few
     evenly-sized tiles instead of stretching (or a lopsided leftover gap),
     while the capped-at-8 tiles from a 50-photo listing settle into a
     single tidy row on most screens. */
  .listing-gallery__thumbs { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 9rem)); justify-content: center; }
}
@media (min-width: 1024px) {
  .listing-summary { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .listing-summary__action { text-align: right; flex-shrink: 0; }
  .listing-summary__action .listing-cta { justify-content: flex-end; }
  .listing-facts { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 4. Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 10010; display: grid; place-items: center; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 18, 55, 0.92); }
.lightbox__stage { position: relative; z-index: 1; width: min(92vw, 1100px); max-height: 88vh; display: grid; place-items: center; }
.lightbox__img { max-width: 100%; max-height: 80vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lightbox__video { max-width: 100%; max-height: 80vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); background: var(--color-navy-900); }
.lightbox__close {
  position: absolute; top: calc(-1 * var(--space-xl)); right: 0;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  transition: background-color var(--t-fast);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__prev, .lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  color: var(--color-navy-900);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lightbox__prev:hover, .lightbox__next:hover { background: var(--color-gold-500); }
.lightbox__prev { left: calc(-1 * var(--space-xl)); }
.lightbox__next { right: calc(-1 * var(--space-xl)); }
.lightbox__counter { position: absolute; bottom: calc(-1 * var(--space-xl)); left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

@media (max-width: 767px) {
  .lightbox__stage { 
    width: 100vw; 
    padding-inline: var(--space-lg);
  }
  
  .lightbox__img,
  .lightbox__video {
    max-height: 75vh; /* Reduce slightly to account for the new top padding */
  }

  .lightbox__close { 
    position: fixed; /* Anchors to viewport instead of the image stage */
    top: var(--space-sm); 
    right: var(--space-sm); 
    z-index: 10011; /* Ensures it stays above everything */
  }
  
  .lightbox__prev { left: var(--space-2xs); }
  .lightbox__next { right: var(--space-2xs); }
  .lightbox__counter { bottom: var(--space-sm); }
}

/* ---------- 5. Listing body ---------- */
.listing-body { padding-block: var(--space-2xl); background: var(--color-surface); }
.listing-body__main > * + * { margin-top: var(--space-2xl); }
.listing-description p + p { margin-top: var(--space-sm); }
.listing-description h2, .listing-features h2, .listing-details h2 { margin-bottom: var(--space-2xs); }

.listing-features ul { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
.listing-features li { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--fs-sm); color: var(--color-body); }
.listing-features .icon { color: var(--color-success); flex-shrink: 0; margin-top: 0.15em; width: 1.1em; height: 1.1em; }

.listing-details dl { margin-top: var(--space-md); }
.listing-details dl > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.listing-details dt { color: var(--color-muted); }
.listing-details dd { font-weight: var(--fw-semibold); color: var(--color-navy-900); text-align: right; }

.agent-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.agent-card .team-card { text-align: center; }
.agent-card .team-card__photo { margin-inline: auto; }
.agent-card .team-card__contact { justify-content: center; }

/* CTA row below each agent tile - sized to content and wrapped, the same
   treatment the hero's .listing-cta already uses, rather than full-width
   stacked buttons. Handles one button (secondary agent) or two (primary
   agent) equally well. */
.agent-card__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.agent-card__cta {
  width: auto;
  flex: 0 1 auto;
  padding: 0.7em 1.4em;
  font-size: var(--fs-sm);
  text-align: center;
}


.listing-body__sidebar {
	padding-top: 80px;
}

@media (min-width: 640px) { .listing-features ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .listing-body__layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-2xl); align-items: start; }
  .listing-body__sidebar { position: sticky; top: calc(var(--header-height) + var(--space-lg)); padding: 0; }
}


/* ---------- 6. Location & town callout ---------- */
.listing-location { padding-block: var(--space-2xl); }
.listing-location__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-lg); }
.listing-location__map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.listing-location__map iframe { width: 100%; height: 100%; border: 0; }

.town-cta {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-height: 16rem;
  background: linear-gradient(135deg, var(--area-c), var(--color-navy-900) 130%);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.town-cta:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.town-cta__watermark { position: absolute; top: var(--space-md); right: var(--space-md); width: 5rem; height: 5rem; opacity: 0.25; }
.town-cta__body { position: relative; }
.town-cta__body p:not(.eyebrow) { color: rgba(255, 255, 255, 0.85); margin-top: var(--space-2xs); max-width: 32ch; }
.town-cta__body h3 { color: var(--color-white); font-size: var(--fs-lg); }
.town-cta__link { display: inline-flex; align-items: center; gap: var(--space-3xs); margin-top: var(--space-sm); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.town-cta__link .icon { width: 1em; height: 1em; transition: transform var(--t-fast); }
.town-cta:hover .town-cta__link .icon { transform: translateX(3px); }

@media (min-width: 768px) { .listing-location__grid { grid-template-columns: 1.3fr 1fr; } }

/* ---------- 7. Similar properties ---------- */
.listing-similar { padding-block: var(--space-2xl); }
.similar-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-lg); }
@media (min-width: 640px) { .similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .similar-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 8. Sold state ----------
   .listing-gallery now gets class="is-sold" straight from PHP
   (property.php sets it from $property['status']) so the grayscale
   filter below actually applies - previously documented here but never
   wired up in the markup. The ribbon itself is .property-card__ribbon,
   shared with the homepage grid - see styles.css section 14d. */
.listing-gallery.is-sold .listing-gallery__main img,
.listing-gallery.is-sold .listing-gallery__main-video,
.listing-gallery.is-sold .listing-gallery__thumb img,
.listing-gallery.is-sold .listing-gallery__thumb--video video { filter: grayscale(0.85) brightness(0.85); }

/* ---------- 9. Enquiry modal ----------
   Dialog is navy-900 on purpose: .contact-form's labels/inputs are styled
   for a dark background (see styles.css), so nesting it here needs no
   overrides at all. Shown/hidden via [hidden] + .is-open (see script.js). */
.modal { position: fixed; inset: 0; z-index: 9999999999; display: grid; place-items: center; padding: var(--space-md); opacity: 0; transition: opacity var(--t-base); }
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 18, 55, 0.72); }
.modal__dialog {
  position: relative; z-index: 1;
  width: min(100%, 32rem);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-navy-900);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  transform: scale(0.96) translateY(8px);
  transition: transform var(--t-base);
}
.modal.is-open .modal__dialog { transform: none; }
.modal__dialog h2 { color: var(--color-white); padding-right: var(--space-xl); }
.modal__property { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-sm); margin-top: var(--space-3xs); margin-bottom: var(--space-md); }
.modal__close {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  transition: background-color var(--t-fast);
}
.modal__close:hover { background: rgba(255, 255, 255, 0.18); }

@media (max-width: 479px) {
  .modal__dialog { padding: var(--space-lg); }
}


/* ---------- 10. Listing Share ---------- */
.listing-share {
  text-align: center;
  padding-top: var(--space-2xl);
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.listing-share__list {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.listing-share__btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-navy-900);
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.listing-share__btn:hover,
.listing-share__btn:focus-visible {
  background: var(--color-gold-500);
  color: var(--color-navy-900);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.listing-share__btn .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.listing-share__feedback {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-success);
  min-height: 1.5em; /* Reserves vertical space so the layout doesn't jump */
  opacity: 0;
  transition: opacity var(--t-fast);
}

.listing-share__feedback.is-visible {
  opacity: 1;
}

.listing-location__address {
	padding: 10px;
}

/* ---------- 11. Secondary agent tile ----------
   Rendered inside .agent-card, below the primary agent's card + CTA
   buttons, only when a property has a secondary_agent_id. Reuses
   .team-card as-is (not the --lead variant used above it) so it reads
   as secondary without needing its own one-off photo/contact styles -
   .agent-card .team-card__photo / .team-card__contact further up in
   this file already center it to match. */
.agent-card__secondary {
  margin-top: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.agent-card__secondary-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}