/**
 * Blog Listing — Style 4: Date Block
 *
 * A bold calendar-style date block leads each row ( replacing the
 * thumbnail's role ) — great for news and events.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__date-block {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 72px;
	padding: 12px 8px;
	background: color-mix( in srgb, var( --captwiki-bl-accent ) 10%, #ffffff );
	border: 1px solid color-mix( in srgb, var( --captwiki-bl-accent ) 30%, transparent );
	border-radius: 12px;
}

.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__date-day {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: var( --captwiki-bl-accent );
}

.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__date-month {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b7280;
}

.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__media {
	flex-basis: calc( var( --captwiki-bl-thumb-w ) * 0.7 );
	max-width: calc( var( --captwiki-bl-thumb-w ) * 0.7 );
}

/* The meta date is redundant next to the block. */
.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__meta .captwiki-blog-listing__date {
	display: none;
}

.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__meta .captwiki-blog-listing__author::after {
	content: none;
}

@media ( max-width: 767px ) {
	.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__item {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__media {
		flex-basis: 100%;
		max-width: 100%;
		order: -1;
	}

	.captwiki-blog-listing.captwiki-style-4 .captwiki-blog-listing__body {
		flex: 1 1 60%;
	}
}
