/* ── Card Block — shared front-end + editor styles ───────────────────────── */

/* ── Single card ─────────────────────────────────────────────────────────── */
.wp-block-cedarspringsnw-card {
	background:    var(--wp--preset--color--warm-grey);
	border-radius: 0px;
	box-shadow:    none;
	overflow:      hidden;
	display:       flex;
	flex-direction: column;
}

.wp-block-cedarspringsnw-card .card-image {
	width:  100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	
}
.is-list .wp-block-cedarspringsnw-card .card-image {
	aspect-ratio: 16 / 6;
}

.wp-block-cedarspringsnw-card .card-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: all 0.3s;
}
.design-1 .wp-block-cedarspringsnw-card:hover .card-image img{
	transform: scale(1.1);
}

.is-grid.design-1 .wp-block-cedarspringsnw-card .card-content {
	justify-content: start;
}

.wp-block-cedarspringsnw-card .card-content {
	padding: var(--wp--custom--card--padding);
	display: flex;
	flex-direction: column;
	gap:     var(--wp--preset--spacing--sm);
	justify-content: center;
}

/* post section expands to fill remaining card height */
.wp-block-cedarspringsnw-card .card-content--post {
	flex: 1;
}
.wp-block-cedarspringsnw-card .card-content--post a:focus{
	outline: none;
}

/* when no post section exists (image off or at bottom), pre section fills instead */
.wp-block-cedarspringsnw-card:not(:has(.card-content--post)) .card-content--pre {
	flex: 1;
}

/* Content directly before the image sits flush — no gap between text and image. */
.wp-block-cedarspringsnw-card .card-content:has(+ .card-image) {
	padding-bottom: 0;
}


.wp-block-cedarspringsnw-card .card-title {
	font-family:    var(--wp--preset--font-family--raleway);
	font-size:      var(--wp--preset--font-size--h4);
	font-weight:    600;
	color:          var(--wp--preset--color--green-dark);
	margin:         0;
	line-height:    1.385;
	letter-spacing: 0.26px;
	position: relative;
}
.wp-block-cedarspringsnw-card .card-title a:hover{
	text-decoration: none;
}
.design-1 .wp-block-cedarspringsnw-card .card-title{
	width: calc(100% - 50px);
}

.wp-block-cedarspringsnw-card .card-description {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size:   var(--wp--preset--font-size--body);
	color:       var(--wp--preset--color--near-black);
	line-height: 1.75;
	margin:      0;
}

.wp-block-cedarspringsnw-card .card-link {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	margin-top:      auto;
	font-family:     var(--wp--preset--font-family--montserrat);
	font-size:       var(--wp--preset--font-size--button-text);
	font-weight:     600;
	color:           var(--wp--preset--color--green-forest);
	text-decoration: none;
	transition:      color 250ms ease;
}

.wp-block-cedarspringsnw-card .card-link:hover {
	color: var(--wp--preset--color--gold-primary);
}

/* ── Read More icon ──────────────────────────────────────────────────────── */
.wp-block-cedarspringsnw-card .card-link-icon {
	display:     inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 1;
}

.wp-block-cedarspringsnw-card .card-link-icon.dashicons {
	font-size: 1em;
	width:     1em;
	height:    1em;
}

.wp-block-cedarspringsnw-card .card-link-icon--img {
	width:      1.3em;
	height:     1.3em;
	object-fit: contain;
}

.wp-block-cedarspringsnw-card .card-link-icon--svg svg {
	width:  1em;
	height: 1em;
	fill:   currentColor;
}
.design-1 .wp-block-cedarspringsnw-card .card-content--post{
	position: relative;
}
.design-1 .wp-block-cedarspringsnw-card .card-link{
	position: absolute;
	right: 20px;
	top: 50%;
}

/* ── Block alignment (wide / full) ──────────────────────────────────────── */
/* WordPress only auto-generates alignment CSS for core blocks; custom blocks
   must declare it explicitly using the same CSS variables.                  */
