/*
 * am-pricing — a pricing / tier-comparison table: several tiers side by side, each
 * with an optional icon, a name, a price, a feature list (what's included) and a
 * CTA. Mark one tier --featured to highlight it. Tiers are equal height (grid), and
 * the action is pushed to the bottom so buttons line up.
 *
 * Structure:
 *   am-pricing [--3]                    grid of tiers (2-up at md; --3 = 3-up at lg)
 *     am-pricing__tier [--featured]
 *       am-pricing__badge               optional label (e.g. "Populärast")
 *       am-pricing__icon > svg          optional inline SVG at the top
 *       am-pricing__name                <h3>
 *       am-pricing__tagline             optional one-liner
 *       am-pricing__price               big number + am-pricing__period (e.g. "/mån")
 *       am-pricing__features            <ul>; <li> included, <li class="is-excluded"> not
 *       am-pricing__action > a.am-cta.am-cta--block
 *
 * In Elementor: Containers for am-pricing / __tier / __action; an Icon widget for
 * __icon; a Heading for __name; Text for tagline/price; an HTML widget for the
 * features <ul>; a Button (am-cta am-cta--block) for the action.
 */

.am-pricing {
	display: grid;
	gap: var(--am-space-500);
	grid-template-columns: 1fr;
	align-items: stretch;
}

@media (min-width: 768px) {
	.am-pricing {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.am-pricing--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.am-pricing__tier {
	display: flex;
	flex-direction: column;
	padding: var(--am-space-600);
	background-color: var(--am-color-surface);
	border: 1px solid var(--am-color-border);
	border-radius: var(--am-radius-lg);
	box-shadow: var(--am-shadow-sm);
}

.am-pricing__tier--featured {
	border-color: var(--am-color-accent);
	box-shadow: var(--am-shadow-md);
}

.am-pricing__badge {
	align-self: flex-start;
	margin-block-end: var(--am-space-400);
	padding: var(--am-space-100) var(--am-space-300);
	background-color: var(--am-color-accent);
	color: var(--am-color-on-accent);
	border-radius: var(--am-radius-full);
	font-size: var(--am-font-size-100);
	font-weight: var(--am-weight-semibold);
	letter-spacing: var(--am-tracking-wide);
	text-transform: uppercase;
}

.am-pricing__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--am-space-700);
	height: var(--am-space-700);
	margin-block-end: var(--am-space-300);
	color: var(--am-color-accent);
	font-size: var(--am-space-600); /* sizes an icon-font <i>; SVGs use the rule below */
	line-height: 1;
}

.am-pricing__icon svg {
	width: 100%;
	height: 100%;
}

.am-pricing__name {
	margin-block: 0 var(--am-space-200);
	font-size: var(--am-font-size-500);
}

.am-pricing__tagline {
	margin-block: 0 var(--am-space-400);
	color: var(--am-color-text-muted);
}

.am-pricing__price {
	font-family: var(--am-font-sans);
	font-weight: var(--am-weight-bold);
	font-size: var(--am-font-size-700);
	line-height: var(--am-leading-tight);
	color: var(--am-color-heading);
}

.am-pricing__period {
	margin-inline-start: var(--am-space-100);
	color: var(--am-color-text-muted);
	font-size: var(--am-font-size-200);
	font-weight: var(--am-weight-regular);
}

.am-pricing__features {
	list-style: none;
	margin-block: var(--am-space-500);
	padding: 0;
	display: grid;
	gap: var(--am-space-300);
}

.am-pricing__features li {
	position: relative;
	padding-inline-start: var(--am-space-500);
}

/* Included — a check in the accent colour. */
.am-pricing__features li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15em;
	width: 0.5em;
	height: 0.85em;
	border: solid var(--am-color-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Not included — muted text + a dash instead of a check. */
.am-pricing__features li.is-excluded {
	color: var(--am-color-text-muted);
}

.am-pricing__features li.is-excluded::before {
	inset-block-start: 0.55em;
	width: 0.7em;
	height: 0;
	border: 0;
	border-block-start: 2px solid var(--am-color-border);
	transform: none;
}

/* Push the action to the bottom so buttons line up across tiers. */
.am-pricing__action {
	margin-block-start: auto;
	padding-block-start: var(--am-space-400);
}