/* =========================================================================
   Villas in Bangalore — Component Stylesheet
   Reusable blocks: hero + price badge, quick-facts strip, listing cards,
   spec table, amenities, gallery, sidebar/enquiry form, related rail, FAQ.
   ========================================================================= */

/* ---------- Hero + price badge ---------- */
.hero {
  position: relative;
  margin-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: #ddd;
}
.hero img { width: 100%; object-fit: cover; max-height: 440px; }
.hero__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--color-badge-bg);
  color: #fff;
  padding: 8px 18px;
  font-size: 17px;
  letter-spacing: .5px;
  white-space: nowrap;
}

/* ---------- Hero slider (1+ images; dots/arrows hidden when just 1) ---------- */
.hero-slider { position: relative; margin-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; background: #ddd; }
.hero-slider__slide { display: none; }
.hero-slider__slide.is-active { display: block; }
.hero-slider__slide img { width: 100%; object-fit: cover; max-height: 440px; }
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}
.hero-slider__arrow:hover { background: rgba(0,0,0,.7); }
.hero-slider__arrow--prev { left: 12px; }
.hero-slider__arrow--next { right: 12px; }
.hero-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.hero-slider__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: none;
  padding: 0;
  cursor: pointer;
}
.hero-slider__dot.is-active { background: #fff; }

/* Quick-facts strip directly under the hero image */
.quick-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--color-surface);
  border: 1px solid rgba(0,0,0,.08);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
}
.quick-fact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
}
.quick-fact__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef2fd;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.quick-fact__label { display: block; color: var(--color-text-muted); font-size: 11px; }
.quick-fact__value { display: block; font-weight: 600; }

/* Full "Project Highlights" section variant: same look, its own section
   card instead of stuck to the hero, wraps to more rows as needed. */
.quick-facts--full {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  grid-template-columns: repeat(2, 1fr);
}
.quick-facts--full .quick-fact:nth-child(-n+2) { border-top: none; }

/* ---------- Price section ---------- */
.price-callout {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}

/* ---------- About Builder ---------- */
.builder-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }

/* ---------- Intro / value props ---------- */
.intro { font-size: 16px; }
.value-props {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-weight: 500;
  color: var(--color-primary);
}
.value-props li { padding: 4px 0; }
.value-props li::before { content: "\2713  "; color: var(--color-accent); font-weight: 700; }

/* ---------- Listing card (project-item) ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.project-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) {
  .project-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
.project-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
}
.project-card__media { position: relative; display: block; }
.project-card__media img { aspect-ratio: 700/389; object-fit: cover; }
.project-card__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--color-badge-bg);
  color: #fff;
  padding: 5px 12px;
  font-size: 14px;
  white-space: nowrap;
}
.project-card__body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.project-card__title { margin: 0 0 12px; font-size: 1.1rem; }
.project-card__title a { color: var(--color-heading); }
.project-card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-text);
}
.project-card__facts span { display: flex; align-items: center; gap: 6px; }
.project-card__excerpt { color: var(--color-text-muted); font-size: 13px; margin-bottom: 12px; display: none; }

/* ---------- Compact card used in "related projects" rails ---------- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.related-card {
  text-align: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  background: #fff;
}
.related-card img { display: block; width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; }
.related-card h3 { font-size: 13px; margin: 8px 8px 4px; color: var(--color-heading); }
.related-card .tag { font-size: 11px; color: var(--color-text-muted); font-weight: 400; display: block; margin-bottom: 8px; }

/* ---------- Configuration / spec table ---------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 8px;
}
.spec-table th, .spec-table td {
  border: 1px solid var(--color-border-soft);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}
.spec-table th { background: #f7f9fd; width: 45%; color: var(--color-text-muted); font-weight: 500; }
.spec-table td { font-weight: 600; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; }
.data-table th, .data-table td { border: 1px solid var(--color-border-soft); padding: 10px; text-align: left; }
.data-table th { background: var(--color-primary); color: #fff; font-weight: 500; }
.data-table tr:nth-child(even) td { background: #f7f9fd; }

/* ---------- Location ---------- */
.location-media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.location-media figure { margin: 0; text-align: center; }
.location-media img {
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 0 auto 6px;
}
.location-media figcaption { font-weight: 600; font-size: 14px; }
.location-highlights { margin: 0; padding-left: 1.1em; }
.location-highlights li { margin-bottom: 6px; }

/* ---------- Amenities ---------- */
.amenities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}
.amenities-list li {
  padding-left: 28px;
  position: relative;
  font-size: 14px;
}
.amenities-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eef2fd;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Gallery / lightbox ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.gallery img { aspect-ratio: 4/3; object-fit: cover; transition: transform .2s ease; }
.gallery a:hover img { transform: scale(1.04); }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  padding: 24px;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-sm); }
.lightbox-overlay .lightbox-close {
  position: absolute;
  top: 18px; right: 24px;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  background: none;
  border: none;
}
.lightbox-overlay .lightbox-prev,
.lightbox-overlay .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  font-size: 28px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
}
.lightbox-overlay .lightbox-prev { left: 18px; }
.lightbox-overlay .lightbox-next { right: 18px; }

