/* review-wall.njk: the /reviews/ page for a firm with a lot of reviews. Opt-in (`optInCss`), so no other
   demo carries it. GH Plumbing & Heating, 6 Oct 2026. Unlayered, so it beats the utilities beside it. */

.rw { background-image: var(--ph-noise), radial-gradient(60% 40% at 90% 0%, color-mix(in srgb, var(--color-glow, var(--color-brand)) 24%, transparent), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--color-ink) 90%, var(--color-glow, var(--color-brand))), var(--color-ink) 55%, color-mix(in srgb, var(--color-ink) 92%, #000)); }

/* ---- what they say most */
.rw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.rw-tile { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
.rw-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rw-tile-n { font-size: clamp(2.1rem, 8vw, 2.9rem); line-height: 1; color: var(--color-star-bright, #f5b400); }
.rw-tile-l { font-weight: 700; font-size: 0.98rem; line-height: 1.25; margin-top: 0.3rem; }
.rw-tile-of { font-size: 0.8rem; opacity: 0.72; }

/* ---- the filters */
.rw-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.2rem 0 1.2rem; padding: 0.2rem 0; }
.rw-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.45rem 1rem; border-radius: 999px; font: inherit; font-size: 0.92rem; font-weight: 650; color: #fff; cursor: pointer; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); transition: background-color 0.18s, box-shadow 0.18s; }
.rw-chip b { font-weight: 800; font-variant-numeric: tabular-nums; opacity: 0.8; }
.rw-chip:hover { background: rgb(255 255 255 / 0.14); }
.rw-chip.is-on { background: #fff; color: var(--color-ink); box-shadow: none; }
.rw-chip.is-on b { opacity: 0.7; }
.rw-chip:focus-visible { outline: 3px solid var(--color-star-bright, #f5b400); outline-offset: 2px; }

/* ---- the wall */
.rw-wall { columns: 1; column-gap: 1rem; }
.rw-card { break-inside: avoid; margin: 0 0 1rem; padding: 1.35rem; border-radius: 1rem; background: #fff; color: var(--color-body, #334155); box-shadow: 0 18px 36px -24px rgb(0 0 0 / 0.7); display: flex; flex-direction: column; }
.rw-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rw-plat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-body-soft, #475569); }
.rw-text { margin: 0.9rem 0 0; line-height: 1.65; color: var(--color-body, #334155); white-space: pre-line; }
.rw-foot { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-paper-line, #e2e8f0); display: flex; flex-direction: column; gap: 0.55rem; }
.rw-author { font-weight: 800; color: var(--color-ink); }
.rw-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rw-tag { padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 650; color: var(--color-brand-deep, #1b4fb3); background: color-mix(in srgb, var(--color-brand) 10%, #fff); }
.rw-feature { column-span: all; padding: clamp(1.5rem, 4vw, 2.6rem); }
.rw-feature .rw-text { font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1.55; font-weight: 500; color: var(--color-ink); }
.rw-none { margin: 2rem 0; text-align: center; opacity: 0.8; }
.rw-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.4rem; margin-top: 1.2rem; }
.rw-all { background: none; border: 0; padding: 0.6rem 0.2rem; font: inherit; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---- your turn */
.rw-leave { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 3.4rem; padding-top: 2.4rem; border-top: 1px solid rgb(255 255 255 / 0.16); }
.rw-leave-btns { display: flex; flex-direction: column; gap: 0.7rem; }
.rw-leave-btns .btn { width: 100%; }

@media (min-width: 640px) {
  .rw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rw-tile:last-child:nth-child(odd) { grid-column: auto; }
  .rw-leave-btns { flex-direction: row; }
  .rw-leave-btns .btn { width: auto; }
}
@media (min-width: 768px) {
  .rw-wall { columns: 2; column-gap: 1.1rem; }
  .rw-leave { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .rw-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; }
  .rw-bar { position: sticky; top: 4.6rem; z-index: 5; margin-inline: -0.5rem; padding: 0.7rem 0.5rem; background: color-mix(in srgb, var(--color-ink) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
@media (min-width: 1100px) {
  .rw-wall { columns: 3; column-gap: 1.2rem; }
}