/* =========================================================================
   UrbWellness — static homepage sections
   Stats banner · Image-with-text · Testimonials · Brands grid · Vibe collage
   Tokens come from main.css (:root). All selectors namespaced .uw-* so they
   never collide with the homepage/chrome styles in main.css.
   Responsive at 900px (tablet) and 560px (small).
   ========================================================================= */

/* ---------- STATS / NUMBERS BAND (olive-dark bg, Poppins numerals) -------- */
.uw-stats{background:var(--olive-dark);color:#fff;padding:64px 0}
.uw-stats-intro{text-align:center;max-width:640px;margin:0 auto 44px}
.uw-stats-intro h2{color:#fff;font-size:32px;margin-bottom:12px;text-transform:capitalize}
.uw-stats-intro p{color:rgba(255,255,255,.82);font-size:15px}
.uw-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}
.uw-stat{padding:0 12px}
.uw-stat-num{font-family:var(--font-head);font-weight:600;font-size:60px;line-height:1;color:#fff;letter-spacing:-.01em}
.uw-stat-unit{font-size:34px;margin-left:2px;color:var(--sale)}
.uw-stat-label{font-family:var(--font-head);font-weight:600;font-size:17px;margin-top:12px;text-transform:capitalize}
.uw-stat-desc{font-size:13px;color:rgba(255,255,255,.72);margin-top:6px;line-height:1.5}
.uw-stats-cta{text-align:center;margin-top:44px}
/* inverted button: white fill, olive text — reads on the dark band */
.uw-btn-invert{background:#fff;color:var(--olive-dark);border-color:#fff}
.uw-btn-invert:hover{background:#f0efe9;color:var(--olive-dark)}

/* ---------- IMAGE WITH TEXT (split image + copy + CTA) -------------------- */
.uw-iwt{padding:60px 0}
.uw-iwt-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.uw-iwt-media{border-radius:var(--card-radius);overflow:hidden;background:#f4f2ee;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.uw-iwt-media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.uw-iwt-copy h2{font-size:32px;margin-bottom:16px}
.uw-iwt-text{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:26px}
.uw-iwt-text p{margin-bottom:12px}
.uw-iwt-text p:last-child{margin-bottom:0}

/* ---------- TESTIMONIALS (3-card row, amber stars) -----------------------
   NOTE: namespaced uw-testimonials-* (not uw-reviews/.uw-stars) — those base
   names are the PDP Customer Reviews block's classes (woocommerce.css); this
   file loads after woocommerce.css, so reusing them silently overrode the PDP
   reviews block's padding/border and star layout on every product page. */
.uw-testimonials{padding:64px 0;background:linear-gradient(262deg,#ffebe7,#eeeeee)}
.uw-testimonials-title{text-align:center;font-size:32px;margin-bottom:8px}
.uw-testimonials-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:40px}
.uw-testimonials-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.uw-review-card{background:#fff;border-radius:var(--card-radius);padding:30px 28px;box-shadow:0 6px 24px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:16px}
.uw-testimonials-stars{display:flex;gap:3px}
.uw-star{width:18px;height:18px;fill:#d9d5cc}
.uw-star.on{fill:var(--sale)}
.uw-review-quote{font-size:14.5px;line-height:1.65;color:#333;font-style:normal}
.uw-review-by{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.uw-review-name{font-family:var(--font-head);font-weight:600;font-size:14px}
.uw-review-city{font-size:12.5px;color:var(--muted)}

/* ---------- BRANDS GRID (styled text chips) ------------------------------ */
.uw-brands{padding:56px 0}
.uw-brands-title{text-align:center;font-size:30px;margin-bottom:32px}
.uw-brands-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.uw-brand-chip{display:flex;align-items:center;justify-content:center;text-align:center;min-height:72px;padding:14px 18px;
  background:var(--header-bg);border:1px solid #e4e1da;border-radius:var(--btn-radius);
  font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--olive-dark);letter-spacing:.01em;
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.uw-brand-chip:hover{background:#fff;border-color:var(--olive);color:var(--olive);transform:translateY(-2px)}

/* ---------- VIBE COLLAGE ("Shop by Vibe" rounded tiles, olive overlay) --- */
.uw-vibe{padding:56px 0}
.uw-vibe-title.center{text-align:center;font-size:32px;margin-bottom:8px}
.uw-vibe-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:36px}
.uw-vibe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.uw-vibe-card{position:relative;display:block;border-radius:var(--card-radius);overflow:hidden;aspect-ratio:4/3;background:#ddd}
.uw-vibe-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.uw-vibe-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,54,32,.15) 0%,rgba(107,110,61,.72) 100%);transition:opacity .3s ease}
.uw-vibe-label{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff;font-family:var(--font-head);font-weight:600;font-size:22px;
  text-shadow:0 1px 6px rgba(0,0,0,.35);text-transform:capitalize}
.uw-vibe-card:hover img{transform:scale(1.05)}
.uw-vibe-card:hover .uw-vibe-ov{opacity:.9}

/* ---------- RESPONSIVE: 900px (tablet) ----------------------------------- */
@media(max-width:900px){
  .uw-stats{padding:48px 0}
  .uw-stats-intro h2{font-size:27px}
  .uw-stat-num{font-size:48px}
  .uw-stat-unit{font-size:28px}

  .uw-iwt-grid{grid-template-columns:1fr;gap:28px}
  .uw-iwt-copy h2{font-size:27px}

  .uw-testimonials-row{grid-template-columns:repeat(2,1fr);gap:18px}
  .uw-testimonials-title,.uw-vibe-title.center{font-size:27px}

  .uw-brands-grid{grid-template-columns:repeat(3,1fr)}

  .uw-vibe-grid{grid-template-columns:repeat(2,1fr)}
  .uw-vibe-label{font-size:19px}
}

/* ---------- RESPONSIVE: 560px (small) ------------------------------------ */
@media(max-width:560px){
  .uw-stats-row{grid-template-columns:1fr;gap:32px}
  .uw-stat{padding:0}

  .uw-reviews-row{grid-template-columns:1fr}

  .uw-brands-grid{grid-template-columns:repeat(2,1fr)}

  .uw-vibe-grid{grid-template-columns:1fr}
  .uw-vibe-card{aspect-ratio:16/9}
}