.wp-block-cedarspringsnw-card-wrapper.alignwide,
.card-block-container.alignwide {
	max-width: var(--wp--style--global--wide-size, 1440px);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-cedarspringsnw-card-wrapper.alignfull,
.card-block-container.alignfull {
	max-width: 100%;
	width: 100%;
}

/* ── Grid layout ─────────────────────────────────────────────────────────── */
/* Breakpoints match theme.json: lg = 1024px (tablet), md = 768px (mobile)  */
.wp-block-cedarspringsnw-card-wrapper.is-grid {
	display:               grid;
	grid-template-columns: repeat(var(--columns-desktop, 3), 1fr);
	gap:                   var(--wp--preset--spacing--xl);
	/* Shadow breathing room — pull clip boundary outward without shifting layout. */
	/* padding: 20px;
	margin:  -20px; */
}

@media (max-width: 1024px) {
	.wp-block-cedarspringsnw-card-wrapper.is-grid {
		grid-template-columns: repeat(var(--columns-tablet, 2), 1fr);
	}
}

@media (max-width: 768px) {
	.wp-block-cedarspringsnw-card-wrapper.is-grid {
		grid-template-columns: repeat(var(--columns-mobile, 1), 1fr);
	}
}

/* ── List layout ─────────────────────────────────────────────────────────── */
.wp-block-cedarspringsnw-card-wrapper.is-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--wp--preset--spacing--md);
	/* padding: 20px;
	margin:  -20px; */
}

.wp-block-cedarspringsnw-card-wrapper.is-list .wp-block-cedarspringsnw-card {
	flex-direction: row;
	align-items:    stretch;
}

.wp-block-cedarspringsnw-card-wrapper.is-list .card-image {
	width:         40%;
	min-height:    300px;
}

@media (max-width: 768px) {
	.wp-block-cedarspringsnw-card-wrapper.is-list .wp-block-cedarspringsnw-card {
		flex-direction: column;
	}
	.wp-block-cedarspringsnw-card-wrapper.is-list .card-image {
		width:     100%;
		min-width: unset;
	}
}

/* ── Event "Home Page Event Image" — replaces the featured image at 2:3 ───────── */
/* Designs that keep the image in flow (default, 1, 3, 5): the slot is 2:3,
   centre-cropped by the base .card-image img rule. Four classes outrank the
   list layout's 16:6 ratio and 300px min-height; flex-start stops the list
   row stretching the slot off-ratio. */
.wp-block-cedarspringsnw-card.has-home-image .card-image.card-image--home {
	aspect-ratio: 2 / 3;
	min-height:   0;
	align-self:   flex-start;
}

/* Designs 2 and 4 stretch the image over the whole card, so the card itself
   is 2:3 (design 2's 523px min-height and design 4's square would break it). */
.design-2 .wp-block-cedarspringsnw-card.has-home-image,
.wp-block-cedarspringsnw-card.design-2.has-home-image,
.design-4 .wp-block-cedarspringsnw-card.has-home-image,
.wp-block-cedarspringsnw-card.design-4.has-home-image,
.wp-block-cedarspringsnw-card-wrapper.design-4.is-carousel .card-track .wp-block-cedarspringsnw-card.has-home-image {
	aspect-ratio: 2 / 3;
	min-height:   0;
	height:       auto;
}

/* ── Card meta items (post date, author, categories, tags) ───────────────── */
.wp-block-cedarspringsnw-card .card-meta-item {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size:   var(--wp--preset--font-size--small, 12px);
	color:       var(--wp--preset--color--green-forest);
	opacity:     0.75;
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--sm-plus);
	line-height: 1.5;
	text-transform: uppercase;
}

/* Editor-only placeholder when ACF value not yet available in REST preview */
.wp-block-cedarspringsnw-card .card-meta-field.is-placeholder {
	opacity:    0.45;
	font-style: italic;
}

