/* ────────────────────────────────────────────────────────────────────────────
   7-column grid system — 20px gutter
   Responsive tiers (based on theme breakpoints):
     900px+  → 7 columns  (desktop)
     600–899px → 4 columns  (tablet)
     <600px  → 1 column   (mobile)

   Inline styles are NOT used in the block save output, so all responsive
   overrides work via normal cascade order — no !important needed.
   ──────────────────────────────────────────────────────────────────────────── */


/* ── Grid container ──────────────────────────────────────────────────────── */

.grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
}

/* Older WordPress Group block inner-container wrapper */
.grid-7 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
}


/* ── Column spans ────────────────────────────────────────────────────────── */
/* These are the only declarations that position grid items on the frontend.
   They must come BEFORE the responsive overrides below.                     */

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }


/* ── Column starts ───────────────────────────────────────────────────────── */
/* Applied after spans so same-specificity cascade gives starts priority.
   col-start-N pins the item to a specific column; combine with col-N for
   both placement and width, e.g. class="col-3 col-start-2".               */

.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }


/* ────────────────────────────────────────────────────────────────────────────
   Responsive overrides
   These rules come LAST so they win the same-specificity cascade without
   needing !important.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Tablet: 4 columns (600–899 px) ─────────────────────────────────────── */
@media (max-width: 899px) {
  .grid-7 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Drop all explicit starts — items auto-flow left to right in 4 columns.
     Applies to both block items (wp-block-rs-grid-item) and utility classes. */
  .col-start-1, .col-start-2, .col-start-3, .col-start-4,
  .col-start-5, .col-start-6, .col-start-7 {
    grid-column-start: auto;
  }

  /* Cap spans that would overflow 4 columns */
  .col-5, .col-6, .col-7 {
    grid-column: span 4;
  }
}


/* ── Mobile: 1 column (<600 px) ─────────────────────────────────────────── */
@media (max-width: 599px) {
  .grid-7 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Every item fills the full width */
  .col-1, .col-2, .col-3, .col-4,
  .col-5, .col-6, .col-7 {
    grid-column: 1 / -1;
  }

  .col-start-1, .col-start-2, .col-start-3, .col-start-4,
  .col-start-5, .col-start-6, .col-start-7 {
    grid-column-start: auto;
  }
}