/* ==========================================================================
   RipRed AI Theme — Utilities
   Layout helpers, grid system, spacing, text and display utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grid System
   -------------------------------------------------------------------------- */
.rr-grid {
  display: grid;
  gap: var(--space-6);
}

.rr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rr-grid--4 { grid-template-columns: repeat(4, 1fr); }
.rr-grid--5 { grid-template-columns: repeat(5, 1fr); }

.rr-grid--auto-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rr-grid--auto-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rr-grid--auto-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Asymmetric layouts */
.rr-grid--60-40 { grid-template-columns: 60fr 40fr; }
.rr-grid--40-60 { grid-template-columns: 40fr 60fr; }
.rr-grid--2-1   { grid-template-columns: 2fr 1fr; }
.rr-grid--1-2   { grid-template-columns: 1fr 2fr; }

/* Gap modifiers */
.rr-gap-4  { gap: var(--space-4);  }
.rr-gap-6  { gap: var(--space-6);  }
.rr-gap-8  { gap: var(--space-8);  }
.rr-gap-10 { gap: var(--space-10); }
.rr-gap-12 { gap: var(--space-12); }

/* --------------------------------------------------------------------------
   2. Flexbox Utilities
   -------------------------------------------------------------------------- */
.rr-flex          { display: flex; }
.rr-flex-col      { display: flex; flex-direction: column; }
.rr-flex-wrap     { flex-wrap: wrap; }
.rr-flex-nowrap   { flex-wrap: nowrap; }
.rr-flex-center   { display: flex; align-items: center; justify-content: center; }
.rr-flex-between  { display: flex; align-items: center; justify-content: space-between; }
.rr-items-center  { align-items: center; }
.rr-items-start   { align-items: flex-start; }
.rr-items-end     { align-items: flex-end; }
.rr-justify-center { justify-content: center; }
.rr-justify-end   { justify-content: flex-end; }
.rr-flex-1        { flex: 1; }
.rr-shrink-0      { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   3. Spacing Utilities
   -------------------------------------------------------------------------- */
.rr-mt-0  { margin-top: 0; }
.rr-mt-4  { margin-top: var(--space-4); }
.rr-mt-6  { margin-top: var(--space-6); }
.rr-mt-8  { margin-top: var(--space-8); }
.rr-mt-12 { margin-top: var(--space-12); }
.rr-mt-16 { margin-top: var(--space-16); }

.rr-mb-0  { margin-bottom: 0; }
.rr-mb-4  { margin-bottom: var(--space-4); }
.rr-mb-6  { margin-bottom: var(--space-6); }
.rr-mb-8  { margin-bottom: var(--space-8); }
.rr-mb-12 { margin-bottom: var(--space-12); }

.rr-mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   4. Text Utilities
   -------------------------------------------------------------------------- */
.rr-text-center { text-align: center; }
.rr-text-left   { text-align: left; }
.rr-text-right  { text-align: right; }

.rr-text-primary-red  { color: var(--color-primary-red); }
.rr-text-white        { color: var(--color-white); }
.rr-text-muted        { color: var(--color-muted-text); }
.rr-text-text         { color: var(--color-text); }
.rr-text-green        { color: var(--color-green); }

.rr-font-bold   { font-weight: 700; }
.rr-font-semi   { font-weight: 600; }
.rr-font-medium { font-weight: 500; }
.rr-font-normal { font-weight: 400; }

.rr-text-xs   { font-size: var(--text-xs); }
.rr-text-sm   { font-size: var(--text-sm); }
.rr-text-base { font-size: var(--text-base); }
.rr-text-lg   { font-size: var(--text-lg); }
.rr-text-xl   { font-size: var(--text-xl); }
.rr-text-2xl  { font-size: var(--text-2xl); }
.rr-text-3xl  { font-size: var(--text-3xl); }

.rr-uppercase { text-transform: uppercase; }
.rr-tracking-wide { letter-spacing: 0.05em; }

/* --------------------------------------------------------------------------
   5. Display and Visibility
   -------------------------------------------------------------------------- */
.rr-hidden  { display: none !important; }
.rr-block   { display: block; }
.rr-inline  { display: inline; }
.rr-inline-flex { display: inline-flex; }

/* --------------------------------------------------------------------------
   6. Width and Max-Width
   -------------------------------------------------------------------------- */
.rr-w-full      { width: 100%; }
.rr-max-narrow  { max-width: var(--container-narrow); }
.rr-max-content { max-width: var(--container-max); }
.rr-max-wide    { max-width: var(--container-wide); }

/* --------------------------------------------------------------------------
   7. Background Utilities
   -------------------------------------------------------------------------- */
.rr-bg-white   { background-color: var(--color-white); }
.rr-bg-soft    { background-color: var(--color-soft-bg); }
.rr-bg-dark    { background-color: var(--color-dark-bg); }
.rr-bg-darkred { background-color: var(--color-dark-red); }
.rr-bg-red     { background-color: var(--color-primary-red); }

/* --------------------------------------------------------------------------
   8. Border Utilities
   -------------------------------------------------------------------------- */
.rr-rounded-sm   { border-radius: var(--radius-sm); }
.rr-rounded-md   { border-radius: var(--radius-md); }
.rr-rounded-lg   { border-radius: var(--radius-lg); }
.rr-rounded-xl   { border-radius: var(--radius-xl); }
.rr-rounded-2xl  { border-radius: var(--radius-2xl); }
.rr-rounded-full { border-radius: var(--radius-full); }

/* --------------------------------------------------------------------------
   9. Prose (rich text content formatting)
   -------------------------------------------------------------------------- */
.rr-prose {
  max-width: 72ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.rr-prose h2 {
  font-size: var(--text-3xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.rr-prose h3 {
  font-size: var(--text-2xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.rr-prose h4 {
  font-size: var(--text-xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.rr-prose p {
  margin-bottom: var(--space-5);
}

.rr-prose ul,
.rr-prose ol {
  margin-bottom: var(--space-5);
}

.rr-prose a {
  color: var(--color-primary-red);
  text-decoration: underline;
}

.rr-prose img {
  border-radius: var(--radius-lg);
  margin: var(--space-8) 0;
}

/* --------------------------------------------------------------------------
   10. Responsive Utilities
   -------------------------------------------------------------------------- */

/* Hide on mobile (< 768px) */
@media (max-width: 767px) {
  .rr-hide-mobile { display: none !important; }
  .rr-grid--2,
  .rr-grid--3,
  .rr-grid--4,
  .rr-grid--5,
  .rr-grid--60-40,
  .rr-grid--40-60,
  .rr-grid--2-1,
  .rr-grid--1-2 {
    grid-template-columns: 1fr;
  }
  .rr-menu-toggle { display: flex; }
  .rr-primary-nav { display: none; }
  .rr-header-cta .rr-lang-switcher { display: none; }
  .rr-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Hide on tablet and below (< 1024px) */
@media (max-width: 1023px) {
  .rr-hide-tablet { display: none !important; }
  .rr-grid--4,
  .rr-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .rr-grid--60-40,
  .rr-grid--40-60,
  .rr-grid--2-1,
  .rr-grid--1-2 {
    grid-template-columns: 1fr;
  }
  .rr-primary-nav { display: none; }
  .rr-menu-toggle { display: flex; }
}

/* Show only on mobile */
@media (min-width: 768px) {
  .rr-show-mobile-only { display: none !important; }
}

/* Small mobile */
@media (max-width: 479px) {
  .rr-footer-grid {
    grid-template-columns: 1fr;
  }
  .rr-cta-section__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .rr-cta-section__actions .rr-btn {
    width: 100%;
    justify-content: center;
  }
}