/**
 * Journal Grid block (blocks/content/journal-grid.php)
 *
 * Category filter pills over a 4-up post grid, with pagination beneath.
 *
 * Type follows the same Figma scale as the Learn Mezcal page: card titles are
 * heading/h6 (20px / 120%), badges are body/xs/strong (12px / 140%), and pills
 * and page numbers are body/md (16px / 140%) in Roboto Condensed. Badge colours
 * come from the shared map in category-badges.css via the dm-cat classes.
 */

.dm-jgrid {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.dm-jgrid__inner {
	padding-inline: 16px;
}

/* ---- AJAX swap state ------------------------------------------------- *
 * The body dims and stops taking clicks while a request is in flight. Kept to
 * opacity only — no spinner and no collapse — so the grid holds its height and
 * the page does not jump under the pointer between the old and new cards. */
.dm-jgrid__body {
	transition: opacity 0.18s ease;
}

.dm-jgrid.is-loading .dm-jgrid__body {
	opacity: 0.45;
	pointer-events: none;
}

.dm-jgrid__empty {
	margin: 0;
	padding-block: 2.5rem;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: 20px;                     /* heading/h6 */
	line-height: 1.2;
}

/* ---- Filter pills ---------------------------------------------------- */
.dm-jgrid__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.dm-jgrid__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.95rem;
	border: 1px solid color-mix(in srgb, var(--color-forest) 28%, transparent);
	border-radius: 4px;
	background: transparent;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dm-jgrid__pill:hover,
.dm-jgrid__pill:focus-visible {
	border-color: var(--dm-border-default-dark-strong);
	background: color-mix(in srgb, var(--color-forest) 6%, transparent);
}

.dm-jgrid__pill.is-active {
	background: var(--dm-bg-default-tertiary);
	border-color: var(--dm-border-default-dark-strong);
	color: var(--dm-fg-default-white);
}

/* ---- Grid ------------------------------------------------------------ */
.dm-jgrid__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.4vw, 2.25rem);
}

.dm-jgrid__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.dm-jgrid__card-media {
	display: block;
	overflow: hidden;
	border-radius: 3px;
	aspect-ratio: 5 / 4;
	background: var(--color-forest, var(--dm-bg-default-tertiary));
}

.dm-jgrid__card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Posts with no featured image fall back to a shared placeholder photo rather
   than a flat forest block. WebP first, JPG for older browsers; the forest
   colour stays as the backdrop while the image loads. */
