/* ==========================================================================
   price.css — Genva Interior

   Ported from the mock.

   One markup, two layouts. Above 782px the rows are a three column table;
   below it the same rows fold into stacked cards. Both come from the same
   grid-template-areas, which is why the rows are groups and not a table: a
   table row has nothing for grid-area to attach to, so a table would have
   forced two copies of every price into the page.
   ========================================================================== */

.pricecard {
	background: var(--surface-container-lowest);
	border-radius: var(--rounded-xl);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.pricecard > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Long hand, not a `margin: 0` shorthand. Core writes its flow margin as the
   individual margin-block-start and margin-block-end, and at equal specificity
   a shorthand only wins while this file happens to load later. In the site
   editor it does not, so the long hand is what actually holds. */
.pricelist > *,
.pricelist__rows > *,
.pricerow > *,
.pricerow__amount > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

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

   fr units rather than percentages: the row carries 24px of side padding, so
   a percentage would be measured against the padded box and the third column
   would come up short. The ratio is the reference table's 362 / 493 / 297.
   -------------------------------------------------------------------------- */
.pricelist__head,
.pricerow {
	display: grid;
	grid-template-columns: 362fr 493fr 297fr;
	grid-template-areas: "work detail amount";
	align-items: center;
	padding: var(--space-md) var(--space-lg);
}

.pricelist__head {
	background: var(--surface-container-high);
	color: var(--on-surface);
}

.pricelist__head p {
	margin: 0;
}

.pricelist__head p:last-child {
	text-align: right;
}

.pricerow {
	background: var(--surface-container-lowest);
	transition: background 150ms ease;
	font-family: var(--font-body);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
	letter-spacing: var(--body-md-track);
}

/* Banding rather than rules between the rows: at five rows a border on each
   one reads as a grid, which is heavier than this list needs to be. */
.pricelist__rows > .pricerow:nth-child(even) {
	background: var(--film-band);
}

.pricerow:hover {
	background: var(--surface-container-low);
}

.pricerow--free {
	background: var(--film-free);
}

.pricerow--free:hover {
	background: var(--film-free-hover);
}

.pricerow__work {
	grid-area: work;
	margin: 0;
	font-weight: 700;
	color: var(--on-surface);
}

.pricerow__detail {
	grid-area: detail;
	margin: 0;
	color: var(--on-surface-variant);
}

/* --------------------------------------------------------------------------
   Amount

   The figure and its unit are separate blocks so the figure can carry the
   accent colour and the larger size on its own, and so a price can be edited
   without the unit beside it being disturbed. Baseline alignment puts them
   back on one line despite the size difference.
   -------------------------------------------------------------------------- */
.pricerow__amount {
	grid-area: amount;
	justify-content: flex-end;
	white-space: nowrap;
}

:root :where(.is-layout-flex).pricerow__amount {
	gap: 0.125rem;
	align-items: baseline;
}

.pricerow__num {
	margin: 0;
	font-family: var(--font-number);
	font-size: var(--headline-md-size);
	line-height: var(--headline-md-line);
	letter-spacing: var(--headline-md-track);
	font-weight: 700;
	color: var(--secondary);
}

.pricerow__unit {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--label-sm-size);
	line-height: var(--label-sm-line);
	color: var(--on-surface-variant);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Note
   -------------------------------------------------------------------------- */
.pricecard__note {
	--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.6'/%3E%3C/svg%3E");

	margin: 0;
	padding: var(--space-lg);
	background: var(--surface-container);
	color: var(--on-surface-variant);
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.pricecard__note::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	background-color: var(--secondary);
	mask-image: var(--icon-info);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* ==========================================================================
   Phone

   The table becomes stacked cards. Only the grid changes shape: the same
   three blocks move to new areas, so nothing is duplicated and nothing is
   hidden except the column headings, which have nothing to label once each
   row stands on its own.
   ========================================================================== */
@media (width < 782px) {

	.pricecard {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
	}

	.pricelist__head {
		display: none;
	}

	.pricelist__rows {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}

	.pricerow {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"work amount"
			"detail amount";
		column-gap: var(--space-md);
		padding: var(--space-md);
		border-radius: var(--rounded-lg);
		background: var(--surface-container-lowest);
		box-shadow: var(--shadow-sm);
	}

	.pricelist__rows > .pricerow:nth-child(even) {
		background: var(--surface-container-lowest);
	}

	.pricerow--free {
		background: var(--film-free-wide);
	}

	.pricerow__work {
		font-family: var(--font-heading);
		font-size: var(--label-lg-size);
		line-height: var(--label-lg-line);
		font-weight: 600;
	}

	.pricerow__detail {
		font-size: var(--label-sm-size);
		line-height: var(--label-sm-line);
	}

	/* The amount spans both rows of the card, so it stays vertically centred
	   against the two lines of text beside it. */
	.pricerow__amount {
		align-self: center;
	}

	.pricecard__note {
		margin-top: var(--space-md);
		padding: var(--space-xs);
		border-radius: var(--rounded);
		background: var(--surface-container-low);
	}
}