/* ============================================================================
   /aidlc — 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 {
  /* h2, not h3: this is the band's own section heading, so it takes the section
     heading step (48px at desktop). It was on --ps-text-h3, which resolves to
     24px and left it reading as a sub-head under its own eyebrow. */
  font-size: var(--ps-text-h2);
  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 headline size ─────────────────────────────────────────────────
   "Ship Enterprise AI End-to-End, Governed at Every Stage." is a long headline,
   and at the shared --ps-text-h1 step it ran to three lines and crowded the
   illustration. Stepped down for this page only.

     >=1441   56px      (was 68px, then 60px)
      769..   48px      (was 64.8px at 1440, 57.6px at 1280, 40.5px at 900)
      <=768   36px      (was 40px)

   56px is the ceiling: it is --ps-text-h1's own top step (36/48/56), so the
   headline never exceeds the design system's largest heading size.

   One flat 48px from 1440 all the way down to 769, so there is no step anywhere
   inside the laptop/tablet range.

   WHAT HAS TO BE BEATEN, and why the selector looks the way it does.
   PdHeroSection renders its own <style> block for every split55 hero:

     .cd-hero-text h1 { font-size: clamp(40px, 4.5vw, 68px) !important; ... }

   That clamp produced every size measured before this change (4.5vw of 1440 is
   64.8px, of 1920 is 86px so it pins to the 68px ceiling, and below ~889px it
   pins to the 40px floor). Two things follow:

     1. !important is mandatory. A plain declaration loses to that rule, and it
        also loses to the element's own inline `style={{ fontSize: ... }}`.
     2. !important alone is NOT enough. `.cd-hero-text h1` is (0,1,1); a bare
        `.isa-hero-grid h1` is also (0,1,1), and the component's <style> sits in
        the document AFTER this sheet, so on a tie it wins. Adding `.hero` makes
        this (0,2,1) and it wins on specificity instead of order.

   The component is shared by Product Development, Cloud & DevOps and the other
   split55 heroes, so it is deliberately left alone. --ps-text-h1 is likewise not
   redefined: it is global and every other page's h1 reads it. Size only, nothing
   else about the headline is touched. */
.hero .isa-hero-grid h1 { font-size: 48px !important; }
@media (min-width: 1441px) {
  .hero .isa-hero-grid h1 { font-size: 56px !important; }
}
@media (max-width: 768px) {
  .hero .isa-hero-grid h1 { font-size: 36px !important; }
}


/* ── 4. 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. */
/* THE ONE THING TO KNOW HERE: site.css caps every pdHero image with

     html body:not(#never) .pd-hero-img-wrap img {
       max-height: clamp(260px, 42vh, 460px) !important;   (420px at 1000px tall)
       max-width:  min(100%, 720px) !important;
     }

   so a product photo can never dominate the hero. That rule carries !important
   AND specificity (0,1,1,3); a plain `.pd-hero-img-wrap img` here is (0,0,1,1),
   so every declaration in this block used to be silently inert no matter what
   number it named. The wrap grew and the image did not move off 420px.

   This page opts out, because here the illustration IS the hero's subject, as it
   is in the reference build (`.cd-hero-img-wrap img { max-height: 880px }`).
   Opting out needs BOTH the same specificity prefix and !important. Keep them if
   you touch these rules. */
html body:not(#never) .pd-hero-img-wrap {
  height: auto !important;          /* let the artwork set the height, as the reference does */
  padding: 0 !important;
  justify-content: center !important;
}
/* 20% SMALLER, BOTH DIMENSIONS, AT EVERY BREAKPOINT.
   The artwork has a fixed 1.23:1 ratio and `height: auto`, so width and height
   are never independent: cutting one cuts the other by the same proportion.
   That means the reduction has to be applied to whichever dimension is actually
   binding in each band, which is NOT the same one throughout — measured:

     >=1101px   width-bound   the image fills its grid column at width:100%
     <=1100px   height-bound  the hero has stacked, so max-height is the limit

   Above 1100px the cut is `width: 80%` (100 -> 80). Below, it is the max-height
   values scaled by 0.8. Setting only one of the two would leave half the page
   unchanged, which is the trap here. */
html body:not(#never) .pd-hero-img-wrap img {
  width: 80% !important;            /* was 100% of the column: -20% w and h */
  height: auto !important;
  max-width: 80% !important;
  max-height: 704px !important;     /* was 880px */
  object-position: center center !important;
  filter: drop-shadow(0 22px 48px rgba(16, 24, 40, 0.12));
}

/* The image is width-bound, not height-bound: it keeps its 1.23:1 ratio, so the
   only way to make it taller is to give its column more room. The split is an
   inline style on .isa-hero-grid (55%/45%, PdHeroSection), and inline styles lose
   only to !important. 48% suits a square-ish diagram where 45% suited a product
   shot. Scoped above 1100px, which is where the base sheet stacks the hero to a
   single column (`grid-template-columns: 1fr !important`) — an unscoped override
   here would load later and win, and the hero would never stack. */
@media (min-width: 1101px) {
  .isa-hero-grid { grid-template-columns: 52% 48% !important; }
}
/* 1100px, not 900px: that is where the hero stacks, and once it does the image
   spans the full container. Capping only below 900px left the 901-1100 band
   rendering the diagram ~767px tall. */
@media (max-width: 1100px) {
  html body:not(#never) .pd-hero-img-wrap img { max-height: 304px !important; }  /* was 380 */
}
@media (max-width: 767px) {
  html body:not(#never) .pd-hero-img-wrap img {
    max-height: 240px !important;   /* was 300 */
    margin: 0 auto !important;
  }
}


/* ── 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); }
}


/* ── 8. In-card supporting text ────────────────────────────────────────────
   Deliberately EMPTY. The capability-card spans (outcome line, Read more /
   Show less) take --ps-text-content, and the outcome tick aligns to the first
   line, but both rules live in site.css instead of here: .cc-card is a shared
   component and every page that renders it had the same drift, so scoping the
   fix to this page would have left the other four wrong. See the
   "CAPABILITY CARDS" block at the foot of site.css. */


/* ── 9. Two section headings that must not wrap ───────────────────────────
   "Autonomous AI that's accountable by design" and "Purpose-built for
   enterprise AI delivery" were breaking to two lines from 1024 up to 1600.
   Neither heading is too long for the viewport - the container is the limit:
   the base sheet caps .section-header at clamp(760px, 60vw, 1100px), which
   resolves to its 760px floor on every screen narrower than ~1267px and to
   960px at 1600.

   Above the tablet breakpoint these two get the full container instead, so
   each sits on one line. Left alone below 1024px, where wrapping is correct
   and unavoidable. text-wrap: balance is dropped here on purpose: with one
   line there is nothing to balance, and it can force an early break.

   NOTE the section ids, both confirmed by reading the rendered DOM rather than
   assumed from the heading text:
     "Autonomous AI that's accountable by design"  ->  #what-delivers
     "Purpose-built for enterprise AI delivery"    ->  #why
   They are not the sections their wording suggests. */
@media (min-width: 1024px) {
  #what-delivers .section-header,
  #why .section-header {
    max-width: var(--container-wide, 1440px) !important;
  }
  #what-delivers .section-header .section-statement,
  #why .section-header .section-statement {
    white-space: nowrap;
    text-wrap: initial;
  }
}