/**
 * The issue line-up.
 *
 * Colours and proportions are taken from the Morning Dose design. Each one is
 * written as the theme's own custom property with the design's value as the
 * fallback, so the block follows the site if the palette ever moves and still
 * looks right on a site that has never heard of it.
 */
.mdose-issue{
	margin:0 0 clamp(26px,4vw,38px);
}

/* ---- the opening sentence ---- */
.mdose-issue__intro{
	margin:0 0 20px;
	font-family:var(--body,'PT Serif',Georgia,serif);
	font-size:16px;
	line-height:1.65;
	color:var(--ink,#131B2E);
	text-wrap:pretty;
}

/* Underlined, like every other link in a piece of writing on the site. Stated
   rather than left to the theme because the theme's rule and this one carry
   the same weight, so whichever stylesheet happened to load last would
   otherwise decide it. */
.mdose-issue__intro a{
	color:var(--accent,#3458FA);
	text-decoration:underline;
	text-underline-offset:3px;
	text-decoration-thickness:1.5px;
}

.mdose-issue__intro a:hover{
	color:var(--accent-hover,#2E43D6);
	text-decoration-color:currentColor;
}

/* ---- the eyebrow row ---- */
.mdose-issue__head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:14px;
}

.mdose-issue__eyebrow{
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted,#5B6478);
	white-space:nowrap;
}

.mdose-issue__rule{
	flex:1;
	height:1px;
	background:var(--line,#E3E9F5);
}

.mdose-issue__count{
	font-size:12px;
	font-weight:600;
	color:var(--faint,#8891A8);
	white-space:nowrap;
}

/* ---- the grid ----

   Two columns, stated rather than worked out from a minimum track width.

   auto-fill was deciding the column count from how much room it had, so a
   content column over about 880px got three tracks. The lead spans all of
   them and the two stories under it fill two, which left the third standing
   empty — the gap reads as a missing card rather than as a layout.

   The issue is always one lead and pairs beneath it, so the count is a fact
   about the design, not about the available width. */
.mdose-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px;
}

/* An odd number of stories under the lead would leave the last one beside a
   hole, so it takes the full width instead — the same treatment as the lead,
   for the same reason. The last card is an orphan exactly when it falls on an
   even count, since the lead is the first child. */
.mdose-card:last-child:nth-child(even){
	grid-column:1/-1;
}

/* The lead story runs the full width of the grid with its picture beside the
   words; the rest sit two-up underneath. A single story keeps the wide shape
   rather than becoming a lone narrow card in an empty row. */
.mdose-card.is-lead{
	grid-column:1/-1;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:stretch;
}

.mdose-card.is-lead .mdose-card__media{
	height:100%;
	aspect-ratio:auto;
	min-height:260px;
}

.mdose-card.is-lead .mdose-card__body{
	padding:clamp(20px,2.6vw,30px);
}

.mdose-card.is-lead .mdose-card__title{
	font-size:clamp(21px,2.6vw,27px);
}

.mdose-card.is-lead .mdose-card__teaser{
	font-size:15px;
}

/* ---- a card ----

   The theme underlines links inside post content (.entry-content a), which is
   right for a sentence and wrong for a card. Two things make this need more
   than the plain .mdose-card rule below:

   - .entry-content a is the more specific selector, so it wins. Beating it
     means matching the anchor at least as tightly, hence a.mdose-card with
     the section in front of it.
   - an underline set on a link is drawn straight through everything inside
     it. A child cannot switch its ancestor's decoration off, so setting
     text-decoration:none on the title or the teaser does nothing — it has to
     come off the anchor itself.

   The colour goes with it: the theme paints content links accent blue, and
   the card's own parts set the colours they want. */
.mdose-issue a.mdose-card,
.mdose-issue a.mdose-card:link,
.mdose-issue a.mdose-card:visited,
.mdose-issue a.mdose-card:hover,
.mdose-issue a.mdose-card:focus,
.mdose-issue a.mdose-card:active{
	text-decoration:none;
	color:var(--ink,#131B2E);
}

/* Nothing inside the panel is a link, so nothing in it should be underlined
   either, whatever the surrounding content styles do. */
.mdose-issue .mdose-cta__pill,
.mdose-issue .mdose-cta__title,
.mdose-issue .mdose-cta__note,
.mdose-issue .mdose-card__title,
.mdose-issue .mdose-card__teaser,
.mdose-issue .mdose-card__go{
	text-decoration:none;
}

.mdose-card{
	display:flex;
	flex-direction:column;
	border-radius:14px;
	overflow:hidden;
	background:var(--paper,#fff);
	box-shadow:0 2px 10px rgba(52,88,250,.07);
	color:var(--ink,#131B2E);
	text-decoration:none;
	transition:box-shadow .2s ease,transform .2s ease;
}

.mdose-card:hover,
.mdose-card:focus-visible{
	box-shadow:0 12px 28px -8px rgba(52,88,250,.24);
	transform:translateY(-2px);
	text-decoration:none;
	color:var(--ink,#131B2E);
}

.mdose-card:focus-visible{
	outline:2px solid var(--accent,#3458FA);
	outline-offset:2px;
}

.mdose-card__media{
	position:relative;
	display:block;
	background:var(--accent-soft,#E9EDFE);
	aspect-ratio:16/10;
	overflow:hidden;
}

.mdose-card__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* ---- the number badge ---- */
.mdose-card__badge{
	position:absolute;
	top:14px;
	left:14px;
	display:inline-flex;
	align-items:center;
	gap:7px;
	height:28px;
	padding:0 10px 0 6px;
	border-radius:999px;
	background:rgba(255,255,255,.92);
	color:var(--ink,#131B2E);
	font-size:12px;
	font-weight:700;
	box-shadow:0 2px 8px rgba(0,0,0,.15);
	/* The whole card is the link; the badge must not swallow the click. */
	pointer-events:none;
	backdrop-filter:blur(4px);
}

.mdose-card__no{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:18px;
	height:18px;
	border-radius:50%;
	background:var(--accent,#3458FA);
	color:#fff;
	font-size:11px;
}

.mdose-card__body{
	display:flex;
	flex-direction:column;
	gap:12px;
	padding:20px;
	/* Fills the card so the read link can sit on the bottom edge however long
	   the teaser runs — otherwise the links wander row to row. */
	flex:1;
}

.mdose-card__title{
	font-family:var(--body,'PT Serif',Georgia,serif);
	font-size:19px;
	line-height:1.2;
	color:var(--heading-color,#202729);
	text-wrap:pretty;
}

.mdose-card__teaser{
	font-size:14.5px;
	line-height:1.65;
	color:var(--muted,#5B6478);
	text-wrap:pretty;
}

.mdose-card__go{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:auto;
	padding-top:14px;
	/* A rule rather than a gap: the line is a different kind of thing from
	   the teaser above it, and the design separates them. */
	border-top:1px solid var(--line,#E3E9F5);
	font-size:13.5px;
	font-weight:700;
	color:var(--accent,#3458FA);
}

.mdose-card__go-text{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.mdose-card__go svg{
	width:15px;
	height:15px;
	flex:none;
	fill:none;
	stroke:currentColor;
	stroke-width:2.2;
}

/* ---- the subscribe panel ---- */
.mdose-cta{
	margin-top:clamp(20px,3vw,28px);
	padding:clamp(20px,2.4vw,26px);
	border-radius:16px;
	/* The design's blue, with the warmer corner it carries on the issue
	   page. */
	background:
		radial-gradient(620px 300px at 92% -20%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%),
		linear-gradient(135deg,#3458FA 0%,#2E43D6 100%);
	color:#fff;
	box-shadow:0 14px 30px -12px rgba(52,88,250,.5);
}

.mdose-cta__pill{
	display:inline-block;
	margin-bottom:12px;
	padding:5px 12px;
	border-radius:8px;
	background:var(--data,#EC4899);
	color:#fff;
	font-size:11px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.mdose-cta__title{
	margin:0 0 14px;
	font-family:var(--display,system-ui,sans-serif);
	font-size:clamp(18px,2.4vw,23px);
	font-weight:800;
	line-height:1.3;
	color:#fff;
	text-wrap:pretty;
}

/* The form is the theme's, so this only gives it room and makes its own
   colours legible on the blue.

   Two sources of the dead space under the field:

   - the theme spaces the embed for a section standing on its own
     (.mb-esp-form has margin-block:20px, .mb-esp-dose.mb-esp--embed adds
     20px more on top). Inside a panel that spacing is the panel's job.
   - the provider's own wrapper is built to sit on a bare page and is padded
     to suit. In here it is already inside a padded panel, so that padding is
     doubled up and shows as a gap under the field.

   Marked important only because the provider's markup is theirs and carries
   its own inline and stylesheet rules. */
.mdose-cta__form{
	/* A new formatting context, so the embed's own margins cannot escape the
	   panel and stretch it. */
	display:flow-root;
}

.mdose-cta__form .mb-esp-form,
.mdose-cta__form .mb-esp--embed,
.mdose-cta__form .mb-esp-dose.mb-esp--embed{
	margin:0;
}

/* Only the spacing around the embed, and only on wrappers.

   An earlier attempt reset padding and background on anything carrying the
   provider's name. The provider puts that name on the field and the button
   too, so it took the box off the field and the fill off the button and left
   a bare underline and an outlined pill. The provider's own look is theirs;
   the only thing that belongs to the panel is the space around it. */
.mdose-cta__form > div[class*="omnisend"],
.mdose-cta__form > div[id*="omnisend"],
.mdose-cta__form .mb-esp--embed > div[class*="omnisend"]{
	margin-block:0;
}

/* The gap under the field is the margin on whatever the embed ends with.
   Form controls are left alone. */
.mdose-cta__form > :last-child,
.mdose-cta__form .mb-esp--embed > :last-child,
.mdose-cta__form > div[class*="omnisend"] > :last-child{
	margin-bottom:0;
}

.mdose-cta__form iframe{
	display:block;
	width:100%;
	max-width:100%;
}

.mdose-cta__form .dose-form,
.mdose-cta__form form{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin:0;
	max-width:none;
}

.mdose-cta__form input[type="email"]{
	flex:1;
	min-width:200px;
	border:0;
	border-radius:9px;
	padding:13px 15px;
	font-size:15px;
}

.mdose-cta__form input[type="email"]:focus{
	outline:2px solid #fff;
	outline-offset:2px;
}

.mdose-cta__form .mb-form-msg{
	flex:1 0 100%;
	margin:0;
	color:rgba(255,255,255,.9);
	font-size:13px;
}

.mdose-cta__note{
	margin:12px 0 0;
	font-size:12.5px;
	color:rgba(255,255,255,.8);
}

@media (prefers-reduced-motion:reduce){
	.mdose-card{transition:none}
	.mdose-card:hover,.mdose-card:focus-visible{transform:none}
}

@media (max-width:820px){
	/* Side by side needs width for both halves; below this the picture goes
	   back on top. */
	.mdose-card.is-lead{grid-template-columns:1fr}
	.mdose-card.is-lead .mdose-card__media{min-height:0;aspect-ratio:16/10}
}

@media (max-width:600px){
	/* Two columns on a phone leaves each card too narrow to read. The fixed
	   track count above does not collapse on its own the way the old
	   minimum-width one did, so it is collapsed here. */
	.mdose-grid{grid-template-columns:1fr}
	.mdose-card:last-child:nth-child(even){grid-column:auto}
	.mdose-card__body{padding:16px}
	.mdose-issue__count{display:none}
	.mdose-cta__form input[type="email"]{min-width:0;flex:1 1 100%}
	.mdose-cta__form .btn{width:100%;justify-content:center}
}