/* ============================================================
   Miami Waterfront Estates — home.css
   The homepage's own sections. Tokens, type, buttons, header,
   footer and the shared motion states live in chrome.css.

     1  Hero               5  Neighborhoods
     2  Finder             6  Price
     3  Section heads      7  Inquiry
     4  Listings           8  Phone bar
                           9  Motion (hero drift, hovers)

   Images: every frame gets its shape from aspect-ratio on the
   frame, tied to its own width, never a viewport height. The
   hero is the one full-bleed exception, and on phones it too
   becomes a 4:3 frame.

   iHomefinder markup (.idx-feed) gets type and color only:
   never display, float, width, height, grid or aspect-ratio.
   ============================================================ */

/* ---------- 1. HERO ---------- */
.hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:clamp(620px, 90vh, 920px);
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:-1;
  margin:0;
  overflow:hidden;
  background:var(--ink);
}
.hero-media .hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
}
.hero-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--ink) 88%, transparent) 0%, color-mix(in srgb, var(--ink) 60%, transparent) 45%, transparent 75%),
    linear-gradient(to right, color-mix(in srgb, var(--ink) 55%, transparent) 0%, transparent 60%);
  pointer-events:none;
}
.hero-cap{
  position:absolute;
  top:22px;
  right:var(--gutter);
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--white) 88%, transparent);
  text-shadow:0 1px 8px color-mix(in srgb, var(--ink) 60%, transparent);
}
.hero-cap::before{ content:''; width:22px; height:1px; background:currentColor; opacity:.7; }

.hero-body{ width:100%; padding-block:140px clamp(40px, 6vw, 72px); }
.hero-in{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(340px, 420px);
  gap:40px clamp(32px, 5vw, 80px);
  align-items:end;
}
.hero-eyebrow{ color:var(--hair); }
.hero .h-hero{ color:var(--white); max-width:15ch; text-wrap:balance; }
.hero-lede{
  margin:22px 0 0;
  max-width:52ch;
  color:color-mix(in srgb, var(--paper) 88%, transparent);
}

@media (max-width: 1100px){
  .hero-in{ grid-template-columns:1fr; }
  .hero .h-hero{ max-width:16ch; }
  .finder{ max-width:560px; }
}

/* Phones: the photo becomes a 4:3 frame at the top, the words and the
   finder sit below it on paper. */
@media (max-width: 760px){
  .hero{
    display:block;
    min-height:0;
    background:var(--paper);
    color:var(--ink);
  }
  .hero-media{
    position:relative;
    inset:auto;
    z-index:0;
    aspect-ratio:4 / 3;
  }
  .hero-media::after{
    background:linear-gradient(to top, color-mix(in srgb, var(--ink) 45%, transparent), transparent 40%);
  }
  .hero-cap{ top:auto; bottom:12px; left:var(--gutter); right:auto; font-size:9.5px; }
  .hero-body{ padding-block:28px 40px; }
  .hero-eyebrow{ color:var(--dusk); }
  .hero .h-hero{ color:var(--ink); font-size:clamp(2.25rem, 9.6vw, 2.9rem); max-width:none; }
  .hero-lede{ color:color-mix(in srgb, var(--ink) 82%, var(--paper)); margin-top:16px; font-size:16.5px; }
  .hero-in{ gap:28px; }
}

/* ---------- 2. FINDER ---------- */
.finder{
  background:var(--white);
  color:var(--ink);
  padding:clamp(22px, 2.4vw, 30px);
  box-shadow:0 30px 60px -30px color-mix(in srgb, var(--ink) 60%, transparent);
}
.finder-label{
  display:block;
  margin:0 0 10px;
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dusk);
}
.finder-row{ display:flex; gap:10px; }
.select-wrap{ position:relative; flex:1 1 auto; min-width:0; }
.select-wrap select{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:50px;
  padding:0 44px 0 16px;
  border:1px solid var(--hair);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.2;
  cursor:pointer;
}
.select-wrap select:hover{ border-color:var(--ink); }
.select-caret{
  position:absolute;
  right:16px;
  top:50%;
  width:12px;
  height:8px;
  margin-top:-4px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.finder-go{ min-height:50px; flex:none; }
.finder-prices{ margin-top:20px; padding-top:18px; border-top:1px solid var(--hair-soft); }
.finder .chips{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.finder .chip{ display:block; text-align:center; }

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-block;
  padding:9px 14px;
  border:1px solid var(--hair);
  background:transparent;
  color:var(--ink);
  font-size:14.5px;
  line-height:1.2;
  white-space:nowrap;
  transition:transform .25s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); transform:translate3d(0,-1px,0); }
