/*
 * Mocheta (campaign page): its own look, matched to what the live page renders (its inline <style>
 * plus the child theme's .mocheta-* rules and the global "p { color: #152a3f !important }").
 * The page uses the "page-fara-titlu" template, so the H1 is the one in the content.
 *
 * Live asks for weight 900 everywhere, but its Roboto and Dosis files stop at 700, so 900 renders as
 * 700. Roboto is the same file here (300-700), so 900 is kept; the local Dosis goes up to 800, so
 * Dosis text is set to 700 to look like live.
 *
 * Gold: #d6ab72 and #b89a3e are the live colours (NEXT-06: "culori ca pe live"), but at 2.1-2.7:1 on
 * white they fail as text, so UI-01 moved the title, the progress figure and the amounts to --carpet-gold-text.
 * UI-32: the live-only #b89a3e and the near-black #292929 headings made the page look like another theme,
 * so every colour here is now a palette token.
 */

body.is-page-mocheta {
	--carpet-text: var(--wp--preset--color--navy);
	/* UI-10: live used a second navy (#0b3148) for "Cumpără" and the progress bar; next to the #152a3f
	   menu it read as a mismatch, so there is one navy, the palette token. */
	--carpet-ink: var(--wp--preset--color--navy);
	--carpet-heading: var(--wp--preset--color--navy);
	--carpet-gold: var(--wp--preset--color--gold);
	--carpet-gold-figure: var(--carpet-gold);
	/* UI-01: the live golds are 2.1-2.7:1 on white, so text uses the darker palette gold (about 5.4:1);
	   #d6ab72 stays for the drawing and the decoration. */
	--carpet-gold-text: var(--wp--preset--color--gold-text);
	/* UI-02: the live #888 / #999 greys were 2.1-3.5:1; grey-text is 5.9:1 on white. */
	--carpet-muted: var(--wp--preset--color--grey-text);
	--carpet-line: color-mix(in srgb, var(--wp--preset--color--navy) 10%, transparent);
	--carpet-column: 980px;
	--carpet-sans: var(--wp--preset--font-family--roboto);
	--carpet-display: var(--wp--preset--font-family--dosis);
}

/* The live sketch (same drawing as the theme WebP, 31 KB instead of the 1.27 MB PNG), top centre,
   under the live page's faint white veil on the 980px column. */
body.is-page-mocheta main.betania-sketch {
	padding-top: 0;
	background:
		linear-gradient(rgb(255 255 255 / 32%), rgb(255 255 255 / 32%)) center top / min(var(--carpet-column), 100%) 100% no-repeat,
		url("../../img/betania-schita-sala.webp") center 20px / 175% auto no-repeat,
		#fff;
	color: var(--carpet-text);
}

body.is-page-mocheta .betania-content {
	text-align: center;
}

/* Live phone column is 338px wide on a 390px screen (10px wrapper + 10px column + 6px). */
body.is-page-mocheta .betania-content > .wp-block-group {
	position: relative;
	margin-block: 0;
	padding: 46px 26px;
}

/* The live content column. */
body.is-page-mocheta .betania-content > .wp-block-group > * {
	max-width: calc(var(--carpet-column) - 48px);
}

/* Live divider: a 50px hairline between sections (the child theme's width; the page's own
   inline style cancels the child theme's 32px margins). */
body.is-page-mocheta .betania-content > .wp-block-group + .wp-block-group::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 50px;
	height: 1px;
	transform: translateX(-50%);
	background: rgb(0 0 0 / 8%);
}

/* :where() keeps this reset weaker than the per-element margins below. */
body.is-page-mocheta .betania-content :where(p) {
	margin-block: 0;
}

/* Shared body copy (lead-sub, donate text, bank text). */
body.is-page-mocheta :is(.carpet-hero__sub, .carpet-text) {
	max-width: none;
	margin: 20px auto 0;
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 1.65;
	opacity: 0.8;
}

/* UI-47: on the 932px column the hero sub and the closing thanks ran to ~111-113 characters a line.
   One ch (the width of "0") is wider than the average letter, so the measure is set in ch but checked
   in real characters, as on Despre noi and Istoric (55ch there, at 17px). Here, at 18px, 55ch broke the
   hero sub at 63; 58ch gives 71 + 41, and the thanks 64 / 62 / 26 (60ch would leave "veni." alone on
   its last line). The column selector is repeated because its rule above outranks a plain class. The
   thanks keeps its full width and is narrowed by padding, so its hairline stays as long as before. */
body.is-page-mocheta {
	--carpet-measure: 58ch;
}

body.is-page-mocheta .betania-content > .wp-block-group > :is(.carpet-hero__sub, .carpet-text) {
	max-width: var(--carpet-measure);
}

body.is-page-mocheta .betania-content > .wp-block-group > .carpet-bank__thanks {
	box-sizing: border-box;
	padding-inline: max(0px, (min(100%, var(--carpet-column) - 48px) - var(--carpet-measure)) / 2);
}

