/* ==========================================================================
   Terms of Use — one card per thing the terms cover
   The website terms are the long read, so they take a full-width lead card;
   the store terms for apps and games are a sentence each and sit in a row of
   smaller cards below it. Colours come from the site tokens in main.css; the
   red-to-indigo accent of the page heading is carried through as decoration
   only, never as text or link colour, so every string keeps full label
   contrast.
   ========================================================================== */

.terms {
	/* One place to tune the body scale. The sizes match the body copy used
	   across the rest of the site: 1.6rem for running text, 1.7rem for the
	   opening paragraph, which is the size of .product-text. */
	--tm-body: 1.6rem;
	--tm-lede: 1.7rem;
	--tm-line: 1.6;

	--tm-accent: linear-gradient(to right, var(--red), var(--indigo));

	/* The UA link blue is too light on paper and too dark on the dark
	   background, so both appearances state their own value. */
	--tm-link: rgb(0, 90, 200);
	--tm-link: color-mix(in srgb, var(--blue) 78%, black);

	margin-bottom: 5.2rem;

	padding-left: max(2.0rem, env(safe-area-inset-left));
	padding-right: max(2.0rem, env(safe-area-inset-right));
}

@media (prefers-color-scheme: dark) {
	.terms {
		--tm-link: var(--teal);
	}
}

/* Both the lead card and the row below it are held to the same measure as the
   privacy sheet, so the two legal pages sit on one column width. */
.terms-layout {
	max-width: 120rem;
	margin: 0 auto;

	display: grid;
	gap: 2.4rem;
}


/* ==========================================================================
   Cards
   ========================================================================== */

.terms-card {
	position: relative;
	overflow: hidden;

	border-radius: 13px;
	background-color: var(--secondaryBackground);
	color: var(--label);

	text-align: left;
	font-size: var(--tm-body);
	line-height: var(--tm-line);
	overflow-wrap: break-word;
}

/* Accent band, tying every card back to the gradient of the page heading. */
.terms-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 0.6rem;
	background: var(--tm-accent);
}

/* Links are block-level site-wide, which would break them out of their
   sentence; inside body copy they belong in the text flow. */
.terms-card p a {
	display: inline;
	color: var(--tm-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.terms-card p a:hover {
	opacity: 0.7;
}


/* --------------------------------------------------------------------------
   Lead card: the website terms
   -------------------------------------------------------------------------- */

.terms-card-lead {
	padding: 5.2rem 4.4rem;
}

/* The title block is centred, as on the wide cards elsewhere; the clauses
   underneath stay left-aligned, because centred legal copy gives the eye no
   edge to return to. */
.terms-card-header {
	max-width: 78rem;
	margin: 0 auto 4.4rem;
	text-align: center;
}

.terms-card-kicker {
	margin: 0 0 1.2rem;

	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--secondaryLabel);
}

.terms-card-lede {
	margin: 1.6rem auto 0;
	max-width: 62rem;
	font-size: var(--tm-lede);
}

/* Held to a reading measure inside the card: the card itself is as wide as the
   page, which would otherwise run the clauses out to 120rem of line length. */
.terms-card-body {
	max-width: 78rem;
	margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Row of smaller cards: the store terms
   -------------------------------------------------------------------------- */

/* min() keeps a column from being wider than the padded content box on a
   narrow screen, where the safe-area insets leave less than 30rem to lay a
   card out in. */
.terms-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
	gap: 2.4rem;

	margin: 0;
	padding: 0;
	list-style: none;
}

.terms-card-compact {
	padding: 3.6rem 3.2rem;
}


/* ==========================================================================
   Card contents
   ========================================================================== */

.terms-card-heading {
	margin: 0;

	font-weight: 600;
	line-height: 1.15;
	text-wrap: pretty;
	color: var(--label);
}

.terms-card-lead .terms-card-heading {
	font-size: clamp(3.6rem, 5vw, 5.2rem);
}

.terms-card-compact .terms-card-heading {
	margin-bottom: 2.4rem;
	font-size: clamp(2.6rem, 4vw, 3.2rem);
}

.terms-clause {
	margin-top: 3.6rem;
}

.terms-clause:first-child {
	margin-top: 0;
}

.terms-clause-heading {
	margin: 0 0 1.2rem;

	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: pretty;
	color: var(--label);
}

.terms-text {
	margin: 0 0 1.6rem;
}

.terms-text:last-child {
	margin-bottom: 0;
}

/* Store terms are a list, because a title can be sold through more than one
   store and each store licenses it under its own agreement. The markers are
   kept, so the stores stay countable rather than running together the way the
   privacy page's rights list once did. */
.terms-store-list {
	margin: 0;
	padding-left: 2.6rem;
}

.terms-store {
	margin-bottom: 2.4rem;
}

.terms-store:last-child {
	margin-bottom: 0;
}

/* The page accent is a gradient, which a marker cannot take; its closing
   colour stands in for it here. */
.terms-store::marker {
	color: var(--indigo);
}

.terms-store-name {
	margin: 0 0 0.6rem;

	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: pretty;
	color: var(--label);
}


/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media screen and (max-width: 767px) {

	.terms {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
	}

	.terms-card-lead {
		padding: 3.6rem 2.0rem;
	}

	.terms-card-compact {
		padding: 2.8rem 2.0rem;
	}

	.terms-card-header {
		margin-bottom: 3.6rem;
	}

	.terms-clause {
		margin-top: 2.8rem;
	}

	.terms-store-list {
		padding-left: 2.0rem;
	}

}