/* ==========================================================================
   Listing Detail — Editorial luxury refresh
   Five-image mosaic gallery + refined typography + agent-first sidebar.
   ========================================================================== */

.listing-detail {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .listing-detail { padding: 0 var(--space-6); }
}

@media (min-width: 1280px) {
  .listing-detail { padding: 0 var(--space-10); }
}

/* ==========================================================================
   BACK LINK — minimal editorial affordance above the gallery.
   Inline-flex chevron + label; hover nudges the chevron left for an
   obvious-but-restrained "go back" cue. Uses ink-soft so it recedes until
   needed; promoted to navy on hover/focus.
   ========================================================================== */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  transition: color var(--transition-fast), gap var(--transition-base);
}

.detail-back:hover,
.detail-back:focus-visible {
  color: var(--navy);
  gap: var(--space-3);
  outline: none;
}

.detail-back svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.detail-back:hover svg,
.detail-back:focus-visible svg {
  transform: translateX(-2px);
}

/* Keyboard focus ring — accessible without visually clashing on click */
.detail-back:focus-visible {
  box-shadow: 0 0 0 3px var(--cobalt-border); /* cobalt-soft (8%) was nearly invisible */
  border-radius: var(--radius-none);
}

/* ==========================================================================
   GALLERY — Five-image mosaic (hero + 2x2 tile grid)
   Handles any photo count gracefully (single, 2, 3, 4, or 5+).
   All cells use object-fit: cover with a fixed aspect so varying source
   aspect ratios are cropped consistently rather than distorted.
   ========================================================================== */

/* Airbnb-style count-aware mosaic.
   Every photo count (0-5+) gets a balanced layout with a max-height safety
   cap so no gallery dominates the viewport regardless of source count. */
.gallery-mosaic {
  touch-action: manipulation;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-12);
  cursor: pointer;
  align-items: stretch;
}

/* ---------- Mobile default (< 768px) ----------
   On mobile the hero is the only image shown; tiles are hidden.
   The tap target opens the fullscreen lightbox for the full gallery. */
@media (max-width: 767px) {
  .gallery-mosaic {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    max-height: none;
  }
  .gallery-mosaic .mosaic-hero { aspect-ratio: 4 / 3; }
  .gallery-mosaic .mosaic-tiles { display: none; }
}

/* ---------- Desktop (≥ 768px) — count variants ---------- */
@media (min-width: 768px) {

  /* ==== 0 photos: placeholder ==== */
  .gallery-mosaic--0 {
    grid-template-columns: 1fr;
    aspect-ratio: 3 / 2;
    max-width: 960px;
    max-height: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .gallery-mosaic--0 .mosaic-tiles { display: none; }

  /* ==== 1 photo: single hero, centered and capped ==== */
  .gallery-mosaic--1 {
    grid-template-columns: 1fr;
    aspect-ratio: 3 / 2;
    max-width: 960px;
    max-height: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .gallery-mosaic--1 .mosaic-tiles { display: none; }

  /* ==== 2 photos: two equal squares side by side ==== */
  .gallery-mosaic--2 {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 2 / 1;
    max-height: 560px;
  }
  .gallery-mosaic--2 .mosaic-tiles {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100%;
  }

  /* ==== 3 photos: hero + 2 stacked tiles ==== */
  .gallery-mosaic--3 {
    grid-template-columns: 1.5fr 1fr;
    aspect-ratio: 5 / 3;
    max-height: 560px;
  }
  .gallery-mosaic--3 .mosaic-tiles {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
  }

  /* ==== 4 photos: hero + 3 stacked tiles ==== */
  .gallery-mosaic--4 {
    grid-template-columns: 1.5fr 1fr;
    aspect-ratio: 5 / 3;
    max-height: 560px;
  }
  .gallery-mosaic--4 .mosaic-tiles {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
  }

  /* ==== 5+ photos: hero + 2×2 tile grid (default Airbnb layout) ==== */
  .gallery-mosaic--5 {
    grid-template-columns: 1.5fr 1fr;
    aspect-ratio: 5 / 2;
    max-height: 560px;
  }
  .gallery-mosaic--5 .mosaic-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
    height: 100%;
  }
}

/* Tablet: slightly shorter 5+ layout so tiles don't get too small */
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery-mosaic--5 {
    aspect-ratio: 11 / 5;
    max-height: 420px;
  }
}

