/* ==========================================================================
   RIA Advisory — PRODUCTS PAGE  (2026-08-06)

   Brief: mirror the structure of the existing product site
   (cp-website.demo.riaapps.com) — an "Explore the Product Suite" grid with
   category filter pills — but the KEY behavioural requirement is different
   from a normal listing page:

     "when a user clicks a specific product from the navigation bar, it should
      direct them to the Products page with the selected product highlighted,
      while still displaying the remaining products on the same page."

   So the nav links are hash deep-links (products/#test-automation) rather
   than separate detail pages. On arrival the matching card gets `.is-focus`,
   which draws a ring and lifts it — but NOTHING is hidden. The filter is
   forced back to "All" on a deep-link so the other eight stay on screen,
   which is the explicit requirement.

   Namespace: pr-. Reuses tokens from tokens.css and the shared .btn/.wrap.
   RULES (project-wide): clamp()/calc() need SPACES around +/- ; grid/flex
   text children need min-width: 0.
   ========================================================================== */

/* ==========================================================================
   HERO — same linear-only light-blue/grey treatment as the industry heroes
   (client 2026-08-06: no circles). Kept in sync with .oc-hero deliberately.
   ========================================================================== */
.pr-hero { position: relative; overflow: hidden; isolation: isolate; text-align: left;
  background:
    linear-gradient(100deg, rgba(150,161,179,.62) 0%, rgba(150,161,179,.18) 38%, rgba(150,161,179,0) 58%),
    linear-gradient(255deg, rgba(158,199,232,.58) 0%, rgba(158,199,232,.22) 34%, rgba(158,199,232,0) 62%),
    linear-gradient(158deg, #a7b2c3 0%, #c0cad8 26%, #d6dfe9 50%, #e8edf3 74%, #f7f8f6 100%);
  padding-block: clamp(3.4rem, 2.4rem + 4.4vw, 6rem) clamp(2.6rem, 2rem + 2.6vw, 4rem); }
.pr-hero__in { position: relative; z-index: 1; max-width: 44rem; }
.pr-hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .42rem 1rem; border-radius: 30px;
  background: rgba(255,255,255,.8); border: 1px solid rgba(29,65,121,.16); backdrop-filter: blur(8px);
  font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy); }
.pr-hero__eyebrow i { color: var(--orange); }
.pr-hero h1 { font-size: clamp(2.3rem, 1.35rem + 4vw, 4.2rem); line-height: 1.04; letter-spacing: -.032em; margin: 1.3rem 0 1.2rem; }
.pr-hero h1 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pr-hero__lead { color: var(--slate); font-size: clamp(1.02rem, .96rem + .45vw, 1.2rem); line-height: 1.66; max-width: 54ch; margin: 0 0 2.1rem; }
.pr-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ==========================================================================
   FILTER PILLS — mirrors the reference site's All / Digital Engagement /
   Operational Efficiency / Maintenance Optimisation row.
   ========================================================================== */
.pr-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 0 auto clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); }
.pr-filter__btn { flex: none; padding: .58rem 1.15rem; border-radius: 30px; border: 1px solid var(--line);
  background: #fff; color: var(--slate); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s cubic-bezier(.22,1,.36,1); }
.pr-filter__btn:hover { border-color: var(--sky); color: var(--navy); transform: translateY(-2px); }
.pr-filter__btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 16px 30px -20px rgba(29,65,121,.7); }
.pr-filter__count { font-family: var(--font-mono, monospace); font-size: .7rem; opacity: .7; margin-left: .35rem; }

/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */
/* align-items defaults to `stretch` deliberately — every card in a row matches
   the tallest one. `.pr-card` is a flex column and `.pr-card__more` has
   margin-top:auto, so the "Learn more" link pins to the bottom of each card
   and the row reads as one clean band regardless of copy length. */
.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .8rem + .8vw, 1.5rem); }
.pr-grid > * { min-width: 0; }

/* Filtered-out cards are removed from flow entirely so the grid re-packs
   rather than leaving holes. */
.pr-card[hidden] { display: none; }

