/**
 * Posizioni aperte e modulo di candidatura.
 *
 * Due colonne asimmetriche: a sinistra l'elenco delle posizioni, che si aprono
 * una a una, a destra il modulo. La proporzione è 1:2 — il modulo ha molti più
 * campi che titoli l'elenco.
 *
 * L'elenco è fatto di `core/details`: apertura e chiusura, stato annunciato e
 * comando da tastiera arrivano dal browser. Il riferimento li costruisce con
 * un bottone, `aria-expanded` e un pannello `hidden` mossi da JavaScript —
 * stesso risultato, ma con del codice da mantenere e da tenere accessibile.
 *
 * Del modulo qui non c'è niente: la sua veste è `form-skin`, il componente
 * condiviso in assets/css/form.css, e il contenitore se la dichiara nel
 * pattern. Questo foglio si ferma all'impaginato della sezione.
 */

.posizioni {
	/* Meno aria sopra: la sezione precedente ne ha già lasciata sotto. */
	padding-block: 40px clamp( 64px, 8vw, 120px );
}

.posizioni__inner {
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.wp-block-group.posizioni__inner > * {
	margin-block-start: 0;
}

.posizioni__title {
	font-weight: 400;
	line-height: 1.1;
}

.wp-block-group.posizioni__inner > .posizioni__grid {
	margin-block-start: 40px;
}

/* `align-items: start` perché le due colonne non si allunghino l'un l'altra:
   l'elenco è corto, il modulo lungo, e ognuno finisce dove finisce. */
.posizioni__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 2fr );
	align-items: start;
	gap: clamp( 40px, 6vw, 96px );
}

.wp-block-group.posizioni__grid > * {
	margin-block-start: 0;
}

/* --- Elenco delle posizioni --------------------------------------------- */

.posizioni__elenco {
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-group.posizioni__elenco > * {
	margin-block-start: 0;
}

/* Le voci arrivano da un Query Loop: la lista è la `ul` del post template e
   ogni posizione sta dentro a una `li`. Nessuna delle due deve lasciare segno
   — la fisarmonica è fatta dei `details` che stanno dentro. */
.posizioni__lista > li {
	margin: 0;
}

/* `details.` e non `.posizione` da sola: la `li` del post template porta le
   classi di `get_post_class()`, e fra quelle c'è il nome del tipo di contenuto
   — `posizione` — che qui collide con la classe della voce. Senza il tag il
   filo di separazione si disegnerebbe due volte, sulla `li` e sul `details`. */
details.posizione {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Via il triangolino del browser: al suo posto c'è il segno più a destra.
   Servono due dichiarazioni — `list-style` per i browser moderni, lo
   pseudo-elemento per Safari, che ancora usa il suo. */
.posizione > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 24px;
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
	transition: color 0.2s ease;
}

.posizione > summary::-webkit-details-marker {
	display: none;
}

.posizione > summary:hover {
	color: var(--wp--preset--color--rosso);
}

/* Il segno più è uno pseudo-elemento del riepilogo: è un indicatore di stato,
   non contenuto, e lo stato lo annuncia già `<summary>`. */
.posizione > summary::after {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	/* Le due stanghette sono due sfumature piatte invece di due elementi in
	   più: una orizzontale e una verticale, disegnate al centro. */
	background-image: linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor );
	background-size: 50% 1.5px, 1.5px 50%;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.25s ease;
}

/* Aperto, il più ruota di 45° e si legge come una croce. */
.posizione[open] > summary::after {
	transform: rotate( 45deg );
}

.posizione__panel {
	padding-block-end: 24px;
	line-height: 1.7;
}

.posizione__panel > * {
	margin-block: 0 16px;
}

.posizione__panel > :last-child {
	margin-block-end: 0;
}

.posizione__panel strong {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.posizione__panel ul {
	list-style: disc;
	padding-left: 24px;
}

.posizione__panel li {
	margin-block-end: 8px;
}

.posizione__quote {
	font-weight: 700;
	color: var(--wp--preset--color--rosso);
}

/* --- Modulo di candidatura ---------------------------------------------- */

/* La veste dei campi arriva da `form-skin`, il componente condiviso in
   assets/css/form.css: il contenitore la dichiara nel pattern. Qui non si
   ripete niente di quello. */

/* --- Sotto i 900px ------------------------------------------------------ */

@media ( max-width: 900px ) {
	/* Una colonna sola. I campi appaiati si mettono in fila da soli: se ne
	   occupa `form-skin`. */
	.posizioni__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}