/*
 * Extra display layouts for the Query Loop.
 *
 * Part of the Web Weasel child theme. Loaded from inc/enqueue-assets.php and,
 * for the editor canvas, from inc/query-loop-layouts.php via add_editor_style().
 * Order matters: this file is printed after the previous module.
 *
 * Each layout is a block style registered on core/post-template, so its class
 * is is-style-<name>. The column count comes from the sidebar control of the
 * Query Loop and reaches this file as --ww-loop-columns; the smaller
 * breakpoints override the derived --ww-loop-columns-now instead, because an
 * inline custom property set on the element would win over any media query.
 */

.wp-block-post-template.is-style-ww-masonry,
.wp-block-post-template.is-style-ww-scroller {
	--ww-loop-columns-now: var(--ww-loop-columns, 3);
	--ww-loop-gap: var(--wp--style--block-gap, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 989px) {
	.wp-block-post-template.is-style-ww-masonry,
	.wp-block-post-template.is-style-ww-scroller {
		--ww-loop-columns-now: 2;
	}
}

@media (max-width: 781px) {
	.wp-block-post-template.is-style-ww-masonry,
	.wp-block-post-template.is-style-ww-scroller {
		--ww-loop-columns-now: 1;
	}
}

/* --- Mosaïque (masonry) -------------------------------------------------
   CSS multi-column: cards keep their natural height and the columns stay
   balanced, without a line of JavaScript. The trade-off is the reading
   order, which runs down each column instead of across the rows; the
   @supports block below picks up native grid masonry where the browser
   already ships it, and restores the row order there. */
.wp-block-post-template.is-style-ww-masonry {
	display: block;
	columns: var(--ww-loop-column-width, auto) var(--ww-loop-columns-now);
	column-gap: var(--ww-loop-gap);
}

.wp-block-post-template.is-style-ww-masonry > li {
	display: block;
	width: 100%;
	margin: 0 0 var(--ww-loop-gap);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* The last card of each column carries a bottom margin the column box does
   not absorb, which leaves a ragged gap under the shortest column. */
.wp-block-post-template.is-style-ww-masonry > li:last-child {
	margin-bottom: 0;
}

@supports (grid-template-rows: masonry) {
	.wp-block-post-template.is-style-ww-masonry {
		display: grid;
		grid-template-columns: repeat(var(--ww-loop-columns-now), minmax(0, 1fr));
		grid-template-rows: masonry;
		gap: var(--ww-loop-gap);
	}

	.wp-block-post-template.is-style-ww-masonry > li {
		margin: 0;
	}
}

/* Masonry, placed by assets/js/query-loop-masonry.js.

   The script adds .is-ww-masonry-js and positions every card itself. The rules
   above stay the layout when the script does not run, so the loop is never
   left to a stylesheet that expects JavaScript. Specificity here is one class
   higher on purpose: it has to win over the native-masonry @supports block in
   the browsers that ship it, which the script cannot animate. */
.wp-block-post-template.is-style-ww-masonry.is-ww-masonry-js {
	position: relative;
	display: block;
	columns: auto;
	/* Still read by the script to size the columns and the vertical rhythm. */
	column-gap: var(--ww-loop-gap);
}

.wp-block-post-template.is-style-ww-masonry.is-ww-masonry-js > li {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

/* Transitions arrive with .is-ww-masonry-ready, one frame after the first
   placement, so cards do not fly in from the top left on load. Opening an
   accordion then slides the cards below it instead of snapping them. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-template.is-style-ww-masonry.is-ww-masonry-ready {
		transition: height 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
	}

	.wp-block-post-template.is-style-ww-masonry.is-ww-masonry-ready > li {
		transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
	}
}

/* --- Défilement horizontal ----------------------------------------------
   A single row that scrolls sideways with snap points. Handy for a teaser
   loop where the grid would push the rest of the page too far down. */
.wp-block-post-template.is-style-ww-scroller {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ww-loop-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	/* Room for the card shadow and the scrollbar. */
	padding-bottom: 0.75rem;
}

.wp-block-post-template.is-style-ww-scroller > li {
	flex: 0 0 calc(
		(100% - (var(--ww-loop-columns-now) - 1) * var(--ww-loop-gap))
		/ var(--ww-loop-columns-now)
	);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}