/* ============================================================
   BFP — "People of the day" editorial feature  (v2)
   Contained portrait (no full-cover) · blue hero band ·
   wide two-column desktop layout · larger fluid type.
   Scoped to .bfp-today-people so nothing leaks into the theme.
   ============================================================ */

.bfp-today-people {
	/* Palette */
	--bfp-bg:        #faf8f5;   /* warm cream */
	--bfp-surface:   #ffffff;
	--bfp-surface-2: #f4f0ea;
	--bfp-text:      #2a2f38;
	--bfp-heading:   #141821;
	--bfp-muted:     #5f6775;
	--bfp-border:    rgba(20, 28, 46, 0.12);
	--bfp-shadow:    0 1px 2px rgba(20,28,46,.04), 0 18px 44px -20px rgba(20,28,46,.22);

	--bfp-accent:      #1e3a5f;            /* deep editorial blue */
	--bfp-accent-2:    #3a6ea8;            /* lighter blue */
	--bfp-accent-soft: rgba(30, 58, 95, 0.08);

	--bfp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--bfp-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--bfp-wrap: 1240px;
	--bfp-radius: 20px;
	--bfp-radius-sm: 14px;
	--bfp-pad: clamp(1.25rem, 4vw, 3.5rem);

	/* Break out of the theme container -> full width band */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: 0;

	background: var(--bfp-bg);
	color: var(--bfp-text);
	font-family: var(--bfp-font-body);
	font-size: 1.5rem;
	line-height: 1.78;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

.bfp-today-people *,
.bfp-today-people *::before,
.bfp-today-people *::after { box-sizing: border-box; }

.bfp-today-people img { max-width: 100%; }

.bfp-ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ----------------------------------------------------------
   Reading progress bar
   ---------------------------------------------------------- */
.bfp-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 9999;
	background: transparent;
	pointer-events: none;
}
.bfp-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--bfp-accent), var(--bfp-accent-2));
	box-shadow: 0 0 12px rgba(58,110,168,.5);
	transition: width .08s linear;
}

/* ----------------------------------------------------------
   HERO — deep blue band, contained portrait, rich details
   ---------------------------------------------------------- */
.bfp-hero {
	position: relative;
	color: #fff;
	padding: clamp(2.5rem, 6vw, 5rem) var(--bfp-pad);
	background:
		radial-gradient(120% 150% at 88% -10%, rgba(58,110,168,.55), transparent 58%),
		linear-gradient(158deg, #1e3a5f 0%, #16293f 100%);
}
.bfp-hero__inner {
	max-width: var(--bfp-wrap);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: center;
}

/* Contained portrait — framed card, never a full-bleed cover */
.bfp-hero__portrait {
	margin: 0;
	justify-self: center;
}
.bfp-hero__portrait img {
	display: block;
	width: 100%;
	max-width: 288px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--bfp-radius);
	border: 1px solid rgba(255,255,255,.22);
	background: rgba(255,255,255,.06);
	box-shadow: 0 30px 60px -22px rgba(0,0,0,.6);
}

.bfp-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.bfp-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.05rem;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.30);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	color: #fff;
}
.bfp-chip--day {
	background: rgba(255,255,255,.18);
	border-color: rgba(255,255,255,.35);
	color: #fff;
}
.bfp-chip__label {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 1.5rem;
	opacity: .85;
}
.bfp-chip__value { font-size: 1.5rem; font-weight: 700; }
.bfp-chip .bfp-ic { width: 1.1em; height: 1.1em; }

