/**
 * Custom Blog Posts Widget — Frontend Styles
 *
 * @package CustomBlogPosts
 * @version 1.0.0
 */

/* ==========================================================================
   Root Layout & Variables Default Fallbacks
   ========================================================================== */

.cbp-blog-posts {
	--cbp-cols: 3;
	--cbp-cols-tablet: 2;
	--cbp-cols-mobile: 1;
	--cbp-col-gap: 20px;
	--cbp-row-gap: 20px;
	--cbp-img-height: 220px;
	--cbp-img-fit: cover;
	--cbp-content-align: left;
	--cbp-card-height: auto;
	box-sizing: border-box;
}

.cbp-blog-posts *,
.cbp-blog-posts *::before,
.cbp-blog-posts *::after {
	box-sizing: border-box;
}

.cbp-no-posts {
	padding: 20px;
	text-align: center;
	color: #666;
	background: #f9f9f9;
	border: 1px solid #eee;
	border-radius: 4px;
}

/* ==========================================================================
   Grid Layout
   ========================================================================== */

.cbp-blog-posts.cbp-layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--cbp-cols, 3), 1fr);
	column-gap: var(--cbp-col-gap, 20px);
	row-gap: var(--cbp-row-gap, 20px);
}

/* Responsive Grid Breakpoints (matching standard Elementor breakpoints) */
@media (max-width: 1024px) {
	.cbp-blog-posts.cbp-layout-grid {
		grid-template-columns: repeat(var(--cbp-cols-tablet, 2), 1fr);
	}
}

@media (max-width: 767px) {
	.cbp-blog-posts.cbp-layout-grid {
		grid-template-columns: repeat(var(--cbp-cols-mobile, 1), 1fr);
	}
}

/* ==========================================================================
   List Layout
   ========================================================================== */

.cbp-blog-posts.cbp-layout-list {
	display: flex;
	flex-direction: column;
	gap: var(--cbp-row-gap, 20px);
}

.cbp-blog-posts.cbp-layout-list .cbp-card {
	display: flex;
	flex-direction: row;
	gap: var(--cbp-col-gap, 20px);
	align-items: stretch;
}

.cbp-blog-posts.cbp-layout-list .cbp-card__image-wrap {
	flex: 0 0 35%;
	max-width: 35%;
}

.cbp-blog-posts.cbp-layout-list .cbp-card__body {
	flex: 1;
}

@media (max-width: 767px) {
	.cbp-blog-posts.cbp-layout-list .cbp-card {
		flex-direction: column;
	}

	.cbp-blog-posts.cbp-layout-list .cbp-card__image-wrap {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   Card Styling
   ========================================================================== */

.cbp-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cbp-card:hover {
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Equal Card Height */
.cbp-blog-posts.cbp-layout-grid .cbp-card--equal-height {
	height: 100%;
}

.cbp-card--equal-height {
	min-height: var(--cbp-card-height, auto);
}

/* Card Body & Content Alignment
   NOTE: display:flex is now unconditional (not just on --equal-height) so
   Auto-height cards get the same predictable spacing behavior via flexbox
   instead of relying on CSS margin collapsing between children. This does
   NOT force height; without --equal-height the card still ends naturally
   right after the Read More button. */
.cbp-card__body {
	display: flex;
	flex-direction: column;
	padding: 24px;
	text-align: var(--cbp-content-align, left);
}

.cbp-card--equal-height .cbp-card__body {
	height: 100%;
}

/* ==========================================================================
   Featured Image
   ========================================================================== */

.cbp-card__image-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: var(--cbp-img-height, 220px);
	background: #f1f5f9;
}

.cbp-card__image-wrap a {
	display: block;
	width: 100%;
	height: 100%;
}

.cbp-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--cbp-img-fit, cover);
	transition: transform 0.3s ease;
}

.cbp-card:hover .cbp-card__image {
	transform: scale(1.03);
}

/* ==========================================================================
   Category Badge
   ========================================================================== */

