/* ============================================================================
   VIQ Content Components (vc-*) — R3
   Shared, token-driven content system for inner/silo pages so every page
   matches the homepage v2 polish (navy + gold) WITHOUT depending on the
   purged Tailwind build. Color/type tokens come from includes/header.php
   (:root --viq-*). This file adds layout tokens + content components.
   The vc- prefix guarantees no collision with the homepage viq-* system.
   ============================================================================ */

:root {
  --vc-maxw:        1240px;
  --vc-radius:      12px;
  --vc-radius-lg:   16px;
  --vc-radius-xl:   20px;
  --vc-shadow-sm:   0 1px 2px rgba(15, 29, 50, .06);
  --vc-shadow:      0 6px 18px rgba(15, 29, 50, .08);
  --vc-shadow-lg:   0 16px 38px -14px rgba(15, 29, 50, .18);
  --vc-shadow-xl:   0 28px 56px -20px rgba(15, 29, 50, .22);
  --vc-gold-tint:   rgba(197, 160, 89, .10);
  --vc-gold-tint-2: rgba(197, 160, 89, .20);
  --vc-navy-tint:   rgba(26, 43, 73, .055);
  --vc-green:       #16a34a;
  --vc-red:         #dc2626;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.vc-breadcrumb { background: var(--viq-warm); border-bottom: 1px solid var(--rule-soft); }
.vc-breadcrumb__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; font-size: 13px; }
.vc-breadcrumb a { color: var(--viq-gray-600); transition: color .15s ease; }
.vc-breadcrumb a:hover { color: var(--accent); }
.vc-breadcrumb__sep { color: var(--viq-gray-500); opacity: .6; }
.vc-breadcrumb__current { color: var(--viq-navy); font-weight: 600; }

/* ── Eyebrow ──────────────────────────────────────────────── */
.vc-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--viq-gold-dark); margin-bottom: 14px;
}

/* ── Inner-page hero ──────────────────────────────────────── */
.vc-hero {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(197,160,89,.10) 0%, rgba(197,160,89,0) 55%),
    linear-gradient(180deg, var(--viq-warm) 0%, #fff 100%);
  border-bottom: 1px solid var(--rule-soft);
  padding: 44px 0 40px;
}
.vc-hero__inner { max-width: 820px; }
.vc-hero__title {
  font-family: var(--font-serif); font-weight: 700; color: var(--viq-navy);
  font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 16px;
}
.vc-hero__title em { font-style: italic; color: var(--viq-gold-dark); }
.vc-hero__lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--fg-2); margin: 0 0 24px; max-width: 680px; }
.vc-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Sections ─────────────────────────────────────────────── */
.vc-section { padding: 56px 0; }
.vc-section--alt { background: var(--viq-warm); }
.vc-section--navy { background: var(--viq-navy); color: #e7ecf4; }
.vc-section__head { max-width: 720px; margin: 0 0 32px; }
.vc-section__title {
  font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--viq-navy);
  line-height: 1.2; letter-spacing: -.01em; margin: 0 0 12px;
}
.vc-section--navy .vc-section__title { color: #fff; }
.vc-section__intro { font-size: 16px; line-height: 1.65; color: var(--fg-2); margin: 0; }

/* ── Two-column layout (content + aside) ──────────────────── */
.vc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.vc-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }

/* ── Prose ────────────────────────────────────────────────── */
.vc-prose { font-size: 16.5px; line-height: 1.72; color: var(--fg-2); }
.vc-prose > * + * { margin-top: 18px; }
.vc-prose h2 { font-size: clamp(21px, 2.6vw, 27px); font-weight: 700; color: var(--viq-navy); line-height: 1.25; margin: 40px 0 4px; letter-spacing: -.01em; }
.vc-prose h3 { font-size: 19px; font-weight: 700; color: var(--viq-navy); margin: 28px 0 2px; }
.vc-prose h2 + p, .vc-prose h3 + p { margin-top: 10px; }
.vc-prose p { margin: 0; }
.vc-prose strong { color: var(--viq-navy); font-weight: 600; }
.vc-prose a { color: var(--viq-gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.vc-prose a:hover { color: var(--viq-navy); }
.vc-prose ul, .vc-prose ol { margin: 14px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vc-prose ul li { position: relative; padding-left: 28px; }
.vc-prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--viq-gold);
}
.vc-prose ol { counter-reset: vc; }
.vc-prose ol li { position: relative; padding-left: 38px; counter-increment: vc; }
.vc-prose ol li::before {
  content: counter(vc); position: absolute; left: 0; top: 1px; width: 24px; height: 24px;
  background: var(--vc-navy-tint); color: var(--viq-navy); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

/* ── Cards ────────────────────────────────────────────────── */
.vc-card {
  position: relative; background: #fff; border: 1px solid var(--rule-soft);
  border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow); padding: 26px;
  overflow: hidden;
}
.vc-card--stripe::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--viq-gold), var(--viq-gold-light));
}
.vc-card--navy-stripe::before { background: linear-gradient(90deg, var(--viq-navy), var(--viq-navy-light)); }
.vc-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--viq-navy); }
.vc-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }

