/* =================================================================
   13. THEME-BUILT FRONT PAGE
   Styles for the child theme's front-page.php (hero + search,
   highlights strip, section headings, and the villas grid).
   ================================================================= */

/* Centered content rail for the listing sections */
.lux-container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* ---- Hero with overlapping search panel ---- */
.lux-hero {
  position: relative;
  min-height: 76vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.lux-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(22,40,42,.18), rgba(22,40,42,0) 45%);
}
.lux-hero__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 1040px;
  margin: 0 1.25rem -3.5rem;     /* overlap the strip below */
}
/* the panel itself (.mphb_sc_search-form) is styled in section 8 */

/* ---- Highlights strip ---- */
.lux-strip {
  --strip-line: rgba(176,141,87,.30);
  max-width: 1200px; margin: 5.5rem auto 0; padding: .5rem 1rem;
}
.lux-strip__inner {
  border-top: 1px solid var(--strip-line);
  border-bottom: 1px solid var(--strip-line);
  padding: 0.2rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1.25rem 1rem;
}
.lux-strip__item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px;
}
.lux-strip__item svg { width: 42px; height: 42px; color: var(--lux-accent); transition: color .3s ease, transform .3s ease; }
.lux-strip__item:hover svg { color: var(--lux-primary); transform: translateY(-3px); }
.lux-strip__label {
  font-size: 12px; font-weight: 600; line-height: 1.55;
  letter-spacing: .11em; text-transform: uppercase; color: var(--lux-ink); max-width: 12ch;
}
@media (max-width: 640px) {
  .lux-strip__inner {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem .5rem;
  }
}

/* ---- Section headings ---- */
.lux-section { margin: 4.5rem 0; }
.lux-section:first-child { margin-top: 5.5rem; }  /* extra space below the search */
.lux-section__title {
  text-align: center; text-transform: uppercase; letter-spacing: .22em;
  font-weight: 500; color: var(--lux-primary); font-size: 1.9rem; margin: 0 0 .2em;
}
.lux-section__title::after {
  content: ""; display: block; width: 56px; height: 2px; background: var(--lux-accent); margin: .7em auto 0;
}
.lux-section__intro {
  max-width: 94ch; margin: 1.3rem auto 2rem; text-align: center; color: var(--lux-muted);
}

/* ---- Villas / City Flats: 3-up grid of the full-size cards ---- */
.lux-villas .mphb_sc_rooms-wrapper {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1.5rem;
}
@media (max-width: 62em){ .lux-villas .mphb_sc_rooms-wrapper{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 40em){ .lux-villas .mphb_sc_rooms-wrapper{ grid-template-columns: 1fr; } }
.lux-villas .mphb_sc_rooms-wrapper .mphb-room-type { margin: 0 !important; }
.lux-villas .mphb_sc_rooms-wrapper .mphb-room-type:not(:first-of-type) {
  border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important;
}

/* Highlights strip: force 2 columns on mobile.
   Relocated here from the former oceanica-luxury.css import shim (Theme D). */
@media (max-width: 767px) {
  .lux-strip__inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}