/* =============================================================================
   Sermon Archive Block
   ============================================================================= */

.cr-sermon-archive {
	--cr-accent:      var(--ast-global-color-0, #1a4f7a);
	--cr-cols:        3;
	--cr-cols-mobile: 1;
	--cr-gap:         24px;
	--cr-radius:      10px;
	--cr-shadow:      0 2px 14px rgba(0, 0, 0, .07);
	--cr-shadow-hover:0 8px 28px rgba(0, 0, 0, .12);
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */

.cr-filter-bar {
	display:        flex;
	align-items:    center;
	gap:            10px;
	margin-bottom:  32px;
	flex-wrap:      wrap;
}

.cr-search-wrap {
	flex:      1 1 200px;
	min-width: 0;
}

.cr-search-input {
	width:         100%;
	padding:       10px 14px;
	border:        1px solid #ddd;
	border-radius: 6px;
	font-size:     14px;
	line-height:   1.4;
	background:    #fff;
	transition:    border-color .15s ease, box-shadow .15s ease;
	box-sizing:    border-box;
}

.cr-search-input:focus {
	outline:      none;
	border-color: var(--cr-accent);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--cr-accent) 15%, transparent);
}

.cr-filter-controls {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
}

/* Desktop: toggle is hidden, selects always visible */
.cr-filter-toggle {
	display: none;
}

.cr-filter-selects {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
}

.cr-filter-select {
	padding:       9px 32px 9px 12px;
	border:        1px solid #ddd;
	border-radius: 6px;
	font-size:     14px;
	background:    #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 12px 12px no-repeat;
	appearance:    none;
	cursor:        pointer;
	transition:    border-color .15s ease;
}

.cr-filter-select:focus {
	outline:      none;
	border-color: var(--cr-accent);
}

.cr-filter-select:hover {
	border-color: #aaa;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.cr-sermon-grid {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--cr-gap);
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.cr-sermon-card {
	flex:           0 0 calc((100% - (var(--cr-cols) - 1) * var(--cr-gap)) / var(--cr-cols));
	min-width:      0;
	background:     #fff;
	border-radius:  var(--cr-radius);
	box-shadow:     var(--cr-shadow);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow .2s ease, transform .2s ease;
}

.cr-sermon-card:hover {
	box-shadow: var(--cr-shadow-hover);
	transform:  translateY(-3px);
}

/* Image */

.cr-card-image {
	aspect-ratio: 16 / 9;
	overflow:     hidden;
}

.cr-card-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .3s ease;
}

.cr-sermon-card:hover .cr-card-image img {
	transform: scale(1.03);
}

/* Body */

.cr-card-body {
	padding:        20px 22px 22px;
	display:        flex;
	flex-direction: column;
	flex:           1;
}

/* Badges */

.cr-card-badges {
	display:       flex;
	flex-wrap:     wrap;
	gap:           6px;
	margin-bottom: 10px;
}

.cr-badge {
	display:        inline-block;
	font-size:      var(--cr-fs-badge, 11px);
	font-weight:    600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding:        3px 10px;
	border-radius:  100px;
	background:     color-mix(in srgb, var(--cr-accent) 12%, transparent);
	color:          var(--cr-accent);
	white-space:    nowrap;
	line-height:    1.6;
}

/* Title */

.cr-card-title {
	font-size:   var(--cr-fs-title, 18px);
	font-weight: 700;
	line-height: 1.35;
	margin:      0 0 10px;
	color:       #1a1a1a;
}

.cr-card-title a {
	text-decoration: none;
	color:           inherit;
	transition:      color .15s ease;
}

.cr-card-title a:hover {
	color: var(--cr-accent);
}

/* Excerpt */

.cr-card-excerpt {
	font-size:             var(--cr-fs-excerpt, 14px);
	line-height:           1.65;
	color:                 #555;
	margin:                0 0 auto;
	padding-bottom:        16px;
	display:               -webkit-box;
	-webkit-line-clamp:    3;
	-webkit-box-orient:    vertical;
	overflow:              visible;
}

/* Meta row: date + button */

.cr-card-meta {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	padding-top:     16px;
	border-top:      1px solid #f0f0f0;
	margin-top:      auto;
}

.cr-card-date {
	display:     flex;
	align-items: center;
	gap:         5px;
	font-size:   var(--cr-fs-date, 13px);
	color:       #888;
	flex-shrink: 0;
}

.cr-card-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	padding:         7px 16px;
	border-radius:   100px;
	background:      var(--cr-accent);
	color:           #fff !important;
	font-size:       var(--cr-fs-button, 13px);
	font-weight:     600;
	text-decoration: none;
	white-space:     nowrap;
	transition:      opacity .15s ease, transform .15s ease;
	flex-shrink:     0;
}

.cr-card-btn:hover {
	opacity:   .88;
	transform: translateX(2px);
}

/* ── Load more ───────────────────────────────────────────────────────────── */

.cr-load-more-wrap {
	text-align: center;
	margin-top: 40px;
}

.cr-load-more-btn {
	padding:       12px 36px;
	border-radius: 100px;
	background:    transparent;
	border:        2px solid var(--cr-accent);
	color:         var(--cr-accent);
	font-size:     15px;
	font-weight:   600;
	cursor:        pointer;
	transition:    background .15s ease, color .15s ease;
}

.cr-load-more-btn:hover {
	background: var(--cr-accent);
	color:      #fff;
}

.cr-load-more-btn:disabled {
	opacity: .5;
	cursor:  default;
}

/* ── Empty / no results ──────────────────────────────────────────────────── */

.cr-no-results {
	text-align: center;
	padding:    48px 24px;
	color:      #666;
	font-size:  16px;
	width:      100%;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {

	.cr-filter-bar {
		gap: 8px;
	}

	/* Show toggle button, hide selects by default */
	.cr-filter-toggle {
		display:       inline-flex;
		align-items:   center;
		gap:           6px;
		padding:       9px 14px;
		border:        1px solid #ddd;
		border-radius: 6px;
		background:    #fff;
		font-size:     14px;
		cursor:        pointer;
		white-space:   nowrap;
		transition:    border-color .15s ease, color .15s ease;
	}

	.cr-filter-toggle.has-active {
		border-color: var(--cr-accent);
		color:        var(--cr-accent);
	}

	.cr-filter-selects {
		display:        none;
		flex-direction: column;
		width:          100%;
		gap:            8px;
	}

	.cr-filter-selects.is-open {
		display: flex;
	}

	.cr-filter-select {
		width:     100%;
		box-sizing:border-box;
	}

	/* Responsive card columns */
	.cr-sermon-card {
		flex: 0 0 calc((100% - (var(--cr-cols-mobile) - 1) * var(--cr-gap)) / var(--cr-cols-mobile));
	}
}