/*
 * RAXE Solutions Page — Layout & Responsive
 * Grid layouts for use-case cards and role cards.
 * Depends on: tokens.css, base.css, components/cards.css
 */

/* ── Use-case card grid (2-col: text | feature list) ── */
.uc-card {
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* ── Use-case stack (vertical list of cards) ── */
.uc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ── Role grid (3-col) ── */
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ── CTA button row ── */
.cta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════
   RESPONSIVE — Tablet (max-width: 1024px)
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .role-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile (max-width: 768px)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Role cards → single column */
  .role-grid {
    grid-template-columns: 1fr;
  }

  /* Use-case cards → stack text above feature list */
  .uc-card {
    grid-template-columns: 1fr;
    padding: var(--space-6);
    gap: var(--space-5);
  }

  /* Tighten vertical spacing between stacked cards */
  .uc-stack {
    gap: var(--space-6);
  }
}