.pr-card { position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 26px 48px -40px rgba(11,24,48,.36); scroll-margin-top: 110px;
  transition: transform .38s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.pr-card:hover { transform: translateY(-6px); border-color: var(--sky); box-shadow: 0 34px 60px -36px rgba(11,24,48,.36); }

/* Dark media header with the product glyph, per the reference layout. */
.pr-card__img { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--navy); }
.pr-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.pr-card__ico { position: absolute; left: 1.15rem; bottom: 1.15rem; z-index: 2; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(6px); }
.pr-card__ico svg { width: 22px; height: 22px; }
.pr-card__stat { position: absolute; right: 1.15rem; bottom: 1.15rem; z-index: 2; display: flex;
  flex-direction: column; align-items: flex-end; color: #fff; }
.pr-card__stat b { font-family: var(--font-display, inherit); font-size: 1.35rem; line-height: 1; }
.pr-card__stat span { font-family: var(--font-mono, monospace); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; opacity: .82; }

.pr-card__body { display: flex; flex-direction: column; gap: .55rem; flex: 1;
  padding: clamp(1.15rem, .95rem + .7vw, 1.6rem); }
.pr-card__tag { align-self: flex-start; padding: .26rem .62rem; border-radius: 20px;
  font-family: var(--font-mono, monospace); font-size: .6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; }
/* One tint per category, matching the filter taxonomy. */
.pr-card__tag[data-cat="digital-engagement"]      { background: rgba(77,159,215,.14); color: #1d4179; }
.pr-card__tag[data-cat="operational-efficiency"]  { background: rgba(247,148,31,.16); color: #8a5106; }
.pr-card__tag[data-cat="maintenance-optimisation"]{ background: rgba(46,139,109,.14); color: #1f6b52; }
.pr-card__body h3 { font-size: 1.16rem; line-height: 1.28; letter-spacing: -.015em; }
.pr-card__body > p { color: var(--slate); font-size: .92rem; line-height: 1.6; }
.pr-card__ul { display: flex; flex-direction: column; gap: .42rem; margin-top: .2rem; padding-left: 0; list-style: none; }
.pr-card__ul li { display: flex; gap: .5rem; align-items: flex-start; font-size: .86rem;
  line-height: 1.5; color: var(--slate); }
.pr-card__ul i { flex: none; margin-top: .22rem; font-size: .78rem; color: var(--sky); }
.pr-card__more { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  margin-top: auto; padding-top: 1rem; font-size: .86rem; font-weight: 600; color: var(--navy); }
.pr-card__more svg { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.pr-card:hover .pr-card__more svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   DEEP-LINK FOCUS — set by products.js when the URL carries a product hash.
   Deliberately a RING + lift rather than hiding the others: the requirement
   is "selected product highlighted, while still displaying the remaining
   products on the same page".
   -------------------------------------------------------------------------- */
.pr-card.is-focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,148,31,.28), 0 34px 60px -34px rgba(11,24,48,.4); }
.pr-card.is-focus .pr-card__img { background: #123063; }
.pr-card.is-focus::after { content: "Selected"; position: absolute; z-index: 3; top: .85rem; right: .85rem;
  padding: .28rem .68rem; border-radius: 20px; background: var(--orange); color: #10233f;
  font-family: var(--font-mono, monospace); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; }
/* One-shot attention pulse on arrival; products.js removes .is-pulse after it runs. */
.pr-card.is-pulse { animation: prPulse 1.5s cubic-bezier(.22,1,.36,1) 1; }
@keyframes prPulse {
  0%   { box-shadow: 0 0 0 0 rgba(247,148,31,.55), 0 34px 60px -34px rgba(11,24,48,.4); }
  60%  { box-shadow: 0 0 0 14px rgba(247,148,31,0), 0 34px 60px -34px rgba(11,24,48,.4); }
  100% { box-shadow: 0 0 0 3px rgba(247,148,31,.28), 0 34px 60px -34px rgba(11,24,48,.4); }
}

@media (max-width: 1050px) { .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .pr-grid { grid-template-columns: minmax(0, 1fr); } }