/* ==========================================================================
   MKN BLOG — styles for the Blog section (native WP posts).
   Loaded on the blog archive (template-mkn-blog.php) + standard-post singles
   only. Layers on wow.css + wow-inner.css, reusing .mkn-pagehero / .mkn-dirbar
   / .mkn-dirgrid / .mkn-founder / .mkn-softcta. Only NEW classes live here
   (sections.css is NOT enqueued on blog requests, so the blog owns its own
   ghost/empty/pager equivalents).
   Depends on: mkn-wow-inner (tokens, glass, buttons).
   ========================================================================== */

/* ---- Archive hero: photographic variant (Polish v1.22.0) ------------------
   sections.css is NOT enqueued on blog requests, so the blog owns its own copy
   of the --photo positioning (mirrors assets/sections.css). The plain variant
   below keeps the quill ghost as a graceful fallback when no hero image exists. */
.mkn-pagehero--photo { background-position: center 40%; }
.mkn-pagehero--photo .mkn-pagehero__inner { position: relative; z-index: 2; }

/* ---- Archive hero: faint blog icon ghost (same pattern as sections) ------- */
.mkn-blogarch__hero { position: relative; }
.mkn-blogarch__ghost {
	position: absolute; z-index: 0; pointer-events: none;
	top: 50%; right: clamp(-40px, -2vw, 0px); transform: translateY(-46%);
	width: clamp(280px, 40vw, 560px); height: clamp(280px, 40vw, 560px);
	color: var(--mkn-lavender); opacity: 0.07;
}
.mkn-blogarch__ghost svg { width: 100%; height: 100%; display: block; }
.mkn-blogarch__ghost svg path,
.mkn-blogarch__ghost svg rect,
.mkn-blogarch__ghost svg circle { stroke-dasharray: none; stroke-dashoffset: 0; }

/* ---- Post card (extends .mkn-founder) -------------------------------------- */
.mkn-blogcard__media {
	background:
		radial-gradient(120% 120% at 50% 0%, #322055 0%, var(--mkn-darkest) 70%);
	display: grid; place-items: center;
}
.mkn-blogcard__ico {
	width: 42%; max-width: 132px; color: var(--mkn-lavender); opacity: 0.55;
}
.mkn-blogcard__ico svg { width: 100%; height: 100%; display: block; }
.mkn-blogcard__ico svg path,
.mkn-blogcard__ico svg rect,
.mkn-blogcard__ico svg circle { stroke-dasharray: none; stroke-dashoffset: 0; }

.mkn-blogcard__chip {
	display: inline-block; align-self: flex-start;
	margin: 0 0 10px; padding: 4px 12px; border-radius: 999px;
	background: #f1ecfa; color: var(--mkn-accent-text);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.mkn-blogcard__meta {
	margin: 2px 0 10px; font-size: 0.84rem; color: var(--mkn-muted-text);
	font-weight: 500;
}
.mkn-blogcard__exc {
	font-size: 0.95rem; line-height: 1.6; color: var(--mkn-muted-text);
	margin: 0 0 14px;
}

/* ---- Ejemplo / demo cue (native posts flagged _mkn_demo) --------------------
   Mirrors the section-engine chip (assets/sections.css) but self-contained
   here, because blog pages don't enqueue sections.css. A sample post can never
   be mistaken for a real one: violet Ejemplo/Example pill + a faint diagonal
   wash over the card, plus a dashed note atop the single. Inert with no demo
   posts; the launch purge removes any post carrying _mkn_demo=1. ------------- */
.mkn-blogcard { position: relative; }
.mkn-eg-chip {
	position: absolute; top: 14px; right: 14px; z-index: 3;
	display: inline-flex; align-items: center;
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--mkn-primary);
	background: #efe6ff; border: 1px solid #d8c6f5; border-radius: 999px;
	padding: 5px 11px;
}
.mkn-eg-chip--inline { position: static; }
.mkn-blogcard.mkn-demo::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	border-radius: inherit;
	background: repeating-linear-gradient(135deg,
		rgba(157,123,234,0.07) 0 14px, rgba(157,123,234,0) 14px 28px);
}
.mkn-demo-note {
	margin: 0 0 22px; padding: 10px 14px;
	font-size: 0.85rem; font-weight: 600; color: var(--mkn-primary);
	background: #f3ecff; border: 1px dashed #d8c6f5; border-radius: 10px;
}

