/*!
 * Rankrix Theme — Layout primitives
 *
 * Containers and grid scaffolding. No fixed pixel widths anywhere — every
 * container uses percentages, min(), max(), and clamp() so the layout
 * adapts continuously rather than snapping at breakpoints.
 *
 * Project rule: 12-column grid on desktop → 8 columns on tablet → 4 on
 * mobile. We implement this with CSS Grid + container queries where
 * possible, media queries where container queries don't yet fit.
 */

/* ============================================================================
 * SITE WRAPPERS
 * The body's #rx-site element wraps every page-level template. Its primary
 * job is to reserve space for the fixed footer pill (the chrome's CSS
 * already adds body padding-bottom, but #rx-site is the semantic landmark).
 * ============================================================================ */

#rx-site {
  position: relative;
  z-index: var(--rx-z-base);
  min-height: 100vh;
}

#rx-content {
  /* The header pill sits at top:10-40px depending on viewport. We don't
   * push #rx-content below it because the pill is fixed and translucent —
   * content can scroll under it; the backdrop-blur makes that look good.
   * The hero of each page can optionally add its own top padding. */
  padding-block-start: 0;
}

/* ============================================================================
 * CONTAINERS
 *
 * Three sizes covering 95% of layouts:
 *   .rx-container       — standard, max ~1280px equivalent at desktop
 *   .rx-container-wide  — wider editorial / dashboard layouts
 *   .rx-container-narrow — focused reading widths (long-form prose)
 *
 * All use min() with a percentage so they collapse on small screens and
 * cap on large ones — no fixed pixel max-widths.
 * ============================================================================ */

.rx-container,
.rx-container-wide,
.rx-container-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--rx-space-4);
}

.rx-container {
  max-width: min(95%, 80rem);            /* ~1280px cap */
}

.rx-container-wide {
  max-width: min(95%, 100rem);           /* ~1600px cap */
}

.rx-container-narrow {
  max-width: min(95%, 48rem);            /* ~768px — reading column */
}

/* At 4K, percentage caps pin the content to a comfortable width rather
 * than letting it sprawl across the full viewport. */
@media (min-width: 2560px) {
  .rx-container        { max-width: min(72%, 100rem); }
  .rx-container-wide   { max-width: min(85%, 120rem); }
  .rx-container-narrow { max-width: min(50%, 56rem); }
}

@media (min-width: 3840px) {
  .rx-container        { max-width: min(60%, 120rem); }
  .rx-container-wide   { max-width: min(75%, 144rem); }
  .rx-container-narrow { max-width: min(40%, 64rem); }
}

/* ============================================================================
 * GRID — 12-COLUMN RESPONSIVE
 *
 * Apply .rx-grid to a container; children claim columns via .rx-col-N.
 * Falls back gracefully: at mobile widths the grid becomes 4 columns and
 * .rx-col-N values >4 wrap onto their own row.
 * ============================================================================ */

.rx-grid {
  display: grid;
  gap: var(--rx-space-4);
  grid-template-columns: repeat(4, 1fr);  /* mobile baseline: 4 columns */
}

@media (min-width: 768px) {
  .rx-grid {
    grid-template-columns: repeat(8, 1fr); /* tablet: 8 columns */
    gap: var(--rx-space-5);
  }
}

@media (min-width: 1024px) {
  .rx-grid {
    grid-template-columns: repeat(12, 1fr); /* desktop: 12 columns */
    gap: var(--rx-space-6);
  }
}

/* Column span helpers. Children that need to claim N of the available
 * columns at the current breakpoint. */
.rx-col-1  { grid-column: span 1; }
.rx-col-2  { grid-column: span 2; }
.rx-col-3  { grid-column: span 3; }
.rx-col-4  { grid-column: span 4; }
.rx-col-5  { grid-column: span 5; }
.rx-col-6  { grid-column: span 6; }
.rx-col-7  { grid-column: span 7; }
.rx-col-8  { grid-column: span 8; }
.rx-col-9  { grid-column: span 9; }
.rx-col-10 { grid-column: span 10; }
.rx-col-11 { grid-column: span 11; }
.rx-col-12 { grid-column: span 12; }
.rx-col-full { grid-column: 1 / -1; }

/* On mobile (the 4-column base), columns >4 collapse to full width. */
@media (max-width: 767px) {
  .rx-col-5, .rx-col-6, .rx-col-7, .rx-col-8,
  .rx-col-9, .rx-col-10, .rx-col-11, .rx-col-12 {
    grid-column: 1 / -1;
  }
}

/* On tablet (the 8-column base), columns >8 collapse to full width. */
@media (min-width: 768px) and (max-width: 1023px) {
  .rx-col-9, .rx-col-10, .rx-col-11, .rx-col-12 {
    grid-column: 1 / -1;
  }
}

/* ============================================================================
 * STACK and CLUSTER primitives
 * Flexbox helpers for the two most common layouts. Stack = vertical
 * rhythm; cluster = horizontal wrap with shared gap.
 * ============================================================================ */

.rx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rx-space-4);
}

.rx-stack-sm { gap: var(--rx-space-2); }
.rx-stack-lg { gap: var(--rx-space-6); }
.rx-stack-xl { gap: var(--rx-space-10); }

.rx-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rx-space-3);
  align-items: center;
}

/* ============================================================================
 * SECTIONS — vertical rhythm between content blocks
 * ============================================================================ */

.rx-section {
  padding-block: var(--rx-space-16);
}

.rx-section-sm { padding-block: var(--rx-space-10); }
.rx-section-lg { padding-block: var(--rx-space-24); }

/* The very first section on a page often needs extra top padding to clear
 * the floating header pill (which sits at top:10-40px and is ~50-92px tall
 * depending on breakpoint). */
.rx-section-first {
  padding-block-start: clamp(5rem, 4rem + 5vw, 10rem);
}

/* ============================================================================
 * UTILITY: hide responsively
 * ============================================================================ */

.rx-hide-mobile  { /* visible by default */ }
.rx-hide-tablet  { /* visible by default */ }
.rx-hide-desktop { /* visible by default */ }

@media (max-width: 767px)   { .rx-hide-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .rx-hide-tablet { display: none !important; } }
@media (min-width: 1024px)  { .rx-hide-desktop { display: none !important; } }