features-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4em;
	padding: 6em 2em;
	max-width: 80em;
	margin: 0 auto;

	/* Defines Container for responsive grid reflowing */
	container-type: inline-size;
}

bento-layout {
	display: grid;
	gap: 1.5em;
	width: 100%;

	/* Default Narrow State (< 700px) */
	grid-template-columns: 1fr;
}

/* Wide Desktop State (>= 700px) */
@container (min-width: 700px) {
	bento-layout {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Secondary row stays a clean 3-col split */
	bento-layout.secondary {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Flagship card stretches across the first two columns */
	bento-card.flagship {
		grid-column: span 2;

		/* Layout shift to utilize the horizontal space */
		flex-direction: row;
		align-items: center;
		gap: 2em;

		card-header {
			flex-shrink: 0;
			width: 14em; /* Sets a strict column width for the header inside the span */
		}
	}
}

bento-card {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 2em;

	/* Luxury Glass Base */
	border-radius: 1em;
	background: var(--glass-bg);
	border: var(--glass-border);
	box-shadow:
		var(--card),
		inset 0 0 10px 5px light-dark(rgb(182, 181, 181), rgb(69, 69, 69));
	backdrop-filter: blur(1.5em);

	/* Micro-interaction on hover */
	translate: 0 0;
	transition:
		translate 0.3s ease-out,
		border-color 0.3s ease-out,
		background-color 0.3s ease-out;

	&:hover {
		translate: 0 -0.2em;
		border-color: light-dark(hsla(281, 100%, 50%, 0.3), hsla(281, 100%, 75%, 0.3));
		background: light-dark(hsla(220, 20%, 98%, 0.9), hsla(220, 20%, 15%, 0.8));
	}

	&.small {
		padding: 1.5em;

		card-header h3 {
			font-size: 1.1rem;
		}
		p {
			font-size: 0.9rem;
		}
	}

	card-header {
		display: flex;
		align-items: flex-start;
		gap: 1em;

		h3 {
			display: flex;
			align-items: center;
			flex-wrap: wrap; /* Allows badge to drop down if card gets squished */
			gap: 0.5em;

			margin: 0;
			font-size: 1.25rem;
			font-weight: 700;
			color: var(--text-main);
			line-height: 1.3;
		}
	}

	card-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		padding: 0.6em;
		border-radius: 0.6em;
		background: light-dark(hsla(220, 20%, 8%, 0.5), hsla(0, 0%, 100%, 0.8));
		color: var(--brand-violet-text);
		box-shadow: var(--neu-pressed);

		svg {
			width: 1.4em;
			height: 1.4em;
			fill: none;
			stroke: currentColor;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
		}
	}

	p {
		margin: 0;
		font-size: 0.95rem;
		line-height: 1.6;
		color: var(--text-muted);
	}
}

bento-layout svg {
	&.sliders path {
		d: path("M4 21v-7m0-4V3m8 18v-9m0-4V3m8 18v-5m0-4V3M1 14h6M9 8h6m2 8h6");
	}
	&.article path {
		d: path(
			"M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
		);
	}
	&.camera path {
		d: path(
			"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z M9 13a3 3 0 1 0 6 0 3 3 0 0 0-6 0z"
		);
	}
	&.sidebar path {
		d: path("M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm5 0v18");
	}
	&.pdf path {
		d: path("M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8");
	}
	&.video path {
		d: path("M23 7l-7 5 7 5V7z M1 5h15v14H1z");
	}
	&.highlight path {
		d: path("M12 19l7-7 3 3-7 7-3-3z M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z M2 2l22 22");
	}
	&.users path {
		d: path(
			"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75"
		);
	}
	&.sparkles path {
		d: path("M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z");
		fill: currentColor;
		stroke: none;
	}
	&.shield path {
		d: path("M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z");
	}
	&.command path {
		d: path(
			"M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"
		);
	}
	&.lock path {
		d: path(
			"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
		);
	}
}