.dm-jgrid__card-img--empty {
	background-color: var(--color-forest, var(--dm-bg-default-tertiary));
	background-image: url(../images/journal-placeholder.jpg);
	background-image: image-set(
		url(../images/journal-placeholder.webp) type("image/webp"),
		url(../images/journal-placeholder.jpg) type("image/jpeg")
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Colours come from category-badges.css; size and spacing are owned here. */
.dm-jgrid__badge {
	display: inline-flex;
	align-items: center;
	margin-top: 0.85rem;
	padding: 0.25rem 0.7rem;
	border-radius: 4px;
	background: var(--cat-bg, var(--dm-fg-accent-yellow));
	color: var(--cat-fg, var(--dm-fg-default-primary));
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 12px;                     /* body/xs/strong */
	font-weight: 500;
	line-height: 1.4;                    /* 140% → 16.8px */
	text-transform: uppercase;
}

/* Bottom-aligned so the arrow sits on the title's last line when it wraps,
   the way the design shows it; identical to centred for one-line titles. */
.dm-jgrid__card-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.9rem;
	color: var(--dm-fg-default-primary);
}

.dm-jgrid__card-title {
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-size: 20px;                     /* heading/h6 */
	line-height: 1.2;                    /* 120% → 24px */
}

.dm-jgrid__arrow {
	flex: 0 0 auto;
	color: var(--dm-fg-default-primary);
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
	.dm-jgrid__card:hover .dm-jgrid__card-img,
	.dm-jgrid__card:focus-visible .dm-jgrid__card-img {
		transform: scale(1.05);
	}

	.dm-jgrid__card:hover .dm-jgrid__arrow,
	.dm-jgrid__card:focus-visible .dm-jgrid__arrow {
		transform: translateX(5px);
	}
}

/* ---- Pagination ------------------------------------------------------ */
.dm-jgrid__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* One shared shape for numbers, arrows and the dots, so the row reads evenly.
   Fixed width == height keeps every slot a true circle, not a pill. */
.dm-jgrid__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	color: var(--dm-fg-default-primary);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 140%;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.dm-jgrid__pagination .page-numbers svg {
	display: block;
}

.dm-jgrid__pagination a.page-numbers:hover,
.dm-jgrid__pagination a.page-numbers:focus-visible {
	background: color-mix(in srgb, var(--color-forest) 9%, transparent);
}

.dm-jgrid__pagination .page-numbers.current {
	background: var(--dm-bg-default-tertiary);
	color: var(--dm-fg-default-white);
}

.dm-jgrid__pagination .page-numbers.dots {
	background: none;
}

.dm-jgrid__page--disabled {
	opacity: 0.3;
}

/* ---- Responsive ------------------------------------------------------ */
/* Tablet: 2-up. */
@media (max-width: 1100px) {
	.dm-jgrid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: the desktop card, one per row — full-bleed image, badge under it,
   then the title with the arrow held at the right edge of the same row. */
@media (max-width: 767px) {
	.dm-jgrid__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-inline: -16px;
		padding-inline: 16px;
	}

	.dm-jgrid__filters::-webkit-scrollbar {
		display: none;
	}

	.dm-jgrid__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.dm-jgrid__card-media {
		aspect-ratio: 4 / 3;
	}

	.dm-jgrid__badge {
		margin-top: 0.75rem;
	}

	.dm-jgrid__card-foot {
		gap: 1.25rem;
		margin-top: 0.75rem;
	}

	.dm-jgrid__card-title {
		font-size: 18px;                 /* heading-mobile/h6-M */
	}

	.dm-jgrid__arrow {
		width: 20px;
		height: 20px;
	}

	.dm-jgrid__pagination .page-numbers {
		width: 44px;
		height: 44px;
	}
}

/* ---- Small desktop (1024-1280) -------------------------------------- *
 * No board for /blog/ at this size; this follows the boards that do:
 *   - py-80 sections on the capped 1080 container (no extra px-4)
 *   - cards are ui-article-cards (859:13125): 280 minimum width, so three
 *     per row here (four would need 1192), 32 apart like the Learn row,
 *     48 between rows like the PLP grid; 4px image corners, 16 to a 24-tall
 *     badge, 16 to the title with a 24 arrow
 *   - filter pills are 40 tall, px-16, body/md, 8 apart, 40 above the grid
 *     (the PLP filter buttons)
 *   - pagination is the PLP ui_paging: 48 items 2 apart, 56 under the grid
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-jgrid {
		padding-block: 80px;
	}

	.dm-jgrid__inner {
		padding-inline: 0;
	}

	.dm-jgrid__filters {
		gap: 8px;
		margin-bottom: 40px;
	}

	.dm-jgrid__pill {
		height: 40px;
		padding: 0 16px;
		font-size: 16px;                /* body/md/regular */
	}

	.dm-jgrid__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px 32px;
	}

	.dm-jgrid__card-media {
		border-radius: 4px;
	}

	.dm-jgrid__badge {
		height: 24px;
		margin-top: 16px;
		padding: 0 8px;
	}

	.dm-jgrid__card-foot {
		gap: 16px;
		margin-top: 16px;
	}

	.dm-jgrid__arrow {
		width: 24px;
		height: 24px;
	}

	.dm-jgrid__pagination {
		gap: 2px;
		margin-top: 56px;
	}
}