/* --- Panel list (value / step / feature / tier) ----------------------- */

.wp-block-explicatos-panel-list.ex-panels {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-explicatos-panel-list .ex-panel__title {
	font-family: var(--ex-display);
}

.wp-block-explicatos-panel-list .ex-panel__text {
	margin: 0;
	color: var(--ex-on-surface-muted);
}

.wp-block-explicatos-panel-list .ex-panel__kicker {
	color: var(--ex-blue);
	font-family: var(--ex-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.wp-block-explicatos-panel-list.ex-panels--value {
	display: grid;
	grid-template-columns: repeat(var(--ex-panels-columns, 4), 1fr);
	border-block-start: 1px solid var(--ex-rule);
}

.wp-block-explicatos-panel-list.ex-panels--value .ex-panel {
	padding: 32px 28px 8px 0;
	border-inline-end: 1px solid var(--ex-rule);
}

.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-2 .ex-panel:not(:nth-child(2n + 1)),
.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-3 .ex-panel:not(:nth-child(3n + 1)),
.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-4 .ex-panel:not(:nth-child(4n + 1)) {
	padding-inline-start: 28px;
}

.wp-block-explicatos-panel-list.ex-panels--value .ex-panel:last-child {
	border-inline-end: 0;
}

.wp-block-explicatos-panel-list.ex-panels--value .ex-panel__title {
	margin: 12px 0 8px;
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
}

.wp-block-explicatos-panel-list.ex-panels--value .ex-panel__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* step: numbered timeline */
.wp-block-explicatos-panel-list.ex-panels--step {
	counter-reset: ex-step;
}

.wp-block-explicatos-panel-list.ex-panels--step .ex-panel {
	counter-increment: ex-step;
	position: relative;
	margin-inline-start: 16px;
	padding: 0 0 30px 62px;
	border-inline-start: 1px solid var(--ex-rule);
}

.wp-block-explicatos-panel-list.ex-panels--step .ex-panel:last-child {
	padding-block-end: 0;
	border-inline-start-color: transparent;
}

.wp-block-explicatos-panel-list.ex-panels--step .ex-panel::before {
	content: counter(ex-step, decimal-leading-zero);
	position: absolute;
	inset-inline-start: -16px;
	top: -4px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ex-ink);
	color: #fff;
	font-family: var(--ex-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	font-feature-settings: "tnum" 1;
}

.wp-block-explicatos-panel-list.ex-panels--step .ex-panel__title {
	margin-block-end: 5px;
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
}

.wp-block-explicatos-panel-list.ex-panels--step .ex-panel__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* feature: ruled rows */
.wp-block-explicatos-panel-list.ex-panels--feature .ex-panel {
	padding-block: 20px;
	border-block-start: 1px solid var(--ex-rule);
}

.wp-block-explicatos-panel-list.ex-panels--feature .ex-panel__title {
	margin-block-end: 5px;
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
}

.wp-block-explicatos-panel-list.ex-panels--feature .ex-panel__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* tier: pricing card stack */
.wp-block-explicatos-panel-list.ex-panels--tier {
	padding: 8px;
	border: 1px solid var(--ex-rule);
	border-radius: var(--ex-radius);
	background: rgb(255 255 255 / 4.5%);
}

.wp-block-explicatos-panel-list.ex-panels--tier .ex-panel {
	position: relative;
	padding: 24px 26px;
	border-block-end: 1px solid var(--ex-rule);
}

.wp-block-explicatos-panel-list.ex-panels--tier .ex-panel:last-child {
	border-block-end: 0;
}

.wp-block-explicatos-panel-list.ex-panels--tier .ex-panel.is-highlighted {
	border-radius: 2px;
	background: rgb(62 143 212 / 13%);
}

.wp-block-explicatos-panel-list.ex-panels--tier .ex-panel__title {
	margin-block-end: 6px;
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}

.wp-block-explicatos-panel-list.ex-panels--tier .ex-panel__text {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.wp-block-explicatos-panel-list .ex-panel__badge {
	position: absolute;
	top: 22px;
	inset-inline-end: 24px;
	padding: 3px 8px;
	border-radius: 2px;
	background: var(--ex-blue-2);
	color: var(--ex-ink);
	font-family: var(--ex-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

@media (width <= 960px) {
	.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-2 .ex-panel:not(:nth-child(2n + 1)),
	.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-3 .ex-panel:not(:nth-child(3n + 1)),
	.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-4 .ex-panel:not(:nth-child(4n + 1)) {
		padding-inline-start: 0;
	}

	/* Scoped to the two-column band only. */
	@media (width > 560px) {
		.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-2 .ex-panel:not(:nth-child(2n + 1)),
		.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-3 .ex-panel:not(:nth-child(2n + 1)),
		.wp-block-explicatos-panel-list.ex-panels--value.ex-panels--cols-4 .ex-panel:not(:nth-child(2n + 1)) {
			padding-inline-start: 22px;
		}
	}

	.wp-block-explicatos-panel-list.ex-panels--value { grid-template-columns: 1fr 1fr; }

	.wp-block-explicatos-panel-list.ex-panels--value .ex-panel {
		padding-inline-end: 22px;
		border-block-end: 1px solid var(--ex-rule);
	}
	.wp-block-explicatos-panel-list.ex-panels--value .ex-panel:nth-child(2n) { border-inline-end: 0; }
}

@media (width <= 560px) {
	.wp-block-explicatos-panel-list.ex-panels--value { grid-template-columns: 1fr; }
	.wp-block-explicatos-panel-list.ex-panels--value .ex-panel { border-inline-end: 0; }
}