/* ---------- Sidebar ---------- */
/* Matches the reference site's sidebar: normal document flow, not sticky —
   on very long articles a sticky sidebar taller than the viewport would
   permanently hide its own lower widgets (Enquiry submit, Categories). */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.widget {
  background: var(--color-surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-md);
  padding: 18px;
}
.widget h2 { font-size: 16px; margin-bottom: 10px; text-align: center; }
.widget-contact { text-align: center; }
.widget-contact__label { display: block; font-size: 13px; color: var(--color-text-muted); }
.widget-contact__phone { font-size: 22px; font-weight: 700; color: var(--color-primary); }
.widget-categories ul, .widget-links ul, .widget-benefits ul { list-style: none; margin: 0; padding: 0; }
.widget-categories li, .widget-links li, .widget-benefits li { border-bottom: 1px solid #eee; padding: 8px 0; font-size: 13px; }
.widget-categories li:last-child, .widget-links li:last-child, .widget-benefits li:last-child { border-bottom: none; }

/* ---------- Enquiry form ---------- */
.enquiry-form { display: flex; flex-direction: column; gap: 12px; }
/* Honeypot: real visitors never see or fill this in; kept in normal flow
   (not display:none) since some spam bots skip fields hidden that way. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.enquiry-form button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
}
.enquiry-form input:focus, .enquiry-form textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* Phone field: a country-dial-code dropdown (options filled in by
   forms.js from COUNTRY_CODES, not duplicated in every page's HTML)
   sits beside the number input. */
.phone-input-group { display: flex; gap: 8px; }
.phone-input-group select { flex: 0 0 auto; width: auto; max-width: 108px; }
.phone-input-group input { flex: 1 1 auto; min-width: 0; }
.enquiry-form textarea { min-height: 90px; resize: vertical; }
.enquiry-form .form-status { font-size: 13px; text-align: center; }
.enquiry-form .form-status[data-state="success"] { color: #1b8a3e; }
.enquiry-form .form-status[data-state="error"] { color: var(--color-danger); }
.enquiry-form label { font-size: 13px; font-weight: 500; }
.enquiry-form .field-error { color: var(--color-danger); font-size: 12px; display: none; }
.enquiry-form .has-error .field-error { display: block; }
.enquiry-form .has-error input,
.enquiry-form .has-error select,
.enquiry-form .has-error textarea { border-color: var(--color-danger); }

/* Contact section: enquiry form paired with the "Why Buy Through Us?"
   perks panel — each column takes half the width, so the form ends up
   half its old (full-width) size. */
.contact-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.why-buy-us {
  background: #f6f8fd;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 24px;
}
.why-buy-us h3 { margin: 0 0 6px; font-size: 18px; }
.why-buy-us__lead { margin: 0 0 14px; font-weight: 600; color: var(--color-primary); }
.perks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.perks-list li { padding-left: 28px; position: relative; font-size: 14px; }
.perks-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eef2fd;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ---------- FAQ / accordion ---------- */
.faq { border-top: 1px solid var(--color-border-soft); }
.faq-item { border-bottom: 1px solid var(--color-border-soft); }
.faq-item__q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 16px 30px 16px 0;
  font-weight: 600;
  font-size: 15px;
  position: relative;
}
.faq-item__q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--color-primary);
}
.faq-item.is-open .faq-item__q::after { content: "\2212"; }
.faq-item__a {
  display: none;
  padding: 0 0 16px;
  color: var(--color-text-muted);
}
.faq-item.is-open .faq-item__a { display: block; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  flex-wrap: wrap;
}
.pagination a, .pagination span, .pagination button {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  cursor: pointer;
}
.pagination a:hover, .pagination button:hover { background: var(--color-primary); color: #fff; }
.pagination .is-current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---------- Category / location listing chrome ---------- */
.category-list, .location-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  gap: 20px;
}
.category-list li, .location-list li { break-inside: avoid; padding: 6px 0; font-size: 14px; }

/* ---------- Content blob (freeform migrated article content) ---------- */
.content-blob h2 { margin-top: 1.6em; text-align: left; border-bottom: none; padding-bottom: 0; }
.content-blob figure { margin: 1em 0; text-align: center; }
.content-blob figure img { display: inline-block; border-radius: var(--radius-sm); }
.content-blob figcaption { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; }
/* Some migrated articles have a bare <p><img></p> instead of a <figure> —
   center those the same way so they don't sit flush left. */
.content-blob p > img:only-child { display: block; margin: 1em auto; border-radius: var(--radius-sm); }
/* Project images that open the enquiry modal on click (see modal.js). */
.content-blob__img-p { text-align: center; }
.content-blob__img-trigger { display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; }
.content-blob__img-trigger img { display: block; border-radius: var(--radius-sm); }
/* Explicit "Enquiry" CTA under each project image, alongside the
   click-the-image trigger above. */
.content-blob__enquiry-btn { display: block; width: fit-content; margin: 10px auto 0; }
.content-blob ul { margin-bottom: 1em; }

/* ---------- Hub cards (homepage region tiles) ---------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.hub-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.hub-card img { aspect-ratio: 700/389; object-fit: cover; }
.hub-card__body { padding: 16px; text-align: center; }
.hub-card__body h2 { margin-bottom: 12px; }