/**
 * Homepage layout.
 *
 * Loaded on the front page only. Three things decide everything here:
 *
 * 1. The hero is two columns and the test is one of them, so the tool has to
 *    survive at half the page width. It does that by trading chips for
 *    dropdowns, not by losing controls.
 * 2. Headings carry the page. There is no line of grey explanation under a
 *    heading and no sentence under a card, so the type scale has to do the
 *    work the small text used to pretend to do.
 * 3. One tile style, used three times. The practice tools, the job tests and
 *    the levels are the same object at different sizes, which is what makes
 *    a long page read as one page.
 *
 * Breakpoints: 1024 (hero stacks, split section stacks) and 640 (tiles go to
 * one column). Both are written as max-width so the desktop rules stay the
 * plain ones.
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.tpp-hero {
	padding-block: var(--tpp-space-7) var(--tpp-space-7);
	background: linear-gradient(180deg, var(--tpp-bg-alt), var(--tpp-bg));
}

.tpp-hero-inner {
	max-width: 54rem;
}

/*
 * The heading is the largest thing on the site and is allowed to be: it is
 * the one line that says what the page is.
 */
.tpp-hero-title {
	margin: 0 0 var(--tpp-space-4);
	max-width: 22ch;
	font-size: clamp(2.3rem, 4.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.tpp-hero-text {
	margin: 0;
	max-width: 52ch;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--tpp-text-muted);
}

.tpp-btn-arrow {
	margin-left: 0.5rem;
	font-size: 1.05em;
	line-height: 1;
}

.tpp-hero .tpp-streak-nudge { margin-top: var(--tpp-space-5); }

/* ==========================================================================
   2. The test, in its own section under the hero
   ========================================================================== */

/*
 * Nothing here shrinks the tool. It is the full tool on the full width of the
 * page, which is the whole reason it is no longer in the hero.
 */
#quick-test .tpp-tool {
	box-shadow: var(--tpp-shadow-sm);
}

/* ==========================================================================
   3. Sections and headings
   ========================================================================== */

.tpp-home-section {
	padding-block: var(--tpp-space-7);
}

/*
 * One heading size for the whole page, set solid. Nothing under it: a section
 * heading followed by a line of grey explanation is the house style of every
 * generated page on the internet, and the sections below say what they are.
 */
.tpp-home-heading {
	margin: 0 0 var(--tpp-space-5);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* A button that follows a grid rather than sitting beside it. */
.tpp-section-action {
	margin: var(--tpp-space-5) 0 0;
}

/* ==========================================================================
   4. Tiles
   ========================================================================== */

.tpp-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--tpp-space-4);
}

/*
 * A tile is an icon, a name and a chevron on one line. The chevron is pushed
 * to the far edge by the title rather than by a spacer, so a long name simply
 * takes the room it needs and the row still ends where every other row ends.
 */
.tpp-tile {
	display: flex;
	align-items: center;
	gap: var(--tpp-space-3);
	padding: var(--tpp-space-4);
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-lg);
	color: var(--tpp-text);
	text-decoration: none;
	transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.tpp-tile:hover,
.tpp-tile:focus-visible {
	border-color: var(--tpp-primary);
	box-shadow: var(--tpp-shadow-sm);
	transform: translateY(-2px);
	color: var(--tpp-text);
}

/* The icon sits on a tinted square so the row has a fixed left edge. */
.tpp-tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: var(--tpp-radius);
	background: color-mix(in srgb, var(--tpp-primary) 10%, transparent);
	color: var(--tpp-primary);
}

.tpp-tile-title {
	flex: 1 1 auto;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.tpp-tile-arrow {
	flex: 0 0 auto;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--tpp-text-muted);
	transition: transform 140ms ease, color 140ms ease;
}

.tpp-tile:hover .tpp-tile-arrow,
.tpp-tile:focus-visible .tpp-tile-arrow {
	transform: translateX(3px);
	color: var(--tpp-primary);
}

@media (prefers-reduced-motion: reduce) {
	.tpp-tile,
	.tpp-tile-arrow { transition: none; }

	.tpp-tile:hover,
	.tpp-tile:focus-visible { transform: none; }

	.tpp-tile:hover .tpp-tile-arrow { transform: none; }
}

/* ==========================================================================
   5. The FAQ
   ========================================================================== */

/*
 * Cards, two across. Each question is its own object, which is what the
 * accordion was really for - separating them - without hiding anything.
 */
.tpp-faq-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: var(--tpp-space-4);
}

.tpp-faq-card {
	padding: var(--tpp-space-5);
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-lg);
}

.tpp-faq-question {
	display: flex;
	align-items: flex-start;
	gap: var(--tpp-space-3);
	margin: 0 0 var(--tpp-space-3);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.tpp-faq-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	margin-top: -0.15rem;
	border-radius: var(--tpp-radius);
	background: color-mix(in srgb, var(--tpp-primary) 10%, transparent);
	color: var(--tpp-primary);
}

.tpp-faq-icon .tpp-icon {
	width: 18px;
	height: 18px;
}

.tpp-faq-answer {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--tpp-text-muted);
}

/* ==========================================================================
   7. Tablet
   ========================================================================== */

@media (max-width: 1024px) {
	/* The test needs the full width before the passage starts wrapping badly. */
	.tpp-hero-title { max-width: 24ch; }

	.tpp-tile-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}

	.tpp-faq-grid { gap: var(--tpp-space-4); }
}

/* ==========================================================================
   8. Phone
   ========================================================================== */

@media (max-width: 640px) {
	.tpp-hero { padding-block: var(--tpp-space-6); }

	.tpp-home-section { padding-block: var(--tpp-space-6); }

	.tpp-hero-title { max-width: none; }

	/* One column: a two-column grid of tiles at this width is two half-read
	   names and no room for the chevron. */
	.tpp-tile-grid,
	.tpp-faq-grid {
		grid-template-columns: 1fr;
		gap: var(--tpp-space-3);
	}

	.tpp-tile { padding: var(--tpp-space-3); }

	.tpp-tile-icon {
		width: 2.2rem;
		height: 2.2rem;
	}

	.tpp-tile-icon .tpp-icon {
		width: 20px;
		height: 20px;
	}

	.tpp-faq-card { padding: var(--tpp-space-4); }
}