/* ============================================================================
   LAYOUT — header/nav, hero, footer, archive. Variants are CSS-scoped by class.
   ============================================================================ */

/* ---- Header / Nav ---------------------------------------------------------- */
.wlre-header{background:var(--c-bg);border-bottom:var(--border-w) solid var(--c-border);position:relative;z-index:50;}
.wlre-nav{display:flex;align-items:center;gap:var(--space-5);padding-top:var(--space-3);padding-bottom:var(--space-3);}
.wlre-logo{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);text-decoration:none;color:var(--c-text);white-space:nowrap;}
.wlre-logo--text{letter-spacing:.01em;}
.wlre-menu{list-style:none;display:flex;gap:var(--space-5);margin:0;padding:0;flex-wrap:wrap;}
.wlre-menu a{text-decoration:none;color:var(--c-text);font-weight:600;padding:.4em 0;border-bottom:2px solid transparent;}
.wlre-menu a:hover,.wlre-menu .current-menu-item>a{border-bottom-color:var(--c-primary);opacity:1;}
.wlre-nav__phone{text-decoration:none;color:var(--c-text);font-weight:600;white-space:nowrap;}

/* centered variant: top row (phone | logo | whatsapp) then centered menu */
.wlre-nav--centered{display:block;text-align:center;}
.wlre-nav--centered .wlre-nav__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-2);}
.wlre-nav--centered .wlre-logo{font-size:var(--fs-xl);}
.wlre-nav--centered .wlre-menu{justify-content:center;margin-top:var(--space-2);}

/* split: logo | menu | actions */
.wlre-nav--split .wlre-nav__menu{margin-left:auto;}
.wlre-nav--split .wlre-nav__actions{display:flex;align-items:center;gap:var(--space-3);}

/* overlay: transparent header sitting over a full-bleed hero. A top scrim keeps
   the nav legible whether the hero behind it is dark, light or a colour mesh. */
.wlre-header--transparent-overlay{position:absolute;top:0;left:0;right:0;border-bottom:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.12) 55%,transparent);}
.wlre-header--transparent-overlay .wlre-logo,
.wlre-header--transparent-overlay .wlre-menu a,
.wlre-header--transparent-overlay .wlre-nav__phone{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45);}
.wlre-header--transparent-overlay .wlre-menu a:hover,
.wlre-header--transparent-overlay .wlre-menu .current-menu-item>a{border-bottom-color:#fff;}
.wlre-nav--overlay{padding-top:var(--space-4);padding-bottom:var(--space-4);}
.wlre-nav--overlay .wlre-nav__menu{margin-left:auto;margin-right:var(--space-5);}

/* minimal */
.wlre-nav--minimal .wlre-nav__menu{margin-left:auto;}

@media (max-width:720px){
  .wlre-menu{gap:var(--space-3);font-size:.95rem;}
  .wlre-nav{flex-wrap:wrap;gap:var(--space-3);}
  .wlre-nav--centered .wlre-nav__top{flex-wrap:wrap;justify-content:center;}
}

/* ---- Hero ------------------------------------------------------------------ */
.wlre-hero{position:relative;color:var(--c-text);overflow:hidden;}
.wlre-hero__inner{position:relative;padding-top:var(--space-9);padding-bottom:var(--space-9);max-width:min(1280px,100%);}
.wlre-hero__inner--bottom{display:flex;flex-direction:column;justify-content:flex-end;min-height:64vh;}
.wlre-hero__eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-sm);font-weight:700;opacity:.7;margin-bottom:var(--space-2);}
.wlre-hero__title{font-size:clamp(2rem,4vw + 1rem,3.4rem);margin-bottom:var(--space-3);}
.wlre-hero__title--xl{font-size:clamp(2.4rem,5vw + 1rem,4.4rem);}
.wlre-hero__subtitle{font-size:var(--fs-lg);max-width:46ch;opacity:.92;margin-bottom:var(--space-5);}
.wlre-hero__cta{display:flex;gap:var(--space-3);flex-wrap:wrap;}
.wlre-hero.is-compact .wlre-hero__inner{padding-top:var(--space-7);padding-bottom:var(--space-6);min-height:0;}
.wlre-hero--compact .wlre-hero__inner{padding-top:var(--space-7);padding-bottom:var(--space-6);}

