/* ============================================================
   OE Event Track Group — parallel tracks layout
   ------------------------------------------------------------
   Lays child Event Timelines side by side in a responsive grid that stacks
   when a track would be narrower than --oe-event-track-min (set per block).
   Each child timeline keeps its own dividers + track label.

   IMPORTANT: Blockstudio renders <InnerBlocks/> inside a single wrapper <div>
   (which carries the `orientation` attribute from the template on the front
   end, and is `.block-editor-block-list__layout` in the editor). The child
   timelines are inside THAT wrapper, so the grid must live on the wrapper — not
   on `.oe-block-event-track-group` itself, or every track ends up stacked.
   ============================================================ */

.oe-block-event-track-group {
	margin-block: 0.75rem;
}

/* FRONT END only: one row of equal-width tracks on desktop. (In the editor the
   tracks deliberately stack — clearer to edit, and it prevents the block
   appenders overlapping.) */
.oe-block-event-track-group > [orientation] {
	display: grid;
	grid-auto-flow: column;                 /* all tracks in ONE row on desktop */
	grid-auto-columns: minmax(0, 1fr);      /* equal widths, allowed to shrink */
	gap: 1.5rem 2rem;
	align-items: start;
}

/* Stack the tracks vertically on tablet / mobile. */
@media (max-width: 782px) {
	.oe-block-event-track-group > [orientation] {
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}
}

/* Allow grid items to shrink rather than force horizontal overflow. */
.oe-block-event-track-group > [orientation] > * {
	min-width: 0;
}