/* ── Design 3 — Dark: deep forest background, light text ─────────────────── */

/* Flex instead of grid so a last row that isn't a full multiple of the column
   count (7 cards over 3 columns, 5 over 3, …) centers its leftover cards.
   Card widths stay identical to the base grid — the basis reproduces the
   `repeat(N, 1fr)` track width using the --columns-*-gaps vars set inline. */
.wp-block-cedarspringsnw-card-wrapper.is-grid.design-3 {
	--design-3-gap: 22px;

	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap: 	         var(--design-3-gap);
}

.wp-block-cedarspringsnw-card-wrapper.is-grid.design-3 > * {
	flex:      0 0 calc((100% - var(--columns-desktop-gaps, 2) * var(--design-3-gap)) / var(--columns-desktop, 3));
	min-width: 0;
}

@media (max-width: 1024px) {
	.wp-block-cedarspringsnw-card-wrapper.is-grid.design-3 > * {
		flex-basis: calc((100% - var(--columns-tablet-gaps, 1) * var(--design-3-gap)) / var(--columns-tablet, 2));
	}
}

@media (max-width: 768px) {
	.wp-block-cedarspringsnw-card-wrapper.is-grid.design-3 > * {
		flex-basis: calc((100% - var(--columns-mobile-gaps, 0) * var(--design-3-gap)) / var(--columns-mobile, 1));
	}
}

.design-3 .wp-block-cedarspringsnw-card,
.wp-block-cedarspringsnw-card.design-3 {
	box-shadow:    	none;
	border-radius: 	unset;
	background: 	rgba(42, 76, 56, 0.3);
	position: 		relative;
}

.design-3 .wp-block-cedarspringsnw-card::after {
    content: 			"";
    position: 			absolute;
    left: 				0px;
    right: 				0px;
    bottom: 			0px;
    height: 			1px;
    background: 		#fff;
    transform: 			scaleX(0);
    transform-origin: 	left;
    transition: 		transform .3s ease;
}

.design-3 .wp-block-cedarspringsnw-card:hover::after {
    transform: scaleX(1);
}

.design-3 .wp-block-cedarspringsnw-card .card-content {
    padding:	0px;
	gap: 		0px;
}

.design-3 .wp-block-cedarspringsnw-card .card-title {
	background: 	transparent;
	color: 			#ffffff;
	font-size: 		20px;
	line-height:	34px;
	letter-spacing: 0px;
	font-weight: 	500;
    padding: 		15px 20px;
    margin: 		0;
	display: 		flex;
    align-items: 	center;
    justify-content:space-between;
}

.design-3 .wp-block-cedarspringsnw-card:hover .card-title,
.wp-block-cedarspringsnw-card.design-3:hover .card-title,
.design-3 .wp-block-cedarspringsnw-card:hover,
.wp-block-cedarspringsnw-card.design-3:hover {
	background:    var(--wp--preset--color--green-medium, #365b46);
}

.design-3 .wp-block-cedarspringsnw-card .card-title::after {
    content: 			"";
    flex-shrink: 		0;
    width: 				21px;
    height: 			21px;
    background-repeat: 	no-repeat;
    background-size: 	contain;
	opacity: 			0;
	transition: 		all .3s ease;
    background-image: 	url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.37402 10.4999H16.624M11.374 4.48804L17.499 10.4999L11.374 16.5119' stroke='white' stroke-width='1.34938' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.design-3 .wp-block-cedarspringsnw-card:hover .card-title::after {
    opacity: 	1;
    transform: 	translateX(0);
}

.design-3 .wp-block-cedarspringsnw-card .card-image,
.wp-block-cedarspringsnw-card.design-3 .card-image {
	transition:   transform 420ms ease;
}

.wp-block-cedarspringsnw-card-wrapper.is-list.design-3 .card-image {
    min-width: 350px;
}

.wp-block-cedarspringsnw-card-wrapper.is-list.design-3 .card-content {
    margin: auto;
}

.design-3 .wp-block-cedarspringsnw-card .card-meta-item {
	color: 		var(--wp--preset--color--green-forest);
    opacity: 	0;
    background: #ffffff;
    width: 		fit-content;
    padding: 	5px 20px;
    position:   absolute;
    top:        0;
    z-index:    2;
    transition: opacity .3s ease;

}

.design-3 .wp-block-cedarspringsnw-card:hover .card-meta-item {
    opacity: 	1;
}

.design-3 .wp-block-cedarspringsnw-card .card-link:hover {
	color: #ffffff;
}

.design-3 .wp-block-cedarspringsnw-card .card-title-link,
.design-3 .wp-block-cedarspringsnw-card .card-cat-link,
.design-3 .wp-block-cedarspringsnw-card .card-author-link {
	color: inherit;
}

.design-3 .wp-block-cedarspringsnw-card:hover .card-image,
.wp-block-cedarspringsnw-card.design-3:hover .card-image {
	transform: scale(1.04);
}