/* ==========================================================================
   CTPL · components.css
   Cross-page patterns: rules that several pages were each redeclaring under
   their own section names. Loaded AFTER global.css and BEFORE the page sheet,
   so a page can still override anything here without !important.

   Contents
     1. Headline highlight
     2. Hero wash (light sections)
     3. Dark surface (navy sections)
     4. Grid texture, dark variant
     5. Dark-hero furniture (tag pills, action row, outline button)
     6. Product accent tokens
     7. DECONTI range navigation
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Headline highlight

   The <span class="hl"> inside a page h1. Previously defined five times, once
   per hero, with identical declarations. Pages with a dark hero override the
   colour and suppress the underline (see qraider.css / deconti.css).
   -------------------------------------------------------------------------- */
.hl{color:var(--blue);position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--mint);opacity:.55;z-index:-1}

/* --------------------------------------------------------------------------
   2. Hero wash

   The pale cobalt/red gradient behind the light page heroes: home (.ph),
   About (.abt-hero), Contact (.ct-hero) and Services (.hero). Apply alongside
   the page's own hero class, which keeps its layout and spacing.
   -------------------------------------------------------------------------- */
.hero-wash{position:relative;overflow:hidden;background:
    radial-gradient(900px 560px at 92% -8%,rgba(42,90,214,.14),transparent 60%),
    radial-gradient(680px 520px at -2% 118%,rgba(232,24,32,.06),transparent 55%),
    linear-gradient(180deg,#fff 0%,var(--paper) 100%)}

/* --------------------------------------------------------------------------
   3. Dark surface

   The navy band used by About (.stats, .vm), Services (.why) and the Q-Raider
   hero (.mp-hero). Layout, padding and inner colours stay with the page.
   -------------------------------------------------------------------------- */
.surface-dark{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--navy) 0%,var(--navy2) 100%);color:#fff}

/* --------------------------------------------------------------------------
   4. Grid texture, dark variant

   .grid-tex (global.css) draws cobalt lines for light sections. On a dark
   surface the lines need to be white instead. The mask that fades the texture
   differs per section, so it stays in the page sheet; only the line colour is
   shared here.
   -------------------------------------------------------------------------- */
.grid-tex--dark{background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}

/* --------------------------------------------------------------------------
   5. Dark-hero furniture

   The credential pills, action row and glassy outline button introduced by the
   DECONTI hero. Shared so every product page under DECONTI gets an identical
   hero treatment.
   -------------------------------------------------------------------------- */
.tag-row{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:2.4rem}
.tag-pill{font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:.45rem .85rem;
  border-radius:99px;color:var(--mint);display:inline-flex;align-items:center;gap:.45rem;
  backdrop-filter:blur(10px)}
.tag-pill svg{width:14px;height:14px;color:var(--mint)}
.hero-actions{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
.btn-line-white{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.22);backdrop-filter:blur(12px)}
.btn-line-white:hover{background:rgba(255,255,255,.15);border-color:#fff}

/* --------------------------------------------------------------------------
   6. Product accent tokens
   Each product page overrides --pp-accent in its own sheet so the four pages
   read as one family with distinct identities.
   -------------------------------------------------------------------------- */
:root{
  --pp-accent:var(--blue-2);
  --pp-accent-soft:rgba(42,90,214,.12);
}

/* --------------------------------------------------------------------------
   7. DECONTI range navigation
   The four product categories. Rendered by js/ui/range-nav.js as the grid on
   the DECONTI overview and as the strip at the foot of every product page, so
   it lives here rather than in the product-page template.
   -------------------------------------------------------------------------- */
.range-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.range-card{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:22px 20px;box-shadow:0 1px 2px rgba(15,35,90,.06),0 6px 18px rgba(15,35,90,.05);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.range-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#b9cbe9}
.range-card .r-ic{width:38px;height:38px;border-radius:11px;background:var(--mint-soft);color:var(--teal);
  display:grid;place-items:center;margin-bottom:.3rem}
.range-card .r-ic svg{width:19px;height:19px}
.range-card strong{font-family:var(--fd);font-size:.98rem;font-weight:600;color:var(--ink)}
.range-card span{font-size:.84rem;color:var(--ink-soft);line-height:1.5}
.range-card .r-flag{margin-top:.35rem;font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal)}
.range-card.is-current{background:var(--paper);border-color:var(--border)}
.range-card.is-current strong{color:var(--pp-accent)}
.range-card.is-current .r-flag{color:var(--pp-accent)}
/* Sections whose page is not built yet: visibly present, deliberately inert. */
.range-card.is-pending{background:var(--paper);border-style:dashed;box-shadow:none}
.range-card.is-pending .r-ic{background:var(--paper-2);color:var(--ink-soft)}
.range-card.is-pending strong,.range-card.is-pending span{color:var(--ink-soft)}
.range-card.is-pending .r-flag{color:var(--ink-soft);opacity:.8}

/* --- Feature variant -------------------------------------------------------
   The DECONTI overview, where the four categories are the main event rather
   than secondary navigation. Each card carries a tinted cover (icon + catalogue
   size), the groups inside, and an explicit call to action. Per-card colour
   comes from --rc-tint, set inline to match the destination page's accent. */
.range-nav--feature{gap:20px}
.range-card--feature{padding:0;overflow:hidden;gap:0;border-radius:20px}
.range-card--feature:hover{transform:translateY(-5px)}

/* Cover: the visual aid */
.range-card--feature .rc-cover{position:relative;display:flex;align-items:center;
  justify-content:space-between;gap:.75rem;padding:22px 22px 20px;
  /* Fallback first: browsers without color-mix() still get a tinted cover. */
  background:var(--paper-2);
  background:
    radial-gradient(120% 140% at 85% 0%,color-mix(in srgb,var(--rc-tint) 22%,transparent),transparent 70%),
    linear-gradient(150deg,color-mix(in srgb,var(--rc-tint) 13%,#fff),var(--paper));
  border-bottom:1px solid var(--border)}
.range-card--feature .rc-ic{width:52px;height:52px;border-radius:15px;flex:none;
  display:grid;place-items:center;color:#fff;background:var(--rc-tint);
  box-shadow:var(--shadow);box-shadow:0 6px 16px color-mix(in srgb,var(--rc-tint) 32%,transparent)}
.range-card--feature .rc-ic svg{width:26px;height:26px}
.range-card--feature .rc-count{display:flex;flex-direction:column;align-items:flex-end;
  font-family:var(--fd);font-weight:700;font-size:1.9rem;line-height:1;color:var(--rc-tint);letter-spacing:-.03em}
.range-card--feature .rc-count em{font-family:var(--fm);font-style:normal;font-weight:500;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:.35rem}

/* Body */
.range-card--feature .rc-body{display:flex;flex-direction:column;padding:20px 22px 22px;flex:1}
.range-card--feature strong{font-family:var(--fd);font-size:1.12rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.range-card--feature .rc-blurb{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin-top:.4rem}
.range-card--feature .rc-list{display:flex;flex-direction:column;gap:.4rem;margin:1rem 0 1.1rem;
  padding-top:.9rem;border-top:1px dashed var(--border)}
.range-card--feature .rc-list span{position:relative;padding-left:1.05rem;font-size:.82rem;
  color:var(--ink);line-height:1.4}
.range-card--feature .rc-list span::before{content:"";position:absolute;left:0;top:.45em;
  width:5px;height:5px;border-radius:50%;background:var(--rc-tint)}
.range-card--feature .rc-cta{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--fb);font-weight:600;font-size:.88rem;color:var(--rc-tint)}
.range-card--feature .rc-cta svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.range-card--feature:hover .rc-cta svg{transform:translateX(4px)}
.range-card--feature .rc-cta.is-off{color:var(--ink-soft);font-family:var(--fm);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase}

/* Optional button under the grid, for pages using this block as a summary. */
.range-foot{margin-top:44px;display:flex;justify-content:center}

@media(max-width:1024px){
  .range-nav{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .range-nav{grid-template-columns:1fr}
  .range-foot{margin-top:34px}
  .range-foot .btn{width:100%;justify-content:center}
  .range-card--feature .rc-cover{padding:18px}
  .range-card--feature .rc-body{padding:18px}
  .range-card--feature .rc-count{font-size:1.6rem}
}