/* AI Solutions - page-specific layout only.
   Contract: this file must NOT redefine colour, radius, type scale, spacing
   rhythm or motion. Those come from tokens.css / base.css / components.css so
   the page stays visually consistent with the homepage. Anything that looks
   like a new design decision here is a bug - reuse a shared component instead.
   The one deliberate exception is the hero scrim, explained below. */

/* ---------- Section heads ----------
   Stacked rather than the shared two-column .section-head. In the split
   version the kicker sinks to the bottom of the left column, far from the
   title it belongs to. The homepage solved this with .section-head--stacked,
   but that rule is scoped to body.home-page, so this page needs its own. */

.ai-section-head {
  width: min(100%, 880px);
  margin-bottom: clamp(34px, 4vw, 56px);
}

.ai-section-head .section-summary {
  max-width: 720px;
}

/* ---------- Hero ---------- */

/* .page-hero__summary ends with margin-bottom:0, so the action row owns the gap. */
.ai-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.ai-hero__note {
  max-width: 200px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
  text-transform: uppercase;
}

/* ---------- Hero media ----------
   Mirrors the homepage hero technique: a full-bleed photograph with a
   directional scrim that fades it out under the copy, so the headline keeps
   full contrast while the picture carries the mood.

   The homepage owns these rules in home.css, which secondary pages do not
   load. The values are repeated here rather than pulling the entire homepage
   stylesheet onto this page. If the homepage scrim is ever retuned, retune
   this with it - or promote both to components.css. */

.ai-hero {
  position: relative;
  background: transparent;
}

.ai-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.ai-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Framing picked against the scrim, not against the raw photo: keeps the
     group to the right of the headline and drops the top of the frame, which
     held background props that fought the palette. */
  object-position: 74% 60%;
  transform: scale(1.015);
}

.ai-hero__scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247, 249, 252, .98) 0%, rgba(247, 249, 252, .94) 38%, rgba(242, 246, 251, .64) 63%, rgba(238, 243, 248, .24) 100%),
    linear-gradient(0deg, rgba(247, 249, 252, .9) 0%, rgba(247, 249, 252, .12) 46%, rgba(247, 249, 252, .08) 100%),
    linear-gradient(rgba(52, 120, 246, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, .06) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}

/* Keeps the shared two-column .page-hero__grid. An earlier single-column version
   let the copy run the full width into the part of the scrim that is only .24
   opaque, and measured contrast on the summary fell to 1.96:1 at 960px. The two
   columns hold the copy inside the .94–.98 band, which is what makes the
   homepage's version legible. */
.ai-hero__grid {
  position: relative;
  z-index: 2;
}

.ai-hero .status-label {
  margin-bottom: 20px;
}

/* The shared .page-hero__summary is --muted, tuned for a plain white section.
   Over a photograph it does not hold up; the homepage uses --ink-soft for the
   same reason (home.css .hero__summary). Measured: 3.67 -> 9.52 at 1440. */
.ai-hero .page-hero__summary {
  color: var(--ink-soft);
}

/* ---------- Services ---------- */

.ai-service-list {
  display: grid;
  gap: 18px;
}

/* Three columns per card - image | copy | capability list - so the card fills
   its full width instead of leaving the right third empty. Differentiation comes
   from the photograph, never a per-card background colour (the old page's tell).
   align-items:stretch keeps the three columns the same height. */
.ai-service {
  --ai-card-pad: clamp(22px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: minmax(300px, .46fr) minmax(0, 1fr) minmax(206px, .46fr);
  gap: clamp(24px, 2.6vw, 44px);
  align-items: stretch;
  padding: var(--ai-card-pad);
  /* The figure bleeds to the card edge, so the panel has to clip its children. */
  overflow: hidden;
  transition: transform var(--transition-normal) ease;
}

/* Lift only. The shadow stays owned by .glass-panel: this page is not allowed
   to declare its own box-shadow/backdrop-filter (enforced by check_multipage_v2). */
.ai-service:hover {
  transform: translateY(-2px);
}

/* Full-bleed to the card's top, left and bottom edges. Inset in a padded box the
   photograph read as a stamp; running it to the edge makes it part of the panel
   and gives the row real weight. Negative margins mirror the card padding, so
   the two stay in step if the padding is retuned. */
.ai-service__figure {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-height: 300px;
  margin: calc(var(--ai-card-pad) * -1) 0 calc(var(--ai-card-pad) * -1) calc(var(--ai-card-pad) * -1);
  overflow: hidden;
  border-radius: var(--radius) 0 0 var(--radius);
}

.ai-service__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-service__copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

/* Inherits .section-kicker; only the stacked spacing differs. */
.ai-service__meta {
  margin-bottom: 4px;
}

/* Deliberately NOT a second blue uppercase label. The old page stacked four
   micro-labels that all competed; this one stays muted and sentence-case so the
   hierarchy reads kicker -> descriptor -> heading. */
.ai-service__category {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 640;
}

.ai-service__copy h3 {
  margin-bottom: 12px;
  font-size: clamp(24px, 2.1vw, 31px);
  font-weight: 620;
  line-height: 1.08;
}

.ai-service__copy p {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--muted);
}

/* Marker convention copied from .boundary-column so scope lists read the same
   across the site. */
