/* NavalHEAD — Sezione About (template-parts/about.php). La galleria è in gallery.css. */

.nh-about {
	--nh-ab-indent: clamp(4rem, 31vw, 28rem);       /* inizio dei testi dal bordo sinistro */
	--nh-ab-gutter: clamp(1.25rem, 13.8vw, 8rem);   /* margine sinistro dell'etichetta */
	--nh-ab-ring: 1.5rem;                           /* diametro del cerchio */
	--nh-ab-ring-gap: clamp(0.75rem, 1.5vw, 1.25rem); /* spazio tra cerchio e testo */
	--nh-ab-stroke: 1px;                            /* spessore di linea e cerchio */
	--nh-ab-dot-x: calc(var(--nh-ab-indent) - var(--nh-ab-ring-gap) - var(--nh-ab-ring) / 2); /* centro del cerchio */
	padding: clamp(3rem, 7vw, 6rem) 0;
	background: #fff;
    position: relative;
}

.nh-about__head {
	padding: 0 var(--nh-ab-gutter);
	margin-bottom: clamp(2.5rem, 7vw, 6rem);
}

.nh-about__label {
    position: absolute;
    top: clamp(1.5rem, 7vw, 6rem);
    left: var(--nh-ab-indent);
    display: inline-block;
    margin: 0;
    color: #fff;
    font-size: clamp(2.8rem, 4.5vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--nh-blue);
    /* color: transparent; */
    /* -webkit-text-fill-color: transparent; */
    /* -webkit-text-stroke: 2px color-mix(in srgb, var(--nh-softblue) 50%, #fff); */

}

/* Testi: rientrati a destra del segno grafico. */
.nh-about__text {
	position: relative;
	box-sizing: border-box;
	padding: 0 clamp(1.25rem, 5vw, 4rem) 0 var(--nh-ab-indent);
	color: var(--nh-ink);
	font-size: clamp(1rem, 1.35vw, 1.25rem);
	line-height: 1.45;
}

.nh-about__text > * {
	max-width: 34rem; /* righe di lettura comoda, come nel mockup */
	margin: 0;
}
.nh-about__text > p {
	margin-bottom: 20px;
}
.nh-about__text a {
	color: var(--nh-blue);
}

/* Spazio tra testo e galleria, e tra galleria e secondo testo. */
.nh-about__text + .nh-gallery,
.nh-gallery + .nh-about__text {
	margin-top: clamp(3rem, 7vw, 5.5rem);
}

/* Segno grafico: linea dal bordo sinistro che entra nel cerchio fino al pallino, all'altezza della prima riga. */
.nh-about__text::before,
.nh-about__text::after {
	content: "";
	position: absolute;
	top: 0.725em; /* metà dell'interlinea: centro della prima riga */
}

.nh-about__text::before {
	left: 0;
	width: var(--nh-ab-dot-x); /* finisce esattamente al centro del cerchio */
	height: var(--nh-ab-stroke);
	background: var(--nh-yellow);
	translate: 0 -50%;
}

.nh-about__text::after {
	left: calc(var(--nh-ab-dot-x) - var(--nh-ab-ring) / 2);
	box-sizing: border-box;
	width: var(--nh-ab-ring);
	height: var(--nh-ab-ring);
	border: var(--nh-ab-stroke) solid var(--nh-yellow);
	border-radius: 50%;
	translate: 0 -50%;
	background: radial-gradient(circle, var(--nh-yellow) calc(var(--nh-ab-ring) / 6), transparent calc(var(--nh-ab-ring) / 6 + 0.5px));
}

/* Su schermi stretti il segno grafico occupa troppo: testo a tutta larghezza, segno nascosto. */
@media (max-width: 599px) {
	.nh-about {
		--nh-ab-indent: 1.25rem;
	}

	.nh-about__text::before,
	.nh-about__text::after {
		display: none;
	}
}