/*
 * Posizioni lavorative, Autuori Design.
 * Le schede della griglia e la finestra col testo della posizione.
 * Colori e caratteri sono quelli del sito; si cambiano dalle variabili qui sotto.
 */

.pl-posizioni {
	--pl-font: "Montserrat", sans-serif;
	--pl-inchiostro: #000;
	--pl-linea: #ababab;
	--pl-aperta: #61ce70;
	--pl-chiusa: #c62828;
	--pl-su-chiusa: #fff;
	--pl-tenue: #eceff1;
	font-family: var(--pl-font);
	color: var(--pl-inchiostro);
}

.pl-posizioni .pl-vuoto {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

/* La griglia: una colonna, due o tre secondo lo spazio che ha. */

.pl-posizioni .pl-elenco {
	container-type: inline-size;
}

.pl-posizioni .pl-griglia {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 560px) {
	.pl-posizioni .pl-griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 900px) {
	.pl-posizioni .pl-griglia {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pl-posizioni .pl-scheda {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 16px;
}

@container (min-width: 560px) {
	.pl-posizioni .pl-scheda {
		border-right: 1px solid var(--pl-linea);
	}
}

.pl-posizioni .pl-stato {
	display: inline-block;
	padding: 4px 8px;
	background: var(--pl-aperta);
	color: var(--pl-inchiostro);
	font-family: var(--pl-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.pl-posizioni .pl-scheda--chiusa .pl-stato {
	background: var(--pl-chiusa);
	color: var(--pl-su-chiusa);
}

.pl-posizioni .pl-titolo {
	margin: 0;
	color: var(--pl-inchiostro);
	font-family: var(--pl-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

:where(.pl-posizioni .pl-titolo, .pl-posizioni .pl-finestra-titolo) {
	text-wrap: balance;
}

/* «Maggiori informazioni»: un testo sottolineato, alto quanto basta per il dito. */

.pl-posizioni .pl-scheda .pl-info,
.pl-posizioni .pl-scheda .pl-info:hover,
.pl-posizioni .pl-scheda .pl-info:focus {
	appearance: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--pl-inchiostro);
	font-family: var(--pl-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	white-space: nowrap;
	cursor: pointer;
}

.pl-posizioni .pl-scheda .pl-info:hover {
	text-decoration-thickness: 2px;
}

.pl-posizioni .pl-scheda .pl-info:focus-visible {
	outline: 2px solid var(--pl-inchiostro);
	outline-offset: 4px;
}

/* La finestra. */

html.pl-bloccata {
	overflow: hidden;
}

.pl-posizioni .pl-finestra {
	box-sizing: border-box;
	width: min(800px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--pl-inchiostro);
	font-family: var(--pl-font);
	overflow: hidden;
}

.pl-posizioni .pl-finestra[open] {
	display: flex;
	flex-direction: column;
}

.pl-posizioni .pl-finestra::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

.pl-posizioni .pl-finestra-testa {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 24px 16px;
}

.pl-posizioni .pl-finestra-titolo {
	flex: 1 1 auto;
	min-width: 0;
	margin: 6px 0 0;
	color: var(--pl-inchiostro);
	font-family: var(--pl-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

.pl-posizioni .pl-finestra .pl-chiudi,
.pl-posizioni .pl-finestra .pl-chiudi:hover,
.pl-posizioni .pl-finestra .pl-chiudi:focus {
	appearance: none;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--pl-inchiostro);
	cursor: pointer;
}

.pl-posizioni .pl-finestra .pl-chiudi:hover {
	background: var(--pl-tenue);
}

.pl-posizioni .pl-finestra .pl-chiudi:focus-visible {
	outline: 2px solid var(--pl-inchiostro);
	outline-offset: 2px;
}

.pl-posizioni .pl-finestra-corpo {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 24px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	outline: none;
}

.pl-posizioni .pl-finestra-piede {
	flex: none;
	display: flex;
	justify-content: center;
	padding: 16px 24px;
	border-top: 1px solid var(--pl-tenue);
}

.pl-posizioni .pl-finestra .pl-cv,
.pl-posizioni .pl-finestra .pl-cv:hover,
.pl-posizioni .pl-finestra .pl-cv:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 32px;
	border-radius: 4px;
	background: var(--pl-inchiostro);
	color: #fff;
	font-family: var(--pl-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}

.pl-posizioni .pl-finestra .pl-cv:hover {
	background: #333;
}

.pl-posizioni .pl-finestra .pl-cv:focus-visible {
	outline: 2px solid var(--pl-inchiostro);
	outline-offset: 3px;
}

/* Il testo della posizione, come lo scrive il cliente nel pannello. */

.pl-posizioni .pl-testo {
	color: var(--pl-inchiostro);
	font-family: var(--pl-font);
	font-size: 15px;
	line-height: 1.6;
	text-wrap: pretty;
}

.pl-posizioni .pl-testo > * {
	margin: 0 0 12px;
}

.pl-posizioni .pl-testo > :last-child {
	margin-bottom: 0;
}

.pl-posizioni .pl-testo ul,
.pl-posizioni .pl-testo ol {
	padding: 0 0 0 24px;
}

.pl-posizioni .pl-testo li {
	margin: 0 0 4px;
}

/* Le voci degli elenchi vanno a capo normalmente: pareggiate (o «pretty») le lunghe si stringono e lasciano mezza
   riga vuota a destra. Solo le corte, fino a 60 lettere (le segna il copione), si pareggiano: così non resta una
   parola sola in fondo. */
.pl-posizioni .pl-testo li {
	text-wrap: wrap;
}

.pl-posizioni .pl-testo li.pl-corta {
	text-wrap: balance;
}

.pl-posizioni .pl-testo li:last-child {
	margin-bottom: 0;
}

.pl-posizioni .pl-testo strong,
.pl-posizioni .pl-testo b {
	font-weight: 700;
}

.pl-posizioni .pl-testo a {
	color: var(--pl-inchiostro);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.pl-posizioni .pl-finestra-testa {
		padding: 16px 16px 12px;
	}

	.pl-posizioni .pl-finestra-titolo {
		font-size: 20px;
	}

	.pl-posizioni .pl-finestra-corpo {
		padding: 0 16px 16px;
	}

	.pl-posizioni .pl-finestra-piede {
		padding: 12px 16px;
	}
}