/* BP Blog Directory V2 widget styles
 *
 * Editorial grid of all published native Blog posts on
 * the /blog/ hub. Strictly reuses the existing Barbary
 * Plante token set, radii, breakpoints and image-led
 * editorial card language from
 *   - bp-cultures-directory (image-led cards, gold pill)
 *   - bp-results-studies-directory (eyebrow, filters)
 *   - bp-blog-list (olive editorial accents)
 *
 * Layout: SIMPLE FIXED grid, no masonry, no FEATURE card.
 *   - Desktop: 3 equal columns, every card occupies
 *     exactly ONE column.
 *   - Tablet (769-1024): 2 equal columns.
 *   - Mobile (<=768): 1 column.
 *   - Normal CSS grid auto-flow reflows visible posts
 *     after filtering (no JS layout recompute).
 *
 * Palette tokens mirror the existing Barbary system:
 *   --bp-bd-green:   #2F4A2F
 *   --bp-bd-green-2: #374F37
 *   --bp-bd-cream:   #F4EFE3
 *   --bp-bd-gold:    #B8B25A
 *   --bp-bd-ink:     #1F2A1F
 *
 * All rules stay under .bp-blog-directory. Logical
 * properties keep LTR/RTL aligned without an override
 * file. Cards are whole-clickable to /blog/{slug}/.
 */

.bp-blog-directory {
	--bp-bd-green:        #2F4A2F;
	--bp-bd-green-2:      #374F37;
	--bp-bd-cream:        #F4EFE3;
	--bp-bd-cream-2:      #EFE8D9;
	--bp-bd-gold:         #B8B25A;
	--bp-bd-ink:          #1F2A1F;
	--bp-bd-ink-soft:     rgba(255, 255, 255, 0.82);
	--bp-bd-divider:      rgba(184, 178, 90, 0.45);

	--bp-bd-inner-max:    1320px;
	--bp-bd-pad-x:        clamp(24px, 5vw, 64px);
	--bp-bd-pad-y:        clamp(72px, 8vw, 112px);

	--bp-bd-card-radius:  24px;
	--bp-bd-grid-gap:     22px;

	--bp-bd-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-bd-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	color: var(--bp-bd-ink);
	font-family: var(--bp-bd-font-body);
	scroll-margin-block-start: 110px;
}

/* ----- Full-bleed breakout (matches cultures dir) ----- */
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-blog-directory,
.elementor-section .elementor-container {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-element.bp-blog-directory,
.elementor .bp-blog-directory,
.e-con.bp-blog-directory,
.bp-blog-directory {
	padding: 0;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

.elementor-inner section.elementor-section,
.elementor-inner section.elementor-section > .elementor-container,
.elementor-inner section.elementor-section > .elementor-row,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column > .elementor-widget-wrap {
	width: 100% !important;
	max-width: 100% !important;
	padding-inline: 0 !important;
}

.elementor .elementor-widget.elementor-widget-bp-blog-directory-v2,
.elementor-widget.elementor-widget-bp-blog-directory-v2 {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	margin-inline-start: calc(50% - 50vw) !important;
	margin-inline-end:   calc(50% - 50vw) !important;
	position: relative;
	z-index: 1;
}

.e-con:has(> .elementor-widget-bp-blog-directory-v2),
.e-con:has(> .e-con-inner > .elementor-widget-bp-blog-directory-v2),
.e-con-inner:has(> .elementor-widget-bp-blog-directory-v2) {
	--container-default-padding-top:    0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top:    0 !important;
	padding-bottom: 0 !important;
}
.elementor-widget.elementor-widget-bp-blog-directory-v2 {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ----- Inner container ----- */
.bp-bd__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--bp-bd-inner-max);
	margin-inline: auto;
	padding-block:   var(--bp-bd-pad-y);
	padding-inline: var(--bp-bd-pad-x);
}

/* ----- Header (left aligned, same as cultures) ----- */
.bp-bd__header {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-inline-size: 760px;
	margin-block-end: 32px;
	text-align: start;
}

.bp-bd__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-bd-green);
	line-height: 1;
}
.bp-bd__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 2px;
	background: var(--bp-bd-gold);
	border-radius: 1px;
}

