/* Details table
---------------------------------------------
 * The "Details" style of the core Table block (lib/block-styles.php): a plum
 * label/value panel with a round icon badge on every row. Loaded on the front
 * end and in the block editor.
 *
 * Icons follow row position, because the core Table block cannot put a class
 * on a row: 1 lotus, 2 heart, 3 map pin, 4 calendar, 5 map, later rows lotus.
 *
 * Selectors go through `> table > tbody > tr` so they outrank the generic
 * plum-table rules in style.css and style-editor.css (zebra rows, gold first
 * column) whatever order the stylesheets load in.
 */

.wp-block-table.is-style-details {
	--details-bg: var(--luna-plum-gradient);
	--details-radius: var(--luna-radius);
	--details-shadow: var(--luna-shadow);
	--details-label: var(--luna-gold);
	--details-value: rgba(255, 248, 242, 0.92);
	--details-divider: rgba(224, 183, 134, 0.18);
	--details-row-hover: rgba(255, 255, 255, 0.03);
	--details-badge-size: 34px;
	--details-badge-bg: rgba(224, 183, 134, 0.14);
	--details-icon-size: 17px;
	--details-icon-color: var(--luna-gold);
	--details-gap: 14px;
	--details-pad-y: 16px;
	--details-pad-x: 28px;
	--details-edge-pad: 6px;
	/*
	 * Tables ignore min-width and max()/calc() widths with a percentage. The
	 * table is at least 566px wide while this layout applies (mobile takes over
	 * below 600px), so 32% never drops below ~180px.
	 */
	--details-label-width: 32%;

	/* Core and the theme set overflow-x: auto, which would clip the shadow. */
	overflow: visible;
}

