/* =========================================================================
   French Spa Hotels — listing UI mockup
   Mirrors the intended WordPress card / grid / filter design.
   ========================================================================= */
:root{
  --ink:#1a1c1e; --muted:#6b7280; --faint:#9aa1a9; --line:#e7e9ec; --bg:#f6f7f8;
  --brand:#0d6e6e; --brand-dk:#0a5555; --brand-tint:#e6f0f0;
  --star:#f5b301;
  --score-exc:#0a7d4b; --score-good:#3a8dbd; --score-ok:#b7791f;
  --radius:14px; --radius-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.08); --shadow-lift:0 10px 28px rgba(0,0,0,.14);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}

/* ---- Header ---- */
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.logo span{color:var(--brand)}
.site-nav{display:flex;gap:1.4rem;font-size:.9rem}
.site-nav a{color:var(--muted);text-decoration:none}
.site-nav a:hover{color:var(--ink)}
.lang{font-size:.8rem;color:var(--faint)}
.lang b{color:var(--brand)}

/* ---- Page head ---- */
.pagehead{padding:1.6rem 0 .4rem}
.crumbs{font-size:.82rem;color:var(--faint);margin-bottom:.6rem}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{margin:0 .4rem}
.pagehead h1{font-size:1.9rem;margin:.1rem 0 .5rem;letter-spacing:-.02em}
.statstrip{display:flex;flex-wrap:wrap;gap:1.3rem;color:var(--muted);font-size:.9rem}
.statstrip b{color:var(--ink)}

/* ---- Layout ---- */
.listing{display:grid;grid-template-columns:280px 1fr;gap:2rem;padding:1.4rem 0 3rem;align-items:start}

/* ---- Filter rail ---- */
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:.4rem 1.1rem 1.1rem;position:sticky;top:1rem}
.filters h2{font-size:.95rem;margin:1.1rem 0 .1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.fgroup{border-top:1px solid var(--line);padding:.85rem 0}
.fgroup:first-of-type{border-top:0}
.fgroup > summary{cursor:pointer;font-weight:600;font-size:.92rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
.fgroup > summary::-webkit-details-marker{display:none}
.fgroup > summary::after{content:"–";color:var(--faint)}
.fgroup:not([open]) > summary::after{content:"+"}
.opt{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--ink);padding:.28rem 0;cursor:pointer}
.opt input{accent-color:var(--brand);width:16px;height:16px}
.opt .cnt{margin-left:auto;color:var(--faint);font-size:.8rem}
.clearbtn{margin-top:.9rem;width:100%;border:1px solid var(--line);background:#fff;color:var(--muted);
  padding:.5rem;border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer}
.clearbtn:hover{border-color:var(--brand);color:var(--brand)}

/* ---- Results toolbar ---- */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;gap:1rem;flex-wrap:wrap}
.toolbar .count{font-weight:600}
.toolbar .count span{color:var(--muted);font-weight:400}
.controls{display:flex;gap:.6rem;align-items:center}
.controls select{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.5rem .7rem;font:inherit;font-size:.85rem;background:#fff;cursor:pointer}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.toggle button{border:0;background:#fff;padding:.5rem .85rem;font:inherit;font-size:.82rem;cursor:pointer;color:var(--muted)}
.toggle button.on{background:var(--brand);color:#fff}

/* ---- Card grid ---- */
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

.hcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column}
.hcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

.hcard__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
/* image placeholder: layered gradients evoke a spa/coastal photo, fully offline */
.hcard__media .ph{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 70% 15%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(160deg, var(--g1), var(--g2));}
.hcard__media .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.32), transparent 45%)}

.hcard__stars{position:absolute;top:10px;right:10px;color:var(--star);font-size:.82rem;
  letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.55);z-index:2}
.hcard__brand{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);
  color:var(--ink);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:6px;z-index:2}
.hcard__score{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;align-items:baseline;gap:.3rem;
  background:var(--score-good);color:#fff;font-weight:700;padding:.28rem .5rem;border-radius:8px;
  font-size:1rem;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.hcard__score small{font-weight:500;font-size:.66rem;opacity:.85}
.hcard__score[data-tier="exc"]{background:var(--score-exc)}
.hcard__score[data-tier="ok"]{background:var(--score-ok)}

.hcard__body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;flex:1}
.hcard__name{font-size:1rem;line-height:1.32;margin:0 0 .2rem;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.hcard__name a{text-decoration:none}
.hcard__name a:hover{color:var(--brand)}
.hcard__loc{color:var(--muted);font-size:.84rem;margin:0 0 .7rem}
.hcard__loc::before{content:"📍 ";}

.hcard__feats{display:flex;gap:.35rem;list-style:none;padding:0;margin:0 0 .85rem;flex-wrap:wrap}
.amn{width:26px;height:26px;border-radius:7px;background:var(--brand-tint);display:grid;place-items:center;
  font-size:.82rem;cursor:default}
.amn--more{width:auto;padding:0 .45rem;background:transparent;color:var(--faint);font-size:.74rem;font-weight:600}

.hcard__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);padding-top:.7rem}
.hcard__reviews{color:var(--muted);font-size:.8rem}
.hcard__price{font-size:.8rem;color:var(--muted)}
.hcard__price b{color:var(--ink);font-size:1.18rem;font-weight:800}

.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 1rem}

/* ---- Load more ---- */
.loadmore{display:block;margin:2rem auto 0;border:1px solid var(--brand);background:#fff;color:var(--brand);
  font:inherit;font-weight:600;padding:.75rem 1.6rem;border-radius:999px;cursor:pointer}
.loadmore:hover{background:var(--brand);color:#fff}

/* ---- Footer note ---- */
.foot{border-top:1px solid var(--line);background:#fff;padding:1.4rem 0;color:var(--faint);font-size:.8rem;text-align:center}

/* ---- Responsive ---- */
.filtersToggle{display:none}
@media (max-width:880px){
  .listing{grid-template-columns:1fr}
  .filtersToggle{display:inline-flex;margin-bottom:1rem;border:1px solid var(--brand);background:var(--brand);
    color:#fff;border-radius:999px;padding:.6rem 1.2rem;font:inherit;font-weight:600;cursor:pointer}
  .filters{position:fixed;top:0;right:0;height:100%;width:min(86%,340px);z-index:60;border-radius:0;
    transform:translateX(100%);transition:transform .25s ease;overflow:auto;box-shadow:var(--shadow-lift)}
  .filters.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;display:none}
  .scrim.show{display:block}
}