/* ============================================================================
   /agentic-ai-framework — page delta sheet
   ----------------------------------------------------------------------------
   This page is built entirely from sections that already exist elsewhere, so it
   loads /styles/product-development.css first (see STYLE_BASE in
   app/(site)/[slug]/page.tsx) and adds only what that sheet does not cover:

     1. the #integrations logo marquee (lifted verbatim from qualnetics.css —
        the only section on this page that is not in the PD family),
     2. the section bands this page alternates differently,
     3. the two illustration wrappers (hero and #why).

   The architecture diagram and the AIDLC timeline get NO overrides: the reference
   uses the two-layer stack and the five-stage timeline the base sheet already
   draws. Anything a shared section emits inline (e.g. the #what-delivers card
   grid and icon size) is likewise not repeated here.

   No :root block and no new design values: every declaration below references a
   token already defined in site.css (design-system.md §2, §13.1). No !important —
   each override wins on specificity alone.
   ========================================================================== */


/* ── 1. Section bands ──────────────────────────────────────────────────────
   The page alternates white → gray → white → gray → white so each band reads as
   a distinct step. #id.class beats the sheet's bare .class rules on specificity,
   so the shared sections keep their own defaults on every other page. */
#about-qualnetics.section--white { background: var(--bg-soft); }
#what-delivers.section--gray     { background: var(--bg-white); }
#architecture.section--white     { background: var(--bg-soft); }


/* ── 2. About the Framework — stat row ─────────────────────────────────────
   Four hairline-divided stats. The shared band centres its intro at 820px; this
   page's heading is longer, so it gets the wider readable column and a balanced
   two-line wrap rather than an orphan. */
#about-qualnetics .container > div:first-of-type {
  max-width: var(--container-wide);
}
#about-qualnetics .container > div:first-of-type h2 {
  font-size: var(--ps-text-h3);
  text-wrap: balance;
}


/* Architecture and How It Works need NO overrides: the reference's diagram is the
   two-layer stack the base sheet was drawn for, and its timeline is five stages,
   which is exactly the base grid. Nothing added here on purpose. */


/* ── 3. Hero illustration ──────────────────────────────────────────────────
   The framework diagram is the hero's subject rather than a device mockup, so it
   is centred and given room to breathe instead of being pinned to the right edge
   like the Product Development product shot. */
.pd-hero-img-wrap {
  height: auto;
  padding: var(--space-3) 0;
  justify-content: center;
}
.pd-hero-img-wrap img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-position: center center;
  filter: drop-shadow(0 22px 48px rgba(16, 24, 40, 0.12));
}
@media (min-width: 1441px) {
  .pd-hero-img-wrap { height: auto; }
  .pd-hero-img-wrap img { max-height: 740px; }
}
@media (max-width: 900px) {
  .pd-hero-img-wrap { height: auto; }
  .pd-hero-img-wrap img { max-height: 380px; }
}
@media (max-width: 767px) {
  .pd-hero-img-wrap { padding: 0; }
  .pd-hero-img-wrap img { max-height: 300px; margin: 0 auto; }
}


/* ── 4. Why illustration ───────────────────────────────────────────────────
   The shared sheet sizes .why-img-box svg (every other page's visual is a built
   diagram). This page's visual is artwork, so the <img> needs the same treatment. */
.why-img-box .why-illustration {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 22px 48px rgba(16, 24, 40, 0.12));
}


/* ── 5. Integrations — scrolling logo marquee ──────────────────────────────
   Lifted from qualnetics.css: the PD sheet carries .int-marquee-* and .int-logo
   but not the grouped layout this section renders. */
.int-marquee-wrap {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.int-marquee-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.int-marquee-viewport::-webkit-scrollbar { display: none; }
.int-marquee-viewport:active { cursor: grabbing; }
.int-marquee-track {
  display: flex;
  align-items: flex-end;
  gap: 0;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Each group: label on top, logos below. */
.int-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 var(--space-1);
  flex-shrink: 0;
}
.int-group-label {
  font-family: var(--font-sans, 'Outfit', sans-serif);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--ink-600);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  text-align: center;
}
.int-group-logos {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.int-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 96px;
  padding: var(--space-1) 4px;
  user-select: none;
}
.int-logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
  transition: transform var(--dur-fast) ease;
}
.int-logo:hover img { transform: scale(1.1); }
.int-logo span {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--ink-600);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* Vertical separator between groups. */
.int-group-sep {
  width: 1px;
  height: 56px;
  background: var(--ink-200);
  margin: 0 28px var(--space-1);
  flex-shrink: 0;
  align-self: flex-end;
}

@media (min-width: 1441px) {
  .int-logo { height: clamp(50px, 3.8vw, 68px); }
  .int-group-label { font-size: var(--ps-text-nav); }
}
@media (max-width: 480px) {
  .int-logo { min-width: 80px; }
  .int-logo img { width: 26px; height: 26px; }
  .int-logo span { font-size: var(--fs-eyebrow); }
  .int-group-sep { margin: 0 var(--space-2) var(--space-1); }
}