/* ==========================================================================
   Slice / Section layout system
   ========================================================================== */

/* Base slice: full-width content band */
.slice {
  position: relative;                      /* allows absolutely positioned elements if needed */
  width: 100%;                             /* ensures the slice spans full viewport width */
  padding-block: var(--space-xl);          /* vertical spacing between slices (top + bottom) */
  padding-inline: var(--space-l);          /* horizontal gutters for content alignment */
  background: var(--bg);            /* background colour based on current theme (light/dark) */
  color: var(--text);               /* text colour based on current theme */
  /* border: 0.5px red solid; */
}

@media (max-width: 720px) {
  .slice {padding-inline: var(--space-m);} /*16px*/
}

/* Use larger or smaller modifiers if needed */
.slice--flush  { padding-block: 0; }
.slice--tight  { padding-block: var(--space-l); }   /* e.g. compact sections */
.slice--loose  { padding-block: var(--space-xxl); } /* e.g. big hero sections */
.slice--intro  { padding-block-start: var(--space-xl); padding-block-end: var(--space-l);}

/* Optional dark variant (pairs with your .dark variable remapping) */
.slice.dark {
  background: var(--bg);
  color: var(--text);
}

/* ============================================================
   Mobile-only full-bleed utility for slices
   Makes the slice extend to the viewport edges on small screens.
   ============================================================ */
   
@media (max-width: 720px) {
  .slice--mobile-fullbleed {
    padding-inline: 0;     /* remove horizontal gutters */
  }

  /* Remove default figure margins if present */
  .slice--mobile-fullbleed figure {
    margin: 0;
  }
}

/* Any slice that opts in gets a divider line at the top */
.slice.slice--with-divider {
  position: relative;
}

/* The divider line */
.slice.slice--with-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-l);
  right: var(--space-l);
  height: 1px;
  background: var(--colour-light-200);
}

@media (max-width: 720px) {
  .slice.slice--with-divider::before {
    left: var(--space-m);
    right: var(--space-m);
  }
}


/* Generic 8-col slice grid (opt-in) */
.slice--grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-m);
}

/* Column span helpers (1–8) — use only grid-column-end so they don't reset the start */
.col-span-1 { grid-column-end: span 1; }
.col-span-2 { grid-column-end: span 2; }
.col-span-3 { grid-column-end: span 3; }
.col-span-4 { grid-column-end: span 4; }
.col-span-5 { grid-column-end: span 5; }
.col-span-6 { grid-column-end: span 6; }
.col-span-7 { grid-column-end: span 7; }
.col-span-8 { grid-column-end: span 8; }

/* Column start helpers (unchanged) */
.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; }
.col-start-8 { grid-column-start: 8; }

/* Mobile fallback if you’re not using container queries */
@media (max-width: 720px) {
  .slice--grid { grid-template-columns: 1fr; }
  .slice--grid > * { grid-column: 1 / -1; } /* stack everything */
}

.stack > * + * { margin-block-start: var(--space-m); }