.chip[aria-current="true"]{ background:var(--ink); border-color:var(--ink); color:var(--white); }

@media (max-width: 420px){
  .finder-row{ flex-direction:column; }
  .finder-go{ width:100%; }
}
@media (max-width: 760px){
  .finder{ box-shadow:none; border:1px solid var(--hair-soft); background:var(--white); }
}

/* ---------- 3. SECTION HEADS ---------- */
.sec-head{ max-width:760px; margin-bottom:clamp(32px, 5vw, 56px); }
.sec-head .lede{ margin-top:20px; }
.sec-head--split{
  max-width:none;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px 48px;
}
.sec-head--split .lede{ margin:0; max-width:44ch; }
.sec-aside{
  margin:0;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 14px;
}
.sec-aside .label{ color:var(--dusk); }
.sec-aside-v{ font-family:var(--f-dsp); font-size:1.4rem; line-height:1.1; }
.sec-aside-link{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--surf);
}

/* ---------- 4. LISTINGS ---------- */
.idx-feed{
  font-family:var(--f-body);
  color:var(--ink);
}
.idx-feed a{ color:var(--surf); }
.idx-after{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 32px;
  margin-top:clamp(32px, 4vw, 48px);
  padding-top:28px;
  border-top:1px solid var(--hair-soft);
}
.idx-after-t{ margin:0; font-size:clamp(1.5rem, 2.4vw, 2rem); }
.actions:not(:where(.idx-feed) *){ display:flex; flex-wrap:wrap; gap:10px; }
.actions .btn .ico{ width:16px; height:16px; }

/* The "listings by request" panel: a designed section, never an error box. */
.req{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  background:var(--white);
  border:1px solid var(--hair-soft);
}
.req-media{
  position:relative;
  margin:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--dune);
}
.req-media img{ width:100%; height:100%; object-fit:cover; }
.req-media figcaption,
.hood-cap{
  position:absolute;
  left:16px;
  bottom:14px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--white);
  text-shadow:0 1px 8px color-mix(in srgb, var(--ink) 70%, transparent);
}
.req-body{
  align-self:center;
  padding:clamp(28px, 4.5vw, 64px);
}
.req-title{ margin:0 0 18px; font-size:clamp(1.85rem, 3vw, 2.7rem); line-height:1.08; text-wrap:balance; }
.req-text{ max-width:46ch; color:color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.req .actions{ margin-top:26px; }
.req-nearby{ margin-top:30px; padding-top:22px; border-top:1px solid var(--hair-soft); }
.req-nearby .label{ margin:0 0 12px; color:var(--dusk); }

/* Side by side, the photo fills its column even when the text runs taller
   than 4:3; it never drops below 4:3 of its own width. */
@media (min-width: 1101px){
  .req-media{ width:100%; height:100%; }
}
@media (max-width: 1100px){
  .req{ grid-template-columns:1fr; }
}

.admin-note{
  margin:26px 0 0;
  padding:12px 14px;
  border:1px dashed var(--hair);
  background:var(--paper);
  font-family:var(--f-mono);
  font-size:11.5px;
  line-height:1.55;
  color:color-mix(in srgb, var(--ink) 80%, var(--paper));
}

/* ---------- 5. NEIGHBORHOODS ---------- */
.hood-group + .hood-group{ margin-top:clamp(40px, 6vw, 64px); }
.hood-group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--hair);
}
.hood-group-t{ font-family:var(--f-dsp); font-size:clamp(1.5rem, 2.2vw, 1.9rem); line-height:1.1; }
.hood-group-n{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--dusk);
}
.hood-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}
.hood{
  display:block;
  height:100%;
  background:var(--white);
  color:var(--ink);
  border:1px solid transparent;
}
.hood:hover{ color:var(--ink); }
.hood-media{
  position:relative;
  display:block;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--dune);
}
.hood--portrait .hood-media{ aspect-ratio:3 / 4; }
.hood-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.hood-body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; }
.hood-name{ font-size:clamp(1.2rem, 1.5vw, 1.4rem); line-height:1.15; }
.hood-go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--surf);
}
.hood-go .ico{ width:14px; height:14px; transition:transform .3s var(--ease); }
.hood[aria-current="true"]{ border-color:var(--ink); }
.hood[aria-current="true"] .hood-go{ color:var(--dusk); }

@media (max-width: 1100px){
  .hood-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .hood-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .hood-body{ padding:10px 12px 12px; gap:4px; }
  .hood-name{ font-size:1.12rem; }
  .hood-go{ font-size:9.5px; letter-spacing:.12em; }
}

