/*
 * Buying as a chama (templates/page-chama.html): the Chama boards' sections in the friendly system — a bright
 * hero with a two-tone title, icon-led cards, the calculator as a raised tool on the pale band, and the offer
 * to come to a meeting as a blue panel.
 *
 * Wide-screen values apply from 782px; the phone's at 781px and below. The calculator styles itself
 * (src/blocks/chama-calculator); this file places it. Sections lay their children out with gap, so the
 * browser's own margins on headings, paragraphs and lists are cleared.
 */

.maxkan-chama-page {
	--maxkan-chama-shadow: 0 0 0 1px var(--wp--preset--color--line);
	--maxkan-chama-shadow-hover: 0 0 0 1px var(--wp--preset--color--line-strong);

	margin: 0;
	font-size: 16px;
	line-height: normal;
}

.maxkan-chama-page :where(h1, h2, h3, p, ul, figure),
.maxkan-chama-page > *,
.maxkan-chama-page :where(.is-layout-flow) > * {
	margin: 0;
}

.maxkan-chama-page :where(ul) {
	padding: 0;
	list-style: none;
}

/* The section title. */
.maxkan-chama-page__h2 {
	color: var(--wp--preset--color--brand);
	font-size: var(--maxkan-title);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* The two pill buttons that lead further down this page. */
.maxkan-chama-button .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	min-height: 0;
	padding: 0 24px;
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--button);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
}

.maxkan-chama-button--primary .wp-block-button__link {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
}

.maxkan-chama-button--primary .wp-block-button__link:hover,
.maxkan-chama-button--primary .wp-block-button__link:focus {
	background: var(--wp--preset--color--green-dark);
}

.maxkan-chama-button--outline .wp-block-button__link {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
}

.maxkan-chama-button--outline .wp-block-button__link:hover,
.maxkan-chama-button--outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--brand-tint);
}

/*
 * Hero: the two-tone title and the two first steps on a soft blue wash, the featured photo rounded beside them.
 */
.maxkan-chama-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 560px;
	gap: 64px;
	align-items: center;
	padding: var(--maxkan-section) var(--maxkan-gutter);
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--brand-tint) 0%,
		var(--wp--preset--color--white) 100%
	);
}

.maxkan-chama-hero__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.maxkan-chama-hero__title {
	color: var(--wp--preset--color--brand);
	font-size: var(--maxkan-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.maxkan-chama-hero__lead {
	color: var(--wp--preset--color--slate);
	font-size: 18px;
	line-height: 1.6;
}

.maxkan-chama-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

.maxkan-chama-hero__photo img {
	display: block;
	width: 100%;
	height: 460px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card-large);
	box-shadow: var(--maxkan-chama-shadow);
}

/*
 * Two ways to own it: the title on the left, then the two options side by side, each named A or B.
 */
.maxkan-chama-ways {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: var(--maxkan-section) var(--maxkan-gutter);
}

.maxkan-chama-ways__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.maxkan-chama-way {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow:
		var(--maxkan-chama-shadow),
		0 0 0 1px var(--wp--preset--color--line);
	transition:
		transform var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.maxkan-chama-way:hover {
	box-shadow:
		var(--maxkan-chama-shadow-hover),
		0 0 0 1px var(--wp--preset--color--line);
}

/* "Option A", "Option B": the choice a meeting makes, named over each card. */
.maxkan-chama-way__option {
	color: var(--wp--preset--color--green);
	font-size: 14px;
	font-weight: 800;
}

.maxkan-chama-way__title {
	color: var(--wp--preset--color--brand);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
}

.maxkan-chama-way__text {
	color: var(--wp--preset--color--slate);
	font-size: 16px;
	line-height: 1.6;
}

/* What each way needs, as a soft green note at the foot of the card. */
.maxkan-chama-way__needs {
	margin-top: auto;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--field);
	background: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--green-ink);
	font-size: 14px;
	line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
	.maxkan-chama-way {
		transition: none;
	}

	.maxkan-chama-way:hover {
		transform: none;
	}
}

/* The calculator's band: the block brings its own raised card. */
.maxkan-chama-afford {
	padding: var(--maxkan-section) var(--maxkan-gutter);
	background: var(--wp--preset--color--mist);
}

/* The calculator is linked to from the hero, so it stops clear of the top of the screen. */
.maxkan-chama-afford .maxkan-chama,
.maxkan-chama-meeting {
	scroll-margin-top: 24px;
}

/*
 * What your chama needs and how members' money is protected: two cards side by side, a drawn mark before
 * each line — a tick for the documents, a shield for the protections.
 */
.maxkan-chama-protections {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	padding: var(--maxkan-section) var(--maxkan-gutter);
}

.maxkan-chama-protections__column {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border-radius: var(--wp--custom--radius--card-large);
	background: var(--wp--preset--color--white);
	box-shadow:
		var(--maxkan-chama-shadow),
		0 0 0 1px var(--wp--preset--color--line);
}

.maxkan-chama-protections .maxkan-chama-page__h2 {
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.maxkan-chama-protections__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 16px;
	line-height: 1.5;
}