/* HERO (leftmost big photo) */
.mosaic-hero {
  position: relative;
  aspect-ratio: 4 / 3;      /* mobile default */
  background: var(--gray-100);
  overflow: hidden;
  border-radius: var(--radius-none);
  min-height: 0;
}

@media (min-width: 768px) {
  .mosaic-hero {
    aspect-ratio: auto;     /* let grid cell drive height */
    height: 100%;
  }
}

.mosaic-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--ease);
}

.gallery-mosaic:hover .mosaic-hero img {
  transform: scale(1.025);
}

/* Photo-count button */
.gallery-btn {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  background: rgba(8, 24, 40, 0.85);
  color: var(--white);
  border: none;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--transition-base), transform var(--transition-base);
  z-index: 2;
}

.gallery-btn:hover {
  background: rgba(8, 24, 40, 0.95);
  transform: translateY(-1px);
}

.gallery-btn svg { flex-shrink: 0; }

/* TILES container — layout is set per-count variant above.
   This block only provides defaults (gap, min-height) shared by all variants. */
.mosaic-tiles {
  display: grid;
  gap: var(--space-2);
  min-height: 0;
}

.mosaic-tile {
  position: relative;
  aspect-ratio: 1 / 1;      /* mobile default */
  background: var(--gray-100);
  overflow: hidden;
  border-radius: var(--radius-none);
  min-height: 0;
}

@media (min-width: 768px) {
  .mosaic-tile {
    aspect-ratio: auto;     /* let the parent grid sizing win */
    height: 100%;
  }
}

.mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--ease);
}

.gallery-mosaic:hover .mosaic-tile img {
  transform: scale(1.04);
}

.mosaic-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ==========================================================================
   HEADER — eyebrow + title left, price right
   ========================================================================== */
.detail-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6) 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .detail-header {
    grid-template-columns: 1fr auto;
    gap: var(--space-10);
    align-items: end;
  }
}

.detail-header-right { min-width: 0; }

.detail-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: var(--space-3);
}

.detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
  max-width: 22ch;
}

.detail-price-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .detail-price-row { justify-content: flex-end; }
}

.detail-price {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
  white-space: nowrap;
}

/* Status pill. Two placements, one visible at a time: --head sits above the
   location eyebrow on phones (mobile-first default), --price sits beside the
   price from 768px up, where the header goes two-column. The breakpoint must
   stay in lockstep with .detail-header's. */
.detail-status {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--space-3);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-none);
  white-space: nowrap;
}

/* See .listing-badge--rental in components/cards.css for why this is navy. */
.detail-status--rental {
  background: var(--navy);
  color: var(--white);
}

/* Was a linear-gradient from cobalt to the same cobalt, which rendered flat
   anyway. Stated as the flat fill it always was: the brand disallows gradients. */
.detail-status--opcionada {
  background: var(--cobalt);
  color: var(--white);
}

.detail-status--sold,
.detail-status--rented {
  background: rgba(31, 41, 55, 0.9);
  color: rgba(255, 255, 255, 0.95);
}

.detail-status--head { margin-bottom: var(--space-4); }
.detail-status--price { display: none; }

@media (min-width: 768px) {
  .detail-status--head { display: none; }
  .detail-status--price { display: inline-flex; }
}

/* ==========================================================================
   SPECS BAR — horizontal row, icon-free for cleaner look
   ========================================================================== */
.detail-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: var(--space-6) 0 var(--space-8);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-12);
}

@media (min-width: 640px) {
  .detail-specs {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.detail-spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  position: relative;
  /* min-width: 0 lets long values (e.g., "2,500 m² / 26,910 sq ft") truncate
     with ellipsis rather than spilling into the adjacent grid cell. */
  min-width: 0;
}

@media (min-width: 640px) {
  .detail-spec:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: var(--border);
  }
}

.detail-spec-value {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -0.01em;
  /* Gracefully shorten "2,500 m² / 26,910 sq ft" on narrow phones. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-spec-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* ==========================================================================
   TWO-COLUMN CONTENT
   ========================================================================== */
.detail-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-20);
}

@media (min-width: 1024px) {
  .detail-content {
    grid-template-columns: 1fr 380px;
    gap: var(--space-16);
  }
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

/* ==========================================================================
   SECTIONS (Description / Amenities)
   ========================================================================== */
.detail-section .eyebrow {
  display: block;
  color: var(--cobalt);
  margin-bottom: var(--space-3);
}

.detail-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 var(--space-6);
}