/* ---------- Hero ---------- */

body.is-page-mocheta .carpet-hero {
	padding-block: 52px 42px;
}

body.is-page-mocheta .carpet-hero__tag {
	margin-bottom: 22px;
	color: var(--carpet-text);
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 900;
	line-height: 1.6;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

body.is-page-mocheta .carpet-hero__intro {
	margin-bottom: 16px;
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 900;
	line-height: 1.08;
	text-transform: uppercase;
}

body.is-page-mocheta .carpet-hero__title {
	margin: 0;
	color: var(--carpet-gold-text);
	font-family: var(--carpet-display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -2.5px;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

body.is-page-mocheta .carpet-hero__title .betania-script {
	color: var(--carpet-ink);
	line-height: inherit;
}

/* UI-52: a whole sentence in capitals reads slowly (the word shapes are lost), so the lead is in its
   own case; size and weight keep it above the body copy. */
body.is-page-mocheta .carpet-hero__lead {
	max-width: 700px;
	margin: 30px auto 0;
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.35;
}

body.is-page-mocheta .carpet-hero__cta {
	margin-top: 28px;
	justify-content: center;
}

/* The live CTA's size and small tracked capitals. UI-08: its colours (white on white, gold hairline at
   about 1.6:1) are gone; the block carries is-style-betania-solid, so colours, hover and focus come from
   the shared "Plin" button in style.css. Do not set colours here, they would beat the shared rule. */
body.is-page-mocheta .carpet-hero__button .wp-block-button__link {
	padding: 12px 24px;
	border-radius: 0;
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 900;
	line-height: 22px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ---------- Progress (pattern betania/progres-campanie) ---------- */

/* Live: the child theme narrows the progress block to 560px. */
body.is-page-mocheta .carpet-progress .betania-campaign__progress,
body.is-page-mocheta .carpet-progress .betania-campaign__note {
	max-width: 560px;
	margin-inline: auto;
}

body.is-page-mocheta .carpet-progress .betania-campaign__label {
	margin-bottom: 16px;
	color: var(--carpet-text);
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 900;
	line-height: 1.6;
	letter-spacing: 1.2px;
}

body.is-page-mocheta .carpet-progress .betania-progress {
	margin-top: 0;
}

body.is-page-mocheta .carpet-progress .betania-progress__top {
	gap: 20px;
}

body.is-page-mocheta .carpet-progress .betania-progress__amount strong {
	color: var(--carpet-gold-text);
	font-family: var(--carpet-sans);
	font-size: clamp(36px, 6vw, 58px);
	font-weight: 900;
}

body.is-page-mocheta .carpet-progress :is(.betania-progress__amount span, .betania-progress__goal) {
	color: var(--carpet-muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 22px;
}

/* UI-56: the fill eases with the shared transform transition in style.css (scaleX, not width). */
body.is-page-mocheta .carpet-progress .betania-progress__bar > span {
	background: var(--carpet-ink);
}

/* Live: 14px under the bar (the grid gap is 16px). */
body.is-page-mocheta .carpet-progress .betania-progress__percent {
	margin-top: -2px;
	color: var(--carpet-text);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 1.6;
	opacity: 0.74;
}

/* Live: the percent line's 20px bottom margin and the note's 14px collapse into 20px.
   UI-14: live sets this at 10-12px/300 in faded navy (about 2.9:1), yet it is the one line that tells a
   donor why a recent transfer is not counted yet. 15px/400 grey-text reads at 5.9:1. The text runs to
   4-6 lines, so it stays a centred column (the progress block above is centred) but is ragged-left
   and capped: centred lines of different lengths make every line start somewhere else.
   UI-47: 60ch still let one line reach 79 characters; 56ch keeps them at 66-70. */
body.is-page-mocheta .carpet-progress .betania-campaign__note {
	max-width: 56ch;
	margin-top: 20px;
	padding-inline: 8px;
	color: var(--carpet-muted);
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--note);
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
}

/* ---------- Donate by card / bank transfer ---------- */

body.is-page-mocheta :is(.carpet-donate, .carpet-bank) h2 {
	margin: 0 0 14px;
	color: var(--carpet-heading);
	font-family: var(--carpet-display);
	/* UI-49: the one section-title style (theme.json h2); 40px capitals with negative tracking were a fourth H2. */
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body.is-page-mocheta .carpet-donate .betania-amounts {
	max-width: 720px;
	margin-block: 30px;
	border-block-color: var(--carpet-line);
}

body.is-page-mocheta .carpet-donate .betania-amount__value {
	color: var(--carpet-gold-text);
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	line-height: 22px;
}

/* UI-46: 15px is too small for the theme's 300; 400 as on live. Hidden with the card section (UI-03),
   set so it is right when the section comes back. */
body.is-page-mocheta .carpet-donate .betania-amount__what {
	margin-top: 7px;
	color: var(--carpet-ink);
	font-weight: 400;
	opacity: 0.76;
}

body.is-page-mocheta .carpet-bank {
	padding-bottom: 64px;
}

body.is-page-mocheta .carpet-bank__or {
	margin-bottom: 16px;
	color: var(--carpet-text);
	font-family: var(--carpet-sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 900;
	line-height: 1.6;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/* The extra class beats the 932px column rule above, so the live 680px box holds. */
body.is-page-mocheta .carpet-bank > .carpet-bank__detail {
	max-width: 680px;
	margin: 28px auto 0;
	padding: 22px 10px;
	border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent);
	background: rgb(255 255 255 / 88%);
	/* UI-02: navy and 16px (live: #888 at 13px), so the bank details read on a phone. */
	color: var(--carpet-text);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
}

body.is-page-mocheta .carpet-bank__detail > * {
	max-width: none;
}

body.is-page-mocheta .carpet-bank__name {
	margin-bottom: 10px;
	color: var(--carpet-text);
	font-weight: 900;
	line-height: 1.35;
}

body.is-page-mocheta .carpet-bank__meta {
	color: var(--carpet-text);
	font-size: 0.95em;
	font-weight: 400;
}

body.is-page-mocheta .carpet-bank__account {
	margin-top: 18px;
}

/* Live: the 26px accounts block and the 18px first account margins collapse into 26px. */
body.is-page-mocheta .carpet-bank__meta + .carpet-bank__account {
	margin-top: 26px;
}

body.is-page-mocheta .carpet-bank__label {
	margin-bottom: 4px;
	color: var(--carpet-gold-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 900;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

/* The label sits in <strong> so copiaza.js can read it; style.css gives strong 700, which would beat the
   inherited 900 (the live weight). */
body.is-page-mocheta .carpet-bank__label strong {
	font-weight: inherit;
}

/* UI-02: the same face as the Donează IBAN (.betania-iban), so the 24 characters can be told apart
   (0/O, 1/l) and transcribed. */
body.is-page-mocheta .carpet-bank__iban {
	color: var(--carpet-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Groups of 4 as margins, not spaces, so the rendered text and a copied IBAN stay unspaced. */
body.is-page-mocheta .carpet-bank__group + .carpet-bank__group {
	margin-inline-start: 0.45em;
}

/* UI-02: the accounts carry .betania-account / .betania-iban / .betania-copy only so copiaza.js finds
   them; the shared bank-details row (grid, hairline, left aligned) does not fit this centred block. */
body.is-page-mocheta .carpet-bank__account.betania-account {
	display: block;
	padding: 0;
	border: 0;
}

body.is-page-mocheta .carpet-bank__account .betania-copy {
	width: auto;
	margin-top: 10px;
}

body.is-page-mocheta .carpet-bank__account .betania-copy .wp-block-button__link {
	width: auto;
	min-height: 44px;
}

/* Live: the child theme's italic, with the global navy paragraph colour winning over its gold. */
body.is-page-mocheta .carpet-bank__mention {
	margin-block: 20px;
	color: var(--carpet-text);
	font-size: var(--wp--preset--font-size--medium);
	font-style: italic;
	font-weight: 900;
	line-height: 1.6;
}

body.is-page-mocheta .carpet-bank__thanks {
	max-width: 700px;
	margin: 36px auto 0;
	padding-top: 30px;
	border-top: 1px solid var(--carpet-line);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.65;
}

/* ---------- Wider screens (live breakpoint: 640px) ---------- */

@media (min-width: 641px) {
	body.is-page-mocheta main.betania-sketch {
		background-position: center top, center top;
		background-size: min(var(--carpet-column), 100%) 100%, contain;
	}

	body.is-page-mocheta .betania-content > .wp-block-group {
		padding-inline: 24px;
	}

	body.is-page-mocheta .carpet-progress .betania-campaign__note {
		padding-inline: 0;
	}

	body.is-page-mocheta .carpet-bank > .carpet-bank__detail {
		padding: 30px 24px;
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.85;
	}
}

/* ---------- UI-03: plata cu cardul e oprită până la NEXT-15 partea 2 ---------- */
/* The card section has no way to pay (Stripe key removed 22.10), so it is hidden, not deleted.
   It collapses to a 0-height box instead of display:none so "Contribuie acum" (#mocheta-doneaza)
   still lands, right above the bank transfer (the page's scroll-padding keeps it under the header).
   ".wp-block-group" is repeated to outrank the section padding rule (.betania-content > .wp-block-group).
   "Sau" goes too: with one option left it points at nothing.
   To bring the card section back, remove this whole block. */
body.is-page-mocheta .betania-content > .wp-block-group.carpet-donate {
	min-height: 0;
	margin-block: 0;
	padding-block: 0;
	border: 0;
	background: none;
}

body.is-page-mocheta .carpet-donate::before,
body.is-page-mocheta .carpet-donate > *,
body.is-page-mocheta .carpet-bank__or {
	display: none;
}