/**
 * JA Canada News Grid — Stylesheet
 *
 * Architecture:
 *  - Mobile-first base styles
 *  - Container queries primary (responds to widget's own width)
 *  - @supports not (...) viewport-query fallback for older browsers
 *  - Fluid typography & spacing via clamp()
 *  - Hover/motion/print media queries follow accessibility best practices
 *
 * Breakpoint strategy (container-query, on .jacng-news-grid container width):
 *   ≥ 480px  → small grids go 2-column
 *   ≥ 720px  → featured-grid goes side-by-side, 3-column uniform activates,
 *               list layout shows side-by-side image + content
 *   ≥ 960px  → 4-column uniform activates
 */

/* ==========================================================================
   1. Setup & tokens
   ========================================================================== */

.jacng-news-grid {
	/* Container queries opt-in — children can use @container jacng (...) */
	container-type: inline-size;
	container-name: jacng;

	/* Color tokens (overridable via Elementor selectors) */
	--jacng-pill-color: #1B3C4F;
	--jacng-pill-active-bg: #1B3C4F;
	--jacng-badge-bg: #E8F048;
	--jacng-badge-text: #1B3C4F;
	--jacng-card-radius: 12px;
	--jacng-title-color: #1B3C4F;
	--jacng-featured-title: #FFFFFF;
	--jacng-meta-color: #6b7280;
	--jacng-overlay: rgba(15, 23, 42, 0.55);

	/* Fluid spacing tokens — cqi units scale with the widget's own container */
	--jacng-grid-gap: clamp(16px, 2.5cqi, 24px);
	--jacng-card-pad: clamp(16px, 3cqi, 24px);

	font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	width: 100%;
	box-sizing: border-box;
}

/* Fallback for browsers without container query support — viewport-relative units */
@supports not (container-type: inline-size) {
	.jacng-news-grid {
		--jacng-grid-gap: clamp(16px, 2.5vw, 24px);
		--jacng-card-pad: clamp(16px, 3vw, 24px);
	}
}

.jacng-news-grid *,
.jacng-news-grid *::before,
.jacng-news-grid *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   2. Filter pills
   ========================================================================== */

.jacng-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 16px;
	margin: 0 0 var(--jacng-grid-gap) 0;
	border-bottom: 1px solid #e5e7eb;
}

.jacng-filter-pill {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid var(--jacng-pill-color);
	border-radius: 4px;
	padding: 8px 14px;
	min-height: 36px;
	font-family: inherit;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--jacng-pill-color);
	cursor: pointer;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@container jacng (min-width: 540px) {
	.jacng-filter-pill {
		padding: 8px 16px;
		font-size: 12px;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.jacng-filter-pill {
			padding: 8px 16px;
			font-size: 12px;
		}
	}
}

@media (hover: hover) {
	.jacng-filter-pill:hover {
		background-color: var(--jacng-pill-active-bg);
		color: #fff;
	}
}

.jacng-filter-pill:focus-visible {
	background-color: var(--jacng-pill-active-bg);
	color: #fff;
	outline: none;
}

.jacng-filter-pill--active {
	background-color: var(--jacng-pill-active-bg);
	color: #fff;
}

/* ==========================================================================
   3. Grid wrapper / loading state
   ========================================================================== */

.jacng-grid-wrapper {
	position: relative;
	min-height: 200px;
}

.jacng-grid-wrapper.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.jacng-grid-wrapper.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid rgba(27, 60, 79, 0.25);
	border-top-color: var(--jacng-pill-color);
	border-radius: 50%;
	animation: jacng-spin 0.8s linear infinite;
}

@keyframes jacng-spin {
	to { transform: rotate(360deg); }
}

.jacng-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--jacng-meta-color);
	font-size: 14px;
	padding: 40px 16px;
	margin: 0;
}

/* ==========================================================================
   4. Layouts (mobile-first)
   ========================================================================== */

/* Featured-grid: stacked by default; side-by-side on wider containers */
.jacng-grid--featured-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--jacng-grid-gap);
}

@container jacng (min-width: 720px) {
	.jacng-grid--featured-grid {
		grid-template-columns: 1fr 2fr;
		align-items: stretch;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 1024px) {
		.jacng-grid--featured-grid {
			grid-template-columns: 1fr 2fr;
			align-items: stretch;
		}
	}
}