.cbp-card__category {
	margin-bottom: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: var(--cbp-content-align, flex-start);
}

.cbp-card__category-link {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #2563eb;
	background-color: #eff6ff;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cbp-card__category-link:hover {
	color: #ffffff;
	background-color: #2563eb;
}

/* ==========================================================================
   Title
   ========================================================================== */

.cbp-card__title {
	margin: 0 0 12px 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
	color: #0f172a;
}

.cbp-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.cbp-card__title a:hover {
	color: #2563eb;
}

/* ==========================================================================
   Excerpt
   ========================================================================== */

.cbp-card__excerpt {
	/* This is now the ONLY source of excerpt→button spacing. Default 12px
	   per spec. Change this single value to adjust the gap. */
	margin-bottom: 12px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #475569;
}

.cbp-card__excerpt p {
	margin: 0;
}

/* ==========================================================================
   Meta Data
   ========================================================================== */

.cbp-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 0.8125rem;
	color: #64748b;
	justify-content: var(--cbp-content-align, flex-start);
}

/* gap here is the icon<->text spacing; overridden per-instance by
   Elementor's "Meta Icon Spacing" style control (cbp_meta_icon_spacing),
   default 6px — see class-cbp-blog-posts-widget.php register_style_meta_controls(). */
.cbp-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cbp-card__meta-item+.cbp-card__meta-item::before {
	content: "•";
	margin-right: 8px;
	color: #cbd5e1;
}

/* Icon precedes text by default (see template markup order). */
.cbp-card__meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	line-height: 1;
}

.cbp-card__meta-icon svg,
.cbp-card__meta-icon i {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.cbp-card__meta-text {
	display: inline-block;
}

/* ==========================================================================
   Read More Button
   ========================================================================== */

.cbp-card__readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* No margin-top by default: the 12px gap above now comes entirely from
	   .cbp-card__excerpt's margin-bottom. This avoids double-spacing and
	   keeps Auto-height cards ending naturally right after the button. */
	margin-top: 0;
	padding: 8px 16px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #2563eb;
	background-color: transparent;
	border: 1px solid #bfdbfe;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s ease;
	align-self: var(--cbp-content-align, flex-start);
}

/* Only push the button to the bottom of the card when Equal Card Height
   is explicitly enabled. Auto height is untouched. */
/* .cbp-card--equal-height .cbp-card__readmore {
	margin-top: auto;
} */

.cbp-card__readmore:hover {
	color: #ffffff;
	background-color: #2563eb;
	border-color: #2563eb;
}

.cbp-card__readmore-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875em;
}

.cbp-card__readmore-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.cbp-pagination-container {
	width: 100%;
	margin-top: 32px;
}

.cbp-blog-posts.cbp-layout-grid .cbp-pagination-container {
	grid-column: 1 / -1;
}

.cbp-pagination {
	display: flex;
	justify-content: center;
	width: 100%;
}

.cbp-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cbp-pagination__item {
	display: inline-block;
}

.cbp-pagination__item a,
.cbp-pagination__item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #334155;
	background-color: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.cbp-pagination__item a:hover {
	color: #2563eb;
	border-color: #2563eb;
	background-color: #eff6ff;
}

.cbp-pagination__item span.current,
.cbp-pagination__item--active a,
.cbp-pagination__item--active span {
	color: #ffffff;
	background-color: #2563eb;
	border-color: #2563eb;
}

.cbp-pagination__item span.dots {
	border-color: transparent;
	background-color: transparent;
	color: #94a3b8;
}

/* Prev / Next Pagination */
.cbp-pagination__prev-next-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cbp-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #334155;
	background-color: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.cbp-pagination__link:hover:not(.cbp-pagination__link--disabled) {
	color: #2563eb;
	border-color: #2563eb;
	background-color: #eff6ff;
}

.cbp-pagination__link--disabled {
	color: #94a3b8;
	background-color: #f8fafc;
	border-color: #e2e8f0;
	cursor: not-allowed;
	opacity: 0.7;
}