/* =========================================================
   styles-3-minute-lessons.css
   Stylesheet for the Three-Minute Lesson Plans page.

   This is a trimmed-down build of the old sitewide stylesheet:
   it keeps only the base type, layout, header/nav/footer rules
   this page actually uses, and drops the single-lesson-page-only
   classes (vocab boxes, quiz boxes, transcript styles, floatleft
   variants, etc.) that don't apply here.
   ========================================================= */

/* -----------------------
Base styles
------------------------*/

body
{
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #eee;
	font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 .5em;
	font-weight: 500;
	line-height: 1.1;
}

h1 { font-size: 2.25em; } /* 36px */
h2 { font-size: 1.75em; } /* 28px */
h3 { font-size: 1.375em; } /* 22px */

p
{
	margin: 0 0 1.5em;
	line-height: 1.5;
}

a:link { color: royalblue; }
a:visited { color: purple; }
a:focus { color: black; }
a:hover { color: green; }
a:active { color: red; }

img { border: 0; }

/* -----------------------
Layout styles
------------------------*/

.container
{
	max-width: 70em;
	margin: 0 auto;
}

.container-footer
{
	max-width: 70em;
	margin: 0 auto;
	text-align: center;
}

.header
{
	color: #fff;
	background: #1a3664;
	padding: 1em 1.25em;
}

.nav-bar
{
	background: #000;
	padding: 0;
}

.content
{
	overflow: hidden;
	padding: 1em 1.25em;
	background-color: #fff;
}

.footer
{
	color: #fff;
	background: #000;
	padding: 1em 1.25em;
}

.img-responsive { max-width: 100%; height: auto; }

/* -----------------------
Nav
------------------------*/

.nav
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li
{
	display: inline;
	margin: 0;
}

.nav a
{
	display: block;
	padding: .7em 1.25em;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid gray;
}

.nav a:link { color: white; }
.nav a:visited { color: white; }

.nav a:focus
{
	color: black;
	background-color: white;
}

.nav a:hover
{
	color: white;
	background-color: green;
}

.nav a:active
{
	color: white;
	background-color: red;
}

/* -----------------------
Wide styles
------------------------*/

@media (min-width: 55em)
{
	.header { padding: 1.5em 3em; }
	.nav-bar { padding: 1em 3em; }
	.content { padding: 2em 3em; }
	.footer { padding: 2em 3em; }

	.nav li
	{
		display: inline;
		margin: 0 1em 0 0;
	}

	.nav a
	{
		display: inline;
		padding: 0;
		border-bottom: 0;
	}
}

/* =========================================================
   Three-Minute Lesson Plans — page intro
   ========================================================= */

.page-wrapper
{
	max-width: 70em;
	margin: 0 auto;
	padding: 0 0 1em;
}

.page-intro
{
	max-width: 46em;
	margin: 0 0 1.5em;
}

.page-intro p { margin: 0 0 1em; }

/* =========================================================
   Three-Minute Lesson Plans — responsive card grid
   ========================================================= */

.grid-section-title
{
	font-size: 1.5em;
	line-height: 1.2;
	margin: 0 0 1em;
	font-weight: 700;
}

.lesson-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.lesson-card
{
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.lesson-card .thumb
{
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: #ccc;
}

.lesson-card .thumb img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lesson-card .card-body
{
	padding: 12px 15px 15px;
	flex: 1;
}

.lesson-card .card-title
{
	margin: 0 0 6px;
	font-size: 1.05em;
	font-weight: bold;
}

.lesson-card .card-title a
{
	text-decoration: none;
	color: #1a3664;
}

.lesson-card .card-title a:hover { text-decoration: underline; }

.lesson-card .card-body p:last-child
{
	margin: 0;
	font-size: .95em;
	color: #444;
}

/* Responsive: 3 -> 2 -> 1 columns */
@media (max-width: 900px)
{
	.lesson-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px)
{
	.lesson-grid { grid-template-columns: 1fr; }
}