/* ── Design 2 — Overlay Reveal ───────────────────────────────────────────────
   Default : image fills card; title overlaid at bottom via gradient
   Hover   : reveal panel slides up — dark meta strip (date / location) + white body
   ─────────────────────────────────────────────────────────────────────────── */

.wp-block-cedarspringsnw-card-wrapper.is-grid.design-2 {
	gap: 	22px;
}   

/* ── Card container ─────────────────────────────────────────────────────────── */
.design-2 .wp-block-cedarspringsnw-card,
.wp-block-cedarspringsnw-card.design-2 {
	position:      relative;
	overflow:      hidden;
	min-height:    523px;
	border-radius: unset;
	box-shadow:    var(--wp--custom--shadow--md);
	background:    var(--wp--preset--color--green-dark, #1a2e22);
}

/* ── Image: absolute, fills full card ──────────────────────────────────────── */
.design-2 .wp-block-cedarspringsnw-card .card-image,
.wp-block-cedarspringsnw-card.design-2 .card-image {
	position:     absolute !important;
	inset:        0 !important;
	width:        100% !important;
	height:       100% !important;
	aspect-ratio: unset !important;
	overflow:     hidden;
	z-index:      1;
	transition:   transform 420ms ease;
}

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

/* ── Title overlay (card-content--pre) — always visible, fades on hover ────── */
.design-2 .wp-block-cedarspringsnw-card .card-content--pre,
.wp-block-cedarspringsnw-card.design-2 .card-content--pre {
	position:       absolute;
	bottom:         0;
	left:           0;
	right:          0;
	z-index:        2;
	padding:        56px 20px 20px;
	background:     linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
	display:        flex;
	flex-direction: column;
	gap:            0;
	transition:     opacity 300ms ease, transform 300ms ease;
	pointer-events: none;
}

.design-2 .wp-block-cedarspringsnw-card .card-content--pre .card-title,
.wp-block-cedarspringsnw-card.design-2 .card-content--pre .card-title {
	color:       	#ffffff;
	font-size: 	 	24px;
	font-weight: 	500;
	text-shadow: 	0 1px 4px rgba(0, 0, 0, 0.5);
	margin:      	0;
}

/* ── Reveal panel (card-content--post) — slides up on hover ────────────────── */
.design-2 .wp-block-cedarspringsnw-card .card-content--post,
.wp-block-cedarspringsnw-card.design-2 .card-content--post {
	position:       absolute;
	bottom:         0;
	left:           0;
	right:          0;
	z-index:        3;
	display:        flex;
	flex-direction: column;
	max-height:     82%;
	overflow:       hidden;
	transform:      translateY(100%);
	transition:     transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	padding:        0;
	gap:            0;
	flex:           none;
	background:     var(--wp--preset--color--green-forest, #2b4737);
}

/* ── Reveal panel content — elements styled by type, ordered as configured ──── */

/* Meta items (date, location, ACF fields): dark green rows, in configured order */
.design-2 .wp-block-cedarspringsnw-card .card-content--post > .card-meta-item,
.wp-block-cedarspringsnw-card.design-2 .card-content--post > .card-meta-item {
	display:     flex;
	align-items: center;
	background:  var(--wp--preset--color--green-medium, #365b46);
	color:       #ffffff !important;
	opacity:     1 !important;
	font-size:   13px;
	font-weight: 500;
	padding:     10px 16px;
	margin:      0;
	line-height: 1.4;
	flex-shrink: 0;
}

.design-2 .wp-block-cedarspringsnw-card .card-content--post > .card-meta-item .card-meta-event_date,
.wp-block-cedarspringsnw-card.design-2 .card-content--post > .card-meta-item .card-meta-event_date {
	display: inline-flex;
	align-items: center;
}
/* Clock icon on the event group */
.design-2 .wp-block-cedarspringsnw-card .card-content--post > .card-meta-item .card-meta-event_date::before,
.wp-block-cedarspringsnw-card.design-2 .card-content--post > .card-meta-item .card-meta-event_date::before {
	content:             '';
	display:             block;
	flex-shrink:         0;
	width:               14px;
	height:              14px;
	margin-right:        10px;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-size:     contain;
	background-position: center;
}

/* Spans inside the event group */
.design-2 .wp-block-cedarspringsnw-card .card-content--post > .card-meta-event-group span,
.wp-block-cedarspringsnw-card.design-2 .card-content--post > .card-meta-event-group span {
	color:     inherit;
	font-size: inherit;
}

/* Pipe separator between event_date and event_location spans */
.design-2 .wp-block-cedarspringsnw-card .card-content--post > .card-meta-event-group span + span::before,
.wp-block-cedarspringsnw-card.design-2 .card-content--post > .card-meta-event-group span + span::before {
	content: 		' |';
	opacity: 		0.55;
	padding-left: 	8px;
	padding-right: 	8px;
}

@media (max-width: 768px) {
	.design-2 .wp-block-cedarspringsnw-card .card-content--post > .card-meta-item,
	.wp-block-cedarspringsnw-card.design-2 .card-content--post > .card-meta-item {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.design-2 .wp-block-cedarspringsnw-card .card-content--post > .card-meta-event-group span + span::before,
	.wp-block-cedarspringsnw-card.design-2 .card-content--post > .card-meta-event-group span + span::before {
		content: none;
	}
}

/* Title in the reveal panel */
.design-2 .wp-block-cedarspringsnw-card .card-content--post .card-title,
.wp-block-cedarspringsnw-card.design-2 .card-content--post .card-title {
	color:      	#ffffff;
	font-size: 		24px;
	font-weight:	500;
	padding:    	25px 20px 15px;
	margin:     	0;
	background: 	transparent;
}

/* Description in the reveal panel */
.design-2 .wp-block-cedarspringsnw-card .card-content--post .card-description,
.wp-block-cedarspringsnw-card.design-2 .card-content--post .card-description {
	color:      		#ffffff;
	padding-inline:    	20px;
	margin:     		0;
	opacity:    		1;
	background: 		transparent;
}

/* Read more link in the reveal panel */
.design-2 .wp-block-cedarspringsnw-card .card-content--post .card-link,
.wp-block-cedarspringsnw-card.design-2 .card-content--post .card-link {
	color:      #ffffff;
	padding:    20px 20px 24px;
	margin-top: auto;
	background: transparent;
}

/* Title link inherits heading colour */
.design-2 .wp-block-cedarspringsnw-card .card-content--post .card-title-link,
.wp-block-cedarspringsnw-card.design-2 .card-content--post .card-title-link {
	color:           inherit;
	text-decoration: none;
}

.design-2 .wp-block-cedarspringsnw-card .card-content--post .card-title-link:hover,
.wp-block-cedarspringsnw-card.design-2 .card-content--post .card-title-link:hover {
	text-decoration: underline;
}

/* ── Hover states ────────────────────────────────────────────────────────────── */
.design-2 .wp-block-cedarspringsnw-card:hover .card-content--pre,
.wp-block-cedarspringsnw-card.design-2:hover .card-content--pre {
	opacity:   0;
	transform: translateY(12px);
}

.design-2 .wp-block-cedarspringsnw-card:hover .card-content--post,
.wp-block-cedarspringsnw-card.design-2:hover .card-content--post {
	transform: translateY(0);
}

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

/* ── Editor canvas: reveal panel always visible so designer can see the layout ─ */
.block-editor-block-list__block .design-2 .wp-block-cedarspringsnw-card .card-content--post,
.block-editor-block-list__block .wp-block-cedarspringsnw-card.design-2 .card-content--post {
	transform: translateY(0);
}