/* Property Detail only. Everything shared (buttons, badges, chips,
   search-form fields, card-grid, property-card) lives in base.css/
   results.css and is reused as-is. All new rules here are namespaced
   under .property-* so nothing here can affect Home or Results. */

/* Light-blue band above the gallery, full width, holding just the
   breadcrumb — a quiet "chrome" strip rather than plain white. */
.property-topbar {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.property-breadcrumb {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  color: var(--color-primary);
  display: flex;
  gap: var(--space-2);
}
.property-breadcrumb a { text-decoration: none; color: var(--color-primary); opacity: 0.75; }
.property-breadcrumb a:hover { opacity: 1; }
.property-breadcrumb [aria-current] { color: var(--color-primary-dark); font-weight: 600; }

.property-detail {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
}

/* ==========================================================================
   Layout — the booking panel is a real sidebar starting at the SAME
   level as the gallery (wireframe), not an element that only appears
   after the title block. .property-main carries gallery + header +
   all content sections; .property-booking sits beside it, sticky.
   ========================================================================== */
.property-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .property-layout { grid-template-columns: 64% 1fr; align-items: start; gap: var(--space-6); }
  .property-booking { position: sticky; top: var(--space-4); }
}

/* ==========================================================================
   Gallery — one row: large slide area + up to 4 side thumbnails,
   instead of a full-width hero with a thumbnail strip below it. Less
   vertical space, closer to the wireframe's composition.
   ========================================================================== */
.property-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .property-gallery { grid-template-columns: 1.7fr 1fr; }
}

.property-gallery__hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .property-gallery__hero { aspect-ratio: 16 / 11; }
}

/* CSS-only slider: every slide is stacked in the same box; the first
   one shows by default, any other becomes visible only while its
   fragment is the active :target — no JS, same technique as the
   full-screen lightbox below. */
.property-gallery__slide {
  display: none;
  position: absolute;
  inset: 0;
}
.property-gallery__slide:first-child { display: block; }
.property-gallery__slide:target { display: block; }
.property-gallery__hero:has(.property-gallery__slide:target) .property-gallery__slide:first-child:not(:target) {
  display: none;
}
.property-gallery__slide-image { width: 100%; height: 100%; object-fit: cover; }

.property-gallery__arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  pointer-events: none;
  z-index: 2;
}
.property-gallery__arrow {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.property-gallery__arrow:hover { background: #fff; }

.property-gallery__view-all {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  background: rgba(8, 20, 32, 0.72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
}
.property-gallery__view-all:hover { background: rgba(8, 20, 32, 0.88); }

.property-gallery__side {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-2);
}
.property-gallery__thumb {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.property-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
@media (max-width: 767px) {
  .property-gallery__side { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
}

/* Lightbox — CSS-only open/close via :target, zero JS required for
   the base experience. property.js only adds Escape-to-close. */
.property-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 15, 24, 0.94);
  padding: var(--space-5);
  align-items: center;
  justify-content: center;
}
.property-lightbox:target { display: flex; }
.property-lightbox__frame { position: relative; max-width: 100%; max-height: 100%; }
.property-lightbox__frame img { max-width: 100%; max-height: 80vh; display: block; margin-inline: auto; border-radius: var(--radius-md); }
.property-lightbox__close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
}
.property-lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-3);
  color: #fff;
}
.property-lightbox__nav a { color: #fff; text-decoration: none; display: inline-flex; }

/* ==========================================================================
   Header
   ========================================================================== */
.property-header { margin-bottom: var(--space-5); }
.property-header__location {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.property-header__location .chip { font-size: 0.78rem; }
.property-header__location svg { opacity: 0.6; }
.property-header h1 {
  color: var(--color-primary);
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
  .property-header h1 { font-size: 2.4rem; }
}

/* Fills the row right under the title horizontally — no leftover
   whitespace in the prime area above the fold. */
.property-header__capacity {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  padding: var(--space-3) 0 0;
  margin: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-ink);
  font-weight: 600;
}
.property-header__capacity li { display: flex; align-items: center; gap: var(--space-2); }
.property-header__capacity svg { color: var(--color-accent-dark); }

/* ==========================================================================
   Content sections
   ========================================================================== */
.property-section { margin-bottom: var(--space-2); padding: var(--space-5) 0; }
.property-section--alt {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.property-section h2 { color: var(--color-primary); font-size: 1.4rem; margin-bottom: var(--space-4); }

.property-description p { margin-bottom: var(--space-4); line-height: 1.8; font-size: 1.02rem; color: var(--color-ink); }

/* "Porque escolher este alojamento?" — locked layout: heading, then
   a full-width intro, then the 4 points in a 2-column grid below it.
   Reads as one editorial block, never four separate feature cards.
   Background reuses --color-surface-alt (#f4f7f9), effectively
   identical to the specified #F3F7FA — no near-duplicate token. */
.property-whychoose {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.property-whychoose h2 { color: var(--color-primary); }
.property-whychoose__intro {
  max-width: 65ch;
  color: var(--color-ink);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}
.property-whychoose__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .property-whychoose__points { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); }
}
.property-whychoose__points li {
  padding-left: 1.8rem;
  position: relative;
  font-weight: 600;
  color: var(--color-ink);
}
.property-whychoose__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.18);
  color: var(--color-accent-dark);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Comodidades — same card-family language as Informação prática
   (same outer --alt section, same white-card/radius/shadow grammar),
   but compact: icon + name only, no label/value pair. All recognized
   features show at once now — no expand/collapse (spec: real feature
   counts, ~12 on average, don't need progressive disclosure). */
.property-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 480px) {
  .property-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .property-features { grid-template-columns: repeat(3, 1fr); }
}
.property-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.property-features__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
}

