/**
 * DocuPOW — Developers page styles
 * (page-templates/developers.php only).
 *
 * Scope: everything lives under .page-developers (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this
 * file adds the centered white hero, the gray API-first band with its
 * obsidian curl panel, the mirrored white MCP section with its obsidian
 * tool-definition panel, and the gray four-card ingestion band.
 *
 * Contrast contract (tokens + documented derived values only):
 *  - h1 / card h3s are var(--ink) — 16.68:1 on white, 15.54:1 on --gray (AA).
 *  - Section h2s are var(--indigo) — 11.52:1 on white, 10.73:1 on --gray (AA).
 *  - Leads / card copy are var(--text-muted) — 9.34:1 on white, 8.70:1 on
 *    --gray (AA).
 *  - Hero eyebrow is raw var(--techblue) at 13px/600 mono — 4.54:1 on white
 *    (AA for normal text, barely; the flows/healthcare pages use --indigo
 *    here, but this export keys the eyebrow to primary).
 *  - DERIVED HEX — doc links #276CC1: the house ~8%-darkened Tech Blue
 *    (#2B76D2 x 0.92, already documented for .dp-btn--primary hover in
 *    main.css and .page-o2p__review). Raw --techblue is only 4.23:1 on the
 *    S2 --gray band — below AA for a 16px/600 link — while #276CC1 is
 *    4.89:1 on --gray and 5.25:1 on white. Used for BOTH doc links so the
 *    two sections match.
 *  - Obsidian panels: base code text + panel labels are
 *    var(--text-muted-dark) — 7.58:1 on --obsidian (AA); the curl command
 *    line is var(--white) — 16.85:1 (AA). Two-tone only, no syntax rainbow;
 *    the MCP JSON is single-tone muted-dark (choice documented in the
 *    template).
 *  - rgba tints (token-derived, never text): rgba(43, 118, 210, .10)
 *    ingest-card roundel fill (--techblue). Traffic dots are the raw
 *    --err/--warn/--ok status tokens — decorative window chrome,
 *    aria-hidden in markup.
 *  - FLAT POLICY: zero elevation shadows. Card hover is border + lift only.
 *
 * NO gradient borders on this page (budget 0) — the two obsidian code
 * panels are the dark-panel moments; hairline --border-dark only.
 *
 * OVERFLOW CONTRACT: the code snippets are ~800px wide. Each
 * .page-developers__panel owns overflow-x:auto so the snippet scrolls
 * INSIDE its panel; the grids use minmax(0, …) + min-width:0 children so
 * the panels can shrink and the PAGE never scrolls horizontally.
 *
 * Motion contract (transform/opacity only — STANDARD tier):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if developers.js never runs under that preference) everything is
 *    visible. NO floats, NO bobs, NO loops, NO count-ups.
 *  - developers.js hooks: .is-ready on .page-developers__hero (staged copy
 *    entrance: eyebrow/h1/lead/CTA, 0/80/160/240ms). main.js owns
 *    [data-dp-reveal] / [data-dp-reveal-stagger] (S2–S4 roots + the
 *    staggered ingest cards); developers.js clears the stagger's inline
 *    delays post-reveal so the card hover lifts are never postponed.
 *  - Hover lifts use the standalone `translate` property (never
 *    `transform`) so they can never fight the reveal's transform.
 *  - A final prefers-reduced-motion: reduce block forces every animated
 *    element fully visible and static (belt-and-braces over main.css).
 */

/* =========================================================================
   Page scope — section rhythm (96 desktop / 64 <768)
   ========================================================================= */
.page-developers {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

.page-developers__hero,
.page-developers__api,
.page-developers__mcp,
.page-developers__ingest {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-developers__hero,
  .page-developers__api,
  .page-developers__mcp,
  .page-developers__ingest {
    padding-block: var(--space-6);
  }
}

/* =========================================================================
   S1 — Hero (white, centered)
   ========================================================================= */
.page-developers__hero {
  background-color: var(--white);
  text-align: center;
}

/* Eyebrow — mono 13 uppercase tracked in raw Tech Blue (4.54:1 on white at
   13px/600 — AA; per the export's text-primary key). */
.page-developers__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-3);
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Ink (16.68:1 — AA),
   capped at the export's max-w-4xl (896px). */
.page-developers__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  max-width: 896px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* body-lg lead — var(--text-muted) (9.34:1 — AA), export max-w-2xl. */
.page-developers__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 672px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* CTA pair — centered row; stacks full-width <640 per the export. */
.page-developers__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

@media (max-width: 639.98px) {
  .page-developers__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================================
   S2 — API-first (gray band, asymmetric ~5/7 grid)
   ========================================================================= */
.page-developers__api {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
}

/* Copy ~5 / panel ~7 of 12 at >=1024; copy-first single column below
   (matches DOM order). minmax(0, …) so the wide code panel can shrink. */
.page-developers__api-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

.page-developers__api-grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .page-developers__api-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* headline-lg (36/1.2/-0.01em/600) in Royal Indigo (10.73:1 on --gray — AA). */
.page-developers__api-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

/* body-lg — var(--text-muted), 8.70:1 on --gray (AA). */
.page-developers__api-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Docs text link — 16/600 with the inline arrow glyph. DERIVED HEX
   #276CC1 (documented in the header): the house darkened Tech Blue —
   4.89:1 on the S2 --gray band and 5.25:1 on the S3 white canvas (raw
   --techblue is only 4.23:1 on --gray at this size). */
.page-developers__doclink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #276CC1; /* darkened --techblue (main.css button-hover derivation) */
}

