/**
 * BP Blog Engine — front-end styles
 *
 * DESIGN INHERITANCE: every colour, font, radius and width below is driven by
 * the CSS custom properties exposed by BP Brand Importer / BP Gutenberg
 * Patterns (--bp-color-*, --bp-font-*, --bp-border-radius, --bp-container-width).
 * We only supply fallbacks so the plugin degrades gracefully if the brand
 * layer is absent. Because these are the SAME variables the imported styles
 * define, each country site automatically renders the feed in its own brand
 * palette and typography — no per-site CSS edits required.
 *
 * Mobile-first. Breakpoints: 480 / 768 / 1024. Fixed aspect-ratio media keeps
 * Cumulative Layout Shift at 0.
 */

:root {
	--bpbe-gap: 24px;
	--bpbe-radius: var(--bp-border-radius, 12px);
	--bpbe-card-bg: var(--bp-color-surface, #ffffff);
	--bpbe-text: var(--bp-color-text, #1a1a1a);
	--bpbe-muted: var(--bp-color-text-muted, #6b7280);
	--bpbe-line: var(--bp-color-primary, #2563eb);
	/* Badge palette — reuse brand vars where meaningful, else neutral defaults
	   that a site can override via these same custom properties. */
	--bpbe-badge-review: var(--bp-color-accent, #f59e0b);
	--bpbe-badge-guide: var(--bp-color-primary, #2563eb);
	--bpbe-badge-odds: var(--bp-color-success, #16a34a);
	--bpbe-badge-news: var(--bp-color-danger, #dc2626);
	--bpbe-badge-evergreen: #0d9488;
	--bpbe-badge-tutorial: #7c3aed;
	--bpbe-badge-default: var(--bp-color-secondary, #64748b);
}

/* ---------------------------------------------------------------- container */
.bp-blog-feed {
	font-family: var(--bp-font-body, inherit);
	color: var(--bpbe-text);
	max-width: var(--bp-container-width, 1200px);
	margin-left: auto;
	margin-right: auto;
}

.bp-blog-feed *,
.bp-blog-feed *::before,
.bp-blog-feed *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------- tabs */
.bp-blog-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0 12px;
	margin-bottom: var(--bpbe-gap);
}

.bp-blog-tabs::-webkit-scrollbar {
	display: none;
}

.bp-blog-tab {
	flex: 0 0 auto;
	cursor: pointer;
	border: 1px solid var(--bp-color-secondary, #d1d5db);
	background: transparent;
	color: var(--bpbe-muted);
	font-family: var(--bp-font-button, inherit);
	font-size: 14px;
	line-height: 1;
	padding: 9px 16px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bp-blog-tab:hover {
	border-color: var(--bp-color-primary, #2563eb);
	color: var(--bp-color-primary, #2563eb);
}

.bp-blog-tab.is-active {
	background: var(--bp-color-primary, #2563eb);
	border-color: var(--bp-color-primary, #2563eb);
	color: var(--bp-color-on-primary, #ffffff);
}

/* ------------------------------------------------------------------- cards */
.bp-blog-feed__panel {
	display: grid;
	gap: var(--bpbe-gap);
}

.bp-article-card {
	position: relative;
	background: var(--bpbe-card-bg);
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: var(--bpbe-radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.bp-article-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.bp-article-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.bp-article-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(100deg, #eee 30%, #f5f5f5 50%, #eee 70%);
	overflow: hidden;
}

.bp-article-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bp-article-card__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bp-article-card__badge {
	align-self: flex-start;
	font-family: var(--bp-font-button, inherit);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--bpbe-badge-default);
}

/* Badge colours by article-type slug (matches bpbe_badge_class). */
.bp-atype--review { background: var(--bpbe-badge-review); }
.bp-atype--guide { background: var(--bpbe-badge-guide); }
.bp-atype--odds { background: var(--bpbe-badge-odds); }
.bp-atype--news { background: var(--bpbe-badge-news); }
.bp-atype--evergreen { background: var(--bpbe-badge-evergreen); }
.bp-atype--tutorial { background: var(--bpbe-badge-tutorial); }
.bp-atype--default { background: var(--bpbe-badge-default); }

.bp-article-card__title {
	font-family: var(--bp-font-heading, inherit);
	font-size: 20px;
	line-height: 1.3;
	margin: 0;
	color: var(--bpbe-text);
}

.bp-article-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--bpbe-muted);
}

.bp-article-card__author {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bp-article-card__author img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

.bp-article-card__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .6;
}

.bp-article-card__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bpbe-muted);
}

.bp-article-card__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* ============================================================ LAYOUT: GRID */
.bp-blog-feed--grid .bp-blog-feed__panel {
	grid-template-columns: 1fr;
}

/* ============================================================ LAYOUT: LIST */
.bp-blog-feed--list .bp-blog-feed__panel {
	grid-template-columns: 1fr;
}

.bp-blog-feed--list .bp-article-card__link {
	display: flex;
	flex-direction: column;
}

/* ============================================================ LAYOUT: HERO */
.bp-blog-feed--hero .bp-blog-feed__panel {
	grid-template-columns: 1fr;
}

.bp-blog-feed__rest {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bpbe-gap);
}

/* --------------------------------------------------------- skeleton loader */
.bp-blog-feed.is-loading .bp-blog-feed__panel {
	position: relative;
	min-height: 200px;
}

.bpbe-skeleton {
	border-radius: var(--bpbe-radius);
	overflow: hidden;
	background: var(--bpbe-card-bg);
	border: 1px solid rgba(0, 0, 0, .07);
}

.bpbe-skeleton__media {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.bpbe-skeleton__line {
	height: 14px;
	margin: 12px 20px;
	border-radius: 6px;
}

.bpbe-skeleton__media,
.bpbe-skeleton__line {
	background: linear-gradient(100deg, #ececec 30%, #f6f6f6 50%, #ececec 70%);
	background-size: 200% 100%;
	animation: bpbe-shimmer 1.2s ease-in-out infinite;
}

@keyframes bpbe-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bpbe-skeleton__media,
	.bpbe-skeleton__line { animation: none; }
	.bp-article-card { transition: none; }
}

/* ------------------------------------------------------------- empty state */
.bp-blog-feed__empty {
	text-align: center;
	color: var(--bpbe-muted);
	padding: 40px 0;
	font-family: var(--bp-font-body, inherit);
}

/* ============================================================ SINGLE ARTICLE */
.bp-article-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(var(--scroll-pct, 0));
	transform-origin: 0 50%;
	background: var(--bp-color-primary, #2563eb);
	z-index: 9999;
	will-change: transform;
}

.bp-article-authorstrip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid rgba(0, 0, 0, .08);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	margin: 20px 0;
	font-family: var(--bp-font-body, inherit);
}

.bp-article-authorstrip img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.bp-article-authorstrip__name {
	font-weight: 700;
	color: var(--bpbe-text);
}

.bp-article-authorstrip__meta {
	font-size: 13px;
	color: var(--bpbe-muted);
}

/* =================================================================== 480px+ */
@media (min-width: 480px) {
	.bp-article-card__title { font-size: 21px; }
}

/* =================================================================== 768px+ */
@media (min-width: 768px) {
	.bp-blog-feed--grid .bp-blog-feed__panel {
		grid-template-columns: repeat(2, 1fr);
	}
	.bp-blog-feed__rest {
		grid-template-columns: repeat(2, 1fr);
	}

	/* List: horizontal 40 / 60 split. */
	.bp-blog-feed--list .bp-article-card__link {
		flex-direction: row;
	}
	.bp-blog-feed--list .bp-article-card__media {
		flex: 0 0 40%;
		aspect-ratio: 4 / 3;
	}
	.bp-blog-feed--list .bp-article-card__body {
		flex: 1 1 60%;
		justify-content: center;
	}

	/* Hero feature card: large image + bigger title. */
	.bp-blog-feed--hero .bp-article-card--feature .bp-article-card__media {
		aspect-ratio: 21 / 9;
	}
	.bp-blog-feed--hero .bp-article-card--feature .bp-article-card__title {
		font-size: 30px;
	}
	.bp-blog-feed--hero .bp-article-card--feature .bp-article-card__body {
		padding: 26px 30px 30px;
	}
}

/* ================================================================== 1024px+ */
@media (min-width: 1024px) {
	.bp-blog-feed--grid .bp-blog-feed__panel {
		grid-template-columns: repeat(3, 1fr);
	}
	.bp-blog-feed__rest {
		grid-template-columns: repeat(3, 1fr);
	}
	.bp-article-card--feature .bp-article-card__title {
		font-size: 34px;
	}
}

/* ============================================================ EDITOR PREVIEW */
.bpbe-editor-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	padding: 40px 20px;
	border: 2px dashed var(--bp-color-secondary, #cbd5e1);
	border-radius: var(--bpbe-radius);
	background: var(--bp-color-bg, #f8fafc);
	color: var(--bpbe-muted);
	font-family: var(--bp-font-body, inherit);
}

.bpbe-editor-placeholder__icon {
	font-size: 30px;
	line-height: 1;
	color: var(--bp-color-primary, #2563eb);
}

.bpbe-editor-placeholder__meta {
	font-size: 13px;
}