/* BoemBoost Theme — grid.css
   12-column responsive CSS grid
   Mobile-first: sm → md → lg → xl
   ================================== */

/* ----------------------------------------
   Base grid
---------------------------------------- */
.bb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bb-s5);
}

.bb-grid--tight  { gap: var(--bb-s4); }
.bb-grid--loose  { gap: var(--bb-s6); }
.bb-grid--flush  { gap: 0; }

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

/* ----------------------------------------
   Column start offsets
---------------------------------------- */
.bb-col-start-1  { grid-column-start: 1; }
.bb-col-start-2  { grid-column-start: 2; }
.bb-col-start-3  { grid-column-start: 3; }
.bb-col-start-4  { grid-column-start: 4; }
.bb-col-start-5  { grid-column-start: 5; }
.bb-col-start-6  { grid-column-start: 6; }
.bb-col-start-7  { grid-column-start: 7; }

/* ----------------------------------------
   iPad / tablet portrait (max 1024px)
---------------------------------------- */
@media (max-width: 1024px) {
  .bb-col-md-1  { grid-column: span 1; }
  .bb-col-md-2  { grid-column: span 2; }
  .bb-col-md-3  { grid-column: span 3; }
  .bb-col-md-4  { grid-column: span 4; }
  .bb-col-md-5  { grid-column: span 5; }
  .bb-col-md-6  { grid-column: span 6; }
  .bb-col-md-7  { grid-column: span 7; }
  .bb-col-md-8  { grid-column: span 8; }
  .bb-col-md-9  { grid-column: span 9; }
  .bb-col-md-10 { grid-column: span 10; }
  .bb-col-md-11 { grid-column: span 11; }
  .bb-col-md-12 { grid-column: span 12; }
}

/* ----------------------------------------
   Mobile (max 768px)
---------------------------------------- */
@media (max-width: 768px) {
  .bb-col-sm-1  { grid-column: span 1; }
  .bb-col-sm-2  { grid-column: span 2; }
  .bb-col-sm-3  { grid-column: span 3; }
  .bb-col-sm-4  { grid-column: span 4; }
  .bb-col-sm-6  { grid-column: span 6; }
  .bb-col-sm-12 { grid-column: span 12; }

  /* Most content goes full width on mobile */
  .bb-col-1,
  .bb-col-2,
  .bb-col-3,
  .bb-col-4,
  .bb-col-5,
  .bb-col-6,
  .bb-col-7,
  .bb-col-8,
  .bb-col-9,
  .bb-col-10,
  .bb-col-11 {
    grid-column: span 12;
  }
}

/* ----------------------------------------
   Common layout shortcuts
---------------------------------------- */

/* Two equal columns */
.bb-grid--2col .bb-col-auto { grid-column: span 6; }

/* Three equal columns */
.bb-grid--3col .bb-col-auto { grid-column: span 4; }

/* Four equal columns */
.bb-grid--4col .bb-col-auto { grid-column: span 3; }

@media (max-width: 1024px) {
  .bb-grid--4col .bb-col-auto { grid-column: span 6; }
  .bb-grid--3col .bb-col-auto { grid-column: span 6; }
}

@media (max-width: 768px) {
  .bb-grid--2col .bb-col-auto,
  .bb-grid--3col .bb-col-auto,
  .bb-grid--4col .bb-col-auto { grid-column: span 12; }
}

/* ----------------------------------------
   Row (horizontal flex for single-line layouts)
---------------------------------------- */
.bb-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bb-s4);
}

.bb-row--between {
  justify-content: space-between;
}