.detail-description {
  font-size: var(--font-size-lg);
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0;
  white-space: pre-wrap;
}

/* ==========================================================================
   AMENITIES — clean two-column list
   ========================================================================== */
.amenities-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px) {
  .amenities-list { grid-template-columns: repeat(2, 1fr); }
}

.amenities-list li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
  color: var(--gray-700);
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.amenities-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--cobalt);
}

/* ==========================================================================
   SIDEBAR (sticky agent / inquiry card)
   ========================================================================== */
.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (min-width: 1024px) {
  .detail-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    align-self: start;
  }
}

/* ==========================================================================
   AGENT CARD — editorial refresh
   ========================================================================== */
.detail-sidebar .agent-card {
  background: var(--paper);
  border: none;
  border-radius: var(--radius-none);
  padding: var(--space-6);
  box-shadow: 0 1px 2px rgba(12, 35, 64, 0.04),
              0 10px 30px -12px rgba(12, 35, 64, 0.08);
}

.detail-sidebar .agent-card .eyebrow {
  display: block;
  color: var(--cobalt);
  margin-bottom: var(--space-5);
}

/* No separator lines — spacing alone defines sections for a cleaner, more
   editorial card. Overrides the `.agent-contact` border-top from the shared
   agent-card.css component (see rule below). */
.agent-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

/* Larger, soft-rounded square.
   `object-position: center 22%` keeps the face visible for standard
   headshots where the subject's eyes sit in the upper third of the frame. */
.agent-photo {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: var(--radius-none);
  overflow: hidden;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.agent-photo svg {
  width: 40px;
  height: 40px;
  color: var(--gray-400);
}

.agent-photo > .image-fallback {
  display: none;
}

.agent-photo.is-image-failed > img {
  display: none;
}

.agent-photo.is-image-failed > .image-fallback {
  display: block;
}

.agent-info { flex: 1; min-width: 0; }

.agent-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.01em;
}

.agent-role {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin: 0 0 2px;
}

.agent-license {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0;
}

/* Override shared .agent-contact (agent-card.css) which adds a border-top +
   padding-top. The listing-detail card uses spacing only. */
.detail-sidebar .agent-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  padding-top: 0;
  border-top: none;
}

.agent-contact-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.agent-contact-row:hover { color: var(--navy); }

.agent-contact-row svg {
  color: var(--gray-500);
  flex-shrink: 0;
}

.agent-contact-link {
  color: inherit;
  transition: color var(--transition-fast);
}

.agent-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 14px var(--space-5);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.agent-cta-btn svg { transition: transform var(--transition-base); }

.agent-cta-btn:hover {
  background: var(--cobalt);
  border-color: var(--cobalt);
}

.agent-cta-btn:hover svg { transform: translateX(3px); }

/* ==========================================================================
   INQUIRY CARD (fallback when no agent assigned)
   ========================================================================== */
.inquiry-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-none);
  padding: var(--space-6);
}

.inquiry-card .eyebrow {
  display: block;
  color: var(--cobalt);
  margin-bottom: var(--space-3);
}

.inquiry-card-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

.inquiry-card-text {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.55;
  margin: 0 0 var(--space-5);
}

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  padding: 10px var(--space-3);
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-base);
}

.inquiry-form input:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--cobalt-border); /* visible keyboard focus ring */
}

.inquiry-form textarea {
  resize: vertical;
  min-height: 100px;
}

.inquiry-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 14px var(--space-5);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  border: none;
  border-radius: var(--radius-none);
  cursor: pointer;
  margin-top: var(--space-2);
  transition: background var(--transition-base);
}

.inquiry-submit:hover { background: var(--cobalt); }

.form-success {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #ecfdf5;
  color: #065f46;
  border-radius: var(--radius-none);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ==========================================================================
   SIMILAR LISTINGS SECTION
   ========================================================================== */
.similar-section {
  padding: var(--space-20) 0;
  background: var(--gray-50);
  border-top: 1px solid var(--border);
}

.similar-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}

.similar-header .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--gray-500);
}

.similar-title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   SHARED EYEBROW — so it works inline even when page-CSS defines it elsewhere
   ========================================================================== */


@media (prefers-reduced-motion: reduce) {
  .gallery-mosaic img,
  .agent-cta-btn,
  .inquiry-submit { transition: none !important; }
}