/*
 * OIT Title + Columns — grid layout + pre-animation state.
 *
 * Layout is two nested CSS grids defined here in plain CSS rather than
 * inline Tailwind classes, because:
 *   - The Proto-Blocks editor wraps repeater items in extra UI shells
 *     that defeat `display: contents` and can interfere with utility
 *     scanning, so layout-critical rules live in the stylesheet.
 *   - Plain CSS for grid-template-columns is more reliable than the
 *     arbitrary-value Tailwind syntax for non-uniform tracks.
 *
 * Mobile: single column, everything stacks (title, then each column).
 * Desktop (>=1024px): outer track is `1fr 3fr` (title takes a quarter,
 * the columns container takes the rest); inner repeater is an N-column
 * grid sized by the `--c1`/`--c2`/`--c3`/`--c4` modifier class the
 * template applies based on item count (clamped 1-4).
 *
 * The track count is driven by a modifier class -- not a CSS custom
 * property -- because Proto-Blocks' repeater editor strips inline
 * `style` attributes when re-rendering the field but preserves
 * `className`. Using a class keeps the editor preview in sync with the
 * front-end layout. Each column ends up the same width as the title
 * column visually when count = 3; counts of 1, 2, or 4 produce wider
 * or narrower tracks accordingly.
 */

.oit-title-columns__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.oit-title-columns__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .oit-title-columns__grid {
    grid-template-columns: 1fr 3fr;
    gap: 60px;
  }

  .oit-title-columns__cols {
    /* Base rule -- the per-count modifiers below override the track
       count. The default `repeat(3, 1fr)` keeps already-saved blocks
       (rendered before the modifier class existed) looking the same. */
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
  }

  .oit-title-columns__cols.oit-title-columns__cols--c1 {
    grid-template-columns: 1fr;
  }
  .oit-title-columns__cols.oit-title-columns__cols--c2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .oit-title-columns__cols.oit-title-columns__cols--c3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .oit-title-columns__cols.oit-title-columns__cols--c4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Stacked variant: outer grid collapses to a single column so the
     title spans full width above the columns. The inner repeater grid
     is unchanged -- columns still render 3-up on desktop. Mobile is
     already a single-column stack so no override is needed there. */
  .oit-title-columns--stacked .oit-title-columns__grid {
    grid-template-columns: 1fr;
  }
}

/* Stacked-only grid row-gap reset.
 *
 * The base grid uses a uniform `gap` between its items, but the
 * stacked design calls for unequal gaps (title->intro vs intro->cols).
 * Zero out the grid row-gap here so per-item Tailwind margin utilities
 * applied in the template (mt-5 on intro, mt-10 on cols) control the
 * spacing directly. Inline mode keeps its uniform grid gap untouched.
 *
 * This rule lives in plain CSS (not a Tailwind utility on the grid)
 * because the surrounding layout rules for .__grid are already plain
 * CSS -- the codebase pins layout to the stylesheet and uses Tailwind
 * for everything else. Keeping the override in the same file means
 * the grid behavior reads in one place. */
.oit-title-columns--stacked .oit-title-columns__grid {
  row-gap: 0;
}

/* Pre-animation state — hide title + columns before GSAP takes over so
   the fade-in doesn't flash the final state for one frame. data-proto-animate
   flips to "done" inside the ScrollTrigger onEnter callback. */
.oit-title-columns[data-proto-animate]:not([data-proto-animate="done"]) .oit-title-columns__title,
.oit-title-columns[data-proto-animate]:not([data-proto-animate="done"]) .oit-title-columns__intro,
.oit-title-columns[data-proto-animate]:not([data-proto-animate="done"]) .oit-title-columns__col {
  opacity: 0;
}