/**
 * 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 #e6e2e2;
	border-radius: 10px;
	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);
}
/*
 * Sahel Content Cards
 * Gutenberg editor preview
 */

/*
			 * ---------------------------------------------------------
			 * Media classes.
			 * ---------------------------------------------------------
			 */

			$media_classes = array(
				'sahel-content-card-media',
			);

			if ( 'icon' === $media_type ) {
				$media_classes[] = 'sahel-content-card-icon';

				if ( $icon_background_enabled ) {
					$media_classes[] =
						'sahel-content-card-icon-has-background';

					$media_classes[] =
						'sahel-content-card-icon-bg-' .
						$icon_background_shape;
				}
			} else {
				$media_classes[] =
					'sahel-content-card-image';
				$media_classes[] =
					'sahel-content-card-image-' .
					$image_shape;
			}

			$media_style = sprintf(
				'width:%dpx;height:%dpx;',
				$media_size,
				$media_size
			);
if ( 'icon' === $media_type ) {
	$media_style .= sprintf(
		'--sahel-content-card-icon-size-value:%dpx;',
		$icon_size
	);
}
			if (
				'icon' === $media_type &&
				$icon_background_enabled
			) {
				$media_style .= sprintf(
					'--sahel-content-card-icon-background-size:%dpx;',
					$icon_background_size
				);