.bp-bd__title {
	margin: 0;
	font-family: var(--bp-bd-font-display);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: #374F3C;
}

.bp-bd__intro {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--bp-bd-ink);
	max-inline-size: 640px;
}

/* ----- Filter row (same pill style as cultures) ----- */
.bp-bd__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-end: 36px;
}

.bp-bd__filter {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba(55, 79, 55, 0.18);
	background: rgba(255, 255, 255, 0.6);
	color: var(--bp-bd-green-2);
	font-family: var(--bp-bd-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.bp-bd__filter:hover {
	border-color: var(--bp-bd-gold);
	background: #fff;
}
.bp-bd__filter.is-active {
	background: var(--bp-bd-green-2);
	color: #fff;
	border-color: var(--bp-bd-green-2);
}
.bp-bd__filter:focus-visible {
	outline: 2px solid var(--bp-bd-gold);
	outline-offset: 2px;
}

/* ----- Simple fixed grid: every card = one column ----- */
.bp-bd__grid {
	display: grid;
	gap: var(--bp-bd-grid-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Cards outside the initial limit start hidden. */
.bp-bd__card[data-overflow="1"] { display: none; }
.bp-bd__card[data-overflow="1"].is-revealed { display: block; }

/* ----- Card base ----- */
.bp-bd__card {
	position: relative;
	isolation: isolate;
	inline-size: 100%;
	block-size: 100%;
	overflow: hidden;
	border-radius: var(--bp-bd-card-radius);
	background: var(--bp-bd-green-2);
	color: #fff;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	/* Consistent image aspect ratio for ALL cards.
	 * CSS Grid (align-items: stretch, the default)
	 * keeps every card in a row at the same height;
	 * if text content overflows, the card grows and
	 * the absolutely-positioned image stretches with
	 * it. No fixed heights that cut text. */
	aspect-ratio: 4 / 3.6;
	transition: transform 320ms ease, box-shadow 320ms ease;
	box-shadow: 0 1px 0 rgba(31, 42, 31, 0.04), 0 14px 30px rgba(31, 42, 31, 0.08);
}
.bp-bd__card:hover,
.bp-bd__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 1px 0 rgba(31, 42, 31, 0.04), 0 28px 60px rgba(31, 42, 31, 0.18);
}
.bp-bd__card:focus-visible {
	outline: 2px solid var(--bp-bd-gold);
	outline-offset: 3px;
}

.bp-bd__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.bp-bd__card-bg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.bp-bd__card-bg-fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 80% 0%, hsla(var(--bp-bd-hue-a, 60deg), 32%, 56%, 0.55) 0%, hsla(var(--bp-bd-hue-a, 60deg), 32%, 56%, 0) 60%),
		linear-gradient(135deg, var(--bp-bd-cream) 0%, var(--bp-bd-cream-2) 40%, var(--bp-bd-green) 100%);
}

.bp-bd__card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(31, 42, 31, 0.86) 0%,
			rgba(31, 42, 31, 0.55) 30%,
			rgba(31, 42, 31, 0.18) 55%,
			rgba(31, 42, 31, 0.00) 100%
		);
}

.bp-bd__card-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	inline-size: 100%;
	block-size: 100%;
	padding: 28px 30px;
}

.bp-bd__card-meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bp-bd__card-category {
	display: inline-flex;
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(184, 178, 90, 0.95);
	color: #2A2F12;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	line-height: 1;
}

.bp-bd__card-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bp-bd-ink-soft);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
}
.bp-bd__card-date::before {
	content: "";
	display: inline-block;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: rgba(184, 178, 90, 0.9);
}