/* ── Elements sidebar panel ──────────────────────────────────────────────── */
.card-elements-list {
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.card-element-item {
	border:        1px solid #e0e0e0;
	border-radius: 4px;
	transition:    opacity 150ms ease;
}

.card-element-item.is-dragging {
	opacity: 0.4;
}

.card-element-item.drag-over {
	border-color: #4285f4;
}

.card-element-row {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       8px 10px;
	background:    #f6f7f7;
	border-radius: 4px 4px 0 0;
	cursor:        grab;
	user-select:   none;
}

.card-element-row:not(.css-open) {
	border-radius: 4px;
}

.element-drag-handle {
	font-size:   16px;
	line-height: 1;
	color:       #999;
	cursor:      grab;
	flex-shrink: 0;
}

.element-label {
	flex:      1;
	font-size: 13px;
	color:     #1e1e1e;
}

/* Position number in the custom order list — the arrangement is the whole
   point of that list, so each row states where it lands. */
.card-order-index {
	flex-shrink: 0;
	min-width:   18px;
	font-size:   11px;
	font-weight: 600;
	color:       #757575;
	text-align:  center;
}

.element-css-btn {
	flex-shrink:   0;
	padding:       2px 6px;
	font-size:     11px;
	font-family:   monospace;
	font-weight:   600;
	color:         #555;
	background:    #fff;
	border:        1px solid #ccc;
	border-radius: 3px;
	cursor:        pointer;
	line-height:   1.6;
	transition:    background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.element-css-btn:hover,
.element-css-btn.is-active {
	background:   #1e1e1e;
	color:        #fff;
	border-color: #1e1e1e;
}

.element-css-btn.has-css {
	border-color: var(--wp--preset--color--green-forest, #2b4737);
	color:        var(--wp--preset--color--green-forest, #2b4737);
}

.element-css-btn.has-css.is-active {
	background:   var(--wp--preset--color--green-forest, #2b4737);
	color:        #fff;
	border-color: var(--wp--preset--color--green-forest, #2b4737);
}

.element-css-panel {
	padding:        8px;
	background:     #fff;
	border-top:     1px solid #e0e0e0;
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.element-extra-options {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	padding-bottom: 8px;
	border-bottom:  1px solid #e0e0e0;
	margin-bottom:  4px;
}

.element-extra-row {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.element-extra-label {
	font-size:   12px;
	font-weight: 500;
	color:       #1e1e1e;
	min-width:   72px;
	flex-shrink: 0;
}

.element-extra-row .components-base-control { margin-bottom: 0 !important; flex: 1; }
.element-extra-row .components-select-control__input { font-size: 12px; }

/* Date format hint panel */
.date-format-hint {
	margin-top:  4px;
	font-size:   11px;
}

.date-format-hint__toggle {
	cursor:      pointer;
	color:       #007cba;
	font-size:   11px;
	font-weight: 500;
	user-select: none;
	list-style:  none;
}

.date-format-hint__toggle::-webkit-details-marker { display: none; }

.date-format-hint__toggle::before {
	content:      '▶ ';
	font-size:    9px;
	display:      inline-block;
	transition:   transform 0.15s;
}

details[open] .date-format-hint__toggle::before {
	transform: rotate(90deg);
}

.date-format-hint__body {
	margin-top:   8px;
	padding:      8px 10px;
	background:   #f6f7f7;
	border-left:  3px solid #007cba;
	border-radius: 2px;
}

.date-format-hint__group {
	font-size:      10px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color:          #757575;
	margin:         8px 0 3px;
}

.date-format-hint__group:first-child { margin-top: 0; }

.date-format-hint__table {
	width:           100%;
	border-collapse: collapse;
	font-size:       11px;
	line-height:     1.5;
}

.date-format-hint__table td {
	padding:        1px 6px 1px 0;
	vertical-align: top;
}

.date-format-hint__table td:first-child { width: 28px; }

.date-format-hint__table td code {
	font-family:   monospace;
	font-size:     11px;
	background:    #e0e0e0;
	padding:       0 3px;
	border-radius: 2px;
}

.date-format-hint__table--examples td:first-child { width: 110px; }

/* Title link — inherit card heading colour, no underline by default */
.wp-block-cedarspringsnw-card .card-title-link {
	color:           inherit;
	text-decoration: none;
}
.wp-block-cedarspringsnw-card .card-title-link:hover {
	text-decoration: underline;
}

.element-css-label {
	font-size:      11px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color:          #1e1e1e;
}

.element-css-selector {
	font-size:  11px;
	color:      #757575;
}

.element-css-selector code {
	font-family:  monospace;
	font-size:    11px;
	background:   #f0f0f0;
	padding:      1px 4px;
	border-radius: 3px;
	color:        #1e1e1e;
}

.element-css-input {
	width:       100%;
	padding:     6px 8px;
	font-family: monospace;
	font-size:   11px;
	line-height: 1.6;
	color:       #1e1e1e;
	background:  #f8f8f8;
	border:      1px solid #ddd;
	border-radius: 3px;
	resize:      vertical;
	box-sizing:  border-box;
}

.element-css-input:focus {
	outline:      2px solid var(--wp--preset--color--green-forest, #2b4737);
	outline-offset: -1px;
	border-color: transparent;
}

/* ── Frontend search bar ─────────────────────────────────────────────────── */
.card-search-bar {
	margin-bottom: var(--wp--preset--spacing--md);
	position: relative;
}

.card-search-bar .card-search-input {
	width:         100%;
	padding:       10px 14px;
	font-family:   var(--wp--preset--font-family--montserrat);
	font-size:     var(--wp--preset--font-size--body);
	letter-spacing: 1px;
	color:         var(--wp--preset--color--green-dark);
	background:    transparent;
	border: none;
	border-bottom:  1px solid var(--wp--preset--color--green-forest);
	border-radius: 0px;
	box-sizing:    border-box;
	transition:    border-color 200ms ease, box-shadow 200ms ease;
	
}
.card-search-bar::after{
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 15px;
	right: 30px;
	background-image: url("/wp-content/uploads/2026/06/search-Icon.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.card-search-bar .card-search-input::placeholder {
	color: var(--wp--preset--color--medium-grey);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;

}

.card-search-bar .card-search-input:focus {
	outline:        0px solid var(--wp--preset--color--gold-primary);
	outline-offset: 0px;
	border-bottom-color:   var(--wp--preset--color--gold-primary);
}

/* ── Frontend filter bar ─────────────────────────────────────────────────── */
.card-filter-bar {
	display:       flex;
	flex-wrap:     nowrap;
	gap:           var(--wp--preset--spacing--xl);
	margin-bottom: var(--wp--preset--spacing--2-xl);
}
.card-filter-bar .filter-field{
	width: 100%;
}

.card-filter-bar .filter-field select {
	padding:       10px 36px 10px 0px;
	font-family:   var(--wp--preset--font-family--montserrat);
	font-size:     var(--wp--preset--font-size--caption);
	color:         var(--wp--preset--color--green-dark);
	background:    transparent;
	border: 0px;
	border-bottom: 1px solid var(--wp--preset--color--medium-grey);
	border-radius: 0px;
	cursor:        pointer;
	width:     		100%;
	text-transform: uppercase;
	transition:    border-color 200ms ease, box-shadow 200ms ease;
	letter-spacing: 1.2px;
}

.card-filter-bar .filter-field select:focus {
	outline:       0px solid var(--wp--preset--color--gold-primary);
	outline-offset: 0px;
	border-color:  var(--wp--preset--color--gold-primary);
}

@media (max-width: 768px) {
	.card-filter-bar {
		flex-direction: column;
	}
	.card-filter-bar .filter-field select {
		width: 100%;
	}
}

/* ── View switcher bar ────────────────────────────────────────────────────── */
.card-view-bar {
	display:         flex;
	justify-content: flex-end;
	gap:             6px;
	margin-bottom:   var(--wp--preset--spacing--md);
}

.card-view-bar .view-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	background:      var(--wp--preset--color--white);
	border:          1px solid var(--wp--preset--color--green-forest);
	border-radius:   var(--wp--custom--border-radius--sm, 6px);
	color:           var(--wp--preset--color--green-forest);
	cursor:          pointer;
	transition:      background 200ms ease, color 200ms ease;
}

.card-view-bar .view-btn.is-active,
.card-view-bar .view-btn:hover {
	background: var(--wp--preset--color--green-forest);
	color:      var(--wp--preset--color--white);
}

/* ── Carousel layout ─────────────────────────────────────────────────────── */
.wp-block-cedarspringsnw-card-wrapper.is-carousel {
	position: relative;
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .card-track-outer {
	overflow: hidden;
	/* Pull clip boundary outward so card shadows are not cropped. */
	padding: 20px;
	margin:  -20px;
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .card-track {
	display:     flex;
	gap:         var(--wp--preset--spacing--xl);
	transition:  transform 350ms ease;
	will-change: transform;
	cursor:      grab;
	user-select: none;
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .card-track:active {
	cursor: grabbing;
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .card-track img,
.wp-block-cedarspringsnw-card-wrapper.is-carousel .card-track a {
	-webkit-user-drag: none;
	user-select:       none;
}

/* Card width is set by frontend.js (applyCardWidth()) as an exact pixel value
   in --carousel-card-width, measured against the track's real rendered width
   using the current per-breakpoint column count — NOT computed independently
   in CSS via calc()/@media. That single JS source is what keeps the visible
   card count and the slide-offset math in agreement at every viewport,
   including the odd iPad widths. The calc() fallback only applies before JS
   runs on first paint. */
.wp-block-cedarspringsnw-card-wrapper.is-carousel .card-track .wp-block-cedarspringsnw-card {
	flex:      0 0 var(--carousel-card-width, calc((100% - var(--columns-desktop-gaps, 2) * var(--wp--preset--spacing--xl)) / var(--columns-desktop, 3)));
	min-width: 0;
}

/* Carousel nav buttons */
.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-btn {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         2;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	background:      var(--wp--preset--color--white);
	border:          2px solid var(--wp--preset--color--green-forest);
	border-radius:   var(--wp--custom--border-radius--pill);
	color:           var(--wp--preset--color--green-forest);
	cursor:          pointer;
	font-size:       18px;
	transition:      background 250ms ease, color 250ms ease;
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-btn:hover {
	background: var(--wp--preset--color--green-forest);
	color:      var(--wp--preset--color--white);
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-btn.is-prev {
	left: -22px;
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-btn.is-next {
	right: -22px;
}
.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-btn svg{
	stroke: #06090F
}
.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-btn:hover svg {
	stroke: #fff;
}	

.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-btn[disabled] {
	opacity: 0.35;
	cursor:  default;
}

/* ── Grid pagination ─────────────────────────────────────────────────────── */
.card-pagination {
	margin-top: var(--wp--preset--spacing--xl, 2rem);
}

.card-pagination__list {
	display:         flex;
	flex-wrap:       wrap;
	gap:             10px;
	list-style:      none;
	margin:          0;
	padding:         0;
	justify-content: center;
}

.card-pagination__item a,
.card-pagination__item span {
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-width:       40px;
	height:          40px;
	padding:         0px 10px;
	border-radius:   0px;
	font-family:     var(--wp--preset--font-family--montserrat);
	font-size:       var(--wp--preset--font-size--small, 14px);
	font-weight:     700;
	line-height:     1;
	text-decoration: none;
	transition:      background 0.15s, color 0.15s;
	border:          1px solid var(--wp--preset--color--medium-grey, #e0e0e0);
	color:           var(--wp--preset--color--green-medium, #365b46);
	background:      #fff;
}
.card-pagination__item a:hover {
	background: var(--wp--preset--green-medium, #365b46);
	border-color: var(--wp--preset--green-medium, #365b46);
	color: #fff;
}
.card-pagination__item a:focus{
	outline: none;
}
.card-pagination__item span.current {
	background:   var(--wp--preset--green-medium, #365b46);
	border-color: var(--wp--preset--green-medium, #365b46);
	color:        #fff;
}

.card-pagination__item span.dots {
	border-color: transparent;
	background:   transparent;
}

.card-pagination__item span.disabled {
	opacity:      0.35;
	cursor:       default;
	border-color: var(--wp--preset--color--green-medium, #365b46);
	background:   #fff;
	color:        var(--wp--preset--color--green-medium, #365b46);
}

/* ── Carousel dots ───────────────────────────────────────────────────────── */
/* Carousel dots */
.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-dots {
	display:         flex;
	justify-content: center;
	gap:             8px;
	margin-top:      var(--wp--preset--spacing--lg);
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--wp--preset--color--light-grey);
	border:        none;
	cursor:        pointer;
	padding:       0;
	transition:    background 250ms ease, transform 250ms ease;
}

.wp-block-cedarspringsnw-card-wrapper.is-carousel .carousel-dot.is-active {
	background: var(--wp--preset--color--green-forest);
	transform:  scale(1.35);
}

/* ── Dashicon picker (editor sidebar) ────────────────────────────────────── */
.card-dashicon-picker .dashicons {
	font-size:   16px !important;
	width:       16px !important;
	height:      16px !important;
	line-height: 1    !important;
}

/* ── Skeleton loader (frontend AJAX loading state) ───────────────────────── *
 * Shown in .card-results while a search/filter/pagination request is in
 * flight — see frontend.js showSkeleton(). Deliberately design-agnostic (no
 * design-N class): the goal is an accurate grid/list shape and column count,
 * not a per-design replica, so it reuses the base card styles above rather
 * than duplicating each design's bespoke layout rules.                      */

.wp-block-cedarspringsnw-card.is-skeleton {
	pointer-events: none;
}

.skeleton-block,
.skeleton-line {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--light-grey, #e5e5e3) 25%,
		var(--wp--preset--color--warm-grey, #f2f1ee) 37%,
		var(--wp--preset--color--light-grey, #e5e5e3) 63%
	);
	background-size: 400% 100%;
	animation:        csnl-card-shimmer 1.4s ease-in-out infinite;
	border-radius:    var(--wp--custom--border-radius--sm, 6px);
}

.skeleton-line { height: 14px; }

.skeleton-badge {
	width:         72px;
	height:        16px;
	border-radius: var(--wp--custom--border-radius--pill, 999px);
	margin-bottom: 0;
}

.skeleton-title {
	width:         90%;
	height:        20px;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.skeleton-title--short { width: 60%; }

.skeleton-meta-row {
	display:       flex;
	gap:           var(--wp--preset--spacing--sm);
	margin-bottom: var(--wp--preset--spacing--sm);
}

.skeleton-meta { width: 90px; height: 12px; }

.skeleton-text        { width: 100%; margin-bottom: var(--wp--preset--spacing--sm); }
.skeleton-text--short  { width: 70%; }

.skeleton-button {
	width:         120px;
	height:        36px;
	margin-top:    auto;
	border-radius: var(--wp--custom--border-radius--pill, 999px);
}

@keyframes csnl-card-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* Momentary fade-in once real content replaces the skeleton — see frontend.js fadeInResults(). */
.card-results.is-fading-in .wp-block-cedarspringsnw-card-wrapper,
.card-results.is-fading-in .card-pagination {
	animation: csnl-card-fade-in 220ms ease;
}

@keyframes csnl-card-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Entrance animation — "Animate cards into view" block option. Cards start
   hidden/offset via [data-animate], set by CardBlock::apply_scroll_animation();
   frontend.js adds .is-animate-in the first time each card scrolls into view. */
.wp-block-cedarspringsnw-card[data-animate] {
	opacity:    0;
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.wp-block-cedarspringsnw-card[data-animate='fade-up']    { transform: translateY(40px); }
.wp-block-cedarspringsnw-card[data-animate='fade-in']    { transform: none; }
.wp-block-cedarspringsnw-card[data-animate='slide-left']  { transform: translateX(-80px); }
.wp-block-cedarspringsnw-card[data-animate='slide-right'] { transform: translateX(80px); }

.wp-block-cedarspringsnw-card[data-animate].is-animate-in {
	opacity:   1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.skeleton-block,
	.skeleton-line {
		animation:  none;
		background: var(--wp--preset--color--light-grey, #e5e5e3);
	}

	.card-results.is-fading-in .wp-block-cedarspringsnw-card-wrapper,
	.card-results.is-fading-in .card-pagination {
		animation: none;
	}

	.wp-block-cedarspringsnw-card[data-animate] {
		opacity:    1;
		transform:  none;
		transition: none;
	}
}

/* ── Design Variations ───────────────────────────────────────────────────── */

/* Design 1 — Classic (default, inherits base card styles above; no overrides needed) */
/* Designs 2–5 are loaded on demand via separate stylesheets — see CardBlock::render() */