/* ============================================================
   Phoenix Luxury Property — Bee Child Theme
   components.css  ·  hero, search, cards, tiles, banners
   ============================================================ */

/* ---------------- HERO ---------------- */
.phx-hero{ position:relative; padding:64px 0 54px; }
.phx-hero__grid{ display:grid; grid-template-columns:1.55fr 0.9fr; gap:54px; align-items:center; }
.phx-hero h1{ font-size:clamp(34px,4.4vw,54px); font-weight:600; line-height:1.06; letter-spacing:-0.02em; text-wrap:balance; }
.phx-hero__lead{ font-size:16px; color:var(--phx-body); font-weight:300; margin-top:16px; max-width:500px; line-height:1.55; }
.phx-hero__stats{ display:flex; align-items:stretch; margin-top:34px; }
.phx-stat{ flex:1 1 0; min-width:0; padding:0 22px; border-left:1px solid rgba(176,141,79,0.28); }
.phx-stat:first-child{ padding-left:0; border-left:none; }
.phx-stat__k{ font-size:clamp(22px,2.4vw,28px); font-weight:700; color:var(--phx-ink); line-height:1.1; letter-spacing:-0.01em; white-space:nowrap; }
.phx-stat__l{ font-size:12.5px; color:var(--phx-muted); font-weight:500; margin-top:8px; line-height:1.35; }

/* ---------------- SEARCH BAR ---------------- */
.phx-searchbar{ background:var(--phx-white); border:1px solid var(--phx-line); border-radius:var(--phx-radius);
  padding:14px; box-shadow:0 18px 44px -30px rgba(42,32,24,0.45); display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; position:relative; z-index:10; }
.phx-search__field{ display:flex; align-items:center; gap:10px; flex:1 1 260px; min-width:220px;
  background:var(--phx-cream); border:1px solid rgba(42,32,24,0.08); border-radius:var(--phx-pill); padding:6px 6px 6px 18px; }
.phx-search__field input{ flex:1; min-width:0; border:none; background:none; outline:none; font-size:14px;
  color:var(--phx-ink); font-family:inherit; }
.phx-search__go{ flex:none; width:40px; height:40px; border-radius:50%; border:none; background:var(--phx-dark-2);
  color:var(--phx-cream); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.phx-search__go:hover{ background:var(--phx-ink); }
.phx-pill{ display:inline-flex; align-items:center; gap:7px; padding:11px 16px; border-radius:var(--phx-pill);
  border:1px solid var(--phx-line-2); background:var(--phx-white); font-family:inherit; font-size:13.5px;
  font-weight:500; color:var(--phx-body-2); cursor:pointer; white-space:nowrap; }
.phx-pill:hover{ border-color:var(--phx-gold); }
.phx-pill select{ border:none; background:none; outline:none; font-family:inherit; font-size:13.5px;
  font-weight:500; color:var(--phx-body-2); cursor:pointer; }

/* ---------------- CATEGORY TILES ---------------- */
.phx-cats{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.phx-cat{ position:relative; display:block; border-radius:var(--phx-radius); overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--phx-line); }
.phx-cat img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.phx-cat:hover img{ transform:scale(1.06); }
.phx-cat__overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(21,16,10,0.78),transparent 62%); }
.phx-cat__label{ position:absolute; left:16px; bottom:14px; color:#F7F3EC; }
.phx-cat__label strong{ display:block; font-size:16px; font-weight:600; letter-spacing:0.01em; }
.phx-cat__label span{ font-size:12px; color:rgba(247,243,236,0.75); font-weight:300; }

/* ---------------- PROPERTY CARD ---------------- */
.phx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.phx-card{ position:relative; background:var(--phx-white); border:1px solid var(--phx-line); border-radius:var(--phx-radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease,box-shadow .3s ease; }
.phx-card:hover{ transform:translateY(-4px); box-shadow:var(--phx-shadow); }
.phx-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.phx-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.phx-card:hover .phx-card__media img{ transform:scale(1.05); }
.phx-card__tags{ position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; }
.phx-tag{ padding:5px 11px; border-radius:var(--phx-pill); font-size:11.5px; font-weight:600; letter-spacing:0.02em;
  background:rgba(247,243,236,0.92); color:var(--phx-body-2); backdrop-filter:blur(4px); }
.phx-tag--gold{ background:var(--phx-gold); color:var(--phx-dark); }
.phx-tag--dark{ background:rgba(21,16,10,0.86); color:var(--phx-gold-light); }
.phx-card__fav{ position:absolute; top:11px; right:11px; width:36px; height:36px; border-radius:50%;
  border:none; background:rgba(247,243,236,0.92); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--phx-body-2); backdrop-filter:blur(4px); }
.phx-card__fav:hover{ color:var(--phx-gold); }
.phx-card__body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.phx-card__price{ font-size:20px; font-weight:700; color:var(--phx-ink); letter-spacing:-0.01em; }
.phx-card__price small{ font-size:13px; font-weight:400; color:var(--phx-muted); }
.phx-card__title{ font-size:15.5px; font-weight:600; color:var(--phx-body-2); margin-top:7px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.phx-card__loc{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--phx-muted); margin-top:8px; }
.phx-card__specs{ display:flex; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--phx-line);
  font-size:13px; color:var(--phx-body); }
