/**
 * payment.css — "Payment Options" (page-templates/tpl-payment.php).
 * Rails: heading bands 1300px off-white bar · content 1120px · prose 864px.
 * Type: bands Poppins 32 charcoal (accent sky-blue) · intro H2 Poppins 30 navy ·
 * sub-head H3 Poppins 35.2 navy · body Merriweather 16 charcoal · links MYS-blue.
 */

/* shared 1120 content rail — content-box so the rail is a true 1120px at
   desktop (matching live's centered inner-wrap). */
.odx-payment__wrap {
	box-sizing: content-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

/* ── heading bands (section-154/307/344): full-bleed off-white band, 75px
      vertical padding, left-aligned numbered heading on a 1300 rail ── */
.odx-payment__band {
	padding: 75px 0;
	background-color: var(--color-off-white);
}
.odx-payment__band-inner {
	box-sizing: border-box;
	max-width: 1300px;
	margin: 0 auto;
	padding-left: 25px;
}
.odx-payment__band-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-charcoal);
}
.odx-payment__accent {
	color: var(--color-blue-light);
}

/* ── intro (section-15): photo/lede 2-col ── */
.odx-payment__intro {
	padding: 0 0 75px;
}
.odx-payment__intro-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
	/* live's grid row resolves to 374.75px (photo block stretched past the
	   366.66px image); pin it so the section height matches. */
	min-height: 375px;
}
.odx-payment__intro-photo img {
	display: block;
	width: 100%;
	height: auto;
}
/* live lede is a centered grid with 30px padding + 20px gap */
.odx-payment__intro-lede {
	display: grid;
	align-content: center;
	gap: 20px;
	padding: 30px;
}
.odx-payment__h2 {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-navy);
}
.odx-payment__intro-lede p {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-charcoal);
}

/* ── prose sections (section-171/175/348): 864 centered column ── */
.odx-payment__prose-section {
	padding: 75px 0;
}
.odx-payment__prose {
	display: flex;
	flex-direction: column;
	max-width: 864px;
	margin: 0 auto;
}
.odx-payment__prose p {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-charcoal);
}
.odx-payment__prose a {
	color: var(--color-blue);
}
/* section-175 groups each carry 25px leading (live our-office-textdiv mt) */
.odx-payment__group {
	margin-top: 25px;
}
.odx-payment__h3 {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 35.2px;
	font-weight: 500;
	line-height: 38px;
	color: var(--color-navy);
}

/* ── section-348 accepted-payments: 15px prose inset + payment-logo row ── */
.odx-payment__prose--accepted {
	padding: 0 15px;
}
.odx-payment__logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 640px;
	padding: 30px 0;
}
.odx-payment__logos img {
	display: block;
	width: 130px;
	height: auto;
}

/* ── responsive ── live ≤767 (768 is still desktop): sections go full-bleed,
   the photo runs edge-to-edge, text carries a 30px side inset, bands fill. */
@media (max-width: 767px) {
	.odx-payment__wrap {
		max-width: none;
		padding: 0;
	}
	/* live stacks the photo full-bleed; lede keeps its 30px pad */
	.odx-payment__intro-top {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	/* live drops section vertical padding 75→30px at ≤767 */
	.odx-payment__intro {
		padding: 0 0 30px;
	}
	.odx-payment__prose-section {
		padding: 30px 0;
	}
	/* live's prose rail runs a 20px gutter at ≤767 (not the office 30px) */
	.odx-payment__prose {
		max-width: none;
		padding: 0 20px;
	}
	.odx-payment__prose--accepted {
		padding: 0 20px;
	}
	/* live leaves this logo grid 3-col → it overflows the viewport to 2166px
	   (a live regression, PATTERNS "we do not port live bugs"): stack it. */
	.odx-payment__logos {
		grid-template-columns: 1fr;
		max-width: none;
	}
	.odx-payment__band-inner {
		max-width: none;
	}
}