.wp-block-table.is-style-details > table {
	background: var(--details-bg);
	border: 0;
	border-collapse: separate;
	border-radius: var(--details-radius);
	border-spacing: 0;
	box-shadow: var(--details-shadow);
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

.wp-block-table.is-style-details > table > tbody {
	border: 0;
}

/* `:nth-child(n)` matches every row; it is only there to outrank the zebra rule. */
.wp-block-table.is-style-details > table > tbody > tr:nth-child(n) {
	--details-badge-shift: 0px;

	background: transparent;
	border: 0;
}

/*
 * Row icons: the label cell's ::after on desktop, the row's ::after on mobile.
 * Lotus is the default further down; these outrank it. The url() goes straight
 * into mask-image because Safari resolves a relative url() held in a custom
 * property against the page, not this stylesheet, and the icon disappears.
 */
.wp-block-table.is-style-details > table > tbody > tr:nth-child(2) > td:first-child::after,
.wp-block-table.is-style-details > table > tbody > tr:nth-child(2)::after {
	-webkit-mask-image: url("../icons/heart-line.svg");
	mask-image: url("../icons/heart-line.svg");
}

.wp-block-table.is-style-details > table > tbody > tr:nth-child(3) > td:first-child::after,
.wp-block-table.is-style-details > table > tbody > tr:nth-child(3)::after {
	-webkit-mask-image: url("../icons/map-pin-line.svg");
	mask-image: url("../icons/map-pin-line.svg");
}

.wp-block-table.is-style-details > table > tbody > tr:nth-child(4) > td:first-child::after,
.wp-block-table.is-style-details > table > tbody > tr:nth-child(4)::after {
	-webkit-mask-image: url("../icons/calendar-line.svg");
	mask-image: url("../icons/calendar-line.svg");
}

.wp-block-table.is-style-details > table > tbody > tr:nth-child(5) > td:first-child::after,
.wp-block-table.is-style-details > table > tbody > tr:nth-child(5)::after {
	-webkit-mask-image: url("../icons/map-line.svg");
	mask-image: url("../icons/map-line.svg");
}

.wp-block-table.is-style-details > table > tbody > tr:hover {
	background-color: var(--details-row-hover);
}

/* Cells
--------------------------------------------- */

.wp-block-table.is-style-details > table > tbody > tr > td {
	border: 0;
	border-bottom: 1px solid var(--details-divider);
	color: var(--details-value);
	font-size: 1rem;
	line-height: 1.5;
	padding: var(--details-pad-y) var(--details-pad-x);
	text-align: left;
	vertical-align: middle;
}

/* Extra room at the top and bottom so text clears the rounded corners. */
.wp-block-table.is-style-details > table > tbody > tr:first-child > td {
	padding-top: calc(var(--details-pad-y) + var(--details-edge-pad));
}

.wp-block-table.is-style-details > table > tbody > tr:last-child > td {
	border-bottom: 0;
	padding-bottom: calc(var(--details-pad-y) + var(--details-edge-pad));
}

/* The badge is centred on the padding box, so follow the uneven padding. */
.wp-block-table.is-style-details > table > tbody > tr:first-child {
	--details-badge-shift: calc(var(--details-edge-pad) / 2);
}

.wp-block-table.is-style-details > table > tbody > tr:last-child {
	--details-badge-shift: calc(var(--details-edge-pad) / -2);
}

.wp-block-table.is-style-details > table > tbody > tr:only-child {
	--details-badge-shift: 0px;
}

/* Label: badge sits in the left padding, text follows it. */
.wp-block-table.is-style-details > table > tbody > tr > td:first-child {
	color: var(--details-label);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding-left: calc(var(--details-pad-x) + var(--details-badge-size) + var(--details-gap));
	padding-right: var(--details-gap);
	position: relative;
	width: var(--details-label-width);
}

.wp-block-table.is-style-details > table > tbody > tr > td:first-child strong {
	color: inherit;
	font-weight: inherit;
}

.wp-block-table.is-style-details > table > tbody > tr > td:first-child::before,
.wp-block-table.is-style-details > table > tbody > tr > td:first-child::after {
	content: "";
	left: var(--details-pad-x);
	position: absolute;
	top: calc(50% + var(--details-badge-shift));
	transform: translateY(-50%);
}

.wp-block-table.is-style-details > table > tbody > tr > td:first-child::before {
	background-color: var(--details-badge-bg);
	border-radius: 50%;
	height: var(--details-badge-size);
	width: var(--details-badge-size);
}

/* Same mask technique as .button-whatsapp and the Contact CTA icons. */
.wp-block-table.is-style-details > table > tbody > tr > td:first-child::after,
.wp-block-table.is-style-details > table > tbody > tr::after {
	background-color: var(--details-icon-color);
	height: var(--details-icon-size);
	-webkit-mask-image: url("../icons/lotus-line.svg");
	mask-image: url("../icons/lotus-line.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: var(--details-icon-size);
}

.wp-block-table.is-style-details > table > tbody > tr > td:first-child::after {
	margin-left: calc((var(--details-badge-size) - var(--details-icon-size)) / 2);
}

/*
 * Mobile: each row becomes a two-row grid. The badge moves from the label cell
 * to the row (tr::before circle, tr::after icon, both in the "badge" area) so
 * it spans the label and the value; the cells stay <td>s, so screen readers
 * still get a table.
 */
@media only screen and (max-width: 599px) {

	.wp-block-table.is-style-details {
		--details-gap: 12px;
		--details-pad-y: 14px;
		--details-pad-x: 18px;
	}

	.wp-block-table.is-style-details > table,
	.wp-block-table.is-style-details > table > tbody {
		display: block;
	}

	.wp-block-table.is-style-details > table > tbody > tr:nth-child(n) {
		border-bottom: 1px solid var(--details-divider);
		column-gap: var(--details-gap);
		display: grid;
		grid-template-areas:
			"badge label"
			"badge value";
		grid-template-columns: var(--details-badge-size) minmax(0, 1fr);
		padding: var(--details-pad-y) var(--details-pad-x);
	}

	.wp-block-table.is-style-details > table > tbody > tr:first-child {
		padding-top: calc(var(--details-pad-y) + var(--details-edge-pad));
	}

	.wp-block-table.is-style-details > table > tbody > tr:last-child {
		border-bottom: 0;
		padding-bottom: calc(var(--details-pad-y) + var(--details-edge-pad));
	}

	.wp-block-table.is-style-details > table > tbody > tr::before,
	.wp-block-table.is-style-details > table > tbody > tr::after {
		align-self: center;
		content: "";
		grid-area: badge;
		justify-self: center;
	}

	.wp-block-table.is-style-details > table > tbody > tr::before {
		background-color: var(--details-badge-bg);
		border-radius: 50%;
		height: var(--details-badge-size);
		width: var(--details-badge-size);
	}

	.wp-block-table.is-style-details > table > tbody > tr > td,
	.wp-block-table.is-style-details > table > tbody > tr > td:first-child,
	.wp-block-table.is-style-details > table > tbody > tr:first-child > td,
	.wp-block-table.is-style-details > table > tbody > tr:last-child > td {
		border: 0;
		display: block;
		padding: 0;
		width: auto;
	}

	.wp-block-table.is-style-details > table > tbody > tr > td:first-child::before,
	.wp-block-table.is-style-details > table > tbody > tr > td:first-child::after {
		content: none;
	}

	.wp-block-table.is-style-details > table > tbody > tr > td:first-child {
		align-self: end;
		font-size: 0.72rem;
		grid-area: label;
		letter-spacing: 0.1em;
		line-height: 1.4;
		margin-bottom: 2px;
		text-transform: uppercase;
	}

	.wp-block-table.is-style-details > table > tbody > tr > td:last-child {
		align-self: start;
		font-size: 0.95rem;
		grid-area: value;
	}

}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-table.is-style-details > table > tbody > tr {
		transition: background-color 0.2s ease-in-out;
	}

}