/*
 * Acasă (slug acasa): the sections of the front page, as on bisericabetania.ro today — all on white,
 * from one left edge: two navy cards, Misiunea with three peach cards, the program in a peach box
 * over the church photo, the scopuri, "Numele Lui" in a navy box, the closing words, the bank
 * details, the link cards and "Te așteptăm" over the photo of the full hall.
 * The hero comes from templates/front-page.html and style.css.
 */

/* Each section is full width, with its own padding. */
.betania-content > .wp-block-group[class*="home-"] {
	margin-block: 0;
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

/* UI-27 / UI-35: as on the live page, every section between the hero and "Te așteptăm" sits on white
   and the colour lives in boxes inside it (navy cards, the peach program box, the navy "Numele Lui"
   box). Consecutive white sections would stack two paddings, so each one after the first keeps only
   the gap below the previous one. */
.betania-content > .wp-block-group[class*="home-"] + .wp-block-group[class*="home-"]:not(.home-invite) {
	padding-top: 0;
}

/* UI-58: two widths only, both from the left edge of the 1200px column (x=172 at 1440, as on live):
   "text" for running text, the full column for grids and boxes. */
body.is-page-acasa {
	--home-text-width: 45rem;
}

[class*="home-"] .wp-block-image {
	margin: 0;
}

[class*="home-"] .wp-block-image img {
	display: block;
	width: 100%;
}

.home-card > *,
.home-mission__card > *,
.home-goal > * {
	margin-block: 0;
}

.home-mission__title,
.home-mission__lead,
.home-mission__text,
.home-goals__intro,
.home-closing > p,
.home-bank__kicker,
.home-bank__title,
.home-bank__details,
.home-bank .betania-bank-details {
	max-width: var(--home-text-width, 45rem);
	/* Core's constrained layout centres every child with margin-inline: auto !important. */
	margin-inline: 0 auto !important;
	text-align: left;
}

.home-mission__cards,
.home-goals__cards {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* Core's grid layout uses auto-fill, which leaves an empty column beside two or three cards. */
.home-welcome__cards.wp-block-group {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.home-mission__cards.wp-block-group,
.home-goals__cards.wp-block-group {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.home-goal {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.home-goal__reference {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* "Numele Lui": each line in two halves that meet in the middle. */
.home-names__list {
	display: grid;
	gap: 0.875rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.home-names__list li {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: baseline;
}

.home-names__list li > span:first-child {
	text-align: right;
}

.home-names__list li::before {
	display: none;
}

@media (max-width: 600px) {
	.home-names__list li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.125rem;
		text-align: center;
	}

	.home-names__list li > span:first-child {
		text-align: center;
	}
}

.home-closing .wp-block-buttons,
.home-welcome .wp-block-buttons {
	margin-top: 1.5rem;
}

/* Bank details in a box at the text width, on the same left edge as the rest (UI-58); on white now,
   so the box carries the hairline the grey band used to give it (UI-27). */
.home-bank .betania-bank-details {
	padding: 2rem;
	border: var(--betania-hairline);
	border-radius: 6px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 16px rgb(21 42 63 / 6%);
	text-align: left;
}

.home-bank .betania-bank-details__list {
	margin-inline: 0;
}

.home-links .betania-cards.wp-block-group {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* ---------------------------------------------------------------------
   Colours and type of each section
   --------------------------------------------------------------------- */

/* The two questions: navy cards on white (UI-28), so the dark hero is followed by light, not by a
   second dark band; the band used to be the same navy as the hero's veil and read as one block. */
body.is-page-acasa .home-welcome__cards {
	gap: 1.25rem;
}

body.is-page-acasa .home-card {
	padding: 2rem;
	border-radius: 6px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* UI-57: the paragraph above the button wraps to two lines in one card and one in the other; pushing
   the buttons to the bottom keeps the two actions on one line. */
body.is-page-acasa .home-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* UI-25 / UI-66: white and in sentence case, as on live: peach stays for the button, the one action
   in the card, and the questions read as questions, not section labels. */
body.is-page-acasa .home-card__title {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large);
	/* NEXT-21: the card titles are h2 (the outline went h1 → h3); keep the h3 line height they had. */
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
}

/* Misiunea: title, text, three peach cards. */
/* UI-35: the mission title at the level of the program title (22px Dosis capitals), as the label it
   is on live, not the biggest heading on the page; the short gold rule moves to the left edge. */
body.is-page-acasa .home-mission__title {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.12em;
	background-position: left bottom;
}

body.is-page-acasa .home-mission__lead {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

/* UI-43: running text, so left-aligned, navy and 18px as on live (14.6:1). */
body.is-page-acasa .home-mission__text {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

body.is-page-acasa .home-mission__cards {
	gap: 1.25rem;
	margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

body.is-page-acasa .home-mission__card {
	padding: 1.5rem;
	border-radius: 6px;
	background: var(--wp--preset--color--peach-light);
	border-left: 4px solid var(--wp--preset--color--gold);
	line-height: 1.6;
}

/* UI-24: the faded navy of the shared schedule (style.css), not a brown of its own. */
body.is-page-acasa .home-program .betania-program--grid,
body.is-page-acasa .home-program .betania-program--grid .betania-program__note {
	border-color: color-mix(in srgb, var(--wp--preset--color--navy) 15%, transparent);
}

body.is-page-acasa .home-program .betania-program__group {
	padding-inline: 0 1rem;
}

/* UI-44: the summer note left-aligned at 15px/400 (the subtitle size), and the Instagram link kept on
   one line with its ↗ so the arrow never ends up alone on a phone. */
body.is-page-acasa .home-program .betania-program--grid .betania-program__note {
	max-width: var(--home-text-width, 45rem);
	margin-inline: 0;
	padding-inline: 0;
	font-size: var(--wp--preset--font-size--note);
}

body.is-page-acasa .home-program .betania-program__note a {
	white-space: nowrap;
}

/* Scopuri: three white cards with a peach top, no photos, on white (UI-27). */
body.is-page-acasa .home-goals__intro {
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

body.is-page-acasa .home-goals__cards {
	gap: 1.25rem;
}

body.is-page-acasa .home-goal {
	padding: 2rem 1.75rem;
	border-top: 4px solid var(--wp--preset--color--gold);
	border-radius: 6px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 16px rgb(21 42 63 / 6%);
	border: var(--betania-hairline);
	border-top: 4px solid var(--wp--preset--color--gold);
	text-align: left;
}

body.is-page-acasa .home-goal__title {
	font-size: var(--wp--preset--font-size--large);
}

/* UI-67: italic at 300 and centred over three lines was the most fragile text on the site;
   400 and left-aligned like the rest of the card. */
body.is-page-acasa .home-goal__quote {
	font-style: italic;
	font-weight: 400;
}

body.is-page-acasa .home-goal__reference {
	color: var(--wp--preset--color--brown);
}

/* Numele Lui: a navy box on white (as on live, UI-27), peach for the second half. */
body.is-page-acasa .home-names__list {
	max-width: none;
	padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1.25rem, 0.5rem + 3vw, 3rem);
	border-radius: 6px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
}

body.is-page-acasa .home-names__list li > span:last-child {
	color: var(--wp--preset--color--peach);
}

body.is-page-acasa .home-closing {
	text-align: left;
}

body.is-page-acasa .home-closing__text {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

body.is-page-acasa .home-closing__blessing {
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

body.is-page-acasa .home-bank__title {
	font-size: var(--wp--preset--font-size--large);
}

/* UI-40: the kicker and the "Donație" line say what the accounts are for, with the wording from
   Donează; the kicker sits tight on the title so the two read as one heading. */
body.is-page-acasa .home-bank__kicker {
	margin-bottom: 0;
}

body.is-page-acasa .home-bank__kicker + .home-bank__title {
	margin-top: 0.5rem;
}

body.is-page-acasa .home-bank__details {
	margin-top: 1.125rem;
	color: var(--wp--preset--color--navy);
}

/* UI-07: on a phone the peach kicker sits on the lit cross, where the hero's veil fades to about 40%
   and the label drops to 3:1. The wash stays at 65% up through the text block (74–79% of the hero's
   height from the bottom, from 667 to 932px tall phones), then fades into the photo as before. */
@media (max-width: 767px) {
	body.is-page-acasa .betania-hero {
		--betania-hero-veil: linear-gradient(0deg, rgb(15 22 38 / 85%) 0%, rgb(15 22 38 / 65%) 45%, rgb(15 22 38 / 65%) 82%, rgb(15 22 38 / 15%) 100%);
	}
}

/* UI-17: the page ends on "Te așteptăm" (the betania/pasul-urmator pattern, shared with Istoric and
   Despre noi) over the full hall, so the last thing a visitor sees is people, not bank details.
   The navy wash is even, not a gradient: the photo is bright white walls everywhere, and white text
   needs at least 58% wash on them for 4.5:1, the peach script about 70% (measured: 4.9:1 at worst).
   NEXT-34: the wash is the anthracite of the panel behind the pulpit, not navy; it is lighter, so it takes
   80% for the peach script to keep 4.5:1 on the white walls. */
body.is-page-acasa .home-invite {
	--home-invite-veil: linear-gradient(rgb(56 51 46 / 80%), rgb(56 51 46 / 80%));
	background: var(--home-invite-veil), url("../../img/betania-hall-people.jpg") center 30% / cover no-repeat;
	background-image: var(--home-invite-veil), image-set(url("../../img/betania-hall-people.webp") type("image/webp"), url("../../img/betania-hall-people.jpg") type("image/jpeg"));
	color: var(--wp--preset--color--white);
	padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
}

body.is-page-acasa .home-invite .betania-next-step {
	border-top: 0;
	padding-inline: 0 !important;
}

body.is-page-acasa .home-invite .is-style-betania-script {
	color: var(--wp--preset--color--peach);
}

body.is-page-acasa .home-invite .betania-next-step > p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}