@layer layout {
  /* ===================================================
     Layout Grid System – The Gnostic Key
     Version: 1.2 – Tokenized and Responsive
     =================================================== */

  /* 🔹 Portal Grid – Sacred Layout */
  .portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg, 1.5rem);
    row-gap: var(--space-lg, 1.5rem); /* ✅ explicit row-gap for safety */
    max-width: calc(3 * 280px + 4 * var(--space-xl)); /* ≈ 3 cards + gaps */
    margin: var(--space-md) auto;
    padding: var(--space-xl) var(--space-md);
    position: relative;   /* ✅ allows absolute children like ribbons */
    overflow-x: hidden;   /* ✅ prevents badge/ribbon spill */
  }

/* 📱 Medium breakpoint */
@media (max-width: 768px) {
  .portal-grid {
    grid-template-columns: 2fr !important; /* force single column */
    max-width: 100% !important;            /* let it expand to full width */
    gap: var(--space-md, 1rem);
    padding: var(--space-lg) var(--space-md);
  }
} 

  /* 📱 Small / Mobile breakpoint */
  @media (max-width: 480px) {
    .portal-grid {
      grid-template-columns: 1fr !important; /* force single column */
    max-width: 100% !important;            /* let it expand to full width */
      gap: var(--space-md, 1rem);
      padding: var(--space-md);
    }
  }
}