.bfp-hero__title {
	font-family: var(--bfp-font-display);
	font-weight: 600;
	font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.75rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

.bfp-hero__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.75rem);
	list-style: none;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	border-top: 1px solid rgba(255,255,255,.18);
}
.bfp-fact { display: flex; flex-direction: column; gap: .25rem; }
.bfp-fact__k {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 1.5rem;
	font-weight: 600;
	color: rgba(255,255,255,.72);
}
.bfp-fact__v {
	font-family: var(--bfp-font-display);
	font-size: clamp(1.5rem, 1.05rem + .9vw, 1.8rem);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* Single-page audio: just the player, with breathing room above the text. */
.bfp-single-audio {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.bfp-single-audio audio {
	width: 100%;
	max-width: 420px;
	display: block;
	height: 40px;
}

.bfp-hero__cue {
	display: none;
	width: 42px; height: 42px;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.4);
	color: #fff;
	animation: bfp-bob 1.8s ease-in-out infinite;
}
.bfp-hero__cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bfp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Desktop hero: portrait left, text right */
@media (min-width: 880px) {
	.bfp-hero__inner { grid-template-columns: minmax(224px, 288px) 1fr; align-items: center; }
	.bfp-hero__portrait { grid-column: 1; justify-self: start; }
	.bfp-hero__portrait img { max-width: 100%; }
	.bfp-hero__text { grid-column: 2; }
	.bfp-hero__cue { display: grid; }
}

/* ----------------------------------------------------------
   BODY — wide two-column layout with sticky sidebar
   ---------------------------------------------------------- */
.bfp-body { background: var(--bfp-bg); }
.bfp-layout {
	max-width: var(--bfp-wrap);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 5rem) var(--bfp-pad) clamp(3.5rem, 8vw, 6rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
}
.bfp-main { min-width: 0; }
.bfp-aside { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

@media (min-width: 980px) {
	.bfp-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
	.bfp-aside { position: sticky; top: 1.5rem; }
}

/* Prose ---------------------------------------------------- */
.bfp-prose { color: var(--bfp-text); max-width: 72ch; font-size: 1.5rem; line-height: 1.75; }
.bfp-prose p,
.bfp-prose li { font-size: 1.5rem; }
.bfp-prose p { margin: 0 0 1.4em; }
.bfp-prose p:first-of-type::first-letter {
	float: left;
	font-family: var(--bfp-font-display);
	font-weight: 700;
	font-size: 4em;
	line-height: .8;
	padding: .04em .14em 0 0;
	color: var(--bfp-accent);
}
.bfp-prose a {
	color: var(--bfp-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	word-break: break-word;
}
.bfp-prose strong { color: var(--bfp-heading); font-weight: 700; }
.bfp-prose em,
.bfp-prose i { color: var(--bfp-text); }

/* Sub-heading: a paragraph that is only <strong> */
.bfp-prose p:has(> strong:only-child) {
	font-family: var(--bfp-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.25;
	margin-top: 2.2em;
	margin-bottom: .7em;
}
.bfp-prose p:has(> strong:only-child) strong { color: var(--bfp-heading); font-weight: 600; }

/* Prayer card: a paragraph that is only <em> */
.bfp-prose p:has(> em:only-child),
.bfp-prose p:has(> i:only-child) {
	margin: 1.6em 0;
	padding: 1.2em 1.4em 1.2em 1.6em;
	background: var(--bfp-accent-soft);
	border-radius: var(--bfp-radius-sm);
	border-left: 5px solid var(--bfp-accent);
	font-size: 1.05em;
}
.bfp-prose p:has(> em:only-child) em,
.bfp-prose p:has(> i:only-child) i { font-style: italic; color: var(--bfp-heading); }

/* Scripture callout: paragraph containing both <strong> and <em> */
.bfp-prose p:has(strong):has(em),
.bfp-prose p:has(strong):has(i) {
	margin: 2.2em 0;
	padding: 1.8rem clamp(1.4rem, 3vw, 2.5rem);
	background: var(--bfp-surface);
	border: 1px solid var(--bfp-border);
	border-radius: var(--bfp-radius);
	box-shadow: var(--bfp-shadow);
	font-family: var(--bfp-font-display);
	font-size: 1.5rem;
	line-height: 1.5;
	text-align: center;
}
.bfp-prose p:has(strong):has(em) em,
.bfp-prose p:has(strong):has(i) i { font-style: italic; color: var(--bfp-text); }

/* Map figure (now lives in the right sidebar) -------------- */
.bfp-figure { margin: 0; }
.bfp-figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--bfp-radius);
	border: 1px solid var(--bfp-border);
	box-shadow: var(--bfp-shadow);
	background: var(--bfp-surface);
}
.bfp-figure--map img { padding: clamp(.75rem, 2vw, 1.5rem); }
.bfp-figure figcaption {
	margin-top: .85rem;
	text-align: center;
	font-size: 1.5rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bfp-muted);
}

/* ----------------------------------------------------------
   Sidebar cards (audio, stats, resources)
   ---------------------------------------------------------- */
.bfp-card,
.bfp-country-stats,
.bfp-resources {
	background: var(--bfp-surface);
	border: 1px solid var(--bfp-border);
	border-radius: var(--bfp-radius-sm);
	box-shadow: var(--bfp-shadow);
}
.bfp-card,
.bfp-country-stats { padding: 1.4rem 1.4rem 1.5rem; }

.bfp-card__title {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 1rem;
	font-family: var(--bfp-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--bfp-heading);
}
.bfp-card__title .bfp-ic { width: 22px; height: 22px; color: var(--bfp-accent); }

.bfp-audio audio { width: 100%; display: block; }

/* Country stats as clean rows inside the card */
.bfp-stat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.bfp-stat {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .85rem 0;
	border-top: 1px solid var(--bfp-border);
}
.bfp-stat:first-child { border-top: 0; padding-top: 0; }
.bfp-stat__icon {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--bfp-accent-soft);
	color: var(--bfp-accent);
}
.bfp-stat__icon .bfp-ic { width: 22px; height: 22px; }
.bfp-stat__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bfp-stat__label {
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	color: var(--bfp-muted);
}
.bfp-stat__value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--bfp-heading);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* Resources ----------------------------------------------- */
.bfp-resources { overflow: hidden; }
.bfp-resources summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.2rem 1.4rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--bfp-heading);
}
.bfp-resources summary::-webkit-details-marker { display: none; }
.bfp-resources__chev {
	width: 22px; height: 22px;
	fill: none; stroke: var(--bfp-muted);
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
	transition: transform .3s ease;
	flex: 0 0 auto;
}
.bfp-resources[open] .bfp-resources__chev { transform: rotate(180deg); }
.bfp-resources__body {
	padding: 0 1.4rem 1.4rem;
	color: var(--bfp-muted);
	font-size: 1.5rem;
}
.bfp-resources__body a { color: var(--bfp-accent); word-break: break-word; }