.phx-card__spec{ display:inline-flex; align-items:center; gap:6px; }
.phx-card__spec svg{ color:var(--phx-gold-dark); }

/* ---------------- AREA CARD ---------------- */
.phx-areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.phx-area{ position:relative; border-radius:var(--phx-radius); overflow:hidden; aspect-ratio:16/10; display:block; }
.phx-area img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.phx-area:hover img{ transform:scale(1.07); }
.phx-area__overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(21,16,10,0.82),transparent 55%); }
.phx-area__body{ position:absolute; left:22px; right:22px; bottom:20px; color:#F7F3EC; }
.phx-area__name{ font-size:20px; font-weight:600; }
.phx-area__count{ font-size:13px; color:rgba(247,243,236,0.78); font-weight:300; margin-top:4px; }

/* ---------------- PROMO / CTA BANNER ---------------- */
.phx-cta{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:26px; padding:40px 46px; border-radius:var(--phx-radius); overflow:hidden; }
.phx-cta--dark{ background:var(--phx-dark); color:rgba(247,243,236,0.72); }
.phx-cta--gold{ background:linear-gradient(120deg,var(--phx-gold),var(--phx-gold-dark)); color:var(--phx-dark); }
.phx-cta--light{ background:var(--phx-surface); border:1px solid var(--phx-line); color:var(--phx-body); }
.phx-cta__title{ font-size:clamp(22px,2.6vw,30px); font-weight:600; line-height:1.15; }
.phx-cta--dark .phx-cta__title{ color:#F7F3EC; }
.phx-cta__sub{ font-size:15px; font-weight:300; margin-top:8px; max-width:520px; line-height:1.55; }

/* section header row (title + view-all) */
.phx-sec-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:32px; }
.phx-view-all{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--phx-gold-dark); }
.phx-view-all:hover{ gap:11px; }

/* ---------------- ESTATIK OVERRIDE ----------------
   Restyles Estatik's default listing output to match the
   Phoenix property card above. Class names below target the
   Estatik Free markup; adjust after first install if the
   plugin version uses different classes (see INSTALL guide). */
.phx-listings .es-listings,
.phx-listings .estatik-listings{ display:grid !important; grid-template-columns:repeat(3,1fr) !important;
  gap:22px !important; }
.phx-listings .es-item,
.phx-listings .estatik-item,
.phx-listings .es-property{ background:var(--phx-white); border:1px solid var(--phx-line);
  border-radius:var(--phx-radius); overflow:hidden; transition:transform .3s ease,box-shadow .3s ease; }
.phx-listings .es-item:hover{ transform:translateY(-4px); box-shadow:var(--phx-shadow); }
.phx-listings .es-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.phx-listings .es-item .es-price,
.phx-listings .es-property-price{ font-size:20px; font-weight:700; color:var(--phx-ink); }
.phx-listings .es-item .es-title a{ color:var(--phx-body-2); font-weight:600; }