/**
 * DocuPOW — Solutions Hub page styles (page-templates/solutions.php only).
 *
 * Scope: everything lives under .page-solutions (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this file
 * adds the light-canvas layout, the three link-card grids and their hover
 * treatments only.
 *
 * Light-canvas contrast contract:
 *  - Canvas is var(--white) throughout (no tonal bands on this page).
 *  - h1 / h2 headings are var(--indigo) — 11.52:1 on white (AA).
 *  - Body copy and the 13px mono labels (industry chips, flow ids) are
 *    var(--text-muted) — 9.34:1 on white (AA).
 *  - Card headings and team labels are var(--ink) — 16.68:1 (AA).
 *  - The featured "Explore Workflow" row is 16px/500 var(--indigo) (AA).
 *  - Hover border shifts to var(--techblue) are decorative (never the only
 *    affordance: the cards are anchors with visible focus rings via the
 *    global :focus-visible outline in main.css).
 *  - FLAT POLICY: the export's featured-card hover:shadow-lg is replaced by
 *    the house lift (+border) treatment — zero shadows on this page.
 *
 * Motion contract (STANDARD tier — main.js reveals only, no page JS):
 *  - Entrances are [data-dp-reveal] / [data-dp-reveal-stagger] from main.css;
 *    its prefers-reduced-motion block already forces them visible & static.
 *  - Every grid cell is a .page-solutions__cell wrapper that carries
 *    data-dp-reveal (and therefore the stagger's inline transition-delay set
 *    by main.js). The whole-card <a> inside owns the hover transitions, so
 *    hovers are never postponed by that inline delay — flow.js cleared the
 *    delays with JS; this page has no page JS, so the structure solves it.
 *  - Card 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 stills the lifts.
 */

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

/* 96px page rhythm on desktop, 64px under 768. The three list sections share
   the white canvas, so they split the 96 between them (48 + 48) instead of
   stacking two full paddings; header and CTA take the full measure. */
.page-solutions__header {
  padding-block: var(--space-7) var(--space-5);
}

.page-solutions__process,
.page-solutions__team,
.page-solutions__industry {
  padding-block: var(--space-5);
  /* The sections carry the mega-menu anchor ids (#by-process / #by-team /
     #by-industry): offset the 72px sticky chrome bar (+1px border) so an
     anchor landing never hides a heading under the header. */
  scroll-margin-top: calc(73px + var(--space-2));
}

.page-solutions__cta {
  padding-block: var(--space-7);
  text-align: center;
}

@media (max-width: 767.98px) {
  .page-solutions__header {
    padding-block: var(--space-6) var(--space-4);
  }

  .page-solutions__process,
  .page-solutions__team,
  .page-solutions__industry {
    padding-block: var(--space-4);
  }

  .page-solutions__cta {
    padding-block: var(--space-6);
  }
}

/* =========================================================================
   Header — left-aligned headline-xl + lead
   ========================================================================= */

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Royal Indigo per the
   export (11.52:1 on white — AA). */
.page-solutions__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--indigo);
  max-width: 896px; /* export max-w-4xl */
  margin-bottom: var(--space-3);
}

/* body-lg lead. */
.page-solutions__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 672px; /* export max-w-2xl */
}

/* =========================================================================
   Shared section heading — headline-lg with bottom hairline
   ========================================================================= */
.page-solutions__heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
}

/* =========================================================================
   Grid cells — reveal wrappers around the whole-card anchors
   ========================================================================= */

/* The cell (not the card) is the stagger's data-dp-reveal child: main.js
   parks its incremental transition-delay here, keeping the <a> inside free
   for instant hover transitions. Flex so the anchor fills the grid track. */
.page-solutions__cell {
  display: flex;
  min-width: 0;
}

.page-solutions__cell > a {
  flex: 1 1 auto;
  min-width: 0;
}

/* Featured Order-to-Pay cell spans 2 of the 3 process columns on desktop. */
.page-solutions__cell--featured {
  grid-column: span 2;
}

/* =========================================================================
   S1 — By Process (Flows)
   ========================================================================= */
.page-solutions__process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

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

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

  .page-solutions__cell--featured {
    grid-column: auto;
  }
}

/* Whole-card anchor. Hover lifts via the standalone `translate` property;
   border + lift only, ~180ms, NO shadows (flat policy — the export's
   hover:shadow-lg is overridden, see header comment). */
.page-solutions__flow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: translate .18s ease, border-color .18s ease;
}

.page-solutions__flow-card:hover {
  translate: 0 -6px;
  border-color: var(--techblue);
  color: inherit; /* keep the global a:hover techblue off inherited text */
}

/* Featured card — indigo border (stays indigo on hover), generous padding. */
.page-solutions__flow-card--featured {
  border-color: var(--indigo);
  padding: var(--space-5);
}

.page-solutions__flow-card--featured:hover {
  border-color: var(--indigo);
}

/* Corner tag — mono 13 in Royal Indigo, top-right. */
.page-solutions__flow-tag {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--indigo);
}

/* Icon block — muted 32px on the compact cards; indigo 48px when featured. */
.page-solutions__flow-icon {
  display: block;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.page-solutions__flow-icon svg {
  width: 32px;
  height: 32px;
}

.page-solutions__flow-card--featured .page-solutions__flow-icon {
  color: var(--indigo);
}

.page-solutions__flow-card--featured .page-solutions__flow-icon svg {
  width: 48px;
  height: 48px;
}

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

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

.page-solutions__flow-card--featured p {
  max-width: 448px; /* export max-w-md */
  margin-bottom: var(--space-3);
}

/* Featured arrow row — a span (the card itself is the anchor). The arrow
   nudges right on card hover via `translate` (transform/opacity-only motion
   policy: no gap animation). */
.page-solutions__flow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--indigo);
}

.page-solutions__flow-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: translate .18s ease;
}

.page-solutions__flow-card--featured:hover .page-solutions__flow-link svg {
  translate: 4px 0;
}

/* Mono footer id — pinned to the card bottom. */
.page-solutions__flow-id {
  display: block;
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* =========================================================================
   S2 — By Team
   ========================================================================= */
.page-solutions__team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

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

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

/* Row-card anchor — icon + label; hover tints the surface and border. */
.page-solutions__team-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: background-color .18s ease, border-color .18s ease;
}

.page-solutions__team-card:hover {
  background-color: var(--gray);
  border-color: var(--techblue);
  color: inherit; /* keep the global a:hover techblue off inherited text */
}

.page-solutions__team-card svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  flex: none;
}

.page-solutions__team-label {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}

/* =========================================================================
   S3 — By Industry
   ========================================================================= */
.page-solutions__industry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

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

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

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

/* Chip-card anchor — centered mono 13 (9.34:1 on white — AA). The muted
   colour is restated on :hover so the global a:hover techblue never applies
   (the hover affordance is the techblue border). */
.page-solutions__industry-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  transition: border-color .18s ease;
}

.page-solutions__industry-card:hover {
  border-color: var(--techblue);
  color: var(--text-muted);
}

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

  .page-solutions__heading {
    font-size: 28px;
    line-height: 1.2;
  }
}

/* =========================================================================
   Reduced motion — no lifts, no nudges (reveals are already forced visible
   and static by the main.css prefers-reduced-motion block)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* :hover included so this outweighs the hover rules. */
  .page-solutions__flow-card,
  .page-solutions__flow-card:hover {
    translate: none;
  }

  .page-solutions__flow-link svg,
  .page-solutions__flow-card--featured:hover .page-solutions__flow-link svg {
    translate: none;
  }
}