/**
 * Viora Ledger widget.
 *
 * A printed rate card, not a row of price boxes: name on the left, a drawn
 * leader running across the gap, the figure on the right, and the detail
 * folded underneath. Nothing is boxed and nothing is centred.
 */

.viora-ledger {
	--viora-ledger-size: clamp(1.5rem, 2.78vw, 2.5rem);

	position: relative;
	padding-block: clamp(3.5rem, 7.64vw, 6.875rem);
}

.viora-ledger__inner {
	width: min(1082px, 100% - 2 * var(--viora-layout-container-pad));
	margin-inline: auto;
}

/* -------------------------------------------------- *
 * Masthead
 * -------------------------------------------------- */

.viora-ledger__masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: clamp(1rem, 2vw, 1.75rem);
	padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
	border-bottom: 1px solid var(--viora-ink, var(--viora-color-heading));
}

.viora-ledger__meta {
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--viora-weight-medium);
	line-height: 1.8;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.viora-ledger__meta--right {
	text-align: right;
}

.viora-ledger__title {
	margin: 0;
	color: var(--viora-ink, var(--viora-color-heading));
	font-family: var(--viora-font-display);
	font-size: clamp(1.25rem, 2.08vw, 1.875rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* -------------------------------------------------- *
 * Rows
 * -------------------------------------------------- */

.viora-ledger__row {
	border-bottom: 1px solid var(--viora-hairline, rgba(17, 17, 17, 0.14));
}

.viora-ledger__summary {
	display: grid;
	grid-template-columns: auto minmax(2rem, 1fr) auto;
	align-items: baseline;
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	padding-block: clamp(1rem, 1.94vw, 1.75rem);
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own triangle, which has no place on a rate card. */
.viora-ledger__summary::-webkit-details-marker {
	display: none;
}

.viora-ledger__summary::marker {
	content: "";
}

.viora-ledger__summary:focus-visible {
	outline: 2px solid var(--viora-color-accent);
	outline-offset: 4px;
}

.viora-ledger__name {
	color: var(--viora-ink, var(--viora-color-heading));
	font-family: var(--viora-font-display);
	font-size: var(--viora-ledger-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.03em;
	transition: color var(--viora-motion-base) var(--viora-motion-easing);
}

.viora-ledger__row[open] .viora-ledger__name,
.viora-ledger__summary:hover .viora-ledger__name {
	color: var(--viora-color-accent);
}

/*
 * A dotted border, not typed periods and not a gradient: a row of full stops
 * cannot stretch to fill an unknown gap, and a background gradient on this
 * element was being dropped somewhere in the cascade. A border always paints.
 */
.viora-ledger__leader {
	height: 0;
	align-self: center;
	border-bottom: 2px dotted currentColor;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	opacity: 0.45;
}

.viora-ledger__figure {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	white-space: nowrap;
}

.viora-ledger__price {
	color: var(--viora-ink, var(--viora-color-heading));
	font-family: var(--viora-font-display);
	font-size: var(--viora-ledger-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.viora-ledger__note {
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--viora-weight-medium);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* -------------------------------------------------- *
 * Folded detail
 * -------------------------------------------------- */

.viora-ledger__panel {
	overflow: hidden;
}

.viora-ledger__detail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
	/* Indented to the width of the figure column, so the list reads as a
	   footnote to the row rather than a new row. */
	padding-left: clamp(0rem, 6vw, 5rem);
	max-width: 46ch;
}

.viora-ledger__detail-label {
	color: var(--viora-color-accent);
}

.viora-ledger__list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: 0.9375rem;
	line-height: 1.9;
}

.viora-ledger__list li {
	position: relative;
	padding-left: 1.1rem;
}

.viora-ledger__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 0.5rem;
	height: 1px;
	background-color: var(--viora-color-accent);
}

.viora-ledger__link {
	margin-top: 0.35rem;
	font-size: 0.6875rem;
}

/* -------------------------------------------------- *
 * Reveal
 * -------------------------------------------------- */

.viora-ledger.is-animated .viora-ledger__item {
	opacity: 0;
	transform: translateY(20px);
}

.viora-ledger.is-animated .viora-ledger__item.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s var(--viora-motion-easing),
		transform 0.9s var(--viora-motion-easing);
}

/* -------------------------------------------------- *
 * Mobile — the leader has no room, so the row stacks
 * -------------------------------------------------- */

@media (max-width: 600px) {
	.viora-ledger {
		--viora-ledger-size: clamp(1.25rem, 6vw, 1.625rem);
	}

	.viora-ledger__masthead {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.4rem;
	}

	.viora-ledger__meta--right {
		text-align: left;
	}

	.viora-ledger__title {
		white-space: normal;
	}

	.viora-ledger__summary {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.35rem;
	}

	.viora-ledger__leader {
		display: none;
	}

	.viora-ledger__detail {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.viora-ledger.is-animated .viora-ledger__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}