/* ==========================================================================
   custom-grid-eq.css
   Bootstrap 5 "knock-off" grid system for Squarespace Code Blocks
   --------------------------------------------------------------------------
   Scope: Applies ONLY within .root-wrapper so it never leaks into the rest
   of the Squarespace page/theme.

   Structure:
     .root-wrapper      -> always 100% of the Code Block / viewport width
     .content-wrapper--wN-oM -> sets width (N/12 columns) + symmetric offset
                                 (M columns each side), replicating
                                 Bootstrap's col + offset-left + offset-right
     .inner-content     -> layout of the actual dynamic content:
                              .inner-content--w12        -> full-width host
                                                             for card decks
                              .inner-content--cols-N     -> single row of N
                                                             equal, auto-sizing
                                                             child columns

   Does NOT handle: margin/padding utilities, alignment/centering utilities,
   or card deck internals — those are handled by existing utility classes
   and card deck components per project convention.

   Responsive: below 768px, all width/offset and column-row layouts
   collapse to a single full-width stacked column.
   ========================================================================== */

:root {
  --grid-columns: 12;
  --grid-gutter: 1.5rem;      /* default gap between .inner-content--cols-N children */
  --grid-breakpoint-mobile: 768px;
}

/* --------------------------------------------------------------------------
   Box-sizing reset, scoped to the component only
   -------------------------------------------------------------------------- */
.root-wrapper,
.root-wrapper *,
.root-wrapper *::before,
.root-wrapper *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. ROOT WRAPPER — always 100% of the Code Block / viewport
   -------------------------------------------------------------------------- */
