/* ============================================================
   Diventa socio - .socio-grid, .intro-text, .vantaggi-list e
   .vantaggio-item dell'HTML di riferimento.

   Nel riferimento queste regole stanno in due posti: la forma
   base in associazione.css e le riscritture nel blocco <style>
   di diventa-socio.html, che ne cambia meta'. Qui sono fuse in
   un solo valore, quello che si vede davvero in pagina. Della
   forma base restano fuori lo sfondo bianco, il bordo pieno,
   il raggio e l'ombra all'hover: la pagina li annulla tutti,
   e riscriverli per poi toglierli sarebbe CSS morto.
   ============================================================ */

.socio-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

/* Due classi: il margine di un figlio diretto di un gruppo lo azzera
   .wp-container-... > *, che con una sola vale quanto questa regola. */
.socio-grid .intro-text h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.3rem);
	font-weight: 400;
	margin-bottom: 16px;
}

.socio-grid .intro-text p {
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--wp--preset--color--text-muted);
}

.intro-text p strong {
	color: var(--wp--preset--color--secondary);
}

.vantaggi-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Nel riferimento e' una <ul> di <li>: core/list-item non accetta blocchi
   annidati ne' una className, quindi la voce e' un gruppo. Le regole sono per
   classe, non per elemento, quindi valgono identiche. */
.vantaggio-item {
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-line);
}

.vantaggio-item:first-child { padding-top: 0; }

.vantaggio-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.vantaggio-item strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--wp--preset--color--text-base);
}

.vantaggio-item p {
	font-size: .95rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* Nel riferimento lo <strong> del titolo e' figlio diretto del <div> ed eredita
   la riga del corpo. Qui core lo obbliga dentro un core/paragraph, che la regola
   qui sopra ha gia' portato a 1.65: senza questo, il titolo viene 26.4px invece
   di 25.6. */
.vantaggio-item p:first-child {
	line-height: inherit;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 960px) {
	.socio-grid { grid-template-columns: 1fr; }
}

/* ─── ISCRIVITI: MODULI ──────────────────────────────── */
/* Anche qui la forma finale nasce da due posti: .moduli-card, .moduli-header,
   .moduli-steps e .rinnovo-info in associazione.css, e le riscritture nel
   blocco <style> della pagina, che della card annulla sfondo, bordo e raggio e
   li sposta sulla griglia che le contiene. Qui c'e' solo il risultato. */
.moduli-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--border-line);
	border-radius: 8px;
	overflow: hidden;
}

.moduli-card {
	display: flex;
	flex-direction: column;
	padding: 32px;
}

.moduli-card + .moduli-card {
	border-left: 1px solid var(--wp--preset--color--border-line);
}

.moduli-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.moduli-card .moduli-header h3 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--wp--preset--color--secondary);
}

.moduli-header p {
	font-size: 1rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.6;
	margin: 0;
}

.moduli-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.step-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* Nel riferimento e' uno <span>, ma .step-item e' un flex container e ogni
   figlio diventa comunque un elemento di blocco: un core/paragraph al suo posto
   ha le stesse misure. */
.step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--honey);
	color: var(--wp--preset--color--white);
	font-size: .78rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Nel riferimento questa regola prende il solo paragrafo del testo, perche' il
   numero li' e' uno <span>. Qui il numero e' un paragrafo anche lui, quindi il
   selettore va ristretto o gli porta via corpo, colore e padding. */
.step-item p:last-child {
	font-size: 1rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.55;
	margin: 0;
	padding-top: 3px;
}

.step-item a { color: var(--wp--preset--color--amber); font-weight: 600; }
.step-item a:hover { text-decoration: underline; }

.rinnovo-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.rinnovo-info-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 1rem;
}

.rinnovo-info-item p {
	color: var(--wp--preset--color--text-muted);
	line-height: 1.7;
	margin: 0;
}

.rinnovo-info-item strong { color: var(--wp--preset--color--text-base); }

/* core/button interpone un .wp-block-button fra il contenitore e l'<a>, quindi
   il margine automatico e la larghezza piena di .full-width scalano di un
   livello. Il .wp-block-buttons fa le veci di .moduli-actions, che nella card
   del rinnovo il riferimento non ha nemmeno: li' l'<a> e' figlio diretto. */
.moduli-card > .wp-block-buttons {
	margin-top: auto;
}

.moduli-card .wp-block-button { width: 100%; }

.moduli-card .wp-element-button {
	width: 100%;
	justify-content: center;
}

.btn-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ─── ISCRIVITI: SEGRETERIA ──────────────────────────── */
/* La forma base e' un riquadro arancione a colonna; la pagina lo svuota e mette
   i tre recapiti su una riga sola separati da un filetto. */
.segreteria-box {
	margin-top: 56px;
	text-align: center;
}

.segreteria-box h4 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.segreteria-box > p {
	font-size: .88rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.55;
	margin-bottom: 16px;
}

.seg-contacts {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
}

/* Nel riferimento .seg-contact sta sull'<a>; qui sta sul core/paragraph che lo
   contiene, altrimenti i tre recapiti non sono piu' fratelli e il filetto fra
   uno e l'altro non si disegna. Il riquadro imbottito resta lo stesso, quindi
   anche l'area sensibile al passaggio del mouse. */
.seg-contact {
	display: inline-block;
	padding: 0 18px;
	font-size: .88rem;
	font-weight: 500;
	color: var(--wp--preset--color--amber);
	transition: color var(--wp--custom--transition), text-decoration-color var(--wp--custom--transition);
}

.seg-contact + .seg-contact {
	border-left: 1px solid var(--wp--preset--color--border-line);
}

.seg-contact-text { color: var(--wp--preset--color--text-muted); }

.seg-contact:hover a { text-decoration: underline; }

@media (max-width: 860px) {
	.moduli-grid { grid-template-columns: 1fr; }
	.moduli-card + .moduli-card {
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--border-line);
	}
}