.jacng-grid--uniform,
.jacng-grid--list {
	display: block;
}

/* Paginated wrapper (overflow surface for slide animation) */
.jacng-paginated {
	position: relative;
	overflow: hidden;
	min-height: 100px;
}

.jacng-paginated__inner {
	display: grid;
	gap: var(--jacng-grid-gap);
	grid-template-columns: 1fr;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	transform: translateX(0);
	opacity: 1;
	will-change: transform, opacity;
}

/* Column counts respond to the widget's own container width */
@container jacng (min-width: 480px) {
	.jacng-paginated__inner--2col,
	.jacng-paginated__inner--3col,
	.jacng-paginated__inner--4col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container jacng (min-width: 720px) {
	.jacng-paginated__inner--3col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container jacng (min-width: 960px) {
	.jacng-paginated__inner--4col {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Viewport fallback when container queries aren't supported */
@supports not (container-type: inline-size) {
	@media (min-width: 540px) {
		.jacng-paginated__inner--2col,
		.jacng-paginated__inner--3col,
		.jacng-paginated__inner--4col {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
	@media (min-width: 768px) {
		.jacng-paginated__inner--3col {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
	@media (min-width: 1024px) {
		.jacng-paginated__inner--4col {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}

/* Slide animation states (toggled by JS) */
.jacng-paginated__inner.is-sliding-out-next { transform: translateX(-30px); opacity: 0; }
.jacng-paginated__inner.is-sliding-out-prev { transform: translateX(30px); opacity: 0; }
.jacng-paginated__inner.is-sliding-in-next { transform: translateX(30px); opacity: 0; transition: none; }
.jacng-paginated__inner.is-sliding-in-prev { transform: translateX(-30px); opacity: 0; transition: none; }

/* ==========================================================================
   5. Cards (shared)
   ========================================================================== */

.jacng-card {
	display: block;
	position: relative;
	margin: 0;
	/* Card-level rendering perf: skip rendering off-screen cards until they
	   scroll into view. Compensates for losing native lazy-loading on
	   background images. */
	content-visibility: auto;
	contain-intrinsic-size: auto 320px;
}

.jacng-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border-radius: var(--jacng-card-radius);
	transition: transform 0.25s ease;
}

@media (hover: hover) {
	.jacng-card__link:hover {
		transform: translateY(-2px);
	}
}

.jacng-card__link:focus-visible {
	outline: 2px solid var(--jacng-pill-color);
	outline-offset: 2px;
}

.jacng-card__image {
	position: relative;
	overflow: hidden;
	border-radius: var(--jacng-card-radius);
	background-color: #1B3C4F;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	aspect-ratio: 4 / 3;
	transition: transform 0.5s ease;
}

@media (hover: hover) {
	.jacng-card__link:hover .jacng-card__image {
		transform: scale(1.04);
	}
}

.jacng-card__image-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #1B3C4F 0%, #2A7C7B 100%);
}

/* ==========================================================================
   6. Featured card (background-image, full-bleed)
   ========================================================================== */

.jacng-card--featured {
	position: relative;
	overflow: hidden;
	border-radius: var(--jacng-card-radius);
	background-color: #1B3C4F;
	height: 100%;
	min-height: clamp(320px, 45cqi, 480px);
	margin: 0;
}

@supports not (container-type: inline-size) {
	.jacng-card--featured {
		min-height: clamp(320px, 45vw, 480px);
	}
}

.jacng-card--featured .jacng-card__link {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
	color: inherit;
	border-radius: inherit;
	overflow: hidden;
	transition: none;
}

@media (hover: hover) {
	.jacng-card--featured .jacng-card__link:hover {
		transform: none;
	}
}

.jacng-card__bg {
	position: absolute;
	inset: 0;
	background-image: var(--jacng-featured-bg, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition: transform 0.5s ease;
	z-index: 0;
}

@media (hover: hover) {
	.jacng-card--featured:hover .jacng-card__bg,
	.jacng-card--featured:focus-within .jacng-card__bg {
		transform: scale(1.04);
	}
}

.jacng-card--featured .jacng-card__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	transition: background 0.3s ease;
}

.jacng-card--featured-align-bottom .jacng-card__overlay {
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, var(--jacng-overlay) 100%);
}

.jacng-card--featured-align-top .jacng-card__overlay {
	background: linear-gradient(180deg, var(--jacng-overlay) 0%, rgba(0,0,0,0) 70%);
}

.jacng-card--featured-align-middle .jacng-card__overlay {
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, var(--jacng-overlay) 50%, rgba(0,0,0,0.15) 100%);
}

.jacng-card--featured .jacng-badge--featured {
	position: absolute;
	top: var(--jacng-card-pad);
	left: var(--jacng-card-pad);
	z-index: 3;
}

.jacng-card__featured-content {
	position: absolute;
	left: var(--jacng-card-pad);
	right: var(--jacng-card-pad);
	z-index: 2;
	color: var(--jacng-featured-title);
}

.jacng-card__featured-content--top {
	top: calc(var(--jacng-card-pad) + 56px); /* sits below the badge */
	bottom: auto;
}

.jacng-card__featured-content--middle {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.jacng-card__featured-content--bottom {
	top: auto;
	bottom: var(--jacng-card-pad);
}

.jacng-card--featured .jacng-card__title {
	font-size: clamp(20px, 3.5cqi, 32px);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0 0 14px 0;
	color: var(--jacng-featured-title);
	text-transform: uppercase;
	text-wrap: balance; /* progressively-enhanced: prevents orphan words on supporting browsers */
}

@supports not (container-type: inline-size) {
	.jacng-card--featured .jacng-card__title {
		font-size: clamp(20px, 3.5vw, 32px);
	}
}

.jacng-card--featured .jacng-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.92);
}

.jacng-author__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%; /* circle is the industry-standard default for author photos */
	display: block;
	flex-shrink: 0;
	object-fit: cover; /* in case the source image isn't already square */
}

.jacng-author__name { font-weight: 600; }
.jacng-meta-sep { opacity: 0.6; }

.jacng-card--featured .jacng-card__date {
	letter-spacing: 0.1em;
	font-size: 11px;
}

/* ==========================================================================
   7. Small / list cards
   ========================================================================== */

.jacng-card--small .jacng-card__body,
.jacng-card--list .jacng-card__body {
	padding: 14px 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.jacng-card--small .jacng-card__meta-row,
.jacng-card--list .jacng-card__meta-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.jacng-card--small .jacng-card__date,
.jacng-card--list .jacng-card__date {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--jacng-meta-color);
}

.jacng-card--small .jacng-card__title,
.jacng-card--list .jacng-card__title {
	font-size: clamp(15px, 1.7cqi, 17px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.01em;
	margin: 0;
	color: var(--jacng-title-color);
	text-transform: uppercase;
	text-wrap: balance;
}

.jacng-card--list .jacng-card__title {
	font-size: clamp(17px, 2.2cqi, 22px);
}

@supports not (container-type: inline-size) {
	.jacng-card--small .jacng-card__title {
		font-size: 16px;
	}
	.jacng-card--list .jacng-card__title {
		font-size: clamp(17px, 2.2vw, 22px);
	}
}

/* List layout: image + content side-by-side at wider container widths */
.jacng-card--list .jacng-card__link {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	align-items: stretch;
}

@container jacng (min-width: 540px) {
	.jacng-card--list .jacng-card__link {
		grid-template-columns: 160px 1fr;
		gap: 16px;
	}
}

@container jacng (min-width: 720px) {
	.jacng-card--list .jacng-card__link {
		grid-template-columns: 220px 1fr;
		gap: 24px;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 540px) {
		.jacng-card--list .jacng-card__link {
			grid-template-columns: 160px 1fr;
			gap: 16px;
		}
	}
	@media (min-width: 768px) {
		.jacng-card--list .jacng-card__link {
			grid-template-columns: 220px 1fr;
			gap: 24px;
		}
	}
}

.jacng-card--list .jacng-card__image {
	aspect-ratio: 4 / 3;
}

.jacng-card--list .jacng-card__body {
	padding: 8px 0;
	justify-content: center;
}

.jacng-card__excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: var(--jacng-meta-color);
	margin: 4px 0 0 0;
	/* Cap to 3 lines on small cards to keep heights aligned */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* New-card fade-in (Load More) */
@keyframes jacng-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.jacng-card--new {
	animation: jacng-fade-in 0.4s ease both;
}

/* ==========================================================================
   8. Badge
   ========================================================================== */

.jacng-badge {
	display: inline-block;
	padding: 5px 12px;
	background-color: var(--jacng-badge-bg);
	color: var(--jacng-badge-text);
	font-family: inherit;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 4px;
	line-height: 1.2;
}

/* ==========================================================================
   9. Pagination controls
   ========================================================================== */

.jacng-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: clamp(24px, 4cqi, 32px);
}

@supports not (container-type: inline-size) {
	.jacng-pagination {
		margin-top: clamp(24px, 4vw, 32px);
	}
}

/* Load More button */
.jacng-load-more {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 28px;
	min-height: 44px; /* touch target */
	background-color: #1B3C4F;
	color: #fff;
	border: 1px solid #1B3C4F;
	border-radius: 4px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	line-height: 1.2;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@container jacng (min-width: 540px) {
	.jacng-load-more {
		padding: 12px 32px;
	}
}

@media (hover: hover) {
	.jacng-load-more:hover {
		background-color: #2A7C7B;
		border-color: #2A7C7B;
	}
}

.jacng-load-more:focus-visible {
	outline: none;
	background-color: #2A7C7B;
	border-color: #2A7C7B;
}

.jacng-load-more--hidden { display: none !important; }
.jacng-load-more.is-loading { pointer-events: none; opacity: 0.7; }

.jacng-load-more__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: jacng-spin 0.8s linear infinite;
}

.jacng-load-more.is-loading .jacng-load-more__spinner {
	display: inline-block;
}

/* Sliding pagination prev/next */
.jacng-page-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	color: #1B3C4F;
	border: 1px solid #1B3C4F;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
	.jacng-page-btn:hover:not(:disabled) {
		background-color: #1B3C4F;
		color: #fff;
	}
}

.jacng-page-btn:focus-visible {
	outline: none;
	background-color: #1B3C4F;
	color: #fff;
}

.jacng-page-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.jacng-page-info {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.05em;
	color: #1B3C4F;
	min-width: 60px;
	justify-content: center;
}

.jacng-page-info__sep { opacity: 0.5; }

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.jacng-card__bg,
	.jacng-card__image,
	.jacng-card__link,
	.jacng-paginated__inner,
	.jacng-grid-wrapper,
	.jacng-load-more,
	.jacng-page-btn,
	.jacng-filter-pill,
	.jacng-card--featured .jacng-card__overlay {
		transition-duration: 0.01ms !important;
	}

	.jacng-card--featured:hover .jacng-card__bg,
	.jacng-card__link:hover .jacng-card__image,
	.jacng-card__link:hover {
		transform: none !important;
	}

	.jacng-paginated__inner.is-sliding-out-next,
	.jacng-paginated__inner.is-sliding-out-prev,
	.jacng-paginated__inner.is-sliding-in-next,
	.jacng-paginated__inner.is-sliding-in-prev {
		transform: none !important;
		opacity: 0;
	}

	.jacng-card--new {
		animation: none !important;
		opacity: 1;
	}

	/* Keep loading spinner visible but slower */
	.jacng-grid-wrapper.is-loading::after,
	.jacng-load-more__spinner {
		animation-duration: 1.6s !important;
	}
}

/* ==========================================================================
   11. Print
   ========================================================================== */

@media print {
	.jacng-filter-pills,
	.jacng-pagination,
	.jacng-grid-wrapper.is-loading::after {
		display: none !important;
	}

	.jacng-grid--featured-grid {
		grid-template-columns: 1fr !important;
	}

	.jacng-paginated__inner {
		grid-template-columns: 1fr 1fr !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.jacng-card {
		page-break-inside: avoid;
		break-inside: avoid;
		margin-bottom: 16px;
	}

	.jacng-card--featured {
		min-height: 0 !important;
		aspect-ratio: 16 / 10;
	}

	.jacng-card__bg,
	.jacng-card__image {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.jacng-card__link {
		transform: none !important;
	}
}