.cpg-grid {
	--cpg-gap:          24px;
	--cpg-radius:       4px;
	--cpg-meta-pad:     16px 20px 20px;
	--cpg-date-color:   rgba(255,255,255,.65);
	--cpg-title-color:  #ffffff;
	--cpg-date-size:    0.8rem;
	--cpg-title-size-featured: 1.5rem;
	--cpg-title-size:   1.5rem;
	--cpg-img-min-h:    280px;
	--cpg-overlay:      linear-gradient(to top, rgba(15,25,55,.55) 0%, transparent 55%);
	--cpg-hover-scale:  1.03;
	--cpg-transition:   .35s cubic-bezier(.25,.46,.45,.94);
}

/* --------------------------------------------------------------------------
   Grid container
   -------------------------------------------------------------------------- */
.cpg-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows:    auto auto;
	gap:                   var(--cpg-gap);
	list-style:            none;
	margin:                0;
	padding:               0;
	background-color:      var(--cpg-bg);
	border-radius:         var(--cpg-radius);
	overflow:              hidden;
}
.cpg-item {
	display:        flex;
	flex-direction: column;
	min-width:      0;           /* prevent grid blowout */
	overflow:       hidden;
	border-radius:  var(--cpg-radius);
	background:     var(--cpg-bg);
}
.cpg-item__link {
	display:         flex;
	flex-direction:  column;
	height:          100%;
	text-decoration: none;
	color:           inherit;
}

/* Keyboard focus ring */
.cpg-item__link:focus-visible {
	outline:        3px solid #6eb5ff;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Image wrapper – grows to fill available row space
   -------------------------------------------------------------------------- */
.cpg-item__image-wrap {
	flex:     1 1 auto;
	overflow: hidden;
	position: relative;
	min-height: var(--cpg-img-min-h);
	border-radius: 8px;
}

/* Subtle dark overlay so titles remain legible over varied photos */
.cpg-item__image-wrap::after {
	content:  '';
	position: absolute;
	inset:    0;
	background: var(--cpg-overlay);
	pointer-events: none;
	z-index:  1;
}

.cpg-item__image {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform var(--cpg-transition);
}

.cpg-item__image--placeholder {
	background: #2a3a5c;
}

/* Hover zoom on image */
.cpg-item__link:hover .cpg-item__image,
.cpg-item__link:focus-visible .cpg-item__image {
	transform: scale(var(--cpg-hover-scale));
}

/* --------------------------------------------------------------------------
   Meta bar – date + title, fixed height, never grows
   -------------------------------------------------------------------------- */
.cpg-item__meta {
	flex:            0 0 auto;
	display:         flex;
	flex-direction:  column;
	gap:             6px;
	padding: 16px 0;
	background:      var(--cpg-bg);
}

.cpg-item__date {
	font-size:     14px;
	color:          var(--cpg-date-color);
	font-weight:    300;
	letter-spacing: .03em;
	line-height:    1;
}

.cpg-item__title {
	margin:      0;
	padding: 0;
	font-family: 'gamay-editorial', sans-serif;
	font-weight: 300;
	font-size:   var(--cpg-title-size);
	color:       var(--cpg-title-color);
	line-height: 1.2;
	text-align: left!important;
}

/* --------------------------------------------------------------------------
   Desktop layout  ≥1160px
   -------------------------------------------------------------------------- */
@media (min-width: 1160px) {

	.cpg-grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows:    auto auto;
	}

	/* Fix image height on right-hand items so rows stay equal
	   regardless of title length — same fix as tablet */
	.cpg-item[data-index="1"] .cpg-item__image-wrap,
	.cpg-item[data-index="2"] .cpg-item__image-wrap {
		flex:   0 0 auto;
		height: 210px;
	}

	/* Featured item: spans columns 1–2, rows 1–2 */
	.cpg-item--featured {
		grid-column: 1 / span 2;
		grid-row:    1 / span 2;
	}

	/* Items 2 & 3 each span 2 columns on the right half */
	.cpg-item[data-index="1"] {
		grid-column: 3 / span 2;
		grid-row:    1;
	}

	.cpg-item[data-index="2"] {
		grid-column: 3 / span 2;
		grid-row:    2;
	}

	/* Hide fourth item on desktop */
	.cpg-item[data-index="3"] {
		display: none;
	}

	/* Larger title for the featured card */
	.cpg-item--featured .cpg-item__title {
		font-size: var(--cpg-title-size-featured);
	}

	.cpg-item--featured .cpg-item__meta {
		padding: 16px 0;
	}
}

/* --------------------------------------------------------------------------
   Tablet layout  600px – 1159px
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1159px) {

	.cpg-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows:    auto auto;
	}

	/* Reset featured spanning – 2×2 uniform grid */
	.cpg-item--featured {
		grid-column: auto;
		grid-row:    auto;
	}

	/* Fix image height so it doesn't flex based on neighbouring title length */
	.cpg-item__image-wrap {
		flex:   0 0 auto;
		height: 300px;
	}

	/* Show all four items */
	.cpg-item[data-index="3"] {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Mobile layout  <600px
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {

	.cpg-grid {
		grid-template-columns: 1fr;
		grid-template-rows:    auto;
		gap:                   8px;
	}

	/* Reset featured spanning */
	.cpg-item--featured {
		grid-column: auto;
		grid-row:    auto;
	}

	/* Show only two most recent posts */
	.cpg-item[data-index="2"],
	.cpg-item[data-index="3"] {
		display: none;
	}

	.cpg-item__image-wrap {
		min-height: var(--cpg-img-min-h);
	}
}