/* ---------- 6. PRICE ---------- */
.prices .h-sec{ color:var(--white); }
.price-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}
.price-tile{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  padding:clamp(22px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px);
  border:1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  color:var(--paper);
  transition:transform .35s var(--ease);
}
.price-tile:hover{ color:var(--white); border-color:color-mix(in srgb, var(--paper) 55%, transparent); transform:translate3d(0,-4px,0); }
.price-tile[aria-current="true"]{ background:var(--surf); border-color:var(--surf); }
.price-k{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--hair);
}
.price-v{ font-size:clamp(2rem, 3.4vw, 3rem); line-height:1; color:var(--white); white-space:nowrap; }
.price-go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:18px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.price-go .ico{ width:14px; height:14px; transition:transform .3s var(--ease); }
.prices [data-reveal="line"]::after{ background:var(--hair); }

@media (max-width: 1000px){
  .price-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .price-grid{ gap:10px; }
  .price-v{ font-size:1.8rem; }
}

/* ---------- 7. INQUIRY ---------- */
.inq{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:40px clamp(40px, 6vw, 96px);
  align-items:start;
}
.inq-copy .lede{ margin-top:20px; }
.contact-lines{ list-style:none; display:grid; gap:14px; margin-top:32px; }
.contact-lines li{ display:flex; align-items:center; gap:14px; font-size:16px; }
.contact-lines .ico{ width:20px; height:20px; flex:none; color:var(--surf); }
.contact-lines a{ color:var(--ink); }
.contact-lines a:hover{ color:var(--surf); }
.inq-form{
  background:var(--white);
  border:1px solid var(--hair-soft);
  padding:clamp(22px, 3.6vw, 44px);
}
.inq-fallback-t{ margin:0 0 22px; font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1.12; }

@media (max-width: 900px){
  .inq{ grid-template-columns:1fr; }
}

/* Fluent Forms, cosmetic only: type, color, borders, radius. */
.inq-form .ff-el-input--label label,
.inq-form .ff-el-input--label{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.inq-form .ff-el-form-control{
  border:1px solid var(--hair);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
}
.inq-form .ff-el-form-control:focus{ border-color:var(--surf); box-shadow:none; }
.inq-form .ff-el-form-check-label,
.inq-form .ff_t_c{ font-size:13px; line-height:1.55; color:color-mix(in srgb, var(--ink) 80%, var(--paper)); }
.inq-form .ff-btn-submit{
  border-radius:0 !important;
  background:var(--ink) !important;
  border-color:var(--ink) !important;
  color:var(--white) !important;
  font-family:var(--f-mono) !important;
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}
.inq-form .ff-btn-submit:hover{ background:var(--surf) !important; border-color:var(--surf) !important; color:var(--white) !important; }
.inq-form .ff-message-success{
  border:1px solid var(--hair);
  background:var(--sand);
  color:var(--ink);
  font-size:16px;
}

/* ---------- 8. PHONE BAR ----------
   Phones only. Fixed, so it never shifts layout. With JavaScript it slides
   away while the inquiry form itself is on screen, or the menu is open. */
.mbar{ display:none; }
@media (max-width: 760px){
  body.mwe-home{ padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)); }
  .mbar{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:55;
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:8px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--paper);
    border-top:1px solid var(--hair);
    box-shadow:0 -12px 30px -18px color-mix(in srgb, var(--ink) 40%, transparent);
    transition:transform .35s var(--ease);
  }
  .mbar .btn{ min-height:46px; padding:0 12px; }
  .mbar .ico{ width:16px; height:16px; }
  .inquire-in-view .mbar,
  .nav-open .mbar{ transform:translate3d(0, 110%, 0); }
}

/* ---------- 9. MOTION ----------
   The hero photo settles from a slight zoom over 18s: transform only, and
   the photo is fully visible from its first frame (LCP-safe). Card photos
   ease in on hover. All of it is off under reduced motion (chrome.css). */
@media (prefers-reduced-motion: no-preference){
  .hero-media .hero-img{
    animation:mwe-hero-drift 18s cubic-bezier(.25,.6,.25,1) both;
    transform-origin:60% 55%;
  }
  @keyframes mwe-hero-drift{
    from{ transform:scale(1.07); }
    to{ transform:scale(1); }
  }
}
@media (hover: hover){
  .hood:hover .hood-media img{ transform:scale(1.04); }
  .hood:hover .hood-go .ico,
  .price-tile:hover .price-go .ico{ transform:translate3d(4px,0,0); }
}

/* Final overrides (keep last). */
.chip,
.hood,
.price-tile,
.sec-aside-link,
.contact-lines a,
.mbar a{ text-decoration:none !important; }