/* image-backed heroes */
.wlre-hero--centered,.wlre-hero--fullbleed,.wlre-hero--compact{
  background-image:var(--wlre-hero-img);background-size:cover;background-position:center;
}
.wlre-hero--centered:not([style*="--wlre-hero-img"]),
.wlre-hero--compact:not([style*="--wlre-hero-img"]){
  background:linear-gradient(135deg,var(--c-surface),var(--c-surface-2));
}
/* full-bleed with no image: dark gradient so the white hero text + overlay nav stay legible */
.wlre-hero--fullbleed:not([style*="--wlre-hero-img"]){
  background:linear-gradient(135deg,#23262b,#41464d);
}
.wlre-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45));pointer-events:none;}
.wlre-hero--centered:not([style*="--wlre-hero-img"]) .wlre-hero__overlay,
.wlre-hero--compact:not([style*="--wlre-hero-img"]) .wlre-hero__overlay{background:none;}
.wlre-hero--centered[style*="--wlre-hero-img"],
.wlre-hero--compact[style*="--wlre-hero-img"],
.wlre-hero--fullbleed{color:#fff;}
/* explicitly recolour the text elements (a heading's own h1{color} rule beats inherited #fff) */
.wlre-hero--centered[style*="--wlre-hero-img"] .wlre-hero__title,
.wlre-hero--centered[style*="--wlre-hero-img"] .wlre-hero__subtitle,
.wlre-hero--centered[style*="--wlre-hero-img"] .wlre-hero__eyebrow,
.wlre-hero--compact[style*="--wlre-hero-img"] .wlre-hero__title,
.wlre-hero--compact[style*="--wlre-hero-img"] .wlre-hero__subtitle,
.wlre-hero--compact[style*="--wlre-hero-img"] .wlre-hero__eyebrow,
.wlre-hero--fullbleed .wlre-hero__title,
.wlre-hero--fullbleed .wlre-hero__subtitle,
.wlre-hero--fullbleed .wlre-hero__eyebrow{color:#fff;}
.wlre-hero--centered[style*="--wlre-hero-img"] .wlre-hero__title,
.wlre-hero--compact[style*="--wlre-hero-img"] .wlre-hero__title,
.wlre-hero--fullbleed .wlre-hero__title{text-shadow:0 2px 20px rgba(0,0,0,.45);}
.wlre-hero--centered[style*="--wlre-hero-img"] .wlre-hero__subtitle,
.wlre-hero--compact[style*="--wlre-hero-img"] .wlre-hero__subtitle,
.wlre-hero--fullbleed .wlre-hero__subtitle{text-shadow:0 1px 10px rgba(0,0,0,.5);}
.wlre-hero--fullbleed{min-height:70vh;display:flex;align-items:flex-end;}
.wlre-hero--fullbleed.is-compact{min-height:38vh;}

/* split hero */
.wlre-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-7);align-items:center;padding-top:var(--space-8);padding-bottom:var(--space-8);}
.wlre-hero--split.is-compact .wlre-hero__grid{padding-top:var(--space-6);padding-bottom:var(--space-6);}
.wlre-hero__media{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background-size:cover;background-position:center;box-shadow:var(--shadow-2);}
.wlre-hero__media img{width:100%;height:100%;object-fit:cover;}
@media (max-width:880px){.wlre-hero__grid{grid-template-columns:1fr;gap:var(--space-5);}}

/* mesh hero */
.wlre-hero--mesh{background:var(--c-bg);min-height:64vh;display:flex;align-items:center;}
.wlre-hero--mesh.is-compact{min-height:34vh;}
.wlre-hero__mesh{position:absolute;inset:0;overflow:hidden;filter:blur(60px) saturate(140%);opacity:.6;}
.wlre-hero__mesh span{position:absolute;width:46vw;height:46vw;border-radius:50%;}
.wlre-hero__mesh span:nth-child(1){background:var(--c-primary);top:-12vw;left:-8vw;}
.wlre-hero__mesh span:nth-child(2){background:var(--c-accent);bottom:-16vw;right:-6vw;}
.wlre-hero__mesh span:nth-child(3){background:var(--c-surface-2);top:30%;left:40%;}

/* search bar */
.wlre-searchbar{display:flex;flex-wrap:wrap;gap:var(--space-2);background:var(--c-bg);color:var(--c-text);padding:var(--space-3);border-radius:var(--radius);box-shadow:var(--shadow-2);width:100%;}
.wlre-searchbar select{flex:1 1 0;min-width:130px;}
.wlre-searchbar .wlre-btn{flex:0 0 auto;}

/* ---- Archive (properties) -------------------------------------------------- */
.wlre-archive{display:grid;grid-template-columns:1fr;gap:var(--space-6);}
body.wlre-filter-sidebar .wlre-archive{grid-template-columns:260px 1fr;align-items:start;}
@media (max-width:880px){body.wlre-filter-sidebar .wlre-archive{grid-template-columns:1fr;}}
.wlre-archive__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;}
.wlre-archive__count{color:var(--c-text-muted);}

