/**
 * Sahel Content Grid
 *
 * @package Sahel
 */

/* ---------------------------------------------------------
 * Grid
 * --------------------------------------------------------- */

.sahel-content-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}


/* ---------------------------------------------------------
 * Card
 * --------------------------------------------------------- */

.sahel-content-grid-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0.5rem;
	border: 1px solid var(--sahel-border-color);
	border-radius: var(--sahel-border-radius);
	background: var(--sahel-background);
}


/* ---------------------------------------------------------
 * Thumbnail
 * --------------------------------------------------------- */

.sahel-content-grid-thumbnail {
	display: block;
	width: 100%;
	overflow: hidden;
	margin-bottom: 16px;
}

.sahel-content-grid-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

.sahel-content-grid-thumbnail-16-9 img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sahel-content-grid-thumbnail-4-3 img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sahel-content-grid-thumbnail-1-1 img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}


/* ---------------------------------------------------------
 * Content
 * --------------------------------------------------------- */

.sahel-content-grid-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sahel-content-grid-category {
	margin-bottom: 8px;
	font-size: 0.85rem;
	opacity: 0.75;
}

.sahel-content-grid-title {
	margin: 0 0 10px;
	font-size: 1.1rem;
	line-height: 1.6;
}

.sahel-content-grid-title a {
	color: inherit;
	text-decoration: none;
}

.sahel-content-grid-title a:hover {
	text-decoration: underline;
}

.sahel-content-grid-excerpt {
	margin-bottom: 12px;
	line-height: 1.8;
	opacity: 0.85;
}

.sahel-content-grid-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	margin-bottom: 12px;
	font-size: 0.85rem;
	opacity: 0.7;
}

.sahel-content-grid-author {
	display: inline-block;
}

.sahel-content-grid-more {
	display: inline-block;
	margin-top: 4px;
	text-decoration: none;
}


/* ---------------------------------------------------------
 * Tablet
 * --------------------------------------------------------- */

@media (max-width: 1024px) {

	.sahel-content-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sahel-content-grid-tablet-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.sahel-content-grid-tablet-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sahel-content-grid-tablet-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sahel-content-grid-tablet-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* ---------------------------------------------------------
 * Mobile
 * --------------------------------------------------------- */

@media (max-width: 767px) {

	.sahel-content-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.sahel-content-grid-mobile-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.sahel-content-grid-mobile-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ---------------------------------------------------------
 * Desktop column settings
 * --------------------------------------------------------- */

.sahel-content-grid-columns-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.sahel-content-grid-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sahel-content-grid-columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sahel-content-grid-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sahel-content-grid-columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sahel-content-grid-columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* ---------------------------------------------------------
 * List layout for fewer than 4 items
 * --------------------------------------------------------- */

.sahel-content-grid-items-1,
.sahel-content-grid-items-2,
.sahel-content-grid-items-3 {
	grid-template-columns: 1fr;
}

/* ---------------------------------------------------------
 * List layout card
 * --------------------------------------------------------- */

/* ---------------------------------------------------------
 * List layout card
 * --------------------------------------------------------- */

.sahel-content-grid-items-1 .sahel-content-grid-card,
.sahel-content-grid-items-2 .sahel-content-grid-card,
.sahel-content-grid-items-3 .sahel-content-grid-card {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/* Content on the left */
.sahel-content-grid-items-1 .sahel-content-grid-content,
.sahel-content-grid-items-2 .sahel-content-grid-content,
.sahel-content-grid-items-3 .sahel-content-grid-content {
	grid-column: 2;
	grid-row: 1;
}

/* Thumbnail on the right */
.sahel-content-grid-items-1 .sahel-content-grid-thumbnail,
.sahel-content-grid-items-2 .sahel-content-grid-thumbnail,
.sahel-content-grid-items-3 .sahel-content-grid-thumbnail {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0;
}
/* ---------------------------------------------------------
 * Thumbnail hover
 * --------------------------------------------------------- */

.sahel-content-grid-thumbnail {
	position: relative;
}

.sahel-content-grid-thumbnail img {
	transition: transform 0.35s ease;
}

.sahel-content-grid-thumbnail:hover img {
	transform: scale(1.06);
}