/* =============================================
   PROPERTY DETAIL PAGE
   Reusable across all six listings.
   ============================================= */

.prop-page { background: #F4EBD6; }

/* ---------- HERO ---------- */
.pp-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  padding: 9rem 0 3.5rem;
  overflow: hidden;
}
.pp-hero-media { position: absolute; inset: 0; z-index: 0; }
.pp-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}
.pp-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,8,2,0.72) 0%, rgba(16,8,2,0.30) 35%, rgba(16,8,2,0.88) 100%);
}
.pp-hero-inner { position: relative; z-index: 1; }

.pp-crumb {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: #C4A870;
  margin-bottom: 1.4rem;
}
.pp-crumb a { color: #C4A870; transition: color 0.3s ease; }
.pp-crumb a:hover { color: #FFD100; }
.pp-crumb span { opacity: 0.5; margin: 0 0.4rem; }
.pp-crumb strong { color: #F7EEDA; font-weight: 600; }

.pp-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }

.pp-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #FBF4E4;
  margin-bottom: 0.5rem;
}
.pp-sub {
  font-size: 0.95rem;
  color: #D7BC85;
  margin-bottom: 1.75rem;
}

.pp-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.4rem;
  border-radius: 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(150deg, rgba(34,19,5,0.88), rgba(20,11,3,0.92)) padding-box,
    linear-gradient(135deg, rgba(255,233,163,0.8), rgba(212,165,0,0.4) 50%, rgba(120,80,0,0.55)) border-box;
  margin-bottom: 2rem;
}
.pp-price-from { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #B9975A; }
.pp-price-val  { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; color: #FFD84A; }
.pp-price-note { font-size: 0.76rem; color: #C9AE76; }

.pp-hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.pp-hero-cta .btn-ghost-light { background: rgba(255,240,205,0.07); color: #F7EEDA; border-color: rgba(212,165,0,0.4); }
.pp-hero-cta .btn-ghost-light:hover { border-color: var(--gold2); color: #FFD100; }

/* ---------- QUICK FACTS ---------- */
.pp-facts {
  background: linear-gradient(165deg, #F7CE2A 0%, #E4B60C 45%, #C99A02 100%);
  border-bottom: 2px solid rgba(90,55,0,0.28);
  padding: 2.25rem 0;
}
.pp-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem 1rem;
}
.pp-fact { display: flex; flex-direction: column; gap: 0.25rem; text-align: center; }
.pp-fact-k {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6B4004;
}
.pp-fact-v {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 700; color: #1A0D02;
}

/* ---------- SECTIONS ---------- */
.pp-section { padding: 5rem 0; }
.pp-light {
  background:
    linear-gradient(165deg, rgba(250,241,222,0.72) 0%, rgba(247,236,212,0.66) 100%),
    url('../images/why-bg.jpg') center center / cover no-repeat;
}
.pp-dark {
  background:
    linear-gradient(165deg, rgba(30,16,5,0.90) 0%, rgba(22,11,3,0.93) 100%),
    url('../images/reviews-bg.jpg') center center / cover no-repeat;
  border-top: 1px solid rgba(212,165,0,0.22);
  border-bottom: 1px solid rgba(212,165,0,0.22);
}
.pp-dark .eyebrow { color: #FFD100; }
.pp-dark .section-title { color: #FBF4E4; }
.pp-light .section-title { color: #1B0E03; }

.pp-head { text-align: center; margin-bottom: 2.75rem; }

.pp-two { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: start; }
.pp-copy p {
  font-size: 0.98rem; line-height: 1.95; color: #3A2408; margin-bottom: 1.1rem;
}
.pp-copy strong { color: #1B0E03; font-weight: 700; }

/* ---------- CONNECTIVITY ---------- */
.pp-conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.pp-conn {
  background: rgba(255,235,190,0.06);
  border: 1px solid rgba(212,165,0,0.28);
  border-radius: 15px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform 0.5s var(--ease-lux), border-color 0.4s ease, background 0.4s ease;
}
.pp-conn:hover { transform: translateY(-5px); border-color: var(--gold2); background: rgba(255,235,190,0.10); }
.pp-conn-d {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem; font-weight: 700; color: #FFD100;
  margin-bottom: 0.4rem;
}
.pp-conn-l { font-size: 0.83rem; line-height: 1.6; color: #D7BC85; }
.pp-conn-note {
  max-width: 44rem; margin: 2rem auto 0; text-align: center;
  font-size: 0.88rem; line-height: 1.8; color: #C9AE76;
}

/* ---------- AMENITIES ---------- */
.pp-amen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; }
.pp-amen {
  background: linear-gradient(150deg, rgba(255,253,247,0.94), rgba(253,244,227,0.90));
  border: 1px solid rgba(212,165,0,0.32);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 6px 20px rgba(60,30,5,0.09);
}
.pp-amen h3 {
  font-family: var(--serif); font-size: 1.14rem; font-weight: 700;
  color: #1B0E03; margin-bottom: 0.9rem;
}
.pp-amen ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.pp-amen li { font-size: 0.88rem; line-height: 1.5; color: #3A2408; display: flex; gap: 0.7rem; }
.pp-amen li span {
  flex-shrink: 0; min-width: 3.6rem;
  font-weight: 700; font-size: 0.78rem; color: #8A5A0A;
}
.pp-amen-note {
  max-width: 44rem; margin: 2rem auto 0; text-align: center;
  font-size: 0.88rem; line-height: 1.8; color: #4A3212;
}

/* ---------- FACILITIES ---------- */
.pp-fac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.pp-fac {
  background: rgba(255,235,190,0.06);
  border: 1px solid rgba(212,165,0,0.28);
  border-radius: 16px;
  padding: 1.6rem 1.4rem;
  transition: transform 0.5s var(--ease-lux), border-color 0.4s ease, background 0.4s ease;
}
.pp-fac:hover { transform: translateY(-5px); border-color: var(--gold2); background: rgba(255,235,190,0.10); }
.pp-fac h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: #FBF4E4; }
.pp-fac-sub {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #C79A24; margin: 0.25rem 0 0.9rem;
}
.pp-fac ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.pp-fac li { font-size: 0.85rem; color: #D7BC85; padding-left: 0.95rem; position: relative; }
.pp-fac li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}

/* ---------- COSTS ---------- */
.pp-cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.pp-cost-card {
  background: linear-gradient(150deg, rgba(255,253,247,0.95), rgba(253,244,227,0.92));
  border: 1px solid rgba(212,165,0,0.34);
  border-radius: 16px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 6px 20px rgba(60,30,5,0.09);
}
.pp-cost-card h3 {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 700;
  color: #1B0E03; margin-bottom: 1.1rem;
}
.pp-cost-highlight {
  background: linear-gradient(150deg, rgba(255,246,214,0.97), rgba(252,232,182,0.95));
  border-color: rgba(212,165,0,0.6);
}

.pp-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.pp-table th {
  text-align: left; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6B4A12; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(120,70,0,0.2);
}
.pp-table td { padding: 0.7rem 0; color: #3A2408; border-bottom: 1px solid rgba(120,70,0,0.10); }
.pp-table td strong { color: #1B0E03; }

.pp-list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.pp-list li {
  font-size: 0.89rem; line-height: 1.7; color: #3A2408;
  padding-left: 1.1rem; position: relative;
}
.pp-list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.pp-list strong { color: #1B0E03; font-weight: 700; }
.pp-small { font-size: 0.76rem; line-height: 1.6; color: #6B4A12; margin-top: 0.9rem; }
.pp-small a { color: #8A5A0A; text-decoration: underline; }

.pp-disclaimer {
  max-width: 46rem; margin: 2.5rem auto 0; text-align: center;
  font-size: 0.79rem; line-height: 1.75; color: #6B4A12;
  padding-top: 1.5rem; border-top: 1px solid rgba(120,70,0,0.18);
}

/* ---------- VERDICT ---------- */
.pp-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.pp-verdict-col {
  background: rgba(255,235,190,0.06);
  border: 1px solid rgba(212,165,0,0.26);
  border-radius: 16px;
  padding: 1.8rem 1.6rem;
}
.pp-verdict-col h3 {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 700;
  margin-bottom: 1.1rem;
}
.pp-yes { color: #7CD69B; }
.pp-no  { color: #E8956B; }
.pp-verdict-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.pp-verdict-col li {
  font-size: 0.88rem; line-height: 1.7; color: #D7BC85;
  padding-left: 1.15rem; position: relative;
}
.pp-verdict-col li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%;
}
.pp-verdict-col:first-child li::before { background: #7CD69B; }
.pp-verdict-col:last-child  li::before { background: #E8956B; }
.pp-verdict-col strong { color: #FBF4E4; font-weight: 700; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .pp-two { grid-template-columns: 1fr; gap: 1.75rem; }
  .pp-verdict { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .pp-hero { min-height: 68vh; padding: 7.5rem 0 3rem; text-align: left; }
  .pp-section { padding: 3.75rem 0; }
  .pp-hero-cta { flex-direction: column; }
  .pp-hero-cta .btn-primary,
  .pp-hero-cta .btn-ghost-light { width: 100%; justify-content: center; min-height: 48px; align-items: center; }
  .pp-facts-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-head { text-align: center; }
}

/* Consecutive sections sharing a background read as one block —
   drop the doubled padding at the seam. */
.pp-light + .pp-light,
.pp-dark  + .pp-dark { padding-top: 0; }

/* Tables must scroll inside their card, never widen the page */
.pp-table-wrap { overflow-x: auto; }

/* Price column should never wrap mid-figure; on narrow screens the table
   scrolls inside its wrapper rather than squashing into unreadable columns. */
.pp-table th:last-child,
.pp-table td:last-child { white-space: nowrap; }

@media (max-width: 700px) {
  .pp-table { min-width: 420px; }
}

/* ---- Ladder table on narrow screens ----------------------------------
   Three columns can't fit, and horizontal scroll pushes the price — the
   column people came for — off screen. Below 700px each row becomes a
   two-column block: phase and product stacked at the left, price right. */
@media (max-width: 700px) {
  .pp-ladder { min-width: 0; }
  .pp-ladder thead { display: none; }
  .pp-ladder tbody { display: block; }
  .pp-ladder tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(120,70,0,0.10);
  }
  .pp-ladder td { border: none; padding: 0; }
  .pp-ladder td:nth-child(1) { grid-column: 1; font-weight: 700; color: #1B0E03; }
  .pp-ladder td:nth-child(2) { grid-column: 1; font-size: 0.79rem; color: #6B4A12; }
  .pp-ladder td:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
  }
}