.bp-bd__card-title {
	margin: 0;
	font-family: var(--bp-bd-font-display);
	font-weight: 400;
	font-size: clamp(20px, 1.6vw, 24px);
	color: #fff;
	line-height: 1.15;
	letter-spacing: -0.005em;
}

.bp-bd__card-excerpt {
	margin: 0;
	color: var(--bp-bd-ink-soft);
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bp-bd__card-cta {
	margin-block-start: 8px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}
.bp-bd__card-cta-arrow {
	display: inline-block;
	transition: transform 220ms ease;
}
.bp-bd__card:hover .bp-bd__card-cta-arrow,
.bp-bd__card:focus-visible .bp-bd__card-cta-arrow {
	transform: translateX(4px);
}

/* ----- Empty state ----- */
.bp-bd__empty {
	margin: 32px 0 0;
	font-size: 16px;
	color: var(--bp-bd-ink);
}

/* ----- Load more button (same family) ----- */
.bp-bd__more-wrap {
	display: flex;
	justify-content: center;
	margin-block-start: 36px;
}
.bp-bd__more {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	border-radius: 999px;
	background: var(--bp-bd-green-2);
	color: #fff;
	font-family: var(--bp-bd-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}
.bp-bd__more:hover,
.bp-bd__more:focus-visible {
	background: var(--bp-bd-green);
	transform: translateY(-1px);
}
.bp-bd__more:focus-visible {
	outline: 2px solid var(--bp-bd-gold);
	outline-offset: 3px;
}
.bp-bd__more-arrow {
	display: inline-block;
	transition: transform 220ms ease;
}
.bp-bd__more.is-loading .bp-bd__more-arrow { transform: rotate(180deg); }

/* ----- Responsive: Tablet (769-1024) ----- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-bd__title { font-size: 42px; }
	.bp-bd__intro  { font-size: 16px; }

	.bp-bd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----- Responsive: Mobile (<= 768) ----- */
@media ( max-width: 768px ) {
	.bp-bd__header { margin-block-end: 24px; }
	.bp-bd__title  { font-size: 32px; }
	.bp-bd__intro   { font-size: 15.5px; }
	.bp-bd__filters { margin-block-end: 24px; }

	.bp-bd__grid { grid-template-columns: minmax(0, 1fr); }

	.bp-bd__card-inner { padding: 22px 24px; }
	.bp-bd__card-excerpt { font-size: 13.5px; -webkit-line-clamp: 2; }
}

/* ----- ≤ 480 ----- */
@media ( max-width: 480px ) {
	.bp-bd__inner  { padding-inline: 20px; }
	.bp-bd__title   { font-size: 28px; }
	.bp-bd__filters { gap: 8px; }
	.bp-bd__filter  { padding: 9px 14px; font-size: 12px; }
}

/* ----- ≤ 360 ----- */
@media ( max-width: 360px ) {
	.bp-bd__inner { padding-inline: 16px; }
	.bp-bd__title { font-size: 24px; }
}

/* ----- Arabic / RTL ----- */
[lang="ar"] .bp-bd__title,
[dir="rtl"] .bp-bd__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: 0;
}
[dir="rtl"] .bp-bd__card:hover,
[dir="rtl"] .bp-bd__card:focus-visible { transform: translateY(-4px); }
[dir="rtl"] .bp-bd__card:hover .bp-bd__card-cta-arrow,
[dir="rtl"] .bp-bd__card:focus-visible .bp-bd__card-cta-arrow { transform: translateX(-4px); }

/* ----- Reduced motion ----- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-bd__card,
	.bp-bd__card-cta-arrow,
	.bp-bd__more,
	.bp-bd__filter,
	.bp-bd__more-arrow { transition: none !important; transform: none !important; }
	.bp-bd__card:hover,
	.bp-bd__card:focus-visible,
	.bp-bd__card:hover .bp-bd__card-cta-arrow,
	.bp-bd__card:focus-visible .bp-bd__card-cta-arrow,
	.bp-bd__more:hover,
	.bp-bd__more:focus-visible { transform: none !important; }
}