/* ==========================================================================
   Shared post-template layout styles
   Used by:
     - core/post-template "Event Grid" block style           (grid layout)
     - core/post-template "Horizontal Scroll" block style    (carousel layout)
     - g52/event-card-carousel .g52-carousel__track           (You May Also Like)
   ========================================================================== */

/* ==========================================================================
   Event Grid layout
   Responsive columns: 1 → 2 → 3 → 4 → 5 across breakpoints.
   Mirrors the filter-bar grid (.g52-event-grid).
   ========================================================================== */

.wp-block-post-template.is-style-event-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--g52--card-gap, 2rem);
	margin: 0;
	padding: 1rem;
}

.wp-block-post-template.is-style-event-grid > li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Propagate stretch through any editor wrapper divs between <li> and card */
.wp-block-post-template.is-style-event-grid > li > * {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wp-block-post-template.is-style-event-grid > li .g52-event-card {
	flex: 1;
}

@media (max-width: 639px) {
	.wp-block-post-template.is-style-event-grid {
		gap: 1.5rem;
	}
}

@media (min-width: 640px) {
	.wp-block-post-template.is-style-event-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.wp-block-post-template.is-style-event-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.wp-block-post-template.is-style-event-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1280px) {
	.wp-block-post-template.is-style-event-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* --- Scroll container (shared rules) --- */

.wp-block-post-template.is-style-horizontal-scroll,
.g52-carousel__track {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 1rem;
	flex-wrap: nowrap;
	padding-bottom: 0.75rem;
	-webkit-overflow-scrolling: touch;
}

/* --- Card slots ---
   Override the base card's `height: 100%` (designed for CSS Grid cells)
   with `auto` so that `align-items: stretch` on the flex container
   can equalise heights across the row. */

.wp-block-post-template.is-style-horizontal-scroll > li,
.g52-carousel__track > .wp-block-g52-event-card {
	flex: 0 0 220px;
	scroll-snap-align: start;
	list-style: none;
	height: auto;
}

.wp-block-post-template.is-style-horizontal-scroll > li > .g52-event-card {
	height: 100%;
}

@media (min-width: 640px) {
	.wp-block-post-template.is-style-horizontal-scroll > li,
	.g52-carousel__track > .g52-event-card {
		flex-basis: 240px;
	}
}

@media (min-width: 1024px) {
	.wp-block-post-template.is-style-horizontal-scroll > li,
	.g52-carousel__track > .g52-event-card {
		flex-basis: 260px;
	}
}

/* --- Scrollbar styling --- */

.wp-block-post-template.is-style-horizontal-scroll,
.g52-carousel__track {
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.wp-block-post-template.is-style-horizontal-scroll:hover,
.g52-carousel__track:hover {
	scrollbar-color: var(--g52--color--border, #e5e7eb) transparent;
}

.wp-block-post-template.is-style-horizontal-scroll::-webkit-scrollbar,
.g52-carousel__track::-webkit-scrollbar {
	height: 6px;
}

.wp-block-post-template.is-style-horizontal-scroll::-webkit-scrollbar-track,
.g52-carousel__track::-webkit-scrollbar-track {
	background: transparent;
}

.wp-block-post-template.is-style-horizontal-scroll::-webkit-scrollbar-thumb,
.g52-carousel__track::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 3px;
	transition: background 200ms ease;
}

.wp-block-post-template.is-style-horizontal-scroll:hover::-webkit-scrollbar-thumb,
.g52-carousel__track:hover::-webkit-scrollbar-thumb {
	background: var(--g52--color--border, #e5e7eb);
}

.wp-block-post-template.is-style-horizontal-scroll:hover::-webkit-scrollbar-thumb:hover,
.g52-carousel__track:hover::-webkit-scrollbar-thumb:hover {
	background: var(--g52--color--primary, #D90429);
}

/* --- Right-edge fade mask (hints at scrollability) --- */

.g52-carousel__track-wrap,
.wp-block-post-template.is-style-horizontal-scroll {
	position: relative;
}

.g52-carousel__track-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0.75rem;
	width: 3rem;
	background: linear-gradient(to left, var(--g52--color--card, #ffffff), transparent);
	pointer-events: none;
	z-index: 1;
}

/* --- Query Loop: override default grid layout --- */

.wp-block-post-template.is-style-horizontal-scroll {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.wp-block-post-template.is-style-horizontal-scroll > li {
	margin: 0;
	padding: 0;
}