/* Empty state --------------------------------------------- */
.bfp-today-empty {
	width: auto;
	max-width: 640px;
	margin: 3rem auto;
	padding: 2rem;
	text-align: center;
	border: 1px dashed var(--bfp-border, rgba(0,0,0,.15));
	border-radius: 14px;
	color: #777;
}

/* ----------------------------------------------------------
   Scroll reveal (active only when JS marks the article)
   ---------------------------------------------------------- */
.bfp-today-people.bfp-js .bfp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.bfp-today-people.bfp-js .bfp-reveal.is-visible { opacity: 1; transform: none; }

/* ----------------------------------------------------------
   Small screens
   ---------------------------------------------------------- */
@media (max-width: 600px) {
	.bfp-hero__portrait img { max-width: 224px; }
	.bfp-prose p:first-of-type::first-letter { font-size: 3.2em; }
}

/* ----------------------------------------------------------
   Motion / capability fallbacks
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bfp-today-people.bfp-js .bfp-reveal { opacity: 1; transform: none; transition: none; }
	.bfp-hero__cue { animation: none; }
}
@supports not (selector(:has(*))) {
	.bfp-prose em,
	.bfp-prose i { font-style: italic; color: var(--bfp-accent); }
}

/* ============================================================
   BFP people-group list  ([bfp_people_list])
   Card grid + detail back-bar, same tokens as the feature.
   ============================================================ */
.bfp-people-list__inner {
	max-width: var(--bfp-wrap);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 5rem) var(--bfp-pad);
}

/* One card per row (a wide horizontal card: photo left, stats right). */
.bfp-pg-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.bfp-pg-card { display: flex; }
.bfp-pg-card__inner {
	display: grid;
	grid-template-columns: clamp(120px, 26%, 220px) 1fr;
	width: 100%;
	background: var(--bfp-surface);
	border: 1px solid var(--bfp-border);
	border-radius: var(--bfp-radius);
	overflow: hidden;
	box-shadow: var(--bfp-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bfp-pg-card__inner:hover {
	transform: translateY(-3px);
	border-color: var(--bfp-accent);
	box-shadow: 0 1px 2px rgba(20,28,46,.05), 0 24px 46px -18px rgba(30,58,95,.42);
}

/* Photo — left (same horizontal layout on mobile too) */
.bfp-pg-card__media {
	position: relative;
	display: block;
	background: var(--bfp-surface-2);
	overflow: hidden;
	min-height: 150px;
}
.bfp-pg-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.bfp-pg-card__inner:hover .bfp-pg-card__media img { transform: scale(1.05); }
.bfp-pg-card__noimg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--bfp-muted);
}
.bfp-pg-card__noimg .bfp-ic { width: 46px; height: 46px; }
.bfp-pg-card__day {
	position: absolute;
	top: .85rem;
	left: .85rem;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.35);
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	color: #fff;
	font-weight: 700;
	font-size: 1.5rem;
	padding: .35rem .75rem;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.bfp-pg-card__flag {
	position: absolute;
	top: .85rem;
	right: .85rem;
	background: var(--bfp-accent);
	color: #fff;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .32rem .65rem;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0,0,0,.22);
}

