/* ============================================================================
   ShangriLux — .sl-faq
   Blocco domande/risposte reso da [sl_faq] (inc/faq.php).

   Scelta di fondo: NIENTE ACCORDION.
   Risposte sempre leggibili (ospite + crawler AI), senza clic e senza JS.
   Forma: indice editoriale a hairline — come L'Accesso, non widget di supporto.
   Dipende solo dai token di sl-root.css (+ .sl-shell da chrome.css).
   ========================================================================== */

.sl-faq {
	--ctx-surface: var(--sl-rilievo);
	background: var(--ctx-surface);
	color: var(--ctx-ink);
	padding-block: var(--sl-s-section);
	padding-inline: var(--sl-gutter);
}

.sl-faq__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sl-s-8);
}

/* --- intestazione ------------------------------------------------------- */

.sl-faq__head {
	max-inline-size: 22rem;
}

.sl-faq__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sl-s-4);
	margin: 0 0 var(--sl-s-5);
	font-family: var(--sl-text);
	font-size: var(--sl-t-label);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--sl-track-label);
	text-transform: uppercase;
	color: var(--sl-gold);
}

.sl-faq__eyebrow::before {
	content: "";
	inline-size: 34px;
	block-size: 1px;
	flex: none;
	background: var(--sl-gold);
}

.sl-faq__title {
	margin: 0;
	font-family: var(--sl-display);
	font-size: var(--sl-t-h2);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: var(--sl-track-display);
	color: var(--ctx-ink);
	text-wrap: balance;
}

/* --- la lista ----------------------------------------------------------- */

.sl-faq__list {
	margin: 0;
	width: 100%;
}

.sl-faq__item {
	display: grid;
	gap: var(--sl-s-3);
	padding-block: var(--sl-s-6);
	border-block-start: 1px solid var(--sl-hairline);
}

.sl-faq__item:last-child {
	border-block-end: 1px solid var(--sl-hairline);
}

.sl-faq__q {
	margin: 0;
	font-family: var(--sl-display);
	font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.65rem);
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--ctx-ink);
	text-wrap: balance;
}

.sl-faq__a {
	margin: 0;
	max-inline-size: 54ch;
	font-family: var(--sl-text);
	font-size: var(--sl-t-body);
	font-weight: 300;
	line-height: 1.65;
	color: var(--ctx-ink-soft);
	text-wrap: pretty;
}

/* Desktop: testa a sinistra, lista a destra — composizione editoriale.
   Nelle righe: domanda stretta (indice), risposta ariosa. */
@media (min-width: 56.25em) {
	.sl-faq__inner {
		display: grid;
		grid-template-columns: minmax(14rem, 0.9fr) minmax(0, 1.6fr);
		column-gap: clamp(2.5rem, 5vw, 5.5rem);
		row-gap: var(--sl-s-7);
		align-items: start;
	}

	.sl-faq__head {
		position: sticky;
		top: calc(var(--sl-header-h, 4.5rem) + 1.5rem);
		max-inline-size: none;
		padding-block-end: var(--sl-s-4);
	}

	.sl-faq__title {
		max-inline-size: 13ch;
		font-size: clamp(2.35rem, 1.7rem + 1.5vw, 3.4rem);
		hyphens: none;
		overflow-wrap: normal;
		word-break: normal;
	}

	.sl-faq__list {
		grid-column: 2;
		min-width: 0;
	}

	.sl-faq__item {
		grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.2fr);
		column-gap: clamp(1.75rem, 3.2vw, 3.25rem);
		align-items: start;
		padding-block: clamp(1.75rem, 1.4rem + 0.8vw, 2.75rem);
	}

	.sl-faq__q {
		grid-column: 1;
		font-size: clamp(1.15rem, 1rem + 0.35vw, 1.4rem);
		line-height: 1.28;
		hyphens: none;
		overflow-wrap: break-word;
	}

	.sl-faq__a {
		grid-column: 2;
		max-inline-size: 46ch;
		padding-top: 0.12em;
		min-width: 0;
	}
}

/* Wide desktop: più aria sulla riga. */
@media (min-width: 75em) {
	.sl-faq__inner {
		grid-template-columns: minmax(17rem, 0.7fr) minmax(0, 1.8fr);
		column-gap: clamp(3rem, 6vw, 6.5rem);
	}

	.sl-faq__title {
		max-inline-size: 12ch;
	}

	.sl-faq__item {
		grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.3fr);
	}
}

/* --- link dentro le risposte -------------------------------------------- */

.sl-faq__a a {
	color: var(--ctx-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--sl-gold), var(--sl-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size var(--sl-d-fast) var(--sl-ease);
}

.sl-faq__a a:hover {
	background-size: 100% 2px;
}

.sl-faq :is(a, [tabindex]):focus-visible {
	outline: 2px solid var(--sl-gold);
	outline-offset: 3px;
	border-radius: var(--sl-r-sm);
}

/* --- comparsa ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.sl-faq__item {
		opacity: 0;
		transform: translateY(12px);
		animation: sl-faq-in var(--sl-d-base) var(--sl-ease-expo) forwards;
		animation-timeline: view();
		animation-range: entry 0% entry 42%;
	}

	@keyframes sl-faq-in {
		to {
			opacity: 1;
			transform: none;
		}
	}
}

@supports not (animation-timeline: view()) {
	.sl-faq__item {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-faq__item {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.sl-faq__head {
		position: static;
	}
}