/* ============================================================
   Pagina Servizi - trascrizione del blocco <style> di
   servizi.html (.service-detail, .product-grid, .info-box)
   dell'HTML di riferimento, dove queste regole stanno in
   pagina e non in components.css.
   .section, .section-header e .section-desc non sono qui:
   sono primitive condivise e stanno in style.css.
   ============================================================ */

/* ─── DETTAGLIO SERVIZIO ─────────────────────────────── */
/* Griglia a due colonne, non core/columns: il riferimento impila a 860px e
   core/columns impila a 782px, che nell'editor non e' modificabile. */
.service-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

/* Inverte le due colonne senza toccare l'ordine dei blocchi */
.service-detail.reverse {
	direction: rtl;
}

.service-detail.reverse > * {
	direction: ltr;
}

/* Il figlio diretto: nel riferimento .service-detail-text contiene solo <p> di
   testo, mentre qui dentro finisce anche il <p> dell'info box, che ha misure
   sue. Senza `>` erediterebbe corpo, colore e interlinea da qui. */
.service-detail-text > h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.3rem);
	line-height: 1.2;
	margin-block: 0 18px;
}

.service-detail-text > p {
	font-size: 1rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.8;
	margin-block: 0 18px;
}

.service-detail-text > p:last-of-type {
	margin-bottom: 0;
}

/* ─── IMMAGINE ───────────────────────────────────────── */
/* Nel riferimento l'immagine sta in un <div> vuoto che fa da colonna; qui la
   colonna e' il <figure> di core/image e la classe .service-img sta su quello. */
#materiale .service-detail {
	align-items: stretch;
}

#materiale .service-detail > .service-img {
	display: flex;
	margin: 0;
}

#materiale .service-detail > .service-img img {
	width: 100%;
	min-height: 420px;
	object-fit: cover;
	/* alto-sx, alto-dx, basso-dx, basso-sx */
	border-radius: 72px var(--wp--custom--radius-lg) var(--wp--custom--radius-lg) 72px;
	border: 1px solid var(--wp--preset--color--border-line);
}

/* ─── ELENCO PRODOTTI ────────────────────────────────── */
/* Nel riferimento sono <div class="product-item">. Qui e' una lista vera, cosi'
   il cliente aggiunge una voce con Invio invece di duplicare un blocco e
   ricordarsi la classe: le misure di .product-item passano quindi sui <li>. */
.product-grid {
	display: flex;
	flex-direction: column;
	list-style: none;
}

/* Il margine e' scritto sul figlio diretto perche' il blockGap globale che core
   applica ai figli del gruppo ha la stessa specificita': cosi' non dipende
   dall'ordine di caricamento dei fogli. */
.service-detail-text > .product-grid {
	margin-block: 24px 0;
}

.product-grid li {
	padding: 11px 0;
	font-size: .9rem;
	color: var(--wp--preset--color--text-base);
	line-height: 1.4;
	border-bottom: 1px solid var(--wp--preset--color--border-line);
}

/* ─── INFO BOX ───────────────────────────────────────── */
.info-box {
	display: flex;
	gap: 16px;
	padding: 20px 22px;
	background: var(--wp--preset--color--secondary);
	border: none;
	border-radius: 8px;
	margin-top: 24px;
}

.info-box-icon {
	font-size: 1.4rem;
	flex-shrink: 0;
	margin-top: 1px;
}

.info-box-text {
	font-size: .88rem;
	color: rgba(255, 255, 255, .9);
	line-height: 1.7;
}

/* Il titolino dell'info box: nel riferimento e' uno <strong> a inizio testo,
   reso a blocco, non un heading. */
.info-box-text > strong:first-child {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--wp--preset--color--white);
	font-size: .9rem;
}

.info-box-text strong {
	color: var(--wp--preset--color--white);
}

/* Nel riferimento i due link dell'info box portano uno style inline con colore
   e peso, ma il colore che si vede a schermo non e' quello: e' questo. Nel
   nostro contenuto lo stile inline non c'e', quindi qui non c'e' niente da
   battere - l'unica altra regola che colora questo link e' quella dei link di
   theme.json, che sta dentro :where() e ha specificita' zero. */
.info-box-text a {
	color: var(--wp--preset--color--honey-light);
	font-weight: 600;
}

/* ─── ELENCO DOCUMENTI ───────────────────────────────── */
/* .doc-list e .doc-item di iniziative.css, con sopra le riscritture del blocco
   <style> di servizi.html: gap e padding piu' stretti, raggio 6px, corpo .9rem
   e niente ombra sull'hover. */
.doc-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.service-detail .doc-list {
	margin-top: 24px;
}

/* Nel riferimento .doc-item e' l'ancora; core/file la avvolge in un <div>, che
   qui fa da riga: cornice, fondo e raggio stanno sul <div>, mentre l'ancora lo
   riempie e porta il padding, cosi' la riga resta cliccabile per intero.
   Il <div> NON puo' essere display: contents: senza box l'IntersectionObserver
   di reveal.js non lo vede mai e la voce resta senza effetto d'entrata. */
.doc-list .doc-item {
	display: flex;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-line);
	border-radius: 6px;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
	cursor: pointer;
}

.doc-list .doc-item > a {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	font-size: .9rem;
	font-weight: 500;
}

.doc-list .doc-item:hover {
	border-color: var(--wp--preset--color--honey);
	box-shadow: none;
}

.doc-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--wp--preset--color--amber);
}

/* ─── ELENCO CONVENZIONI ─────────────────────────────── */
/* Le due colonne restano ancorate in alto: l'elenco e' molto piu' alto del
   testo, e centrarlo lascerebbe il titolo a meta' pagina. */
#convenzioni .service-detail {
	align-items: start;
}

.conv-list {
	display: flex;
	flex-direction: column;
}

.service-detail .conv-list {
	margin-top: 8px;
}

.conv-item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 20px 4px;
	border-bottom: 1px solid var(--wp--preset--color--border-line);
}

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

.conv-item:last-child {
	border-bottom: none;
}

.conv-num {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	min-width: 44px;
	line-height: 1;
	flex-shrink: 0;
	margin-block: 0;
}

.conv-body h4 {
	font-size: .95rem;
	font-weight: 700;
	margin-block: 0 5px;
}

.conv-body p {
	font-size: .87rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.65;
	margin-block: 0;
}

/* Filo di separazione fra le convenzioni e le riviste: nel riferimento e' un
   <hr> dentro un .container, qui e' core/separator, che di suo disegna una riga
   di 2px del colore del testo. */
.section-divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border-line);
	margin: 0;
}

/* ─── ABBONAMENTI RIVISTE ────────────────────────────── */
/* Qui l'info box non e' in colonna ma da solo sotto l'intestazione: piu' stretto
   e centrato. */
#riviste .info-box {
	max-width: 640px;
	margin-inline: auto;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 860px) {
	.service-detail,
	.service-detail.reverse {
		grid-template-columns: 1fr;
		direction: ltr;
		gap: 40px;
	}
}