body > div {
	padding: 0 20px;
}

/*===================================================
-------------------- PROJECT SHOW -------------------
===================================================*/
.project-show {
	display: flex;
	flex-flow: column;
	gap: 40px;
}

.project-description {
	line-height: 1.4;
	font-size: 1.05rem;
	padding-block: 40px;
	background-image: linear-gradient(150deg, var(--c-accent-dark) 65%, var(--c-accent-green) 65%);
	color: var(--c-background);
	margin-bottom: 30px;
}

.project-description h2, .project-description h3{
	color: var(--c-accent-mint);
}

.project-description li::marker{
	color: var(--c-accent-mint);
}

.project-description strong{
	color: var(--c-accent-mint);
}

.project-extract-container h4, .code-card h4 {
	text-shadow: color(from var(--c-accent-green) srgb r g b / 0.1) 2px 2px;
}

.project-extract-container {
	display: flex;
	flex-flow: column;
	margin: 0 30px;
	gap: 40px;

	padding: 30px;
	box-shadow: 15px 15px 30px color(from var(--c-accent-green) srgb r g b / 0.4);
	border-radius: 20px;
	background-color: white;
}

.project-extract-container h4 {
	margin: 0;
}

.project-extract {
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	gap: 20px;
}

.project-extract div{
	flex: 1;
	min-width: 300px;
}

.extract-description p {
	line-height: 1.6;
	font-size: 1.05rem;
	max-width: 65ch;
	margin: 0 auto;
}

.extract-illustration img{
	aspect-ratio: 2.2;
	min-width: 300px;
	width: 100%;
	border-radius: 10px;
	border: 1px solid #22272e;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.project-deep-dive > p {
	font-size: 1.2rem;
	text-align: center;
}

.project-deep-dive h2 {
	text-align: center;
}

/*===================================================
---------------------- CODICE -----------------------
===================================================*/
pre:has(> code) {
	width: 100%;
	border-radius: 8px !important;
	margin: 0 !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	padding: 0 1em !important;
	line-height: 1.25 !important;
}

pre > code {
	font-size: 0.95rem !important;
	line-height: inherit !important;
}

.code-cards-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-top: 20px;
	margin-bottom: 50px;
}

.code-card {
	display: flex;
	flex-direction: column;
	background-color: white; /* Per staccare visivamente dal body grigio chiaro */
	padding: 25px;
	border-radius: 12px;
	border: 1px solid var(--c-accent-green);
	box-shadow: 0 10px 20px color(from var(--c-accent-dark) srgb r g b / 0.18);
	min-width: 0;
}

.code-card hr {
	margin: 15px 0 30px 0;
	align-self: center;
}

.code-card .code-snippet {
	margin-block: 20px;
}

.code-snippet {
	width: 100%;
	overflow-x: auto;
	min-height: fit-content;
}

.code-snippet > pre {
	width: 100%;
	min-width: fit-content;
}

p > code {
	padding: 0 0.15em !important;
	margin: 0 0.05em !important;
	background-color: #ddd !important;
	color: var(--c-text-main) !important;
}

@media (max-width:  800px) {
	.project-extract-container {
		margin: 0;
	}

	.project-extract {
		flex-flow: column;
		gap: 10px;
	}

	.extract-illustration{
		width: var(--layout-width-small);
		align-self: center;
	}

	.code-card, .code-card * {
		width: 100% !important;
	}

	.code-cards-grid {
		width: max-content;
		grid-template-columns: 1fr;
		max-width: 100%;
	}

	.extract-description {
		padding: 0;
	}

	/* Riordinamento forzato per incolonnamento */
	.project-extract h4 {
		order: 1;
	}
	.extract-description {
		order: 2;
	}
	.extract-illustration {
		order: 3;
	}
}