.page-developers__doclink:hover,
.page-developers__doclink:focus-visible {
  color: #276CC1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-developers__doclink svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

/* -------------------------------------------------------------------------
   Shared obsidian code panel (S2 curl + S3 MCP)
   ------------------------------------------------------------------------- */

/* The panel owns overflow-x — the ~800px snippet scrolls INSIDE it, the
   page never scrolls horizontally (see the header's OVERFLOW CONTRACT). */
.page-developers__panel {
  background-color: var(--obsidian);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: var(--space-3);
  overflow-x: auto;
}

/* Header row — traffic dots + mono label over a dark hairline. */
.page-developers__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}

.page-developers__panel-dots {
  display: flex;
  gap: var(--space-1);
  flex: none;
}

/* 12px traffic dots — raw status tokens; decorative window chrome only
   (aria-hidden in markup), never a signal. */
.page-developers__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.page-developers__dot--err {
  background-color: var(--err);
}

.page-developers__dot--warn {
  background-color: var(--warn);
}

.page-developers__dot--ok {
  background-color: var(--ok);
}

/* Mono 13 label — var(--text-muted-dark), 7.58:1 on --obsidian (AA). */
.page-developers__panel-label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted-dark);
  white-space: nowrap;
}

/* The snippet — JetBrains Mono 13/1.6. Base code text is
   var(--text-muted-dark) (7.58:1 on --obsidian — AA); the curl command
   line is lifted to var(--white) via .page-developers__code-cmd. The MCP
   JSON stays single-tone (choice documented in the template). */
.page-developers__code {
  margin: 0;
}

.page-developers__code code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-muted-dark);
}

/* Command-line emphasis — var(--white), 16.85:1 on --obsidian (AA). */
.page-developers__code-cmd {
  color: var(--white);
}

/* =========================================================================
   S3 — MCP (white, mirrored grid: panel left / copy right >=1024)
   ========================================================================= */
.page-developers__mcp {
  background-color: var(--white);
}

/* DOM is copy-first (stacked <1024 reads copy -> panel); at >=1024 the
   order properties mirror S2 by moving the panel to the left column. */
.page-developers__mcp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

.page-developers__mcp-grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .page-developers__mcp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-developers__panel--mcp {
    order: 1;
  }

  .page-developers__mcp-copy {
    order: 2;
  }
}

/* headline-lg in Royal Indigo (11.52:1 on white — AA). */
.page-developers__mcp-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

.page-developers__mcp-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* =========================================================================
   S4 — Omnichannel Ingestion (gray band, four cards)
   ========================================================================= */
.page-developers__ingest {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
}

/* Centered header block. */
.page-developers__ingest-head {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* headline-lg in Royal Indigo (10.73:1 on --gray — AA). */
.page-developers__ingest-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-2);
}

.page-developers__ingest-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 4 -> 2 (<1024) -> 1 (<768). */
.page-developers__ingest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.page-developers__ingest-grid > * {
  min-width: 0;
}

@media (max-width: 1023.98px) {
  .page-developers__ingest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .page-developers__ingest-grid {
    grid-template-columns: 1fr;
  }
}

/* Ingest card — white, hairline border, 8px radius, 32px padding. Hover
   lifts via the standalone `translate` property so it never fights the
   reveal's transform; border + lift only, NO shadows (flat policy). The
   reveal stagger's inline transition-delay would postpone the first hover —
   developers.js clears it post-reveal. */
.page-developers__card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition:
    opacity .6s ease,
    transform .6s ease,
    translate .18s ease,
    border-color .18s ease;
}

.page-developers__card:hover {
  translate: 0 -6px;
  border-color: var(--techblue);
}

/* 48px round roundel — rgba(43, 118, 210, .10) --techblue tint (documented
   in the header); the 24px glyph is decorative, the h3 carries the meaning. */
.page-developers__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(43, 118, 210, .10); /* --techblue tint */
  color: var(--techblue);
  margin-bottom: var(--space-3);
}

.page-developers__card-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* headline-md (24/1.3/500) in Ink. */
.page-developers__card-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.page-developers__card-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 36->28, 24->20
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-developers__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-developers__api-heading,
  .page-developers__mcp-heading,
  .page-developers__ingest-heading {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-developers__card-title {
    font-size: 20px;
    line-height: 1.3;
  }
}

/* =========================================================================
   Motion — entrance base states (no-preference only)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — developers.js adds .is-ready on init (double rAF);
     copy rises in with 0/80/160/240ms delays. */
  .page-developers__hero .page-developers__eyebrow,
  .page-developers__hero .page-developers__title,
  .page-developers__hero .page-developers__lead,
  .page-developers__hero .page-developers__cta-row {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-developers__hero .page-developers__title {
    transition-delay: 80ms;
  }

  .page-developers__hero .page-developers__lead {
    transition-delay: 160ms;
  }

  .page-developers__hero .page-developers__cta-row {
    transition-delay: 240ms;
  }

  .page-developers__hero.is-ready .page-developers__eyebrow,
  .page-developers__hero.is-ready .page-developers__title,
  .page-developers__hero.is-ready .page-developers__lead,
  .page-developers__hero.is-ready .page-developers__cta-row {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-developers__hero .page-developers__eyebrow,
  .page-developers__hero .page-developers__title,
  .page-developers__hero .page-developers__lead,
  .page-developers__hero .page-developers__cta-row {
    opacity: 1;
    transform: none;
  }

  /* No hover lift — :hover included so this outweighs the hover rule. */
  .page-developers__card,
  .page-developers__card:hover {
    translate: none;
  }
}

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own —
   named here so every markup class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-developers__api-copy {
  /* no-op: block-flow column; layout comes from __api-grid */
}

.page-developers__panel--curl {
  /* no-op: variant hook; the shared __panel block carries the treatment */
}