/* BP Article detail page
 *
 * Single template styles for `bp_article`. The page is
 * designed to feel like the same article shown in the Blog
 * list:
 *   - rounded cover image
 *   - category pill
 *   - uppercase serif title
 *   - cream page background
 *   - botanical accents
 *
 * The body uses native Gutenberg output wrapped in
 * `.bp-article-content` so editors can use paragraphs, H2/H3,
 * images, lists, quotes, tables, callouts, etc. without any
 * custom blocks.
 *
 * No global Elementor resets. All rules stay under
 * `.single-bp_article` (added via body_class) so other
 * single-* templates are untouched. Logical properties keep
 * LTR/RTL aligned without an override file.
 */

.single-bp_article {
	background-color: #FBF6EC;
	color: #1F2A1F;
}

.bp-article {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
}

/* =========================================================
 * Article hero (header)
 * ========================================================= */
.bp-article-hero {
	max-inline-size: 1180px;
	margin-inline: auto;
	padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px);
	padding-inline: clamp(20px, 4vw, 56px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 3vw, 40px);
}

.bp-article-hero__inner {
	max-inline-size: 880px;
}

.bp-article-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-block-end: 18px;
}

.bp-article-hero__category {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(184, 178, 90, 0.18);
	color: #6F6A3A;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.bp-article-hero__metadata {
	margin: 0;
	font-size: 12.5px;
	color: #5C6A5C;
	letter-spacing: 0.02em;
}

.bp-article-hero__title {
	margin: 0 0 16px;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: #374F37;
	text-transform: none;
}

.bp-article-hero__excerpt {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: #1F2A1F;
	opacity: 0.85;
	max-inline-size: 60ch;
}

.bp-article-hero__cover {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 22px 44px rgba(31, 42, 31, 0.18);
	background: #E9E2D2;
}

.bp-article-hero__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 520px;
	object-fit: cover;
}

/* =========================================================
 * Article body (Gutenberg)
 * ========================================================= */
.bp-article-content {
	max-inline-size: 760px;
	margin-inline: auto;
	padding-block: clamp(32px, 4vw, 56px);
	padding-inline: clamp(20px, 4vw, 56px);
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 16.5px;
	line-height: 1.75;
	color: #1F2A1F;
}

.bp-article-content p {
	margin-block: 0 1.2em;
}

.bp-article-content a {
	color: #374F37;
	text-decoration: underline;
	text-decoration-color: rgba(55, 79, 55, 0.35);
	text-underline-offset: 3px;
}

.bp-article-content h2,
.bp-article-content h3,
.bp-article-content h4 {
	margin-block: 2.2em 0.6em;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	color: #374F37;
	letter-spacing: 0.01em;
}

.bp-article-content h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.bp-article-content h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; }
.bp-article-content h4 { font-size: 18px; line-height: 1.3; }

.bp-article-content ul,
.bp-article-content ol {
	margin-block: 0 1.2em;
	padding-inline-start: 1.5em;
}
.bp-article-content li {
	margin-block: 0.4em;
}

.bp-article-content blockquote {
	margin: 1.6em 0;
	padding-block: 12px;
	padding-inline: 20px;
	border-inline-start: 3px solid #B8B25A;
	background: rgba(184, 178, 90, 0.08);
	border-radius: 6px;
	font-style: italic;
	color: #374F37;
}

.bp-article-content img,
.bp-article-content figure {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 16px;
	overflow: hidden;
}

.bp-article-content figure {
	margin: 1.6em 0;
}

.bp-article-content figcaption {
	display: block;
	margin-block-start: 8px;
	font-size: 13px;
	color: #5C6A5C;
	text-align: center;
}

.bp-article-content table {
	inline-size: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 14.5px;
}
.bp-article-content th,
.bp-article-content td {
	padding: 10px 14px;
	border-block-end: 1px solid #E4DCCB;
	text-align: start;
}
.bp-article-content th {
	background: rgba(184, 178, 90, 0.10);
	font-weight: 700;
	color: #374F37;
}

.bp-article-content code {
	background: rgba(55, 79, 55, 0.08);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 0.92em;
}

/* =========================================================
 * Related articles
 * ========================================================= */
.bp-article-related {
	max-inline-size: 1180px;
	margin-inline: auto;
	padding-block: clamp(40px, 5vw, 72px);
	padding-inline: clamp(20px, 4vw, 56px);
}

.bp-article-related__head {
	text-align: center;
	margin-block-end: clamp(28px, 4vw, 40px);
}

.bp-article-related__eyebrow {
	margin: 0 0 12px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #374F37;
}

.bp-article-related__title {
	margin: 0 0 12px;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: #374F37;
	text-transform: uppercase;
}

.bp-article-related__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block: 6px 0;
}
.bp-article-related__divider-line {
	inline-size: 56px;
	block-size: 1px;
	background: #B8B25A;
}
.bp-article-related__divider-diamond {
	inline-size: 8px;
	block-size: 8px;
	background: #B8B25A;
	transform: rotate(45deg);
}

.bp-article-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.bp-article-related__item {
	min-inline-size: 0;
}

.bp-article-related__link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 16px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #E4DCCB;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.bp-article-related__link:hover,
.bp-article-related__link:focus-visible {
	transform: translateY(-3px);
	border-color: #B8B25A;
	box-shadow: 0 18px 36px rgba(31, 42, 31, 0.16);
}

.bp-article-related__image {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	background: #E9E2D2;
	overflow: hidden;
}
.bp-article-related__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.bp-article-related__image-placeholder {
	inline-size: 100%;
	block-size: 100%;
	background:
		radial-gradient(circle at 30% 35%, rgba(184, 178, 90, 0.20), transparent 60%),
		radial-gradient(circle at 70% 70%, rgba(55, 79, 55, 0.18), transparent 60%),
		#E9E2D2;
}

