/* page-experiences.css - Client Experiences (/experiences/) page-specific styles.
   The shared .t-card component and the --gold token now live in style.css (so the
   homepage testimonials band picks them up too); this sheet holds only what is
   unique to the /experiences/ page: the header, the filter bar, the wall grid, the
   no-results state, the summary band, and the share CTA. Loaded after style.css. */

/* header - paper band; body.light-hero keeps the nav legible over it */
.xp-head{ padding:150px 0 40px; }
.xp-title{ margin:14px 0 14px; font-family:'Fraunces',serif; font-weight:300;
  font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.08; }
.xp-title em{ font-style:italic; color:var(--accent); }
.xp-intro{ max-width:660px; color:var(--ink-soft); font-size:1.05rem; }

/* summary band ("What clients single out") - rendered by saniservice_experience_summary_html() */
.summary{ background:var(--night); color:var(--night-text); border-radius:8px; padding:34px 36px; margin:8px 0 46px; }
.summary h2{ font-family:'Fraunces',serif; font-weight:300; font-size:1.25rem; color:#fff; margin-bottom:4px; }
.summary .sub{ font-size:.86rem; color:var(--night-text); margin-bottom:24px; }
.qbar{ display:grid; grid-template-columns:210px 1fr 46px; align-items:center; gap:16px; margin:11px 0; }
.qbar .ql{ font-size:.9rem; color:#efe4d2; }
.qbar .track{ height:8px; background:rgba(255,255,255,.12); border-radius:6px; overflow:hidden; }
.qbar .fill{ display:block; height:100%; background:var(--gold); border-radius:6px; }
.qbar .qv{ font-size:.82rem; color:var(--gold); text-align:right; font-variant-numeric:tabular-nums; }
@media(max-width:640px){ .qbar{ grid-template-columns:1fr 40px; } .qbar .track{ grid-column:1 / -1; order:3; } }

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between;
  padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:30px; }
.fgroup{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fgroup .lbl{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-right:4px; }
.fbtn{ font-family:'Archivo',sans-serif; font-size:.82rem; color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:4px; padding:6px 13px; cursor:pointer; transition:all .15s; }
.fbtn:hover{ border-color:var(--accent); color:var(--accent); }
.fbtn.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* Desktop: each filter group stays on one line (no "Surfaces & Mold" internal
   wrap). The two groups can still stack via .filters flex-wrap when the viewport
   is too narrow; below 1000px each group may also wrap its own buttons. */
@media(min-width:1000px){ .filters .fgroup{ flex-wrap:nowrap; } }
/* Mobile/tablet (<1000px): each filter group is a ONE-LINE chip row that scrolls
   sideways instead of wrapping. The label is the first chip and scrolls with the row
   (it lives inside .fgroup in the markup - kept there, no restructure). overflow-x:auto
   gives .fgroup min-width:0 so it shrinks to the container and the scroll stays
   contained (no page horizontal scroll); chips are flex:0 0 auto so they keep full
   size and overflow rather than squishing. Scrollbar hidden. Desktop rule above is
   untouched (v0.5.26). */
@media(max-width:999px){
  .fgroup{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-right:16px; }
  .fgroup::-webkit-scrollbar{ display:none; }
  .fgroup .lbl, .fgroup .fbtn{ flex:0 0 auto; }
}

/* wall (page grid; the homepage band uses .t-grid in style.css instead) */
.wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-bottom:30px; }
@media(max-width:860px){ .wall{ grid-template-columns:1fr; } }
.noresults{ display:none; color:var(--ink-soft); padding:30px 0; font-style:italic; }

/* share cta */
.share{ text-align:center; background:var(--paper-deep); border:1px solid var(--line); border-radius:8px;
  padding:44px 24px; margin:20px 0 90px; }
.share h2{ font-family:'Fraunces',serif; font-weight:300; font-size:1.5rem; margin-bottom:8px; }
.share p{ color:var(--ink-soft); max-width:460px; margin:0 auto 20px; }
.share a{ display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-size:.9rem; font-weight:500; padding:12px 26px; border-radius:4px; }
.share a:hover{ background:var(--night); }