/* ── Grids ────────────────────────────────────────────────── */
.vc-grid { display: grid; gap: 22px; }
.vc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Feature (icon + text) ────────────────────────────────── */
.vc-feature { display: flex; gap: 14px; align-items: flex-start; }
.vc-feature__ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--vc-radius);
  background: var(--vc-navy-tint); color: var(--viq-navy);
  display: flex; align-items: center; justify-content: center;
}
.vc-feature h3 { margin: 2px 0 4px; font-size: 16px; font-weight: 700; color: var(--viq-navy); }
.vc-feature p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }

/* ── Checklist (covered / not covered) ────────────────────── */
.vc-check { display: flex; flex-direction: column; gap: 11px; list-style: none; padding: 0; margin: 0; font-size: 14.5px; color: var(--fg-2); }
.vc-check li { position: relative; padding-left: 30px; line-height: 1.5; }
.vc-check li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.vc-check--yes li::before { background-color: rgba(22,163,74,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7 7a1 1 0 01-1.4 0l-3-3a1 1 0 111.4-1.4l2.3 2.29 6.3-6.29a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.vc-check--no li::before { background-color: rgba(220,38,38,.10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc2626'%3E%3Cpath fill-rule='evenodd' d='M10 8.6L6.7 5.3A1 1 0 105.3 6.7L8.6 10l-3.3 3.3a1 1 0 101.4 1.4L10 11.4l3.3 3.3a1 1 0 001.4-1.4L11.4 10l3.3-3.3a1 1 0 10-1.4-1.4L10 8.6z' clip-rule='evenodd'/%3E%3C/svg%3E"); }

/* ── Callout ──────────────────────────────────────────────── */
.vc-callout { border-radius: var(--vc-radius); padding: 16px 18px; font-size: 14.5px; line-height: 1.6; display: flex; gap: 12px; }
.vc-callout__ico { flex: 0 0 auto; }
.vc-callout--info { background: var(--vc-gold-tint); border: 1px solid rgba(197,160,89,.32); color: #6b5320; }
.vc-callout--note { background: var(--vc-navy-tint); border: 1px solid var(--rule-soft); color: var(--fg-2); }
.vc-callout strong { color: var(--viq-navy); }

/* ── Stat row ─────────────────────────────────────────────── */
.vc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vc-stat { background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow-sm); padding: 22px; text-align: center; }
.vc-stat__num { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: var(--viq-navy); line-height: 1; }
.vc-stat__lbl { font-size: 13px; color: var(--fg-3); margin-top: 8px; }

/* ── Comparison / data table ──────────────────────────────── */
.vc-table-wrap { overflow-x: auto; border: 1px solid var(--rule-soft); border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow-sm); }
.vc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 540px; background: #fff; }
.vc-table thead th { background: var(--viq-navy); color: #fff; text-align: left; font-weight: 600; padding: 13px 16px; font-size: 13.5px; }
.vc-table th:first-child, .vc-table td:first-child { position: sticky; left: 0; }
.vc-table tbody td, .vc-table tbody th { padding: 13px 16px; border-top: 1px solid var(--rule-soft); color: var(--fg-2); text-align: left; vertical-align: top; }
.vc-table tbody th { font-weight: 600; color: var(--viq-navy); background: #fff; }
.vc-table tbody tr:nth-child(even) td, .vc-table tbody tr:nth-child(even) th { background: var(--viq-warm); }
.vc-table caption { caption-side: bottom; font-size: 12px; color: var(--fg-3); padding: 10px 4px 0; text-align: left; }

/* ── FAQ (native details) ─────────────────────────────────── */
.vc-faq { display: flex; flex-direction: column; gap: 12px; }
.vc-faq__item { background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow-sm); overflow: hidden; }
.vc-faq__item[open] { box-shadow: var(--vc-shadow); }
.vc-faq__q { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; color: var(--viq-navy); font-size: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.vc-faq__q::-webkit-details-marker { display: none; }
.vc-faq__q::after { content: "+"; font-size: 22px; color: var(--viq-gold-dark); font-weight: 400; transition: transform .2s ease; }
.vc-faq__item[open] .vc-faq__q::after { transform: rotate(45deg); }
.vc-faq__a { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--fg-2); }
.vc-faq__a a { color: var(--viq-gold-dark); font-weight: 600; }

/* ── Aside widgets ────────────────────────────────────────── */
.vc-widget { background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow); padding: 22px; }
.vc-widget--navy { background: linear-gradient(160deg, var(--viq-navy), var(--viq-navy-dark)); color: #e7ecf4; border: 0; }
.vc-widget__title { font-size: 16px; font-weight: 700; color: var(--viq-navy); margin: 0 0 12px; }
.vc-widget--navy .vc-widget__title { color: #fff; }
.vc-widget--navy p { color: #c7d2e4; font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.vc-widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.vc-widget ul a { color: var(--viq-navy); display: flex; gap: 8px; transition: color .15s ease; }
.vc-widget ul a:hover { color: var(--viq-gold-dark); }
.vc-widget ul a::before { content: "→"; color: var(--viq-gold); }

/* ── Related links ────────────────────────────────────────── */
.vc-related__title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; color: var(--viq-navy); margin: 0 0 22px; }
.vc-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vc-related__card {
  display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--rule-soft);
  border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow-sm); padding: 20px 22px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vc-related__card:hover { transform: translateY(-3px); box-shadow: var(--vc-shadow-lg); }
.vc-related__card-title { font-size: 16px; font-weight: 700; color: var(--viq-navy); display: flex; justify-content: space-between; gap: 10px; }
.vc-related__arrow { color: var(--viq-gold-dark); }
.vc-related__card-desc { font-size: 13.5px; line-height: 1.55; color: var(--fg-3); }

/* ── CTA band ─────────────────────────────────────────────── */
.vc-cta { background: linear-gradient(150deg, var(--viq-navy) 0%, var(--viq-navy-dark) 100%); position: relative; overflow: hidden; }
.vc-cta::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,.22), rgba(197,160,89,0) 70%);
}
.vc-cta__inner { position: relative; z-index: 1; padding: 48px 0; display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vc-cta__title { font-family: var(--font-serif); font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: #fff; line-height: 1.2; margin: 0 0 10px; max-width: 620px; }
.vc-cta__text { font-size: 16px; line-height: 1.6; color: #c7d2e4; margin: 0; max-width: 560px; }
.vc-cta__actions { display: flex; flex-direction: column; gap: 12px; min-width: 230px; }
.vc-cta__actions .viq-btn { width: 100%; }

/* ── Pill tag row ─────────────────────────────────────────── */
.vc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-tag { font-size: 12.5px; font-weight: 600; color: var(--viq-navy); background: var(--vc-gold-tint); border: 1px solid rgba(197,160,89,.3); border-radius: 999px; padding: 5px 12px; }

/* ── Article byline ───────────────────────────────────────── */
.vc-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-3); margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-soft); }
.vc-byline__by { color: var(--viq-navy); font-weight: 600; }
.vc-byline__sep { opacity: .5; }

/* ── Article card (insights hub) ─────────────────────────── */
.vc-post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow-sm); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.vc-post:hover { transform: translateY(-3px); box-shadow: var(--vc-shadow-lg); }
.vc-post__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vc-post__cat { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--viq-gold-dark); }
.vc-post__title { font-size: 18px; font-weight: 700; color: var(--viq-navy); line-height: 1.3; margin: 0; }
.vc-post__excerpt { font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.vc-post__meta { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--fg-3); display: flex; gap: 8px; }
.vc-post__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--viq-warm); }

/* ── Feature image (article + silo product imagery) ───────── */
.vc-feature-img { margin: 0 0 6px; }
.vc-feature-img img {
  width: 100%; max-height: 360px; object-fit: cover; display: block;
  border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow-lg);
  border: 1px solid var(--rule-soft);
}

/* ── Utility ──────────────────────────────────────────────── */
.vc-lead { font-size: 18px; line-height: 1.6; color: var(--fg-2); }
.vc-muted { color: var(--fg-3); font-size: 13px; }
.vc-mt-0 { margin-top: 0 !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .vc-layout { grid-template-columns: 1fr; gap: 36px; }
  .vc-aside { position: static; }
  .vc-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .vc-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .vc-section { padding: 40px 0; }
  .vc-grid--2, .vc-grid--3, .vc-grid--4 { grid-template-columns: 1fr; }
  .vc-stats { grid-template-columns: 1fr; }
  .vc-related { grid-template-columns: 1fr; }
  .vc-cta__inner { padding: 36px 0; }
  .vc-cta__actions { width: 100%; }
}