/* ============================================================================
   Mindward Collective — The Mindward Journal
   ----------------------------------------------------------------------------
   Archive cards, the branded featured-image fallback tile, post metadata, and
   single-article typography.

   Loaded only on the Journal archive, category and tag archives, and single
   posts. See inc/assets.php — mindward_is_journal_context().
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1 · Archive layout
   ------------------------------------------------------------------------ */

.mw-journal-featured {
	margin-bottom: clamp(48px, 6vw, 72px);
}

.mw-journal-grid {
	display: grid;
	gap: clamp(24px, 3vw, 32px);
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.mw-journal-empty {
	margin-top: 64px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   2 · Post card
   ------------------------------------------------------------------------ */

.mw-post-card {
	display: grid;
	overflow: hidden;
	background-color: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-xl);
	box-shadow: var(--mw-shadow-card);
}

/* Featured card — large horizontal layout for the newest or designated post. */
@media (min-width: 900px) {
	.mw-post-card.mw-is-featured {
		grid-template-columns: 1fr 1fr;
	}
}

.mw-post-card .mw-post-media {
	position: relative;
	min-height: 260px;
	margin: 0;
	background: linear-gradient(150deg, var(--mw-navy-800), var(--mw-navy-950));
}

.mw-post-card .mw-post-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-post-card .mw-post-media a {
	position: absolute;
	inset: 0;
	display: block;
}

/* ---- Branded fallback tile ----
   Posts with no featured image get the Mindward logo on the brand navy ground
   with the dot field and a soft top wash. The Mixed logo is a white wordmark
   with a blue icon, so it must never sit on a light tile — and never on a plain
   flat blue box, which is what an unstyled fallback would produce. */
.mw-post-card .mw-post-media.mw-logo-tile {
	display: grid;
	place-items: center;
	padding: clamp(32px, 6vw, 56px);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(58, 141, 255, 0.22), transparent 62%),
		radial-gradient(var(--mw-dot-blue) 1.5px, transparent 1.5px) 0 0 / 26px 26px,
		linear-gradient(150deg, var(--mw-navy-800), var(--mw-navy-950));
}

.mw-post-card .mw-post-media.mw-logo-tile img {
	position: static;
	inset: auto;
	width: min(78%, 300px);
	height: auto;
	object-fit: contain;
}

.mw-post-card .mw-post-media.mw-logo-tile a {
	position: absolute;
	inset: 0;
}

.mw-post-card .mw-post-body {
	padding: clamp(28px, 4vw, 48px);
}

.mw-post-card .mw-post-body > * + * {
	margin-top: 14px;
}

.mw-post-card .mw-post-title {
	font-size: var(--mw-size-display-md);
	font-weight: var(--mw-weight-bold);
	line-height: var(--mw-leading-display-md);
}

/* Cards in the secondary grid read one step smaller than the featured card. */
.mw-journal-grid .mw-post-card .mw-post-title {
	font-size: clamp(21px, 2vw, 26px);
}

.mw-post-card .mw-post-title a {
	color: inherit;
	text-decoration: none;
}

.mw-post-card .mw-post-title a:hover,
.mw-post-card .mw-post-title a:focus {
	color: var(--mw-blue-700);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   3 · Post metadata and category badge
   ------------------------------------------------------------------------ */

.mw-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--mw-slate-600);
	font-size: var(--mw-size-small);
}

.mw-post-meta li {
	margin: 0;
}

/* Separator dot is decorative and generated, so it is never announced. */
.mw-post-meta li + li::before {
	content: "\00B7";
	margin-right: 16px;
	color: var(--mw-slate-400);
}

.mw-post-meta a {
	color: inherit;
	text-decoration: none;
}

.mw-post-meta a:hover,
.mw-post-meta a:focus {
	color: var(--mw-blue-700);
	text-decoration: underline;
}

.mw-category-badge {
	display: inline-block;
	padding: 10px 16px;
	border-radius: var(--mw-radius-sm);
	background-color: var(--mw-blue-100);
	color: var(--mw-navy-900);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: 13px;
	letter-spacing: var(--mw-tracking-badge);
	text-transform: uppercase;
	text-decoration: none;
}

