/**
 * FAQ + HELP CARD
 *
 * Measured: FAQ rows 809x64, 14 apart, question at 33 from the edge and the
 * marker at 26 from the right. Help card 829x343 with 19 padding, its right
 * column starting at 404.
 */

@layer components {

	/* Shared by the lower lounge sections. */
	.section-heading {
		margin-block: var(--space-2xs) 0;
		font-size: var(--fs-heading-lg);
		line-height: var(--lh-heading-lg);
		letter-spacing: var(--track-heading-lg);
		font-weight: var(--weight-bold);
		text-transform: uppercase;
		text-wrap: balance;
	}

	/* ---- FAQ -------------------------------------------------------------- */

	.faq__list {
		display: grid;
		gap: 0.875rem;                         /* 14px, measured */
		margin-block-start: var(--space-xl);
	}

	.faq__item {
		background-color: #0d0d0d;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-card);
	}

	.faq__question {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-m);
		min-block-size: 4rem;                  /* 64px */
		padding-inline: 2.0625rem 1.625rem;    /* 33 / 26, measured */
		font-size: 1rem;
		font-weight: var(--weight-semibold);
		line-height: 1.3;
		cursor: pointer;
		list-style: none;                      /* drop the default triangle */
	}

	.faq__question::-webkit-details-marker { display: none; }

	.faq__question:hover { color: var(--clr-accent); }

	.faq__question:focus-visible {
		outline: 2px solid var(--clr-accent);
		outline-offset: -2px;
		border-radius: var(--radius-card);
	}

	/*
	 * Plus drawn from two bars, so open/closed is one rotation rather than two
	 * swapped glyphs — and it cannot fall out of step with the open state.
	 */
	.faq__mark {
		position: relative;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		flex: none;
	}

	.faq__mark::before,
	.faq__mark::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		inline-size: 0.875rem;
		block-size: 2px;
		background-color: currentcolor;
		translate: -50% -50%;
		transition: rotate var(--transition-fast), opacity var(--transition-fast);
	}

	.faq__mark::after { rotate: 90deg; }

	.faq__item[open] .faq__mark::after { rotate: 0deg; }
	.faq__item[open] .faq__question { color: var(--clr-accent); }

	.faq__answer {
		padding: 0 2.0625rem 1.5rem;
		font-size: 0.9375rem;
		line-height: 1.6;
		color: var(--clr-text-inverse-subtle);
	}

	.faq__answer > * { margin: 0; }
	.faq__answer > * + * { margin-block-start: var(--space-s); }

	/* ---- Help card --------------------------------------------------------- */

	.help__card {
		display: grid;
		gap: var(--space-l);
		padding: clamp(var(--space-l), 2.4vw, 2.125rem);
		background-color: #0d0d0d;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-card);
	}

	@media (min-width: 48rem) {
		.help__card {
			/* Measured: the right column starts at 404 of the 829 card. */
			grid-template-columns: 404fr 425fr;
			column-gap: var(--space-xl);
			align-items: center;
		}
	}

	.help__heading {
		margin: 0;
		font-size: var(--fs-display-4);
		line-height: 1.05;
		letter-spacing: 0.01em;
		font-weight: var(--weight-bold);
		text-transform: uppercase;
	}

	.help__label {
		margin-block: var(--space-l) 0;
		font-size: 0.75rem;
		font-weight: var(--weight-semibold);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--clr-text-inverse-subtle);
	}

	.help__phone {
		display: inline-block;
		margin-block-start: 0.375rem;
		font-family: var(--font-display);
		font-size: 2.5rem;                     /* 40px */
		line-height: 1;
		letter-spacing: 0.01em;
		font-weight: var(--weight-bold);
		color: var(--clr-text);
		text-decoration: none;
	}

	.help__phone:hover,
	.help__phone:focus-visible { color: var(--clr-accent); }

	.help__body {
		margin: 0;
		font-size: var(--fs-body);
		line-height: 1.5;
		color: var(--clr-text-inverse-soft);
	}

	.help__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-l);
		margin-block-start: var(--space-l);
	}

	.help__cta { min-inline-size: 14.625rem; } /* 234px, measured */

	.help__email {
		font-size: 0.8125rem;
		font-weight: var(--weight-semibold);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--clr-text-inverse-subtle);
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}

	.help__email:hover,
	.help__email:focus-visible { color: var(--clr-accent); }
}