/* ---- Empty-state: honest launch state -------------------------------------- */
.mkn-blogempty {
	max-width: 640px; margin: 0 auto; text-align: center;
	padding: clamp(30px, 5vw, 64px) 20px;
}
.mkn-blogempty__ico {
	display: block; width: 96px; height: 96px; margin: 0 auto 24px;
	color: var(--mkn-gold);
}
.mkn-blogempty__ico svg { width: 100%; height: 100%; display: block; }
.mkn-blogempty__ico svg path,
.mkn-blogempty__ico svg rect,
.mkn-blogempty__ico svg circle { stroke-dasharray: none; stroke-dashoffset: 0; }
.mkn-blogempty__t {
	font-family: var(--mkn-font-display); font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15;
	color: var(--mkn-primary); margin: 0 0 14px;
}
.mkn-blogempty__p {
	color: #6b6480; line-height: 1.75; font-size: 1.04rem;
	margin: 0 auto 30px; max-width: 48ch;
}
.mkn-blogempty__actions {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 14px 26px;
}
.mkn-blogempty__back {
	font-weight: 600; font-size: 0.95rem; color: var(--mkn-accent-text);
}
.mkn-blogempty__back:hover { text-decoration: underline; }

/* ---- Pagination ------------------------------------------------------------ */
.mkn-blogpager {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 8px; max-width: 1120px; margin: clamp(36px, 5vw, 56px) auto 0;
}
.mkn-blogpager .page-numbers {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px;
	padding: 0 12px; border-radius: 12px; border: 1px solid #e6def3;
	background: #fff; color: var(--mkn-primary); font-weight: 600;
	font-size: 0.95rem; text-decoration: none;
	transition: border-color 200ms var(--mkn-ease), background 200ms var(--mkn-ease);
}
.mkn-blogpager a.page-numbers:hover { border-color: var(--mkn-accent); background: #f7f4fc; }
.mkn-blogpager .page-numbers.current {
	background: var(--mkn-primary); border-color: var(--mkn-primary); color: #fff;
}
.mkn-blogpager .page-numbers.dots { border: 0; background: transparent; min-width: 20px; }

/* ==========================================================================
   SINGLE — editorial post layout
   ========================================================================== */

/* ---- Dark header band ------------------------------------------------------ */
.mkn-bloghero__inner { max-width: 860px; }
.mkn-bloghero__chip {
	display: inline-block; margin: 2px 0 16px; padding: 5px 14px;
	border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08); color: var(--mkn-lavender);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
/* Chip row: the optional Ejemplo pill sits inline with the category chip. */
.mkn-bloghero__chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 2px 0 16px; }
.mkn-bloghero__chips .mkn-bloghero__chip,
.mkn-bloghero__chips .mkn-eg-chip--inline { margin: 0; }
.mkn-bloghero__title .mkn-line__in { max-width: 22ch; }
.mkn-bloghero__meta {
	margin: 18px 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.72);
	font-weight: 500; letter-spacing: 0.01em;
}

/* ---- Article body: comfortable editorial measure --------------------------- */
.mkn-blogpost {
	background: #fff;
	padding: clamp(40px, 6vw, 72px) 24px clamp(48px, 7vw, 88px);
}
/* Demo note aligns to the reading measure, not the full padded width. */
.mkn-blogpost > .mkn-demo-note { max-width: 68ch; margin-left: auto; margin-right: auto; }
.mkn-blogpost__figure {
	max-width: 900px; margin: 0 auto clamp(32px, 5vw, 52px);
	border-radius: 18px; overflow: hidden;
	box-shadow: 0 24px 60px -28px rgba(24, 15, 48, 0.35);
}
.mkn-blogpost__figure img { display: block; width: 100%; height: auto; }

