/* ═══════════════════════════════════════════════════════════════
   NUDGEBEE INTEGRATIONS PAGE
   Page-scoped styles. Tokens only, no new colours or type scales.
   Prefix: itgp-
   ═══════════════════════════════════════════════════════════════ */

/* ═══ HERO (compact) ════════════════════════════════════════════ */
.itgp-hero {
  /* top padding clears the 72px fixed navbar */
  padding: 104px var(--gutter) var(--sp-xl);
  background: var(--white);
  text-align: center;
}
.itgp-hero-inner { max-width: 640px; margin: 0 auto; }
.itgp-hero-eyebrow { margin-left: auto; margin-right: auto; margin-bottom: 14px; }
.itgp-hero-h {
  font-family: var(--fh);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800; color: var(--ink);
  letter-spacing: -.035em; line-height: 1.1;
  margin-bottom: var(--sp-sm);
}
.itgp-hero-h .as-hl {
  color: var(--ink); background: var(--yellow);
  padding: 0 10px 2px; border-radius: 7px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.itgp-hero-lead {
  font-size: 1rem; color: var(--ink-light); line-height: 1.65;
  max-width: 560px; margin: 0 auto;
}

/* ═══ DIRECT-ANSWER BAND ════════════════════════════════════════ */
.itgp-answer-band { padding: 0 var(--gutter) var(--sp-xl); background: var(--white); }
.itgp-answer-inner {
  max-width: var(--max-w); margin: 0 auto;
  background: var(--purple-pale); border: 1px solid var(--border-mid);
  border-left: 4px solid var(--purple); border-radius: var(--r-lg); padding: var(--sp-xl);
}
.itgp-answer-h { font-family: var(--fh); font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: var(--sp-sm); }
.itgp-answer { font-size: 1.02rem; color: var(--text); line-height: 1.7; }

/* ═══ FAQ (reuses the shared #faq component) ════════════════════ */
.itgp-faq .faq-a.open { max-height: 360px; }

/* ═══ LAYOUT: LEFT SIDEBAR FILTER + CARDS ═══════════════════════ */
.itgp-layout {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--sp-lg) var(--gutter) var(--sp-4xl);
  display: grid; grid-template-columns: 210px 1fr;
  gap: var(--sp-2xl); align-items: start;
}
.itgp-side { position: sticky; top: 92px; }
.itgp-side-inner { display: flex; flex-direction: column; gap: 3px; }
.itgp-side-label {
  font-family: var(--fh); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); padding: 0 12px 8px;
}
.itgp-chip {
  font-family: var(--fb); font-size: .88rem; font-weight: 600;
  color: var(--mid); text-align: left;
  background: transparent; border: none;
  border-radius: var(--r-sm); padding: 8px 12px;
  transition: color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}
.itgp-chip:hover { color: var(--ink); background: var(--off); }
.itgp-chip.active {
  color: var(--navy); font-weight: 700;
  background: var(--purple-pale);
  box-shadow: inset 3px 0 0 var(--yellow);
}

.itgp-body { min-width: 0; }

/* ═══ CATEGORY SECTIONS ═════════════════════════════════════════
   Section break = a subtle background-colour change. Alternating
   categories sit on a light tinted panel; the rest stay on white.   */
.itgp-cat {
  padding: var(--sp-lg);
  border-radius: var(--r-lg);
  scroll-margin-top: 90px;
}
.itgp-cat + .itgp-cat { margin-top: var(--sp-sm); }
.itgp-cat:nth-of-type(even) { background: var(--off); }
.itgp-cat-head { margin-bottom: var(--sp-lg); }
.itgp-cat-h {
  font-family: var(--fh); font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 800; color: var(--ink); letter-spacing: -.03em;
}
.itgp-cat-sub {
  margin-top: 6px;
  font-size: .9rem; color: var(--ink-light); line-height: 1.6;
  max-width: 640px;
}

/* ═══ CARD GRID (smaller, denser) ═══════════════════════════════ */
.itgp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-md);
}
.itgp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  transition: transform .2s var(--ease-out-expo), border-color var(--dur-fast), box-shadow .2s;
}
.itgp-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-mid);
  box-shadow: 0 8px 26px rgba(27, 45, 74, .08);
}
.itgp-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: var(--off); border: 1px solid var(--border);
  margin-bottom: 10px;
}
.itgp-logo img { width: 26px; height: 26px; object-fit: contain; }
.itgp-mono {
  font-family: var(--fh); font-size: .82rem; font-weight: 800;
  color: var(--navy); letter-spacing: -.02em;
  line-height: 1; text-transform: uppercase;
}
.itgp-card-h {
  font-family: var(--fh); font-size: .92rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em; margin-bottom: 4px;
}
.itgp-card-p { font-size: .82rem; color: var(--ink-light); line-height: 1.5; }

/* ═══ CLOSING NOTE ══════════════════════════════════════════════ */
.itgp-note {
  margin-top: var(--sp-xl); padding-top: var(--sp-lg);
  border-top: 1px solid var(--border);
  font-size: .85rem; color: var(--muted); line-height: 1.65;
}

/* ═══ FOCUS VISIBILITY ══════════════════════════════════════════ */
.itgp-chip:focus-visible,
.itgp-hero a:focus-visible,
.itgp-card a:focus-visible {
  outline: 2px solid var(--purple); outline-offset: 2px; border-radius: var(--r-sm);
}

/* ═══ RESPONSIVE ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Sidebar becomes a sticky horizontal scroller above the cards. */
  .itgp-layout { grid-template-columns: 1fr; gap: var(--sp-md); padding-top: 0; }
  .itgp-side {
    position: sticky; top: 72px; z-index: 40;
    margin: 0 calc(-1 * var(--gutter));
    padding: 10px var(--gutter);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .itgp-side-inner { flex-direction: row; gap: var(--sp-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .itgp-side-label { display: none; }
  .itgp-chip { flex-shrink: 0; border: 1px solid var(--border-mid); border-radius: var(--r-pill); }
  .itgp-chip.active { box-shadow: none; background: var(--yellow); border-color: var(--yellow); }
}
@media (max-width: 720px) {
  .itgp-hero { padding: 92px var(--gutter-sm) var(--sp-lg); }
  .itgp-layout { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
  .itgp-side { margin: 0 calc(-1 * var(--gutter-sm)); padding: 10px var(--gutter-sm); }
  .itgp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}