/* ============================================================================
   RavenCoreX — Utilities (v4)
   Container 1280, 12-col grid, spacing helpers, type utilities.
   All classes namespaced rcx-.
   ============================================================================ */

/* ---- Container -------------------------------------------------------------- */
.rcx-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-sm); /* 16px mobile */
}

@media (min-width: 768px) {
  .rcx-container { padding-inline: var(--space-lg); } /* 32px tablet */
}
@media (min-width: 1024px) {
  .rcx-container { padding-inline: var(--space-xl); } /* 48px desktop-sm */
}
@media (min-width: 1280px) {
  .rcx-container { padding-inline: var(--margin); }   /* 64px desktop */
}
@media (min-width: 1440px) {
  .rcx-container { padding-inline: 80px; }                /* 80px wide */
}

/* Narrow editorial container (long-form reading) */
.rcx-container--narrow {
  max-width: var(--measure);
}

/* ---- 12-column grid --------------------------------------------------------- */
.rcx-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--gutter);
}

/* Mobile collapses to a single column by default */
@media (max-width: 767px) {
  .rcx-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .rcx-grid [class*="rcx-col-"] { grid-column: 1 / -1; }
}

/* Column spans (desktop / tablet) */
.rcx-col-1  { grid-column: span 1; }
.rcx-col-2  { grid-column: span 2; }
.rcx-col-3  { grid-column: span 3; }
.rcx-col-4  { grid-column: span 4; }
.rcx-col-5  { grid-column: span 5; }
.rcx-col-6  { grid-column: span 6; }
.rcx-col-7  { grid-column: span 7; }
.rcx-col-8  { grid-column: span 8; }
.rcx-col-9  { grid-column: span 9; }
.rcx-col-10 { grid-column: span 10; }
.rcx-col-11 { grid-column: span 11; }
.rcx-col-12 { grid-column: span 12; }

/* Tablet (8-col logical) — common spans */
@media (min-width: 768px) and (max-width: 1023px) {
  .rcx-col-md-4 { grid-column: span 4; }
  .rcx-col-md-6 { grid-column: span 6; }
  .rcx-col-md-8 { grid-column: span 8; }
  .rcx-col-md-12 { grid-column: span 12; }
}

/* ---- Auto-fit card grids ---------------------------------------------------- */
.rcx-grid-cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rcx-grid-cards--3 {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
/* Tablet: 2 columns (3 at 768px crams the card titles into many short lines). */
@media (min-width: 768px) {
  .rcx-grid-cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .rcx-grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Flex helpers ----------------------------------------------------------- */
.rcx-flex      { display: flex; }
.rcx-flex-col  { display: flex; flex-direction: column; }
.rcx-items-center  { align-items: center; }
.rcx-justify-between { justify-content: space-between; }
.rcx-flex-wrap { flex-wrap: wrap; }
.rcx-gap-2xs { gap: var(--space-2xs); }
.rcx-gap-xs  { gap: var(--space-xs); }
.rcx-gap-sm  { gap: var(--space-sm); }
.rcx-gap-md  { gap: var(--space-md); }
.rcx-gap-lg  { gap: var(--space-lg); }

/* ---- Section spacing (responsive) ------------------------------------------- */
.rcx-section {
  padding-block: var(--space-xl); /* 48px mobile */
}
@media (min-width: 768px) {
  .rcx-section { padding-block: var(--space-2xl); } /* 64px tablet */
}
@media (min-width: 1024px) {
  .rcx-section { padding-block: var(--space-3xl); } /* 96px desktop */
}
.rcx-section--hero {
  padding-block: var(--space-2xl);
}
@media (min-width: 1024px) {
  .rcx-section--hero { padding-block: var(--space-4xl); }
}

/* ---- Spacing margin helpers (top) ------------------------------------------- */
.rcx-mt-2xs { margin-top: var(--space-2xs); }
.rcx-mt-xs  { margin-top: var(--space-xs); }
.rcx-mt-sm  { margin-top: var(--space-sm); }
.rcx-mt-md  { margin-top: var(--space-md); }
.rcx-mt-lg  { margin-top: var(--space-lg); }
.rcx-mt-xl  { margin-top: var(--space-xl); }
.rcx-mt-2xl { margin-top: var(--space-2xl); }
.rcx-mb-sm  { margin-bottom: var(--space-sm); }
.rcx-mb-md  { margin-bottom: var(--space-md); }
.rcx-mb-lg  { margin-bottom: var(--space-lg); }
.rcx-mb-xl  { margin-bottom: var(--space-xl); }

/* ---- Surfaces --------------------------------------------------------------- */
.rcx-bg-alt     { background-color: var(--color-bg-subtle); }
.rcx-bg-dark    { background-color: var(--color-bg-dark); color: var(--color-text-invert); }
.rcx-bg-darkest { background-color: var(--color-bg-darkest); color: var(--color-text-invert); }
.rcx-bg-dark h1, .rcx-bg-dark h2, .rcx-bg-dark h3, .rcx-bg-dark h4, .rcx-bg-dark h5, .rcx-bg-dark h6,
.rcx-bg-darkest h1, .rcx-bg-darkest h2, .rcx-bg-darkest h3, .rcx-bg-darkest h4, .rcx-bg-darkest h5, .rcx-bg-darkest h6 {
  color: var(--color-text-invert);
}

/* ---- Typography utilities --------------------------------------------------- */
.rcx-display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
@media (max-width: 1279px) { .rcx-display-xl { font-size: var(--text-h1); } }
@media (max-width: 768px)  { .rcx-display-xl { font-size: var(--text-h2); } }

.rcx-lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

.rcx-body-s   { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.rcx-caption  { font-size: var(--text-caption); line-height: var(--leading-h5); letter-spacing: var(--tracking-caption); color: var(--color-text-muted); }
.rcx-mono     { font-family: var(--font-mono); }

.rcx-text-muted { color: var(--color-text-secondary); }
.rcx-text-soft  { color: var(--color-text-muted); }
.rcx-text-azure { color: var(--color-azure-500); }
.rcx-text-center { text-align: center; }

/* Signature gradient text accent (use sparingly — headings only) */
.rcx-text-gradient {
  background: var(--gradient-firmado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Signature gradient 4px rule (hero accent line) */
.rcx-gradient-rule {
  height: 4px;
  width: 240px;
  background: var(--gradient-firmado);
  border: 0;
  margin: 0;
}

/* ---- Visibility helpers ----------------------------------------------------- */
.rcx-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rcx-hide-mobile { display: none; }
@media (min-width: 768px) { .rcx-hide-mobile { display: revert; } }
.rcx-hide-desktop { display: revert; }
@media (min-width: 768px) { .rcx-hide-desktop { display: none; } }