/**
 * DocuPOW — Integrations & API page styles
 * (page-templates/integrations.php only).
 *
 * Scope: everything lives under .page-integrations (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this file
 * adds the Platform sub-page layout (centered hero + obsidian "pipe" band +
 * gray developer band + security strip + CTA). Mirrors the token scale and
 * component patterns of extraction.php / the solution pages. NO page JS.
 *
 * Light-canvas contrast contract (tokens only — zero new hexes):
 *  - Hero eyebrow is 13px mono semibold var(--techblue) — 4.54:1 on white (AA),
 *    matching the extraction page's Platform eyebrow.
 *  - h1 + light-section h2 are var(--indigo) — 11.52:1 on white, ~10.9:1 on
 *    --gray (AA). Card h3 are var(--ink) — 16.68:1 on white (AA).
 *  - Lead, body and card copy are var(--text-muted) — 9.34:1 on white, 8.70:1
 *    on --gray (AA).
 *  - Tertiary links are var(--techblue) — 4.54:1 on WHITE only (the dev cards
 *    are white on the gray band; the security strip + hover-underline keep them
 *    identifiable beyond colour). Never techblue text on --gray at small size.
 * Obsidian-band contrast contract:
 *  - Heading + column h3 are var(--white); body is var(--text-muted-dark)
 *    (7.58:1 on --obsidian, AA); hairline var(--border-dark). The techblue
 *    link + icon are 3.71:1 on obsidian (>=3:1); the link carries a hover/focus
 *    underline so it is never signalled by colour alone.
 *
 * Motion contract (transform/opacity only — STANDARD tier): no entrance base
 * states are authored here (main.css owns them for every [data-dp-reveal],
 * hero included — above the fold, so its observer reveal fires on load). Card
 * hover-lifts use the standalone `translate` property, disabled under
 * prefers-reduced-motion at the end of this file.
 */

/* =========================================================================
   Page scope — light canvas, section rhythm
   ========================================================================= */
.page-integrations {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

.page-integrations__hero,
.page-integrations__pipe,
.page-integrations__dev,
.page-integrations__security,
.page-integrations__cta {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-integrations__hero,
  .page-integrations__pipe,
  .page-integrations__dev,
  .page-integrations__security,
  .page-integrations__cta {
    padding-block: var(--space-6);
  }
}

/* Light-section h2 — headline-lg (36/1.2/-0.01em/600) in Royal Indigo. */
.page-integrations__dev h2,
.page-integrations__cta h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
}

/* =========================================================================
   S1 — Hero (light, centered)
   ========================================================================= */
.page-integrations__hero-inner {
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
}

.page-integrations__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);
}

.page-integrations__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

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

/* CTA pair — shared by the hero and the final CTA (both centered here). */
.page-integrations__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}

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

/* =========================================================================
   S2 — Obsidian "pipe" band (documents in / data out)
   ========================================================================= */
.page-integrations__pipe {
  background-color: var(--obsidian);
  color: var(--white);
  border-top: 1px solid var(--border-dark);
  text-align: center;
}

.page-integrations__pipe :focus-visible {
  outline-color: var(--techblue);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); /* light halo on obsidian */
}

.page-integrations__pipe-title {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-6);
}

.page-integrations__pipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  text-align: left;
}

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

@media (max-width: 767.98px) {
  .page-integrations__pipe-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.page-integrations__pipe-icon {
  display: block;
  color: var(--techblue); /* icon-only accent — 3.71:1 >= 3:1 on obsidian */
  margin-bottom: var(--space-2);
}

.page-integrations__pipe-icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

.page-integrations__pipe-col h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.page-integrations__pipe-col p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted-dark); /* 7.58:1 on obsidian (AA) */
}

.page-integrations__pipe-linkrow {
  margin-top: var(--space-3);
}

/* Techblue link on obsidian — 3.71:1; the hover/focus underline keeps it
   identifiable beyond colour. */
.page-integrations__pipe-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
}

.page-integrations__pipe-link:hover,
.page-integrations__pipe-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-integrations__pipe-link svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* =========================================================================
   S3 — Developer band (gray, two white cards)
   ========================================================================= */
.page-integrations__dev {
  background-color: var(--gray);
  border-top: 1px solid var(--border);
}

.page-integrations__dev h2 {
  margin-bottom: var(--space-5);
}

.page-integrations__dev-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

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

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

/* White cards on the gray band; flat hover-lift (border + translate, no
   shadow). Techblue links sit on the white card face (4.54:1 — AA). */
.page-integrations__dev-card {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition:
    translate .18s ease,
    border-color .18s ease;
}

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

.page-integrations__dev-icon {
  display: block;
  color: var(--techblue); /* decorative accent */
}

.page-integrations__dev-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.page-integrations__dev-card h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}

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

.page-integrations__dev-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: auto;
  padding-top: var(--space-1);
}

.page-integrations__dev-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
}

.page-integrations__dev-link:hover,
.page-integrations__dev-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-integrations__dev-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* =========================================================================
   S4 — Security teaser (white strip)
   ========================================================================= */
.page-integrations__security {
  border-top: 1px solid var(--border);
}

.page-integrations__security-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.page-integrations__security-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
}

.page-integrations__security-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
  flex: none;
}

.page-integrations__security-link:hover,
.page-integrations__security-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-integrations__security-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* =========================================================================
   S5 — Final CTA (gray band, centered)
   ========================================================================= */
.page-integrations__cta {
  background-color: var(--gray);
  border-top: 1px solid var(--border);
  text-align: center;
}

.page-integrations__cta h2 {
  margin-bottom: var(--space-4);
}

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

  .page-integrations__dev h2,
  .page-integrations__cta h2,
  .page-integrations__pipe-title {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-integrations__pipe-col h3,
  .page-integrations__dev-card h3 {
    font-size: 20px;
    line-height: 1.3;
  }
}

/* =========================================================================
   Reduced motion — disable card hover-lifts (entrances handled by main.css)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-integrations__dev-card,
  .page-integrations__dev-card:hover {
    translate: none;
  }
}