/*
 * Il tutorial sul fronte. Testata, passi, note e FAQ vengono dal foglio di
 * stile del tema (regole della ricetta): qui c'e' solo quello che la ricetta
 * non ha. Flat: bordi e colori della palette, niente ombre.
 */

/* Cosa serve */
/*
 * Le colonne laterali restano `auto`: il tema centra ogni figlio di
 * .entry-content (larghezza 88vw, massimo sm-max-width) coi margini
 * automatici, e un `margin: 0 0 32px` li azzerava spingendo il riquadro
 * contro il bordo sinistro su desktop (il-fritto-perfetto, 29/09/2026).
 */
#main .entry-content .sp-tutorial-needs {
	padding: 10px 30px 30px;
	margin: 0 auto 32px;
	background-color: var(--paletteColor8);
}

#main .entry-content .sp-tutorial-needs h2,
#main .entry-content .sp-tutorial-needs h3 {
	color: var(--paletteColor2);
}

#main .entry-content .sp-tutorial-needs h3 {
	margin-top: 16px;
	font-size: 18px;
}

.sp-tutorial-needs-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

.sp-tutorial-needs-list li {
	position: relative;
	margin: 0 0 12px;
	padding: 0 0 0 18px;
}

.sp-tutorial-needs-list li:before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	left: 0;
	top: 9px;
	background: url('data:image/svg+xml,%3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill:%23FFFFFF;stroke:%234FB2B1;stroke-width:2;" xml:space="preserve"%3E%3Ccircle id="dot" class="st0" cx="5" cy="5" r="4"/%3E%3C/svg%3E') no-repeat center;
}

/* Scheda in testata: tempo e numero di passi */
.sp-recipe-template-default .sp-recipe .sp-recipe-meta .sp-tutorial-time:before {
	background-image: url('data:image/svg+xml,%3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="fill:none;stroke:%234fb2b1;stroke-width:40;"%3E%3Cg%3E%3Ccircle cx="256" cy="256" r="156.7"/%3E%3Cpolyline points="256,136.8 256,256 332.3,256"/%3E%3Ccircle cx="256" cy="256" r="230"/%3E%3C/g%3E%3C/svg%3E');
}

.sp-recipe-template-default .sp-recipe .sp-recipe-meta .sp-tutorial-steps-count:before {
	background-image: url('data:image/svg+xml,%3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="fill:none;stroke:%234fb2b1;stroke-width:40;stroke-linecap:round;"%3E%3Cline x1="180" y1="120" x2="460" y2="120"/%3E%3Cline x1="180" y1="256" x2="460" y2="256"/%3E%3Cline x1="180" y1="392" x2="460" y2="392"/%3E%3Ccircle cx="86" cy="120" r="30"/%3E%3Ccircle cx="86" cy="256" r="30"/%3E%3Ccircle cx="86" cy="392" r="30"/%3E%3C/svg%3E');
}

/* Testata: riassunto e indice sotto la scheda, nella colonna accanto alla foto */
.sp-tutorial-lead {
	margin: 0 auto;
	width: var(--container-width);
}

.sp-tutorial-summary {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--paletteColor3);
}

.sp-tutorial-index {
	padding: 16px 20px;
	border: 1px solid var(--paletteColor8);
	background: var(--paletteColor8);
	border-radius: 6px;
}

.sp-tutorial-index-title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--paletteColor2);
}

.sp-tutorial-index ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-tutorial-index li {
	margin: 0;
	padding: 6px 0 6px 18px;
	position: relative;
	font-size: 15px;
	line-height: 1.4;
}

.sp-tutorial-index li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 2px solid var(--paletteColor1);
	background: #fff;
}

.sp-tutorial-index a {
	color: var(--paletteColor5);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.sp-tutorial-index a:hover,
.sp-tutorial-index a:focus {
	color: var(--paletteColor2);
	border-bottom-color: var(--paletteColor2);
}

@media screen and (min-width: 720px) {
	.sp-recipe-template-default .sp-recipe .sp-recipe-header .sp-recipe-thumbnail {
		grid-row: span 3;
	}

	.sp-recipe-template-default .sp-recipe .sp-recipe-header .sp-tutorial-lead {
		grid-column: 2;
		grid-row: 3;
		width: 100%;
		align-self: start;
	}
}

/* Chiusura: il paragrafo coi rimandi, separato da un bordo */
.sp-tutorial-closing {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--paletteColor8);
}

/* Blocchi a titolo libero */
.sp-tutorial-block {
	margin: 0 auto 24px;
}

@media screen and (max-width: 719px) {
	#main .entry-content .sp-tutorial-needs {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}