/* The Features & Pricing page (/pricing): its intro, feature cards and plans, light and dark.  Moved here from
   unauth.css so the page can use the app's layout (base.html loads this for that page only). */
@layer components {
	section.features {
		p.subheading {
			color: var(--color-taskr-500);
			font-size: var(--text-sm);
			font-weight: var(--font-weight-bold);
			letter-spacing: var(--tracking-wide);
			margin-bottom: calc(var(--spacing) * 4);
			text-transform: uppercase;
		}

		h2 {
			font-size: var(--text-4xl);
			line-height: calc(var(--leading-tight) * 0.9);
			margin-bottom: calc(var(--spacing) * 8);
		}
	}

	/* Features & Pricing (/pricing): an intro, the feature cards, then the plans.  The section headings come from
	   section.features above. */
	main.pricing {
		grid-column: 1 / span 12;
		padding-top: calc(var(--spacing) * 12);

		.intro {
			margin: 0 auto calc(var(--spacing) * 14);
			max-width: 44rem;
			text-align: center;

			h1 {
				color: var(--color-gray-900);
				font-size: var(--text-5xl);
				font-weight: var(--font-weight-bold);
				letter-spacing: var(--tracking-tight);
				line-height: var(--leading-tight);
				margin-bottom: calc(var(--spacing) * 5);

				@media (width < 40rem) {
					font-size: var(--text-4xl);
				}
			}

			.lead {
				color: var(--color-gray-600);
				font-size: var(--text-xl);
				line-height: var(--leading-normal);
			}
		}

		section + section {
			margin-top: calc(var(--spacing) * 16);
		}

		section > .subheading,
		section > h2 {
			text-align: center;
		}

		/* Three columns (two rows of features, one row of plans), two for the features on tablets, one on phones.
		   The plans skip two columns, which would leave one plan on a row of its own. */
		.feature-grid,
		.plan-grid {
			display: grid;
			gap: calc(var(--spacing) * 5);
			grid-template-columns: 1fr;

			@media (width >= 56rem) {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		.feature-grid {
			@media (40rem <= width < 56rem) {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		.feature,
		.plan {
			background: var(--color-white);
			border: 1px solid var(--color-gray-200);
			border-radius: var(--radius-lg);
			padding: calc(var(--spacing) * 6);

			h3 {
				color: var(--color-gray-900);
				font-size: var(--text-lg);
				font-weight: var(--font-weight-bold);
				margin-bottom: calc(var(--spacing) * 2);
			}

			p {
				color: var(--color-gray-600);
				line-height: var(--leading-normal);
			}
		}

		.feature {
			border-top: 3px solid var(--color-taskr-400);
		}

		/* A column, so every plan's button lines up at the bottom. */
		.plan {
			display: flex;
			flex-direction: column;

			.who {
				color: var(--color-taskr-600);
				font-weight: var(--font-weight-bold);
			}

			.price {
				color: var(--color-gray-900);
				font-size: var(--text-4xl);
				font-weight: var(--font-weight-bold);
				letter-spacing: var(--tracking-tight);
				margin: calc(var(--spacing) * 4) 0;

				span {
					color: var(--color-gray-500);
					font-size: var(--text-sm);
					font-weight: var(--font-weight-medium);
					letter-spacing: normal;
				}
			}

			.btn {
				margin-top: auto;
				text-align: center;
			}

			/* Space between the description and the button, which margin-top: auto can shrink to nothing. */
			p:last-of-type {
				margin-bottom: calc(var(--spacing) * 6);
			}
		}

		.fine-print {
			color: var(--color-gray-500);
			font-size: var(--text-sm);
			margin: calc(var(--spacing) * 6) auto 0;
			max-width: 44rem;
			text-align: center;
		}
	}

	@media (prefers-color-scheme: dark) {
		:root section.features p.subheading {
			color: var(--color-taskr-400);
		}

		:root main.pricing {
			.intro {
				h1 {
					color: var(--color-gray-100);
				}

				.lead {
					color: var(--color-gray-300);
				}
			}

			.feature,
			.plan {
				background: var(--color-gray-800);
				border-color: var(--color-gray-700);

				h3 {
					color: var(--color-gray-100);
				}

				p {
					color: var(--color-gray-300);
				}
			}

			.feature {
				border-top-color: var(--color-taskr-400);
			}

			.plan {
				.who {
					color: var(--color-taskr-300);
				}

				.price {
					color: var(--color-gray-50);

					span {
						color: var(--color-gray-400);
					}
				}
			}

			.fine-print {
				color: var(--color-gray-400);
			}
		}
	}
}