.maxkan-chama-protections__list li {
	position: relative;
	padding-left: 36px;
}

.maxkan-chama-protections__list li strong {
	color: var(--wp--preset--color--brand);
}

.maxkan-chama-protections__list li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--green) no-repeat center / 14px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}

.maxkan-chama-protections__list--shields li::before {
	background-color: var(--wp--preset--color--brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6l7-3Z'/%3E%3C/svg%3E");
}

/*
 * We'll come to your meeting: a solid blue panel, the offer on the left and the two ways to take it up on
 * the right.
 */
.maxkan-chama-meeting {
	padding: 0 var(--maxkan-gutter) 88px;
}

.maxkan-chama-meeting__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 56px;
	border-radius: var(--wp--custom--radius--card-large);
	color: var(--wp--preset--color--white);
}

.maxkan-chama-meeting__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}

.maxkan-chama-meeting__title {
	color: inherit;
	font-size: var(--maxkan-title);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.maxkan-chama-meeting__lead {
	color: var(--wp--preset--color--sky);
	font-size: 17px;
	line-height: 1.6;
}

.maxkan-chama-meeting__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Between the phone and the full desktop: the columns give way before anything overflows. */
@media (min-width: 782px) and (max-width: 1100px) {
	.maxkan-chama-hero {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	.maxkan-chama-hero__title {
		font-size: var(--maxkan-title);
	}

	.maxkan-chama-hero__photo img {
		height: auto;
		aspect-ratio: 560 / 460;
	}

	.maxkan-chama-protections {
		grid-template-columns: minmax(0, 1fr);
	}

	.maxkan-chama-meeting__panel {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * A phone: the photo above the words, then the calculator first, the two ways, what to bring, and the meeting
 * offer with full-width buttons. No bar at the foot of the screen.
 */
@media (max-width: 781px) {
	.maxkan-chama-page {
		display: flex;
		flex-direction: column;
	}

	.maxkan-chama-page__h2 {
		font-size: 28px;
		line-height: 1.15;
	}

	.maxkan-chama-hero {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 16px 16px 32px;
	}

	.maxkan-chama-hero__photo {
		order: -1;
	}

	.maxkan-chama-hero__photo img {
		height: 220px;
	}

	.maxkan-chama-hero__body {
		gap: 12px;
	}

	.maxkan-chama-hero__title {
		font-size: 32px;
		line-height: 1.08;
	}

	.maxkan-chama-hero__lead {
		font-size: 15px;
		line-height: 1.55;
	}

	.maxkan-chama-afford {
		order: 1;
		padding: 24px 16px;
	}

	.maxkan-chama-ways {
		order: 2;
		gap: 16px;
		padding: 32px 16px;
	}

	.maxkan-chama-ways__list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.maxkan-chama-way {
		gap: 6px;
		padding: 18px;
	}

	.maxkan-chama-way__title {
		font-size: 16px;
	}

	.maxkan-chama-way__text {
		font-size: 14px;
		line-height: 1.5;
	}

	.maxkan-chama-protections {
		display: flex;
		flex-direction: column;
		order: 3;
		gap: 12px;
		padding: 32px 16px;
		background: var(--wp--preset--color--mist);
	}

	.maxkan-chama-protections__column {
		gap: 14px;
		padding: 20px 16px;
	}

	.maxkan-chama-protections .maxkan-chama-page__h2 {
		font-size: 22px;
	}

	.maxkan-chama-protections__list {
		gap: 10px;
		font-size: 15px;
	}

	.maxkan-chama-protections__list li {
		padding-left: 32px;
	}

	.maxkan-chama-protections__list li::before {
		width: 22px;
		height: 22px;
	}

	.maxkan-chama-protections__note {
		color: var(--wp--preset--color--slate);
		font-size: 14px;
	}

	.maxkan-chama-meeting {
		order: 4;
		padding: 32px 16px;
	}

	.maxkan-chama-meeting__panel {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 28px 20px;
	}

	.maxkan-chama-meeting__title {
		font-size: 28px;
		line-height: 1.15;
	}

	.maxkan-chama-meeting__lead {
		font-size: 15px;
		line-height: 1.55;
	}

	/* Without the bar at the foot of the screen, the footer needs no room left for it. */
	.maxkan-chama-page ~ .wp-block-template-part .maxkan-footer {
		padding-bottom: 32px;
	}
}

/* With no photo chosen for the page, the words take the whole width rather than leaving a gap beside them. */
.maxkan-chama-hero:not(:has(.maxkan-chama-hero__photo img)) {
	grid-template-columns: minmax(0, 1fr) !important;
}

.maxkan-chama-hero:not(:has(.maxkan-chama-hero__photo img)) > * {
	max-width: 760px;
}

/* The chama questions, set out as the diaspora page sets out its own. */
.maxkan-chama-faqs {
	padding: var(--maxkan-section) var(--maxkan-gutter);
	background: var(--wp--preset--color--mist);
}

@media (min-width: 1000px) {
	.maxkan-chama-faqs .maxkan-faqs--with-aside {
		grid-template-columns: 400px minmax(0, 1fr);
		gap: 72px;
	}
}