/**
 * Tim Scott: the listing pages (A Proven Record, Blog, Stories).
 *
 * Route sheet: enqueued on /a-proven-record/, /blog/ (and its pages) and
 * /stories/ only, after the shell chain (inc/assets.php,
 * tsc_route_stylesheet()).
 *
 * The record and blog lists need nothing here: their .card.news cards, the
 * pagination, the title band and the .a-proven-record / .blog article-body
 * padding are shell CSS (components.css). This sheet is /stories/: the page
 * without its white frame, its shorter foot on phones, and the story blocks
 * (components/_story.scss, wordpress/_stories.scss, wordpress/_page.scss).
 * Values verbatim from _reference/css-spec/dream-used.css.
 *
 * Mobile first. The old rules for phones were max-width (47.98em) overrides
 * of a desktop base; here the phone value is the base and the old desktop
 * value comes back at 48em. Where that desktop value was an element default
 * (the h2 and h5 sizes, the .post-type-page foot), the shell token or value
 * it came from is restated.
 *
 * @package TSC
 */

/* ==========================================================================
   The page (wordpress/_stories.scss, wordpress/_page.scss)
   ========================================================================== */

/* Navy edge to edge: no white frame (the body padding, base.css). */
body.stories {
	padding: 0;
}

/* The article's foot is half as deep on phones. */
.stories .post-type-page {
	padding-bottom: 2.8125rem;
}

@media (min-width: 48em) {
	.stories .post-type-page {
		padding-bottom: 5.625rem; /* .post-type-page (components.css) */
	}
}

/* ==========================================================================
   Story blocks (components/_story.scss)
   ==========================================================================
   div.story > [div.jumbotron.story-video.video-promo | img] +
   div.story-content > h2.story-title + [h5.story-subtitle] + div.story-text.
   The 16:9 rounded video box is the shell's .jumbotron.story-video. */

.story {
	margin: 2.5rem 0 1.875rem;
	text-align: center;
}

.story:first-of-type {
	margin-top: 0;
}

.story:last-of-type {
	margin-bottom: 0;
}

.story + .story {
	margin-top: 0;
}

.story-content {
	padding: 0 1rem;
}

.story-title {
	font-family: var(--tsc-font-butler-bold);
	font-size: 2.125rem;
}

.story-subtitle {
	font-family: var(--tsc-font-butler-medium);
	font-size: 1.625rem;
	text-transform: none;
}

.story-text {
	margin-top: 1.875rem;
	font-family: var(--tsc-font-butler-regular);
}

.story-text p {
	font-size: 0.9375rem;
}

/*
 * .story-content side padding. The old cascade: 3.75rem for 36em-63.98em,
 * 7.5rem for 48em-111.23em (written after the 15rem rule of 90em, so it
 * won up to 111.23em), 15rem from 90em. In effect: 1rem, 3.75rem from
 * 36em, 7.5rem from 64em, 15rem from 111.25em.
 */
@media (min-width: 36em) {
	.story-content {
		padding: 0 3.75rem;
	}
}

@media (min-width: 48em) {
	.story {
		margin: 5rem 0 3.75rem;
	}

	.story + .story {
		margin-top: 120px;
	}

	/* Below 48em only, the old sizes; from here the h2 / h5 defaults. */
	.story-title {
		font-size: var(--tsc-font-size-h2);
	}

	.story-subtitle {
		font-size: var(--tsc-font-size-h5);
	}

	.story-text p {
		font-size: 1.5rem;
	}
}

@media (min-width: 64em) {
	.story-content {
		padding: 0 7.5rem;
	}
}

@media (min-width: 111.25em) {
	.story-content {
		padding: 0 15rem;
	}
}