/* 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 identical glass panels. Differentiation comes from the photograph and
   the index, never from a per-card background colour - that was the old page's
   main tell. align-items:stretch lets the figure fill the card height so the
   three columns stay square with each other whatever the copy length. */
.ai-service {
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr) minmax(212px, .28fr);
  gap: clamp(24px, 2.8vw, 40px);
  align-items: stretch;
  padding: clamp(22px, 2.2vw, 28px);
  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);
}

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

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

.ai-service__copy {
  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 {
  align-self: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-service__scope li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding-block: 12px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  font-size: 14px;
}

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

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

/* ---------- 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, .9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: stretch;
}

.ai-flow__figure {
  position: relative;
  min-height: 420px;
  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;
}

/* ---------- 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. */

@media (max-width: 1100px) {
  .ai-service {
    grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr);
    gap: 28px;
  }

  .ai-service__scope {
    grid-column: 2;
    align-self: start;
  }

  /* The scope list moving to a second row leaves the figure column empty below
     it — about 190px of dead white at 1100px. `1 / -1` does NOT fix this: in an
     implicit row grid -1 resolves to the end of the explicit grid, so it is a
     no-op. Span the two rows explicitly. */
  .ai-service__figure {
    grid-row: 1 / span 2;
  }
}

@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-service {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ai-service__figure {
    grid-row: auto;
  }

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

  .ai-service__scope {
    grid-column: auto;
  }

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

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