/* ── Design 4 — Gradient Watermark Cards ────────────────────────────────── */

/* ── Base card: square, gradient background ──────────────────────────────── */
.design-4 .wp-block-cedarspringsnw-card,
.wp-block-cedarspringsnw-card.design-4 {
	position:      relative;
	overflow:      hidden;
	border:        none;
	border-radius: 12px;
	box-shadow:    none;
	aspect-ratio:  1 / 1;
	min-height:    260px;
	background:    linear-gradient(145deg, #8d9a5a 0%, #3d4a25 100%);
}

/* ── Gradient palette — 5-colour rotation ───────────────────────────────── */
.design-4 .wp-block-cedarspringsnw-card:nth-child(5n+1),
.wp-block-cedarspringsnw-card.design-4:nth-child(5n+1) {
	background: linear-gradient(145deg, #2B4737 0%, #5A6F4A 30% ,#B39458 65%,#E2C896 100%); /* olive green */
}
.design-4 .wp-block-cedarspringsnw-card:nth-child(5n+2),
.wp-block-cedarspringsnw-card.design-4:nth-child(5n+2) {
	background: linear-gradient(145deg, #2A2638 0%, #4A4456 25%, #88695C 60% , #D4A473 100%); /* dusty rose */
}
.design-4 .wp-block-cedarspringsnw-card:nth-child(5n+3),
.wp-block-cedarspringsnw-card.design-4:nth-child(5n+3) {
	background: linear-gradient(145deg, #1F3128 0%, #2B4737 35%, #4F725C 80%, #6F8B78 100%); /* forest green */
}
.design-4 .wp-block-cedarspringsnw-card:nth-child(5n+4),
.wp-block-cedarspringsnw-card.design-4:nth-child(5n+4) {
	background: linear-gradient(145deg, #2A2638 0%, #4A4456 25%, #88695C 60% , #D4A473 100%); /* dark teal */
}
.design-4 .wp-block-cedarspringsnw-card:nth-child(5n+0),
.wp-block-cedarspringsnw-card.design-4:nth-child(5n+0) {
	background: linear-gradient(145deg, #1F3128 0%, #2B4737 35%, #4F725C 80%, #6F8B78 100%); /* deep purple */
}

/* ── Large "?" watermark — semi-transparent, bottom-right ──────────────── */
.design-4 .wp-block-cedarspringsnw-card::after,
.wp-block-cedarspringsnw-card.design-4::after {
	content:        '?';
	position:       absolute;
	right:          4%;
	bottom:         -8%;
	font-size:      10rem;
	font-weight:    800;
	font-family:    var(--wp--preset--font-family--raleway, Georgia, serif);
	color:          rgba(255, 255, 255, 0.12);
	line-height:    1;
	pointer-events: none;
	user-select:    none;
	z-index:        0;
}

/* ── Featured image — absolute fill behind content ──────────────────────── */
.design-4 .wp-block-cedarspringsnw-card .card-image,
.wp-block-cedarspringsnw-card.design-4 .card-image {
	position:     absolute;
	inset:        0;
	aspect-ratio: unset;
	width:        100%;
	height:       100%;
	overflow:     hidden;
	z-index:      0;
	opacity:      0.2;
	mix-blend-mode: soft-light;
}

.design-4 .wp-block-cedarspringsnw-card .card-image img,
.wp-block-cedarspringsnw-card.design-4 .card-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* ── Content sections above image ──────────────────────────────────────── */
/*
 * Both pre and post sit above the absolute-positioned image.
 * Pre fills the card (flex:1) so margin-top:auto on the link pushes it to the
 * bottom whether the link lands in pre (image OFF) or post (image ON).
 * Full padding on all sides because the image is out of normal flow.
 */
.design-4 .wp-block-cedarspringsnw-card .card-content--pre,
.design-4 .wp-block-cedarspringsnw-card .card-content--post,
.wp-block-cedarspringsnw-card.design-4 .card-content--pre,
.wp-block-cedarspringsnw-card.design-4 .card-content--post {
	position:   relative;
	z-index:    1;
	background: transparent;
	gap:        var(--wp--preset--spacing--xs, 0.5rem);
	padding:    var(--wp--preset--spacing--md, 1.5rem);
}

/* Pre section grows to fill; link uses margin-top:auto inside it */
.design-4 .wp-block-cedarspringsnw-card .card-content--pre,
.wp-block-cedarspringsnw-card.design-4 .card-content--pre {
	flex: 1;
}

/* Post section only takes its natural height */
.design-4 .wp-block-cedarspringsnw-card .card-content--post,
.wp-block-cedarspringsnw-card.design-4 .card-content--post {
	flex:       0 0 auto;
	padding-top: 0;
}

/*
 * The base rule removes bottom-padding from .card-content when .card-image
 * follows as a sibling. In Design 4 the image is position:absolute so it is
 * still in the DOM (the :has selector fires) but is out of normal flow.
 * Restore the bottom padding so content isn't flush against the card edge.
 */
.design-4 .wp-block-cedarspringsnw-card .card-content:has(+ .card-image),
.wp-block-cedarspringsnw-card.design-4 .card-content:has(+ .card-image) {
	padding-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

/* ── Typography — all white ─────────────────────────────────────────────── */
.design-4 .wp-block-cedarspringsnw-card .card-title,
.wp-block-cedarspringsnw-card.design-4 .card-title {
	color:     #ffffff;
	font-size: clamp(1rem, 1.5vw + 0.4rem, 1.35rem);
}

.design-4 .wp-block-cedarspringsnw-card .card-title a,
.wp-block-cedarspringsnw-card.design-4 .card-title a,
.design-4 .wp-block-cedarspringsnw-card .card-title-link,
.wp-block-cedarspringsnw-card.design-4 .card-title-link {
	color:           inherit;
	text-decoration: none;
}

.design-4 .wp-block-cedarspringsnw-card .card-description,
.wp-block-cedarspringsnw-card.design-4 .card-description {
	color:     rgba(255, 255, 255, 0.82);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.design-4 .wp-block-cedarspringsnw-card .card-meta-item,
.design-4 .wp-block-cedarspringsnw-card .card-meta-field,
.wp-block-cedarspringsnw-card.design-4 .card-meta-item,
.wp-block-cedarspringsnw-card.design-4 .card-meta-field {
	color:     rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* ── "Learn more →" link ────────────────────────────────────────────────── */
.design-4 .wp-block-cedarspringsnw-card .card-link,
.wp-block-cedarspringsnw-card.design-4 .card-link {
	color:          rgba(255, 255, 255, 0.9);
	font-size:      var(--wp--preset--font-size--small, 0.875rem);
	font-weight:    500;
	border:         none;
	padding:        0;
	border-radius:  0;
	margin-top:     0;
	letter-spacing: 0.03em;
	transition:     color 200ms ease, gap 200ms ease;
}

.design-4 .wp-block-cedarspringsnw-card .card-link:hover,
.wp-block-cedarspringsnw-card.design-4 .card-link:hover {
	color: #ffffff;
	gap:   10px;
}

/* ── Design 4 — Carousel: exactly perPage cards + a bleeding "peek" ──────── */
/*
 * Design 4 reads the same configured per-breakpoint column count as every
 * other design (frontend.js getPerPage()), and applyCardWidth() sizes each
 * card so exactly that many FULL cards fill the content column — Desktop 4,
 * Tablet 2, Mobile 1. The signature Side Accent "peek" is then produced purely
 * here in CSS: overflow: visible lets the next card bleed past the content
 * column's right edge into the page margin. So Desktop shows 4 full + the 5th
 * peeking, Tablet 2 full + the 3rd peeking, Mobile 1 full + the 2nd peeking —
 * with the column count staying authoritative. The browser viewport
 * (body overflow-x) is the only hard clip; the JS offset cap in goTo() stops
 * scrolling once the last card's right edge reaches the container's right.
 */
.wp-block-cedarspringsnw-card-wrapper.design-4.is-carousel {
	overflow: visible;
}

.wp-block-cedarspringsnw-card-wrapper.design-4.is-carousel .card-track-outer {
	overflow: visible;
	padding:  0;
	margin:   0;
}

/* Fixed 16 px gap — applyCardWidth() reads the real computed gap, so the card
   width adapts to this automatically. */
.wp-block-cedarspringsnw-card-wrapper.design-4.is-carousel .card-track {
	gap:     16px;
	padding: 0;
}

/* Exact-fit card width (perPage cards fill the container) from the shared
   --carousel-card-width; aspect-ratio keeps Design 4's square card shape. The
   peek comes from the overflow: visible bleed above, not from this width. */
.wp-block-cedarspringsnw-card-wrapper.design-4.is-carousel .card-track .wp-block-cedarspringsnw-card {
	flex:         0 0 var(--carousel-card-width, 280px);
	width:        var(--carousel-card-width, 280px);
	height:       auto;
	aspect-ratio: 1 / 1;
	min-height:   unset;
}

/* Arrows and dots use the base carousel defaults (style.css) — no Design 4 overrides */

/* ── Mobile — shrink the oversized "?" watermark ─────────────────────────── */
@media (max-width: 768px) {
	.design-4 .wp-block-cedarspringsnw-card::after,
	.wp-block-cedarspringsnw-card.design-4::after {
		font-size: 8rem;
	}
}
.design-4 .wp-block-cedarspringsnw-card .card-title{
	font-size: 26px;
	font-weight: 600;
}
.design-4 .wp-block-cedarspringsnw-card .card-title:focus{
	outline: none;
}
.design-4 .wp-block-cedarspringsnw-card .card-content{
	justify-content: space-between;
	padding: 30px 25px;
}
.design-4 .wp-block-cedarspringsnw-card{
	border-radius: 0px;
}
.design-4 .carousel-btn.is-next{
	position: absolute;
	top: -60px;
	right: 0px !important;
	border: 1px solid var(--wp--preset--color--green-forest, #2b4737) !important;
	background: transparent !important;
}
.design-4 .carousel-btn.is-prev{
position: absolute;
	top: -60px;
	left: calc(100% - 100px) !important;
	border: 1px solid var(--wp--preset--color--green-forest, #2b4737) !important;
	background: transparent !important;
}
.design-4 .carousel-btn:hover{
	background: var(--wp--preset--color--green-forest, #2b4737) !important;
	color: #fff;
}
.design-4 .wp-block-cedarspringsnw-card .card-title{
	width: calc(100% - 50px);
}
@media(max-width: 769px){
	.design-4 .carousel-btn.is-next{
	top: -40px;
}
.design-4 .carousel-btn.is-prev{
	top: -40px;
	left: 0px !important;
}
}