.ai-service__scope {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0 0 0 clamp(20px, 1.8vw, 28px);
  border-left: 1px solid var(--line);
  list-style: none;
}

.ai-service__scope li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* --blue-strong, not --blue: tokens.css reserves the darker blue for small text,
   and .boundary-column li::before — the marker this copies — uses it too. */
.ai-service__scope li::before {
  content: "+";
  color: var(--blue-strong);
  font-weight: 800;
}

/* Each scope point is a label plus a one-line gloss, so it reads as a real
   capability rather than a bare tag. Both are pinned to column 2: the "+" pseudo
   already takes column 1 of row 1, so without an explicit column the gloss
   auto-flows back into the 18px marker column and wraps one letter per line. */
.ai-service__scope li strong {
  grid-column: 2;
  color: var(--ink-soft);
  font-weight: 600;
}

.ai-service__scope li span {
  grid-column: 2;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Process ----------
   Image beside a stacked stage list, echoing how the homepage pairs a picture
   with a glass panel. The previous four detached cards gave the section no
   visual weight and read as a card grid rather than a sequence. */

.ai-flow {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: stretch;
}

.ai-flow__figure {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(52, 120, 246, .18);
  border-radius: var(--radius);
}

.ai-flow__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-flow__list {
  display: grid;
  align-content: center;
  margin: 0;
  padding: clamp(24px, 2.8vw, 38px);
  list-style: none;
}

.ai-flow__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding-block: 18px;
  border-top: 1px solid var(--line);
}

.ai-flow__item:last-child {
  border-bottom: 1px solid var(--line);
}

.ai-flow__index {
  padding-top: 3px;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 780;
}

.ai-flow__item h3 {
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 620;
}

.ai-flow__item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Principles ----------
   A supporting photograph on the left, the four rules as a divided list on the
   right. The image gives the section the visual weight the bare 2x2 grid lacked,
   and a single-column list keeps each rule readable at full width beside it. */

.ai-principles-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(28px, 3.6vw, 58px);
  align-items: stretch;
}

.ai-principles__figure {
  position: relative;
  min-height: 460px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(52, 120, 246, .18);
  border-radius: var(--radius);
}

.ai-principles__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Frame the person and the on-screen figures; drop the busy desk foreground. */
  object-position: 50% 28%;
}

.ai-principles {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.ai-principle:first-child {
  padding-top: 0;
  border-top: 0;
}

.ai-principle__index {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--blue-strong);
  font-size: 22px;
  font-weight: 780;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ai-principle h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 8px;
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 620;
  line-height: 1.12;
}

.ai-principle p {
  grid-column: 2;
  grid-row: 2;
  max-width: 560px;
  margin: 0;
  color: var(--muted);
}

/* ---------- Closing band ---------- */

.ai-contact-note {
  color: rgba(255, 255, 255, .68);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ---------- Responsive ----------
   Shared breakpoints already collapse .page-hero__grid and .contact-band, and
   responsive.css owns prefers-reduced-motion. Only the two page-specific
   layouts need handling. */

/* Below the three-column width the card stacks: image on top, copy, then the
   capability list returns to a row underneath instead of the desktop right rail. */
@media (max-width: 980px) {
  .ai-service {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ai-service__figure {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    /* Bleed to the top and sides only; the copy sits below it. */
    margin: calc(var(--ai-card-pad) * -1) calc(var(--ai-card-pad) * -1) 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .ai-service__copy {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }

  .ai-service__scope {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    margin: 4px 0 0;
    padding: clamp(16px, 1.6vw, 20px) 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* Principles image stacks on top of the rules instead of sitting beside them. */
  .ai-principles-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ai-principles__figure {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 620px) {
  /* Scope drops from three across to two so the glosses keep a readable width. */
  .ai-service__scope {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
}

@media (max-width: 960px) {
  /* responsive.css collapses .page-hero__grid to one column at 960, so from here
     down the copy spans the full width and the horizontal scrim stops protecting
     it. Swap to the near-flat overlay, same approach home.css uses on its own
     hero — but at 960, not 760, because that is where THIS grid collapses.
     Measured at 960: 1.96 -> 8.9. */
  .ai-hero__media img {
    opacity: .42;
  }

  .ai-hero__scene {
    background:
      linear-gradient(rgba(247, 249, 252, .9), rgba(247, 249, 252, .94)),
      linear-gradient(rgba(52, 120, 246, .07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, .06) 1px, transparent 1px);
    background-size: auto, 42px 42px, 42px 42px;
  }

  .ai-flow {
    grid-template-columns: 1fr;
  }

  .ai-flow__figure {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .ai-principles {
    grid-template-columns: 1fr;
  }

  .ai-service {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ai-service__figure {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    /* Bleed to the top and sides only; the copy sits below it. */
    margin: calc(var(--ai-card-pad) * -1) calc(var(--ai-card-pad) * -1) 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  /* Reset the explicit rows too, or the figure (grid-row auto) flows after the
     copy/scope and lands at the bottom of the card. All auto -> source order ->
     image on top. */
  .ai-service__copy,
  .ai-service__scope {
    grid-column: auto;
    grid-row: auto;
  }

  .ai-service__scope {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .ai-hero__note {
    max-width: none;
  }

  .ai-flow__figure {
    min-height: 240px;
  }
}