.wlre-filter--bar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;width:100%;background:var(--c-surface);border:var(--border-w) solid var(--c-border);border-radius:var(--radius);padding:var(--space-3);margin-bottom:var(--space-5);}
.wlre-filter--bar select{flex:1 1 0;min-width:130px;}
.wlre-filter--bar .wlre-btn{flex:0 0 auto;}
.wlre-filter--sidebar{background:var(--c-surface);border:var(--border-w) solid var(--c-border);border-radius:var(--radius);padding:var(--space-4);position:sticky;top:var(--space-4);}
.wlre-filter--sidebar form{display:flex;flex-direction:column;gap:var(--space-3);}
.wlre-filter--sidebar label{display:flex;flex-direction:column;gap:.3em;font-weight:600;font-size:var(--fs-sm);}

/* listing display modifiers (body class) — SCOPED to the property archive only,
   so the home page's featured / similar listings stay clean grids. */
/* "list-rows" layouts (compact, split) use horizontal cards → lay them out as a
   multi-column grid of wide rows, not one idiotic full-width card per line. */
body.wlre-listing-list-rows .wlre-archive .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));}
@media (max-width:760px){body.wlre-listing-list-rows .wlre-archive .wlre-listing{grid-template-columns:1fr;}}
body.wlre-listing-masonry .wlre-archive .wlre-listing{columns:3 280px;column-gap:var(--space-5);display:block;}
body.wlre-listing-masonry .wlre-archive .wlre-listing > *{break-inside:avoid;margin-bottom:var(--space-5);}
@media (max-width:880px){body.wlre-listing-masonry .wlre-archive .wlre-listing{columns:2 240px;}}
@media (max-width:560px){body.wlre-listing-masonry .wlre-archive .wlre-listing{columns:1;}}
/* horizontal cards: never stretch absurdly wide, but fill their grid cell */
.wlre-pcard--horizontal{max-width:none;}

/* ---- Footer ---------------------------------------------------------------- */
.wlre-footer{background:var(--c-surface);border-top:var(--border-w) solid var(--c-border);margin-top:var(--space-9);}
.wlre-footer a{color:var(--c-text);text-decoration:none;}
.wlre-footer a:hover{text-decoration:underline;}
.wlre-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-6);padding-top:var(--space-8);padding-bottom:var(--space-6);}
@media (max-width:880px){.wlre-footer__cols{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.wlre-footer__cols{grid-template-columns:1fr;}}
.wlre-footer__col h4{margin-bottom:var(--space-3);}
.wlre-footer__menu,.wlre-footer__areas,.wlre-footer__contact{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4em;}
.wlre-footer__tag{color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-sm);margin-top:var(--space-2);}
.wlre-footer__socials{display:flex;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap;}
.wlre-footer__socials a{font-weight:600;}
.wlre-footer__bar{border-top:var(--border-w) solid var(--c-border);padding-top:var(--space-4);padding-bottom:var(--space-5);color:var(--c-text-muted);font-size:var(--fs-sm);}
.wlre-footer__minimal{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-top:var(--space-5);padding-bottom:var(--space-5);flex-wrap:wrap;}
.wlre-footer__minimal .wlre-footer__menu{flex-direction:row;gap:var(--space-4);}
.wlre-footer__copy{color:var(--c-text-muted);font-size:var(--fs-sm);}
.wlre-footer__mega-cta{text-align:center;padding-top:var(--space-8);}
.wlre-footer__mega-cta h3{font-size:var(--fs-2xl);margin-bottom:var(--space-4);}
.wlre-footer__mega-cta p{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;}
.wlre-footer__dark{background:#0e1116;color:#e8ecf2;}
.wlre-footer__dark a{color:#e8ecf2;}
.wlre-footer__dark-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);padding-top:var(--space-8);padding-bottom:var(--space-6);}
@media (max-width:760px){.wlre-footer__dark-inner{grid-template-columns:1fr;}}
.wlre-footer__dark .wlre-footer__bar{border-top-color:rgba(255,255,255,.14);color:#9aa4b2;}
.wlre-footer__dark-cta h3{font-size:var(--fs-2xl);}
.wlre-footer__dark .wlre-footer__menu{flex-direction:row;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-4);}

/* ---- search bar + filter bar polish (floats, premium) --------------------- */
.wlre-searchbar{box-shadow:var(--shadow-3);border:1px solid var(--c-border);}
.wlre-searchbar .wlre-btn{padding:.7em 1.5em;}
.wlre-filter--bar{box-shadow:var(--shadow-1);}