/* ============================================================================ LAYOUT-SPECIFIC STRUCTURAL OVERRIDES These make each layout a genuine shift — width, density, hero size, card grid, card aspect, type weight, section rhythm — not just a recolour. Base selector: [data-layout="X"] (set on ). ============================================================================ */ /* CLASSIC — balanced, centred, mid width (the reference) */ [data-layout="classic"] .wlre-container{max-width:98vw;} [data-layout="classic"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr));} [data-layout="classic"] .wlre-section{padding-block:calc(var(--space-7) * var(--den,1) * var(--wlre-sec,1));} /* EDITORIAL — oversized headlines, generous whitespace, 2-col, big imagery */ [data-layout="editorial"] .wlre-container{max-width:98vw;} [data-layout="editorial"] .wlre-hero__title{font-size:clamp(2.8rem,6.5vw,5.6rem);letter-spacing:-.02em;line-height:1.02;} [data-layout="editorial"] .wlre-hero__inner{max-width:1000px;padding-block:var(--space-9);} [data-layout="editorial"] .wlre-section{padding-block:calc(var(--space-9) * var(--den,1) * var(--wlre-sec,1));} [data-layout="editorial"] .wlre-section__head h2{font-size:clamp(2rem,3.6vw,3.2rem);} [data-layout="editorial"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(400px * var(--den,1)),1fr))} [data-layout="editorial"] .wlre-pcard__media{aspect-ratio:5/4;} [data-layout="editorial"] .wlre-pcard__title{font-size:var(--fs-xl);} /* DASHBOARD — full-width, dense, search-first, 4-col tiles, compact rhythm */ [data-layout="dashboard"] .wlre-container{max-width:100%;} [data-layout="dashboard"] .wlre-hero__inner{padding-block:var(--space-7);max-width:1100px;} [data-layout="dashboard"] .wlre-hero__title{font-size:clamp(1.9rem,3vw,2.6rem);} [data-layout="dashboard"] .wlre-searchbar{max-width:1100px;box-shadow:var(--shadow-3);} [data-layout="dashboard"] .wlre-section{padding-block:calc(var(--space-6) * var(--den,1) * var(--wlre-sec,1));} [data-layout="dashboard"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(250px * var(--den,1)),1fr))} [data-layout="dashboard"] .wlre-pcard__body{padding:var(--space-3);} @media (max-width:1100px){[data-layout="dashboard"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(400px * var(--den,1)),1fr));}} /* STORY — full-bleed, cinematic, big media, generous */ [data-layout="story"] .wlre-container{max-width:100%;} [data-layout="story"] .wlre-hero{min-height:92vh;} [data-layout="story"] .wlre-hero.is-compact,[data-layout="story"] .wlre-hero--compact{min-height:46vh;} [data-layout="story"] .wlre-hero__title{font-size:clamp(3rem,7vw,6rem);} [data-layout="story"] .wlre-section{padding-block:calc(var(--space-9) * var(--den,1) * var(--wlre-sec,1));} [data-layout="story"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(400px * var(--den,1)),1fr))} [data-layout="story"] .wlre-pcard__media{aspect-ratio:16/9;} [data-layout="story"] .wlre-pcard{border-radius:var(--radius-lg);} /* LUXE — premium, dark-leaning, generous, glassy cards, tall portraits */ [data-layout="luxe"] .wlre-container{max-width:98vw;} [data-layout="luxe"] .wlre-hero{min-height:84vh;} [data-layout="luxe"] .wlre-hero__title{font-size:clamp(2.6rem,5.5vw,4.8rem);} [data-layout="luxe"] .wlre-section{padding-block:calc(var(--space-8) * var(--den,1) * var(--wlre-sec,1));} [data-layout="luxe"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr))} [data-layout="luxe"] .wlre-pcard{border-radius:var(--radius-lg);} [data-layout="luxe"] .wlre-pcard__media{aspect-ratio:3/4;} /* MINIMAL — airy, lots of negative space, 2-col, flat cards, centred heads */ [data-layout="minimal"] .wlre-container{max-width:min(1560px,90vw);} [data-layout="minimal"] .wlre-hero__inner{padding-block:calc(var(--space-9) * var(--den,1) * var(--wlre-sec,1));} [data-layout="minimal"] .wlre-section{padding-block:calc(var(--space-9) * var(--den,1) * var(--wlre-sec,1));} [data-layout="minimal"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(400px * var(--den,1)),1fr))} [data-layout="minimal"] .wlre-pcard{box-shadow:none;border-radius:var(--radius-sm);} [data-layout="minimal"] .wlre-pcard__media{aspect-ratio:4/3;} [data-layout="minimal"] .wlre-section__head{justify-content:center;text-align:center;} /* BOLD — punchy, heavy type, big bordered cards, energetic */ [data-layout="bold"] .wlre-container{max-width:98vw;} [data-layout="bold"] .wlre-hero__title{font-size:clamp(3rem,7vw,5.6rem);font-weight:800;letter-spacing:-.02em;} [data-layout="bold"] .wlre-section{padding-block:calc(var(--space-8) * var(--den,1) * var(--wlre-sec,1));} [data-layout="bold"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr))} [data-layout="bold"] .wlre-pcard{border-radius:var(--radius-lg);border-width:2px;} [data-layout="bold"] .wlre-pcard__title{font-size:var(--fs-xl);font-weight:700;} [data-layout="bold"] .wlre-btn{font-weight:700;padding:.85em 1.55em;} /* MAGAZINE — columnar masonry, editorial spacing */ [data-layout="magazine"] .wlre-container{max-width:98vw;} [data-layout="magazine"] .wlre-section{padding-block:calc(var(--space-8) * var(--den,1) * var(--wlre-sec,1));} [data-layout="magazine"] .wlre-hero__title{font-size:clamp(2.6rem,5.5vw,4.6rem);} /* COMPACT — tight, info-dense, list-style rows */ [data-layout="compact"] .wlre-container{max-width:97vw;} [data-layout="compact"] .wlre-hero__inner{padding-block:calc(var(--space-6) * var(--den,1) * var(--wlre-sec,1));} [data-layout="compact"] .wlre-section,[data-layout="compact"] .wlre-section--featured,[data-layout="compact"] .wlre-section--why{padding-block:calc(var(--space-5) * var(--den,1) * var(--wlre-sec,1));} [data-layout="compact"] .wlre-pcard--horizontal .wlre-pcard__media{min-height:160px;} /* IMMERSIVE — full-bleed, big imagery, dark mood, tall cards */ [data-layout="immersive"] .wlre-container{max-width:100%;} [data-layout="immersive"] .wlre-hero{min-height:90vh;} [data-layout="immersive"] .wlre-section{padding-block:calc(var(--space-8) * var(--den,1) * var(--wlre-sec,1));} [data-layout="immersive"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr))} [data-layout="immersive"] .wlre-pcard__media{aspect-ratio:3/4;} /* CORPORATE — structured, clean, 3-col, mid */ [data-layout="corporate"] .wlre-container{max-width:98vw;} [data-layout="corporate"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr));} [data-layout="corporate"] .wlre-section{padding-block:calc(var(--space-7) * var(--den,1) * var(--wlre-sec,1));} /* BOUTIQUE — warm, generous, 2-col, soft rounded */ [data-layout="boutique"] .wlre-container{max-width:97vw;} [data-layout="boutique"] .wlre-hero__title{font-size:clamp(2.4rem,5vw,4.2rem);} [data-layout="boutique"] .wlre-section{padding-block:calc(var(--space-8) * var(--den,1) * var(--wlre-sec,1));} [data-layout="boutique"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(400px * var(--den,1)),1fr))} [data-layout="boutique"] .wlre-pcard{border-radius:var(--radius-lg);} [data-layout="boutique"] .wlre-pcard__media{aspect-ratio:4/3;} /* AGENCY — dynamic, mixed, asymmetric heads */ [data-layout="agency"] .wlre-container{max-width:98vw;} [data-layout="agency"] .wlre-section{padding-block:calc(var(--space-7) * var(--den,1) * var(--wlre-sec,1));} [data-layout="agency"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr));} [data-layout="agency"] .wlre-section__head{align-items:flex-end;} /* URBAN — edgy, dense, full-width, square 4-col tiles, sharp corners */ [data-layout="urban"] .wlre-container{max-width:100%;} [data-layout="urban"] .wlre-hero{min-height:78vh;} [data-layout="urban"] .wlre-section{padding-block:calc(var(--space-6) * var(--den,1) * var(--wlre-sec,1));} [data-layout="urban"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(250px * var(--den,1)),1fr))} [data-layout="urban"] .wlre-pcard{border-radius:var(--radius);} [data-layout="urban"] .wlre-pcard__media{aspect-ratio:1;} @media (max-width:1000px){[data-layout="urban"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(400px * var(--den,1)),1fr));}} /* COASTAL — airy, wide, light, landscape cards */ [data-layout="coastal"] .wlre-container{max-width:98vw;} [data-layout="coastal"] .wlre-hero{min-height:86vh;} [data-layout="coastal"] .wlre-section{padding-block:calc(var(--space-8) * var(--den,1) * var(--wlre-sec,1));} [data-layout="coastal"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr))} [data-layout="coastal"] .wlre-pcard__media{aspect-ratio:3/2;} [data-layout="coastal"] .wlre-pcard{border-radius:var(--radius-lg);} /* SHOWCASE — gallery-first, tall overlay cards */ [data-layout="showcase"] .wlre-container{max-width:98vw;} [data-layout="showcase"] .wlre-hero__title{font-size:clamp(2.6rem,5.5vw,4.6rem);} [data-layout="showcase"] .wlre-section{padding-block:calc(var(--space-7) * var(--den,1) * var(--wlre-sec,1));} [data-layout="showcase"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr))} [data-layout="showcase"] .wlre-pcard__media,[data-layout="showcase"] .wlre-pcard--overlay .wlre-pcard__media{aspect-ratio:4/5;} /* METRO — even tile grid, structured, snug gaps */ [data-layout="metro"] .wlre-container{max-width:98vw;} [data-layout="metro"] .wlre-section{padding-block:calc(var(--space-6) * var(--den,1) * var(--wlre-sec,1));} [data-layout="metro"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr))} [data-layout="metro"] .wlre-pcard{border-radius:var(--radius-sm);} [data-layout="metro"] .wlre-pcard__media{aspect-ratio:4/3;} /* GRIDMASTER — maximal grid, widest, 4-col, tightest gaps, flat cards */ [data-layout="gridmaster"] .wlre-container{max-width:100%;} [data-layout="gridmaster"] .wlre-hero__inner{padding-block:calc(var(--space-6) * var(--den,1) * var(--wlre-sec,1));} [data-layout="gridmaster"] .wlre-section{padding-block:calc(var(--space-5) * var(--den,1) * var(--wlre-sec,1));} [data-layout="gridmaster"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(250px * var(--den,1)),1fr))} [data-layout="gridmaster"] .wlre-pcard{box-shadow:none;border-radius:var(--radius-sm);} [data-layout="gridmaster"] .wlre-pcard__body{padding:var(--space-3);} @media (max-width:1100px){[data-layout="gridmaster"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(400px * var(--den,1)),1fr));}} /* ESTATE-PRO — comprehensive, balanced, 3-col, wide */ [data-layout="estate-pro"] .wlre-container{max-width:98vw;} [data-layout="estate-pro"] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(320px * var(--den,1)),1fr));} [data-layout="estate-pro"] .wlre-section{padding-block:calc(var(--space-7) * var(--den,1) * var(--wlre-sec,1));} /* small-screen collapse for every layout (ties specificity + comes last → wins) */ @media (max-width:980px){[data-layout] .wlre-listing{grid-template-columns:repeat(auto-fill,minmax(calc(400px * var(--den,1)),1fr));}} @media (max-width:600px){[data-layout] .wlre-listing{grid-template-columns:1fr;}} /* density-scaled gap on every listing grid (overrides .wlre-grid gap) */ .wlre-listing{gap:calc(var(--space-5) * var(--den,1) * var(--wlre-gap,1));} @media (max-width:560px){.wlre-listing{gap:var(--space-4);}} /* ============================================================================ QA FIX — narrow-column breakage at dense density / horizontal card variant ============================================================================ */ /* let card children shrink instead of forcing overflow */ .wlre-pcard{min-width:0;} .wlre-pcard__body{min-width:0;} .wlre-pcard__title{overflow-wrap:anywhere;} .wlre-pcard__foot{flex-wrap:wrap;gap:.3rem .6rem;} /* HORIZONTAL cards are image-left / text-right — they need real width. Never let the grid pack them into skinny columns. One per row except on very wide screens. (:has() out-specifies the per-layout grid rules above only by source order, so this block must stay at the END of the file.) */ .wlre-listing:has(.wlre-pcard--horizontal){ grid-template-columns:repeat(auto-fill,minmax(min(100%, 460px), 1fr)); } @media (max-width:1040px){ .wlre-listing:has(.wlre-pcard--horizontal){grid-template-columns:1fr;} } /* dense / compact density: floor the column width so vertical cards stay legible (price + 3 spec chips + 2-line title need ~210px minimum). */ html[data-density="dense"] [data-layout] .wlre-listing, html[data-density="compact"] [data-layout] .wlre-listing{ grid-template-columns:repeat(auto-fill,minmax(min(100%, 210px), 1fr)); }