.bp-article-related__body {
	padding: 18px 18px 22px;
}

.bp-article-related__category {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6F6A3A;
	background: rgba(184, 178, 90, 0.18);
	padding: 4px 10px;
	border-radius: 999px;
	margin-block-end: 10px;
}

.bp-article-related__article-title {
	margin: 0;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: #374F37;
}

/* =========================================================
 * Article final CTA (1:1 reuse of blog final CTA)
 * ========================================================= */
.bp-article-final-cta {
	padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 80px);
	padding-inline: clamp(20px, 4vw, 56px);
}

.bp-article-final-cta__card {
	position: relative;
	isolation: isolate;
	max-inline-size: 1160px;
	margin-inline: auto;
	padding: 56px;
	border-radius: 24px;
	background-color: #F4ECDC;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	overflow: hidden;
	min-block-size: 440px;
	display: flex;
	align-items: center;
	box-shadow: 0 22px 44px rgba(31, 42, 31, 0.22);
}

.bp-article-final-cta__card > * {
	position: relative;
	z-index: 2;
}

.bp-article-final-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to right, rgba(244, 236, 220, 0.97) 0%, rgba(244, 236, 220, 0.55) 50%, rgba(244, 236, 220, 0) 85%);
}
[dir="rtl"] .bp-article-final-cta__overlay {
	background: linear-gradient(to left, rgba(244, 236, 220, 0.97) 0%, rgba(244, 236, 220, 0.55) 50%, rgba(244, 236, 220, 0) 85%);
}

.bp-article-final-cta__content {
	max-inline-size: 560px;
	text-align: start;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bp-article-final-cta__eyebrow {
	margin: 0;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #374F37;
}
.bp-article-final-cta__title {
	margin: 0;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: #374F37;
	text-transform: uppercase;
}
.bp-article-final-cta__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block: 6px 12px;
}
.bp-article-final-cta__divider-line {
	inline-size: 56px;
	block-size: 1px;
	background: #B8B25A;
}
.bp-article-final-cta__divider-diamond {
	inline-size: 8px;
	block-size: 8px;
	background: #B8B25A;
	transform: rotate(45deg);
}
.bp-article-final-cta__description {
	margin: 0;
	max-inline-size: 56ch;
	font-size: 15px;
	line-height: 1.7;
	color: #1F2A1F;
	opacity: 0.9;
}
.bp-article-final-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 18px;
}
.bp-article-final-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding: 13px 28px;
	border-radius: 999px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.bp-article-final-cta__btn--primary {
	background: #374F37;
	color: #FFFFFF;
	border: 1.5px solid #374F37;
}
.bp-article-final-cta__btn--primary:hover,
.bp-article-final-cta__btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(55, 79, 55, 0.22);
	outline: none;
}
.bp-article-final-cta__btn--secondary {
	background: #FBF6EC;
	color: #374F37;
	border: 1.5px solid #374F37;
}
.bp-article-final-cta__btn--secondary:hover,
.bp-article-final-cta__btn--secondary:focus-visible {
	transform: translateY(-2px);
	background: #FFFFFF;
	box-shadow: 0 8px 20px rgba(55, 79, 55, 0.18);
	outline: none;
}
.bp-article-final-cta__btn-arrow { display: inline-flex; }
.bp-article-final-cta__btn-arrow svg { inline-size: 16px; block-size: 16px; }

/* =========================================================
 * Tablet
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-article-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
	.bp-article-final-cta__card { padding: 44px; }
	.bp-article-final-cta__content { max-inline-size: 460px; }
}

/* =========================================================
 * Mobile
 * ========================================================= */
@media (max-width: 768px) {
	.bp-article-hero,
	.bp-article-related,
	.bp-article-content,
	.bp-article-final-cta {
		inline-size: calc(100% - 36px);
		margin-inline: auto;
		padding-inline: 0;
	}
	.bp-article-hero { padding-block: 32px 16px; }
	.bp-article-related { padding-block: 40px 32px; }
	.bp-article-content { padding-block: 24px 24px; font-size: 16px; }
	.bp-article-related__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.bp-article-final-cta__card {
		padding: 32px 24px;
		min-block-size: 360px;
	}
	.bp-article-final-cta__content {
		max-inline-size: 100%;
	}
	.bp-article-final-cta__buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.bp-article-final-cta__btn {
		inline-size: 100%;
	}
	.bp-article-final-cta__overlay {
		background: linear-gradient(to right, rgba(244, 236, 220, 0.96) 0%, rgba(244, 236, 220, 0.78) 60%, rgba(244, 236, 220, 0.25) 100%);
	}
	[dir="rtl"] .bp-article-final-cta__overlay {
		background: linear-gradient(to left, rgba(244, 236, 220, 0.96) 0%, rgba(244, 236, 220, 0.78) 60%, rgba(244, 236, 220, 0.25) 100%);
	}
}

@media (max-width: 420px) {
	.bp-article-hero__title { font-size: 28px; }
	.bp-article-related__title { font-size: 26px; }
	.bp-article-final-cta__title { font-size: 28px; }
}

/* =========================================================
 * Reduced motion
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.bp-article-related__link,
	.bp-article-final-cta__btn {
		transition: none !important;
	}
	.bp-article-related__link:hover,
	.bp-article-related__link:focus-visible,
	.bp-article-final-cta__btn:hover,
	.bp-article-final-cta__btn:focus-visible {
		transform: none !important;
	}
}