/**
 * Payment methods: page-templates/payments.php.
 * From 1280 (2179:713): title card 176px; "Accepted methods" H2, 35px to
 * three cards with 24px gaps, 96px under them: white, line border, radius
 * 32, 32px padding; 56px icon circle with a 26px icon, 32px to the title
 * (Heading/H3 bold), 12px to the text (Body/M muted).
 * "How SEPA transfer works" (2179:1202): the panel fill exported flat from
 * Figma (1920 x 512, corners rounded in the image), stretched to the panel
 * from 1024; below 1024 the panel is tall (steps stacked), so the image
 * covers it at its own ratio and shows its middle;
 * the newsletter card gradient under it while it loads, radius 40, 56px padding,
 * H2 white, 32px to three steps with 20px gaps: white 10%, radius 20, 32px
 * padding, 35px white number circle (Heading/H4), 40px to the text (Body/L
 * white); 96px under the panel.
 * Details (pages/base.css .policies): 96px under them; mascot (card
 * terminal) 614px wide, its top 595px shown, 822px from the content's left
 * edge (458px before its right edge), cut by the Q&A.
 * Q&A (2160:4849): the category Q&A on cream.
 * Below 1024 (not designed): cards and steps stacked.
 */

.pay-methods {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 20.7899px + 0.856vw, 35px);
	padding-bottom: var(--section-space-m);
}

.pay-methods__list,
.pay-steps__list {
	display: grid;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pay-method {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	box-sizing: border-box;
	padding: var(--space-md) 20px;
	border: 1px solid var(--color-line);
	border-radius: 20px;
	background: var(--color-white);
}

.pay-method__title {
	margin: 8px 0 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

.pay-method__text {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.pay-steps-wrap {
	padding-bottom: var(--section-space-m);
}

.pay-steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: 36px 20px 25px; /* phones (client, 19 Oct 2026); 48px from 768 */
	border-radius: var(--radius-section);
	background:
		image-set(url("../../images/pay-steps-bg.webp") 1x, url("../../images/pay-steps-bg@2x.webp") 2x) center / cover no-repeat,
		var(--gradient-newsletter-card);
	color: var(--color-white);
}

.pay-steps__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-h2);
	line-height: var(--leading-h2);
}

.pay-step {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
	padding: var(--space-md) 20px;
	border-radius: 20px;
	background: rgb(255 255 255 / 10%);
}

.pay-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

.pay-step__text {
	max-width: 280px;
	margin: 0;
	font-size: var(--text-body-l);
	line-height: var(--leading-body-l);
}

.payments-page .policies {
	--policies-bottom: 96px;
	--mascot-width: 614px;
	--mascot-height: 595px;
	--mascot-right: 458px;
	--mascot-ratio: 614 / 595;
	--mascot-overhang: -34px;
}

/* 1280-1659: the mascot moves in to keep the card terminal on screen (34px
 * from the edge, as at 1660), so the rows get narrower. */
@media (min-width: 1280px) and (max-width: 1659px) {
	.payments-page .policy {
		max-width: min(860px, 100% - 560px);
	}
}

.payments-page .policies__inner {
	padding-top: 0;
}

/* Q&A on cream (2160:4849). The open item stays white: its cream would not
 * show on the cream section. */
.payments-qa {
	background: var(--color-cream);
}

.payments-qa .cat-faq__item[open] {
	background: var(--color-white);
}

@media (min-width: 768px) {
	.pay-method {
		padding: 32px;
		border-radius: 32px;
	}

	.pay-steps {
		padding: 48px;
	}

	.pay-step {
		padding: 32px;
	}
}

@media (min-width: 1024px) {
	.pay-steps {
		background-size: 100% 100%;
	}

	.pay-methods__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-md);
	}

	.pay-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.pay-step {
		gap: var(--space-lg);
	}
}

@media (min-width: 1280px) {
	.pay-method__title {
		margin-top: 20px;
	}

	.pay-steps {
		gap: 32px;
		padding: 56px;
	}
}