/* Giant Steps Newsletters — front-end styles.
   Scoped to .gsnl-*, so nothing here can reach the rest of the site. Brand values
   fall back to literals in case a theme variable is ever renamed.

   The covers are screenshots of the real issues, so they are the most distinctive
   thing on the page. The card is built to get out of their way: the cover runs
   edge to edge, and the type under it stays quiet. */

.gsnl-latest,
.gsnl-reader,
.gsnl-grid {
	--gsnl-teal:  var(--awb-custom_color_2, #016e70);
	--gsnl-line:  var(--awb-color4, #e2e2e2);
	--gsnl-ink:   var(--awb-color6, #4a4e57);
	--gsnl-muted: #6b7079;
	--gsnl-stone: #f4f1ee;
	--gsnl-clay:  #a66d3f;
	--gsnl-serif: "EB Garamond", Georgia, serif;
	--gsnl-sans:  "Noto Sans", Arial, Helvetica, sans-serif;
}

/* ---------- the latest issue, read in place ---------- */

/* Width matters more than it looks. The issue's own table is 700px wide - the 620
   figure is its media-query breakpoint, not its width - and the frame loses 15px to
   its scrollbar. Measured against the live issue with scrollbars ON:

     frame 620px -> usable 605, content 605   fits (the issue's mobile layout engages)
     frame 660px -> usable 645, content 700   clipped by 55px
     frame 678px -> usable 663, content 700   clipped by 37px
     frame 720px -> usable 705, content 705   fits
     frame 760px -> usable 745, content 745   fits

   So the frame must be at or under ~620, or at or over ~720. The layout below only
   ever produces 760 (two columns) or 600-and-under (one column); nothing in between. */

.gsnl-latest {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}

.gsnl-reader {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	border: 1px solid var(--gsnl-line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.gsnl-bar {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 14px 20px;
	background: var(--gsnl-teal);
	color: #fff;
}

.gsnl-issue {
	font-family: var(--gsnl-serif);
	font-size: 21px;
	line-height: 1.2;
	color: #fff;
}

.gsnl-open {
	margin-left: auto;
	color: #fff;
	font-family: var(--gsnl-sans);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.gsnl-open:hover,
.gsnl-open:focus {
	color: #fff;
	text-decoration-thickness: 2px;
}

.gsnl-frame {
	display: block;
	width: 100%;
	height: var(--gsnl-h, 820px);
	border: 0;
	border-top: 1px solid var(--gsnl-line);
	background: #fff;
}

.gsnl-hint {
	padding: 12px 20px;
	background: var(--gsnl-stone);
	color: var(--gsnl-ink);
	font-family: var(--gsnl-sans);
	font-size: 14px;
	line-height: 1.5;
}


/* ---------- the panel beside the issue ---------- */

.gsnl-panel {
	display: flex;
	flex-direction: column;
	font-family: var(--gsnl-sans);
}

.gsnl-panel-label {
	margin: 0 0 4px;
	color: var(--gsnl-muted);
	font-size: 15px;
	line-height: 1.4;
}

.gsnl-panel .gsnl-panel-title {
	margin: 0 0 14px;
	color: var(--gsnl-teal);
	font-family: var(--gsnl-serif);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
}

.gsnl-panel-inside {
	margin: 0 0 26px;
	padding-left: 0;
	list-style: none;
	color: var(--gsnl-ink);
}

.gsnl-panel-inside li {
	padding: 9px 0;
	border-bottom: 1px solid var(--gsnl-line);
}

.gsnl-panel-inside li:first-child {
	border-top: 1px solid var(--gsnl-line);
}

.gsnl-panel-inside--prose {
	border: 0;
	padding: 0;
}

.gsnl-panel-actions {
	margin: 0 0 26px;
}

.gsnl-panel-join {
	padding: 22px 0 0;
	border-top: 1px solid var(--gsnl-line);
}

.gsnl-panel-join p {
	margin: 0 0 14px;
	color: var(--gsnl-ink);
}

/* ---------- every issue ---------- */

.gsnl-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	/* No align-items here: grid items must stretch, or the cards stop being equal
	   height and .gsnl-action's margin-top:auto has nothing to push against. */
}

.gsnl-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;            /* lets the cover sit flush inside the radius */
	border: 1px solid var(--gsnl-line);
	border-radius: 10px;
	background: #fff;
}

.gsnl-coverlink {
	display: block;
	border: 0;
	line-height: 0;
}

.gsnl-cover {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 1px solid var(--gsnl-line);
}

.gsnl-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px 22px 24px;
}

.gsnl-label {
	margin: 0 0 4px;
	color: var(--gsnl-muted);
	font-family: var(--gsnl-sans);
	font-size: 14px;
	line-height: 1.4;
}

.gsnl-card .gsnl-title {
	margin: 0 0 12px;
	color: var(--gsnl-teal);
	font-family: var(--gsnl-serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.22;
}

.gsnl-inside {
	margin: 0 0 22px;
	padding-left: 0;
	list-style: none;
	font-family: var(--gsnl-sans);
}

.gsnl-inside li {
	margin: 0 0 2px;
}

/* Puts every Read button on one baseline, whatever the heading wraps to. */
.gsnl-action {
	margin-top: auto;
}

.gsnl-btn {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 3px;
	background: var(--gsnl-clay);
	color: #fff;
	font-family: var(--gsnl-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.gsnl-btn:hover,
.gsnl-btn:focus {
	background: var(--gsnl-teal);
	color: #fff;
}

/* Defined after .gsnl-btn on purpose: same specificity, so source order decides. */
.gsnl-btn-quiet {
	background: transparent;
	border: 1.5px solid var(--gsnl-teal);
	color: var(--gsnl-teal);
}

.gsnl-btn-quiet:hover,
.gsnl-btn-quiet:focus {
	background: var(--gsnl-teal);
	color: #fff;
}

.gsnl-notice {
	padding: 14px 18px;
	border: 1px dashed #b32d2e;
	border-radius: 6px;
	color: #b32d2e;
	font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

/* ---------- breakpoints ----------
   620 and 1000 are the grid's own, picked so a third column never falls below
   ~290px inside this site's 1300px content box. 800 is the breakpoint the site's
   own Custom CSS already uses for mobile. */

/* Two columns only once the band can give the issue its full 760px AND leave the
   panel a usable 260px: 760 + 36 gap + 260 = 1056, inside a band of viewport - 60.
   Below that it is one column at 600px, so the frame never lands in the 621-719
   clipping band. */
@media only screen and (min-width: 1120px) {
	.gsnl-latest {
		grid-template-columns: 760px minmax(260px, 1fr);
		align-items: start;
	}
	.gsnl-latest .gsnl-reader {
		max-width: none;
		margin: 0;
	}
}

@media only screen and (min-width: 620px) {
	.gsnl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (min-width: 1000px) {
	.gsnl-grid { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (max-width: 800px) {
	.gsnl-bar    { padding: 12px 16px; }
	.gsnl-open   { margin-left: 0; }
	.gsnl-frame  { height: var(--gsnl-h-mobile, 72vh); min-height: 480px; }
	.gsnl-hint   { padding: 12px 16px; }
	.gsnl-body   { padding: 20px 20px 22px; }
	.gsnl-action { text-align: center; }
	.gsnl-latest { gap: 28px; }
	.gsnl-panel .gsnl-panel-title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.gsnl-btn, .gsnl-open { transition: none; }
}

/* ---------- the mail-list form, when it is embedded in the panel ----------
   iContact ships its own teal/clay styling, so this only stops it overflowing
   the panel and tightens the spacing above it. */

.gsnl-signup {
	max-width: 100%;
}

.gsnl-signup form,
.gsnl-signup table,
.gsnl-signup input {
	max-width: 100%;
	box-sizing: border-box;
}

.gsnl-panel-join .gsnl-signup {
	margin-top: 4px;
}

/* iContact centres its own form with auto side margins (computed 0 460px inside the
   panel). The id in the selector is iContact's, and is needed to outrank its own
   "#ic_signupform .elcontainer" rule without !important. */
.gsnl-signup #ic_signupform .elcontainer {
	margin-left: 0;
	margin-right: 0;
}