.property-practical-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .property-practical-info { grid-template-columns: repeat(2, 1fr); }
}
.property-practical-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.property-practical-info__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
}
.property-practical-info__label { display: block; font-size: 0.8rem; color: var(--color-muted); }
.property-practical-info__value { display: block; font-weight: 700; font-size: 1.05rem; color: var(--color-ink); }

.property-extra-info { margin-top: var(--space-4); }
.property-extra-info summary { cursor: pointer; font-weight: 600; }
.property-extra-info ul { margin-top: var(--space-2); padding-left: 1.2rem; }
.property-tourist-tax { margin-top: var(--space-4); color: var(--color-muted); }

/* Nearby — full-width navy block, text only (no property photo: a
   bedroom/interior shot next to "Praia da Galé, Zoomarine..." reads
   as a mismatch — removed rather than guessed at with a heuristic).
   CSS multi-column, not grid: a short list (3-4 places) naturally
   stays in one column instead of grid's two half-empty columns; a
   longer list balances into two on its own once it has enough items. */
.property-nearby-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.property-nearby-section h2 { color: #fff; }
.property-nearby {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .property-nearby { columns: 2; column-gap: var(--space-6); }
}
.property-nearby li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  break-inside: avoid;
}
.property-nearby svg { color: var(--color-accent); flex-shrink: 0; }

.property-video { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.property-video iframe { width: 100%; height: 100%; border: 0; }

.property-related { margin-top: var(--space-4); }

/* ==========================================================================
   Booking box — no fake price. The "premium panel" feel comes from a
   confident blue+gold treatment of REAL content (mode + honest
   availability state), not from an invented number. A tinted header
   zone + a thin gold top accent give it more presence; height still
   comes entirely from real content/spacing, never a forced min-height.
   ========================================================================== */
.property-booking {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  align-self: start;
  overflow: hidden;
}
.property-booking .badge--inline {
  font-size: 0.85rem;
  padding: var(--space-2) var(--space-4);
}
.property-booking__top {
  background: var(--color-surface-alt);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.property-booking__state {
  margin: var(--space-4) 0 0;
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-primary);
}
.property-booking__form { padding: var(--space-6) var(--space-6) var(--space-2); display: grid; gap: var(--space-5); }
.property-booking__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.property-booking__dates input,
.property-booking__form select {
  padding-block: var(--space-3);
}
.property-booking__form .btn { width: 100%; text-align: center; padding-block: var(--space-4); font-size: 1.05rem; }

.property-booking__contact {
  margin: var(--space-2) var(--space-6) 0;
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
}
.property-booking__contact-prompt { margin: 0 0 var(--space-1); font-size: 0.9rem; color: var(--color-muted); }
.property-booking__contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  padding-block: var(--space-1);
}
.property-booking__contact-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-accent-dark);
}
.property-booking__contact-label { display: block; font-size: 0.78rem; color: var(--color-muted); }
.property-booking__contact-value { display: block; font-weight: 700; color: var(--color-primary); }
.property-booking__contact-link:hover .property-booking__contact-value { color: var(--color-primary-dark); }

/* ==========================================================================
   Rental lead form (request availability) inside the booking card.
   Aligned to the card's own horizontal rhythm (same space-6 gutter as
   the GET form and the contact block) and built from the shared
   tokens/classes — .search-form__field, .btn, .field-error — rather
   than a second visual system.
   ========================================================================== */
.property-booking__lead-form {
  margin: var(--space-2) var(--space-6) 0;
  padding: var(--space-6) 0 var(--space-5);
  border-top: 1px solid var(--color-border);
}
.property-booking__lead-form h3 {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.property-booking__lead-intro {
  margin: 0 0 var(--space-5);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.property-booking__lead-form-el { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.property-booking__lead-stay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.property-booking__lead-stay .property-booking__dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.property-booking__lead-stay legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
}
.property-booking__form input[type="date"],
.property-booking__form select,
.property-booking__lead-form-el input[type="text"],
.property-booking__lead-form-el input[type="email"],
.property-booking__lead-form-el input[type="tel"],
.property-booking__lead-form-el input[type="date"],
.property-booking__lead-form-el select,
.property-booking__lead-form-el textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.property-booking__lead-form-el textarea { resize: vertical; min-height: 6rem; }
.property-booking__form input[type="date"],
.property-booking__form select { box-sizing: border-box; }
.property-booking__form input:hover,
.property-booking__form select:hover,
.property-booking__lead-form-el input:hover,
.property-booking__lead-form-el select:hover,
.property-booking__lead-form-el textarea:hover { border-color: var(--color-muted); }
.property-booking__form input:focus,
.property-booking__form select:focus,
.property-booking__lead-form-el input:focus,
.property-booking__lead-form-el select:focus,
.property-booking__lead-form-el textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
.property-booking__lead-form-el [aria-invalid="true"] { border-color: var(--color-danger); }
.property-booking__lead-form .field-error {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-danger);
}
.property-booking__lead-error {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: #fdf3f2;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-danger);
}
.property-booking__lead-success {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-primary);
}
.property-booking__lead-privacy {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.property-booking__lead-privacy a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.property-booking__lead-privacy a:hover { color: var(--color-primary-dark); }
.property-booking__lead-submit { width: 100%; padding-block: var(--space-4); font-size: 1.05rem; }