/*
 * Pricing page — the small amount that isn't already covered by
 * toc-content-page.css (article shell, TOC, FAQ accordion) or
 * self-contact-retreat.css (the tier table: .retreat-dates, .date-section,
 * .date-column, .date-line, .strikethrough).
 *
 * Two additions only:
 *   .pricing-summary  the generated at-a-glance range line
 *   .price-rows       flat label/price rows for the programs that have no
 *                     tier ladder (Personal Passage, private groups, deposits)
 */

.pricing-summary {
	margin-block: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	border-inline-start: 3px solid var(--aromatic-cedar);
	background-color: var(--quote-background-color);
	line-height: 1.7;
}

.price-rows {
	list-style: none;
	margin-block: 1.25rem;
	padding: 0;
}

.price-rows li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 0.6rem;
	border-block-end: 1px solid #e6e2dd;
}

.price-rows li:last-child {
	border-block-end: 0;
}

.price-rows .label {
	flex: 1 1 12rem;
}

.price-rows .price {
	flex: 0 1 auto;
	text-align: end;
	white-space: nowrap;
}

/* Generated note about a scheduled price increase, under the summary line.
   Quieter than body copy — it is a footnote to the range above it. */
.pricing-step-note {
	margin-block-start: 0.6rem;
	font-size: 0.9rem;
}

/* "Now registering: <dates>" above the price ladder. */
.pricing-next {
	margin-block-end: 0.5rem;
}

/* The Self Contact ladder: three booking tiers by two room types. Shares its
   rhythm and rule colour with .price-rows so every priced block on the page
   reads as one set — they differ in shape only because the data does, a matrix
   here against a flat list there. */
.price-table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.25rem 0.75rem;
}

.price-table th,
.price-table td {
	padding: 0.6rem 0 0.6rem 1rem;
	border-block-end: 1px solid #e6e2dd;
	text-align: end;
	vertical-align: baseline;
}

/* Baseline, not bottom. The Two-Person cell carries the per-person note as a
   second line, so bottom-aligning levelled "Individual Rooms" with that note
   instead of with the heading beside it. Baseline lines the two headings up on
   their own first line and lets the note hang below, which is what it is. */
.price-table thead th {
	vertical-align: baseline;
}

/* Tier names read as labels, not emphasis, so they lose the <th> bold. */
.price-table th[scope="row"] {
	padding-inline-start: 0;
	text-align: start;
	font-weight: normal;
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
	border-block-end: 0;
}

/* "Prices are per person" under the Two-Person Rooms header, which is where it
   applies: in a shared room the figure is still each, not split between two. */
.price-table .th-note {
	display: block;
	font-weight: normal;
	font-size: 0.85em;
}

.price-table-note {
	margin-block-start: 0;
	font-size: 0.9rem;
}

/* Was inherited from self-contact-retreat.css, which this page no longer
   loads. Only the table caption uses it. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}