/* city-props.css — Dynamic city property cards
   Companion to js/city-properties.js
   Imports: css/style.css (CSS variables must already be loaded)
   ---------------------------------------------------------------- */

/* ── .prop-img needs position:relative for the absolute badge ── */
.prop-img {
  position: relative;
}

/* ================================================================
   SKELETON SHIMMER
   ================================================================ */

@keyframes cp-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.cp-skel {
  background: var(--white);
  border: 1px solid #EFE9DA;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.cp-skel-img {
  height: 180px;
  background: linear-gradient(
    90deg,
    #e8e3d8 25%,
    #f5f0e8 50%,
    #e8e3d8 75%
  );
  background-size: 1200px 100%;
  animation: cp-shimmer 1.4s ease-in-out infinite;
}

.cp-skel-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-skel-line {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #e8e3d8 25%,
    #f5f0e8 50%,
    #e8e3d8 75%
  );
  background-size: 1200px 100%;
  animation: cp-shimmer 1.4s ease-in-out infinite;
}

.cp-sl-title  { height: 18px; width: 68%; }
.cp-sl-sub    { height: 13px; width: 48%; }
.cp-sl-price  { height: 16px; width: 38%; margin-top: 4px; }

/* Stagger shimmer phases so skeletons don't pulse in sync */
.cp-skel:nth-child(2) .cp-skel-img,
.cp-skel:nth-child(2) .cp-skel-line { animation-delay: 0.18s; }
.cp-skel:nth-child(3) .cp-skel-img,
.cp-skel:nth-child(3) .cp-skel-line { animation-delay: 0.36s; }
.cp-skel:nth-child(4) .cp-skel-img,
.cp-skel:nth-child(4) .cp-skel-line { animation-delay: 0.54s; }

/* ================================================================
   TYPE BADGE
   ================================================================ */

.cp-type-badge {
  position: absolute;
  top: 10px;
  right: 10px;          /* RTL: sits in the visual top-right corner */
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cream);
  background: rgba(7, 28, 20, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  line-height: 1.4;
  pointer-events: none;
}

/* ================================================================
   NO-IMAGE PLACEHOLDER
   ================================================================ */

.cp-no-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  background: linear-gradient(
    135deg,
    var(--cream-dark) 0%,
    #e3efe9 100%
  );
  color: var(--green-800);
  user-select: none;
}

/* ================================================================
   STAR RATING
   ================================================================ */

.cp-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}

.cp-rating svg {
  flex-shrink: 0;
}

/* ================================================================
   PROP CARD — hover interactions
   ================================================================ */

.prop-card {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease;
  cursor: pointer;
}
.prop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(14, 77, 60, 0.18);
}
.prop-card:active { transform: translateY(-2px); }

/* ================================================================
   COMING-SOON BLOCK
   ================================================================ */

.cp-coming-soon {
  grid-column: 1 / -1;          /* span full grid width */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 32px;
  border: 2px dashed rgba(201, 162, 39, 0.45);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    160deg,
    rgba(201, 162, 39, 0.04) 0%,
    rgba(14, 77, 60, 0.04) 100%
  );
  gap: 16px;
}

.cp-cs-icon {
  margin-bottom: 8px;
  opacity: 0.9;
}

.cp-cs-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--green-900);
  max-width: 38ch;
  line-height: 1.35;
}

.cp-cs-body {
  font-size: 0.97rem;
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.8;
  margin-bottom: 8px;
}

/* ── Owner CTA inside coming-soon ── */
.cp-cs-owner-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid #EFE9DA;
  border-radius: var(--radius-md);
  padding: 24px 32px;
  box-shadow: var(--shadow-soft);
  margin-top: 8px;
}

.cp-cs-owner-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-900);
}

.cp-cs-owner-note {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ================================================================
   STANDALONE OWNER CTA (below real cards)
   Hide when section is empty — coming-soon already has its own CTA
   ================================================================ */

.cp-owner-cta {
  text-align: center;
  margin-top: 36px;
}

.cp-empty .cp-owner-cta {
  display: none;
}

/* ================================================================
   SECTION STATE CLASSES
   ================================================================ */

/* While loading: hide any element marked cp-hide-loading */
.cp-loading .cp-hide-loading {
  visibility: hidden;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ================================================================
   CITY PAGE SHARED LAYOUT — responsive rules for inline styles
   that repeat in every city page's <style> block.
   Breakpoints: mobile ≤767 | tablet 768–1023 | desktop ≥1024
   ================================================================ */

/* ── Hero section ── */
.city-hero { padding: 130px 0 80px; }

@media (max-width: 767px) {
  .city-hero { padding: 90px 0 52px; }
  .city-hero-inner { padding: 0 4px; }
  .city-hero-stats { gap: 20px; margin-bottom: 28px; }
  .city-stat-num { font-size: 1.55rem; }
  .city-stat-label { font-size: 0.82rem; }
  .city-hero-sub { font-size: 1rem; margin-bottom: 24px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .city-hero { padding: 110px 0 68px; }
  .city-hero-stats { gap: 24px; }
}

/* ── Props / Areas sections ── */
.props-section { padding: 72px 0; }
.areas-section { padding: 72px 0; }
.content-section { padding: 72px 0; }

@media (max-width: 767px) {
  .props-section,
  .areas-section,
  .content-section { padding: 48px 0; }

  /*
   * Some pages use inline style="padding:72px 0" directly on <section>.
   * !important is required here to override inline specificity.
   */
  section[style*="padding:72px"],
  section[style*="padding: 72px"] { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* On narrow screens force single-column if minmax can't shrink enough */
  .props-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
  }

  .areas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 24px;
  }

  .prop-img { height: 160px; }

  .content-inner h2 { font-size: 1.35rem; margin-top: 28px; }
  .content-inner p,
  .content-inner ul { font-size: 0.95rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .props-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .areas-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ── Coming-soon block (existing, extended to new breakpoints) ── */
@media (max-width: 767px) {
  .cp-coming-soon {
    padding: 48px 20px;
  }

  .cp-cs-title {
    font-size: 1.15rem;
  }

  .cp-cs-owner-box {
    width: 100%;
    padding: 20px 18px;
  }

  .cp-cs-body {
    font-size: 0.92rem;
  }

  .cp-type-badge {
    font-size: 0.68rem;
    padding: 3px 7px;
  }
}

/* Keep old 600px rule for back-compat (already covered above, harmless) */
@media (max-width: 600px) {
  .cp-coming-soon {
    padding: 48px 20px;
  }

  .cp-cs-title {
    font-size: 1.15rem;
  }

  .cp-cs-owner-box {
    width: 100%;
    padding: 20px 18px;
  }

  .cp-cs-body {
    font-size: 0.92rem;
  }

  .cp-type-badge {
    font-size: 0.68rem;
    padding: 3px 7px;
  }
}