.root-wrapper {
  width: 100%;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. CONTENT WRAPPER — width + symmetric offset (Bootstrap col + offset)
      width  = N/12 columns
      offset = M/12 columns applied to BOTH left and right (centers content)
      N + (2 * M) always equals 12
   -------------------------------------------------------------------------- */
.content-wrapper--w12 {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.content-wrapper--w10-o1 {
  width: 83.3333%;
  margin-left: 8.3333%;
  margin-right: 8.3333%;
}

.content-wrapper--w8-o2 {
  width: 66.6667%;
  margin-left: 16.6667%;
  margin-right: 16.6667%;
}

.content-wrapper--w6-o3 {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

.content-wrapper--w4-o4 {
  width: 33.3333%;
  margin-left: 33.3333%;
  margin-right: 33.3333%;
}

.content-wrapper--w2-o5 {
  width: 16.6667%;
  margin-left: 41.6667%;
  margin-right: 41.6667%;
}

/* --------------------------------------------------------------------------
   3. INNER CONTENT — dynamic content layout
   -------------------------------------------------------------------------- */
.inner-content {
  width: 100%;
}

/* Card deck host: full width, cards laid out by existing card deck component */
.inner-content--w12 {
  width: 100%;
}

/* Single-row, N equal auto-sizing child columns */
.inner-content--cols-2,
.inner-content--cols-4,
.inner-content--cols-6,
.inner-content--cols-8,
.inner-content--cols-10,
.inner-content--cols-12 {
  display: grid;
  width: 100%;
  gap: var(--grid-gutter);
  align-items: stretch; /* default, stated explicitly: row columns match height */
}

.inner-content--cols-2  { grid-template-columns: repeat(2, 1fr); }
.inner-content--cols-4  { grid-template-columns: repeat(4, 1fr); }
.inner-content--cols-6  { grid-template-columns: repeat(6, 1fr); }
.inner-content--cols-8  { grid-template-columns: repeat(8, 1fr); }
.inner-content--cols-10 { grid-template-columns: repeat(10, 1fr); }
.inner-content--cols-12 { grid-template-columns: repeat(12, 1fr); }

/* --------------------------------------------------------------------------
   3a. INNER CONTENT — mixed/unequal-width columns in a single row
       Use .inner-content--cols-12 as the container (a true 12-column grid),
       then apply an .inner-content__col--N class to each child to set how
       many of the 12 columns it should consume. The N values across a row
       should sum to 12 (e.g. --col--4 + --col--8, or --col--3 three times).
       This is the mixed-width equivalent of Bootstrap's col-4 / col-8.
   -------------------------------------------------------------------------- */
.inner-content__col--1  { grid-column: span 1; }
.inner-content__col--2  { grid-column: span 2; }
.inner-content__col--3  { grid-column: span 3; }
.inner-content__col--4  { grid-column: span 4; }
.inner-content__col--5  { grid-column: span 5; }
.inner-content__col--6  { grid-column: span 6; }
.inner-content__col--7  { grid-column: span 7; }
.inner-content__col--8  { grid-column: span 8; }
.inner-content__col--9  { grid-column: span 9; }
.inner-content__col--10 { grid-column: span 10; }
.inner-content__col--11 { grid-column: span 11; }
.inner-content__col--12 { grid-column: span 12; }

/* --------------------------------------------------------------------------
   3b. INNER CONTENT — equal-height media column
       Apply .inner-content__col--media to a column (alongside its
       .inner-content__col--N span class) when its direct-child image/video
       should stretch to fill the same height as its sibling column(s) in
       the row, e.g. a text + image pattern. Rows already match height by
       default (align-items: stretch); this makes the media element itself
       fill that stretched height instead of sitting at its intrinsic size.
   -------------------------------------------------------------------------- */
.inner-content__col--media > img,
.inner-content__col--media > picture,
.inner-content__col--media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   3c. TEXT + IMAGE ROW — automatic alternating orientation
       Wrap each text+image block instance in ".text-image-row" (e.g. on the
       outer <section>). Content Managers use the SAME markup for every row —
       no per-row class changes needed. The odd/even swap and padding are
       applied automatically based on the row's position among its siblings.

       Requires: this component's two columns are
         - text column:  .inner-content__col--6 (no media class)
         - image column: .inner-content__col--6.inner-content__col--media

       Assumption: consecutive .text-image-row instances are direct siblings
       with nothing else in between (true for a JS render loop that outputs
       one row after another into a single container).

       Desktop:
         odd rows  (1st, 3rd...): text LEFT  / image RIGHT (DOM order, default)
                                   text padding: 24% / 4rem (right col has more room)
         even rows (2nd, 4th...): image LEFT / text RIGHT (visually reordered)
                                   text padding: 4rem / 24%
   -------------------------------------------------------------------------- */
.text-image-row:nth-child(odd) .inner-content__col--6:not(.inner-content__col--media) {
  padding-left: 24%;
  padding-right: 4rem;
}

.text-image-row:nth-child(even) .inner-content__col--6.inner-content__col--media {
  order: 1;
}

.text-image-row:nth-child(even) .inner-content__col--6:not(.inner-content__col--media) {
  order: 2;
  padding-left: 4rem;
  padding-right: 24%;
}


@media (max-width: 768px) {

  .content-wrapper--w10-o1,
  .content-wrapper--w8-o2,
  .content-wrapper--w6-o3,
  .content-wrapper--w4-o4,
  .content-wrapper--w2-o5 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .inner-content--cols-2,
  .inner-content--cols-4,
  .inner-content--cols-6,
  .inner-content--cols-8,
  .inner-content--cols-10,
  .inner-content--cols-12 {
    grid-template-columns: 1fr;
  }

  /* Force any explicitly-spanned child (.inner-content__col--N) to occupy
     the full single mobile column, regardless of its assigned span, so it
     stacks correctly instead of trying to preserve its desktop span. */
  .inner-content__col--1,
  .inner-content__col--2,
  .inner-content__col--3,
  .inner-content__col--4,
  .inner-content__col--5,
  .inner-content__col--6,
  .inner-content__col--7,
  .inner-content__col--8,
  .inner-content__col--9,
  .inner-content__col--10,
  .inner-content__col--11,
  .inner-content__col--12 {
    grid-column: 1 / -1;
  }

  /* Text + Image rows: on mobile, image always displays above text on
     EVERY row (odd or even), and the desktop padding is removed. This
     overrides any desktop "order" or padding set in section 3c above,
     regardless of row parity. */
  .text-image-row .inner-content__col--media {
    order: -1;
  }

  .text-image-row .inner-content__col--6:not(.inner-content__col--media) {
    order: 0;
    padding-left: 0!important;
    padding-right: 0!important;
  }
}