/* Body — right */
.bfp-pg-card__body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: clamp(.9rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
	min-width: 0;
}
.bfp-pg-card__head { text-decoration: none; color: inherit; display: block; }

/* Country badge — sits over the photo (top-right, where Frontier used to be). */
.bfp-pg-card__country {
	position: absolute;
	top: .85rem;
	right: .85rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.35);
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: .3rem .7rem;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.bfp-pg-card__country .bfp-ic { width: 18px; height: 18px; color: #fff; }
.bfp-pg-card__title {
	font-family: var(--bfp-font-body);
	font-weight: 800;
	font-size: clamp(3rem, 1.8rem + 1.1vw, 3.2rem);
	line-height: 1.15;
	margin: 20px 0 0;
	padding: 0;
	color: var(--bfp-heading);
	letter-spacing: -.01em;
	transition: color .2s ease;
	overflow-wrap: anywhere;
	text-decoration: none !important;
}
.bfp-pg-card__head,
.bfp-pg-card__head:hover,
.bfp-pg-card__head:focus { text-decoration: none !important; }
.bfp-pg-card__head:hover .bfp-pg-card__title { color: var(--bfp-accent); }

.bfp-pg-card__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(1rem, 3vw, 2.5rem);
}
@media (max-width: 460px) { .bfp-pg-card__stats { grid-template-columns: 1fr; } }
.bfp-pg-card__stats li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: 1.5rem;
	padding: .18rem 0;
	border-top: 1px solid var(--bfp-border);
}
.bfp-pg-card__k { color: var(--bfp-muted); }
.bfp-pg-card__v {
	font-weight: 700;
	color: var(--bfp-heading);
	font-variant-numeric: tabular-nums;
	text-align: right;
	overflow-wrap: anywhere;
}

.bfp-pg-card__foot {
	margin-top: auto;
	padding-top: .15rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
/* Text-only link with arrow — distinct from the filled Pray button. */
.bfp-pg-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--bfp-accent) !important;
	font-weight: 700;
	font-size: 1.5rem;
	text-decoration: none !important;
	white-space: nowrap;
}
.bfp-pg-card__cta:hover { text-decoration: none !important; }
.bfp-pg-card__cta svg {
	width: 18px; height: 18px;
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round;
	transition: transform .2s ease;
}
.bfp-pg-card__cta:hover svg { transform: translateX(3px); }

/* Compact pray button inside a card */
.bfp-pg-card .bfp-pray--compact { margin: 0; }

/* Detail back-bar (above the reused feature article) */
.bfp-pg-backwrap__inner {
	max-width: var(--bfp-wrap);
	margin-inline: auto;
	padding: clamp(1rem, 3vw, 1.75rem) var(--bfp-pad) 0;
}
.bfp-pg-back {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--bfp-accent);
	font-weight: 600;
	font-size: 1.5rem;
	text-decoration: none;
}
.bfp-pg-back .bfp-ic { width: 18px; height: 18px; }
.bfp-pg-back:hover { text-decoration: underline; }

/* Clean-URL people routes (/popujt/ and /popujt/slug/) wrapper */
.bfp-people-route { overflow-x: clip; }

/* Mobile: smaller list-card title + full-width View details with top spacing. */
@media (max-width: 768px) {
	.bfp-pg-card__title { font-size: 1.7rem; margin-top: 12px; }
	.bfp-pg-card__cta {
		width: 100%;
		justify-content: center;
		margin-top: 1rem;
	}
}

/* ============================================================
   Mobile: people-list cards → 2-column grid, stacked (photo on
   top, details below). Photo height capped at 300px.
   Appended last so it wins the cascade despite earlier rules.
   ============================================================ */
@media (max-width: 768px) {
	.bfp-pg-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.bfp-pg-card__inner { grid-template-columns: 1fr; }
	.bfp-pg-card__media {
		position: relative;
		aspect-ratio: 4 / 3;
		max-height: 300px;
		min-height: 0;
	}
	.bfp-pg-card__media img { position: absolute; inset: 0; }
	.bfp-pg-card__stats { grid-template-columns: 1fr; }
	.bfp-pg-card__foot { flex-direction: column; align-items: flex-start; gap: .6rem; }
}