a.mw-category-badge:hover,
a.mw-category-badge:focus {
	background-color: var(--mw-blue-700);
	color: var(--mw-white);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   4 · Single-article header
   ------------------------------------------------------------------------ */

.mw-article-header {
	text-align: center;
}

.mw-article-header .mw-category-badge {
	margin-bottom: 20px;
}

.mw-article-header .mw-post-meta {
	justify-content: center;
	margin-top: 20px;
}

.mw-article-featured {
	max-width: var(--mw-w-content);
	margin: 0 auto clamp(40px, 5vw, 64px);
}

.mw-article-featured img {
	width: 100%;
	height: auto;
	border-radius: var(--mw-radius-2xl);
}

/* ---------------------------------------------------------------------------
   5 · Article body
   These rules govern what an editor types into the block editor, so they are
   written against plain semantic elements rather than block class names.
   ------------------------------------------------------------------------ */

.mw-article-body {
	max-width: var(--mw-w-article);
	margin-inline: auto;
}

.mw-article-body > * + * {
	margin-top: 1.35em;
}

/* Only the bottom margin. GeneratePress ships `p { margin-bottom: 1.5em }`,
   which would fight the owl above — but zeroing the shorthand also declares
   margin-top at (0,1,1), which OUTRANKS `.mw-article-body > * + *` at (0,1,0)
   and silently removes the rhythm from every paragraph in the article. */
.mw-article-body p {
	margin-bottom: 0;
}

.mw-article-body .mw-lead,
.mw-article-body > p:first-child {
	font-size: var(--mw-size-lead);
	line-height: var(--mw-leading-lead);
}

.mw-article-body h2 {
	margin-top: 1.8em;
	font-size: var(--mw-size-display-md);
	line-height: var(--mw-leading-display-md);
}

.mw-article-body h3 {
	margin-top: 1.6em;
	font-size: 22px;
	line-height: 1.3;
}

.mw-article-body h4 {
	margin-top: 1.5em;
	font-size: 19px;
	line-height: 1.35;
}

.mw-article-body ul,
.mw-article-body ol {
	padding-left: 1.4em;
}

.mw-article-body li + li {
	margin-top: 0.5em;
}

.mw-article-body ul li::marker {
	color: var(--mw-accent);
}

.mw-article-body a {
	color: var(--mw-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mw-article-body img,
.mw-article-body figure img {
	border-radius: var(--mw-radius-lg);
}

.mw-article-body figcaption,
.mw-article-body .wp-element-caption {
	margin-top: 12px;
	color: var(--mw-text-muted);
	font-size: var(--mw-size-small);
	text-align: center;
}

/* ---- Pull quote ---- */
.mw-article-body .mw-pull,
.mw-article-body blockquote {
	margin-block: 2em;
	padding-left: 24px;
	border-left: 3px solid var(--mw-accent);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.45;
	color: var(--mw-navy-900);
}

.mw-article-body blockquote p {
	font: inherit;
	color: inherit;
}

.mw-article-body blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--mw-font-text);
	font-size: var(--mw-size-small);
	font-style: normal;
	font-weight: var(--mw-weight-medium);
	color: var(--mw-text-muted);
}

/* ---- Resource box and partner box ---- */
.mw-resource-box,
.mw-partner-box {
	margin-top: 48px;
	padding: var(--mw-pad-card);
	background-color: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-lg);
	box-shadow: var(--mw-shadow-card);
}

.mw-resource-box > * + *,
.mw-partner-box > * + * {
	margin-top: 10px;
}

.mw-resource-box .mw-box-title,
.mw-partner-box .mw-box-title {
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	color: var(--mw-navy-900);
}

.mw-resource-box ul,
.mw-partner-box ul {
	margin: 0;
	padding-left: 1.2em;
}

/* ---------------------------------------------------------------------------
   6 · Article closing CTA
   Supplied by a GeneratePress Block Element so the copy stays editable.
   ------------------------------------------------------------------------ */

.mw-article-cta {
	text-align: center;
}

.mw-article-cta .mw-lead {
	max-width: var(--mw-w-prose);
	margin-inline: auto;
	margin-top: 24px;
}

.mw-article-cta .mw-btn {
	margin-top: 40px;
}

/* ---------------------------------------------------------------------------
   7 · Pagination
   ------------------------------------------------------------------------ */

.mw-journal-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: clamp(48px, 6vw, 72px);
}

.mw-journal-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 14px;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-blue-100);
	color: var(--mw-navy-900);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-semibold);
	text-decoration: none;
}

.mw-journal-pagination .page-numbers:hover,
.mw-journal-pagination .page-numbers:focus {
	background-color: var(--mw-blue-700);
	color: var(--mw-white);
	text-decoration: none;
}

.mw-journal-pagination .page-numbers.current {
	background-color: var(--mw-navy-900);
	color: var(--mw-white);
}