.mkn-blogpost__content {
	max-width: 68ch; margin: 0 auto;
	font-size: 1.09rem; line-height: 1.85; color: #3d3752;
}
.mkn-blogpost__content > * + * { margin-top: 1.15em; }
.mkn-blogpost__content h2,
.mkn-blogpost__content h3 {
	font-family: var(--mkn-font-display); font-weight: 700;
	color: var(--mkn-primary); line-height: 1.2;
}
.mkn-blogpost__content h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); margin-top: 1.9em; }
.mkn-blogpost__content h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); margin-top: 1.7em; }
/* Polish v1.23.0: prefix body.mkn-wow so this beats `body.mkn-wow a {
   text-decoration:none }` (0,1,2). Blog singles render inside mkn_wow_open(),
   so an inline link added to a post must keep its underline — a link inside a
   text block must be distinguishable by more than colour (WCAG 1.4.1 / axe
   link-in-text-block). No published post carries inline links yet; this makes
   the blog genuinely publish-ready the moment one does. */
body.mkn-wow .mkn-blogpost__content a,
.mkn-blogpost__content a {
	color: var(--mkn-accent-text); font-weight: 600;
	text-decoration: underline; text-decoration-color: #d7cbee;
	text-underline-offset: 3px;
	transition: text-decoration-color 180ms var(--mkn-ease);
}
.mkn-blogpost__content a:hover { text-decoration-color: var(--mkn-accent-text); }
.mkn-blogpost__content blockquote {
	margin: 1.6em 0; padding: 6px 0 6px 26px;
	border-left: 3px solid var(--mkn-gold);
	font-family: var(--mkn-font-display); font-style: italic;
	font-size: 1.18em; line-height: 1.6; color: var(--mkn-primary);
}
.mkn-blogpost__content blockquote p { margin: 0; }
.mkn-blogpost__content blockquote cite {
	display: block; margin-top: 10px;
	font-family: var(--mkn-font-body, inherit); font-style: normal;
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--mkn-muted-text);
}
.mkn-blogpost__content ul,
.mkn-blogpost__content ol { padding-left: 1.4em; }
.mkn-blogpost__content li { margin-top: 0.5em; }
.mkn-blogpost__content li::marker { color: var(--mkn-accent-text); font-weight: 700; }
.mkn-blogpost__content img {
	max-width: 100%; height: auto; border-radius: 14px;
	margin: 1.6em 0;
}
.mkn-blogpost__content figure { margin: 1.6em 0; }
.mkn-blogpost__content figcaption {
	margin-top: 8px; font-size: 0.85rem; color: var(--mkn-muted-text);
	text-align: center;
}
.mkn-blogpost__content hr {
	border: 0; height: 1px; background: #efeaf8; margin: 2.2em auto; max-width: 220px;
}

.mkn-blogpost__foot {
	max-width: 68ch; margin: clamp(36px, 5vw, 52px) auto 0;
	padding-top: 22px; border-top: 1px solid #efeaf8;
}
.mkn-blogpost__back {
	font-weight: 600; font-size: 0.95rem; color: var(--mkn-accent-text);
}
.mkn-blogpost__back:hover { text-decoration: underline; }

/* ---- Prev / next nav -------------------------------------------------------- */
.mkn-blognav {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	max-width: 960px; margin: 0 auto;
	padding: 0 24px clamp(48px, 7vw, 80px);
	background: transparent;
}
.mkn-blognav__card {
	display: flex; flex-direction: column; gap: 8px;
	padding: 22px 24px; border-radius: 16px;
	border: 1px solid #e6def3; background: #fff;
	text-decoration: none;
	transition: border-color 220ms var(--mkn-ease), transform 220ms var(--mkn-ease), box-shadow 220ms var(--mkn-ease);
}
.mkn-blognav__card:hover {
	border-color: var(--mkn-accent); transform: translateY(-3px);
	box-shadow: 0 18px 40px -24px rgba(24, 15, 48, 0.35);
}
.mkn-blognav__card--next { text-align: right; align-items: flex-end; }
.mkn-blognav__dir {
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--mkn-muted-text);
}
.mkn-blognav__title {
	font-family: var(--mkn-font-display); font-weight: 700;
	font-size: 1.05rem; line-height: 1.35; color: var(--mkn-primary);
}
@media (max-width: 640px) {
	.mkn-blognav { grid-template-columns: 1fr; }
	.mkn-blognav__card--next { text-align: left; align-items: flex-start; }
}

/* The blogpost sits on white; give the single page the same soft page bg the
   rest of the inner pages use between article and CTA. */
.mkn-blogsingle { background: var(--mkn-bg); }

/* ---- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mkn-blogcard, .mkn-blognav__card { transition: none; }
}