/* =============================================================================
   BLOG  (se încarcă pe lista de articole, arhive, căutare și articol; vezi
   Canvas\is_blog_page() în inc/blog.php)

   Template-urile sunt generate de ~/modula-ollie-build/gen_blog.py, cu piesele
   din site.css: secțiunile (`.mh-section`), eticheta (`.mh-rule`), capul de
   pagină (`.mh-head`), CTA-ul final (`.mh-start-box`) și bara de căutare
   (`.mc-search`). Aici e doar ce ține de blog. Culorile, rotunjimile și umbrele
   sunt variabilele `--mc-*`; mărimile de text, presetările temei.

   CUPRINS
     1. Capul paginii
     2. Grila de articole
     3. Primul articol al fiecărei pagini, mare
     4. Paginarea
     5. Articolul: capul
     6. Articolul: textul
     7. Ecrane înguste
   -------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   1. CAPUL PAGINII
   -------------------------------------------------------------------------- */

.mb-hero .mh-head .mh-title { max-width: 760px; }
.mb-hero .mh-lead p { margin: 0; }
.mb-search { max-width: 720px; }


/* -----------------------------------------------------------------------------
   2. GRILA DE ARTICOLE
   Fotografia, apoi categoria și data, titlul și primele rânduri. Tot cardul e
   un link prin titlu; fotografia are linkul ei, pentru cine dă click pe ea.
   -------------------------------------------------------------------------- */

.mb-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 72px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mb-grid > .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.mb-card-img {
	margin: 0;
	overflow: hidden;
	border-radius: var(--mc-radius-row);
	background: var(--mc-tint);
}
/* Un contur fin peste imagine, ca o copertă deschisă să nu se topească în crem. */
.mb-card-img,
.mb-post-img { outline: 1px solid rgb(30 30 28 / .1); outline-offset: -1px; }
.mb-card-img img { display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mb-grid > .wp-block-post:hover .mb-card-img img { transform: scale(1.03); }

.mb-card-body > * { margin: 0; }
.mb-card-body > * + * { margin-top: 12px; }

/* Categoria · data (· timpul de citire, pe articol). */
.mb-meta {
	gap: 4px 0;
	align-items: center;
	color: var(--mc-muted);
	font-size: var(--wp--preset--font-size--x-small);
}
.mb-meta > * { margin: 0; }
.mb-meta > * + *::before { content: "·"; margin: 0 10px; }
.mb-cat {
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mb-cat a { color: var(--mc-muted); text-decoration: none; }
.mb-cat a:hover { color: var(--mc-ink); }

.mb-card-title {
	font-size: clamp(1.4rem, 1.2rem + .55vw, 1.7rem);
	line-height: 1.12;
	text-wrap: balance;
}
.mb-card-title a { color: var(--mc-ink); text-decoration: none; }
.mb-card-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.mb-card-excerpt { color: var(--mc-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.mb-card-excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.mb-card-excerpt .wp-block-post-excerpt__more-text { display: none; }


/* -----------------------------------------------------------------------------
   3. PRIMUL ARTICOL AL FIECĂREI PAGINI, MARE
   În listele blogului (`.mb-list`: blogul, arhivele, căutarea) primul articol
   ia tot rândul: fotografia în stânga, textul în dreapta, cu o linie dedesubt.
   Cu 25 de articole pe pagină (inc/blog.php) rămân opt rânduri pline de câte trei.
   -------------------------------------------------------------------------- */

.mb-list .mb-grid > .wp-block-post:first-child {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	padding-bottom: 72px;
	border-bottom: 1px solid var(--mc-line);
}
.mb-list .mb-grid > .wp-block-post:first-child .mb-card-img { border-radius: var(--mc-radius-card); }
.mb-list .mb-grid > .wp-block-post:first-child .mb-card-body > * + * { margin-top: 20px; }
.mb-list .mb-grid > .wp-block-post:first-child .mb-card-title {
	font-size: clamp(2rem, 1.3rem + 1.8vw, 3.1rem);
	line-height: 1.04;
}
.mb-list .mb-grid > .wp-block-post:first-child .mb-card-excerpt { font-size: var(--wp--preset--font-size--base); }
.mb-list .mb-grid > .wp-block-post:first-child .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 4; }


/* -----------------------------------------------------------------------------
   4. PAGINAREA
   Pastile ca butoanele site-ului; pagina curentă e cea plină.
   -------------------------------------------------------------------------- */

.mb-pages { gap: 8px; margin-top: 88px !important; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; }
.mb-pages .page-numbers,
.mb-pages .wp-block-query-pagination-previous,
.mb-pages .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--mc-line);
	border-radius: var(--wp--preset--border-radius--full);
	color: var(--mc-ink);
	text-decoration: none;
	box-sizing: border-box;
}
.mb-pages a:hover { border-color: var(--mc-ink); }
.mb-pages .page-numbers.current { border-color: var(--mc-ink); background: var(--mc-ink); color: var(--wp--preset--color--tertiary); }
.mb-pages .page-numbers.dots { border-color: transparent; }
.mb-pages .wp-block-query-pagination-numbers { display: flex; gap: 8px; }


/* -----------------------------------------------------------------------------
   5. ARTICOLUL: CAPUL
   Ca la o revistă: categoria · data · timpul de citire, un titlu mare, șapoul
   (descrierea Yoast, când nu repetă primul paragraf) și coperta, lată. Capul e
   deschis și la noutăți: copertele sunt pe negru și pe un cap negru s-ar pierde.
   -------------------------------------------------------------------------- */

.mb-post-head { max-width: 1060px; }
.mb-post-head > * { margin: 0; }
.mb-title {
	margin-top: 28px !important;
	font-size: clamp(2.8rem, 1.5rem + 4.4vw, 5.6rem);
	line-height: .98;
	letter-spacing: -.015em;
	text-wrap: balance;
}
.mb-deck { max-width: 760px; margin-top: 32px !important; color: var(--mc-muted); font-size: var(--wp--preset--font-size--medium); line-height: 1.5; }
.mb-deck:empty { display: none; }
.mb-post-hero .mh-inner > .mb-post-img { margin-block-start: 64px; }
.mb-post-img { overflow: hidden; border-radius: var(--mc-radius-card); }


/* -----------------------------------------------------------------------------
   6. ARTICOLUL: TEXTUL
   Coloana de citire a temei, cu ritm de revistă: primul paragraf mai mare, cu
   inițiala în Cormorant; fiecare H2 e un capitol numerotat (01 ───), iar
   separatorul pus de autori sub titluri dispare; imaginile ies din coloană
   (1040px; 1180px la noutăți); citatele sunt mari, cu o linie în stânga.
   -------------------------------------------------------------------------- */

.mb-content { counter-reset: mb-chapter; }
.mb-content a { text-underline-offset: 3px; }

.mb-content > p:first-child { font-size: var(--wp--preset--font-size--medium); line-height: 1.55; }
.mb-content > p:first-child::first-letter {
	float: left;
	margin: .07em .1em 0 0;
	color: var(--mc-ink);
	font-family: var(--wp--preset--font-family--cormorant-garamond, Georgia, serif);
	font-size: 4.3em;
	font-weight: 500;
	line-height: .8;
}

.mb-content > h2 { counter-increment: mb-chapter; margin-top: 2.4em; font-size: var(--wp--preset--font-size--x-large); line-height: 1.08; text-wrap: balance; }
.mb-content > h2::before {
	content: counter(mb-chapter, decimal-leading-zero);
	display: block;
	margin-bottom: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--mc-line);
	color: var(--mc-muted);
	font-family: var(--wp--preset--font-family--instrument-sans, sans-serif);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
}
.mb-content > h2 + .wp-block-separator { display: none; }
.mb-content h3:not(.wp-block-accordion-heading) { margin-top: 1.8em; font-size: var(--wp--preset--font-size--large); line-height: 1.15; }
.mb-content h4 { margin-top: 1.8em; font-size: var(--wp--preset--font-size--medium); line-height: 1.2; }
.mb-content .wp-block-separator {
	height: 0;
	margin-block: 32px;
	border: 0;
	border-top: 1px solid var(--mc-line);
	background: none;
	opacity: 1;
}

.mb-content > .wp-block-image:not(.alignleft):not(.alignright),
.mb-content > .wp-block-gallery,
.mb-content > .wp-block-video,
.mb-content > .wp-block-embed { max-width: 1040px; margin-block: 56px; }
body.mb-release .mb-content > .wp-block-image:not(.alignleft):not(.alignright),
body.mb-release .mb-content > .wp-block-video { max-width: 1180px; }
.mb-content > .wp-block-image img { margin-inline: auto; }
.mb-content .wp-block-image img,
.mb-content .wp-block-video video,
.mb-content .wp-block-embed iframe { border-radius: var(--mc-radius-control); }
.mb-content figcaption { margin-top: 14px; color: var(--mc-muted); font-size: var(--wp--preset--font-size--x-small); text-align: center; }

.mb-content > .wp-block-quote,
.mb-content > .wp-block-pullquote,
.mb-content > blockquote {
	max-width: 860px;
	margin-block: 56px;
	padding: 4px 0 4px 32px;
	border: 0;
	border-left: 3px solid var(--mc-ink);
	font-family: var(--wp--preset--font-family--cormorant-garamond, Georgia, serif);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	text-align: left;
}
.mb-content > .wp-block-quote p,
.mb-content > .wp-block-pullquote p { margin: 0; font-size: inherit; line-height: inherit; }
.mb-content .wp-block-quote cite,
.mb-content .wp-block-pullquote cite { display: block; margin-top: 18px; color: var(--mc-muted); font-family: var(--wp--preset--font-family--instrument-sans, sans-serif); font-size: var(--wp--preset--font-size--x-small); font-style: normal; }

.mb-content li::marker { color: var(--mc-muted); }

/* Casete în text (md2wp.py): sfaturi, atenționări, „bine de știut", exemple și rezumatul
   de la început. Ies din coloana de text prin fond, bara din stânga și eticheta cu
   iconiță; tipul vine din clasa pusă de md2wp după primul cuvânt îngroșat. */
.mb-content > .post-callout {
	--co-bg: var(--wp--preset--color--primary-alt);
	--co-accent: var(--mc-ink);
	--co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
	max-width: 740px;
	margin-block: 44px;
	padding: 22px 28px 24px;
	border-left: 4px solid var(--co-accent);
	border-radius: 4px var(--mc-radius-row) var(--mc-radius-row) 4px;
	background: var(--co-bg);
}
.mb-content > .post-callout.is-tip { --co-bg: #E6EFE7; --co-accent: #2F6B45; --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.8V16h5v-.3c0-.7.4-1.4 1-1.8A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.mb-content > .post-callout.is-warn { --co-bg: #F8EDD5; --co-accent: #94640C; --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); }
.mb-content > .post-callout.is-example { --co-bg: var(--wp--preset--color--tertiary); --co-accent: var(--mc-muted); --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4M10 12h5M10 16h5'/%3E%3C/svg%3E"); border: 1px dashed var(--mc-line); border-left: 4px solid var(--co-accent); }
.mb-content .post-callout > * { margin-block: 0; }
.mb-content .post-callout > * + * { margin-top: .7em; }
.mb-content .post-callout p,
.mb-content .post-callout li { font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.mb-content .post-callout.is-example p { font-size: var(--wp--preset--font-size--x-small); }
.mb-content .post-callout-label {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--co-accent, var(--mc-ink));
	font-size: var(--wp--preset--font-size--xx-small) !important;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.2 !important;
	text-transform: uppercase;
}
.mb-content .post-callout-label::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--co-icon) center / contain no-repeat;
	mask: var(--co-icon) center / contain no-repeat;
}

.mb-content > .post-summary {
	--co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E");
	--co-accent: #94640C;
	max-width: 740px;
	margin-block: 40px 48px;
	padding: 26px 32px 28px;
	border: 1px solid var(--mc-line);
	border-top: 4px solid var(--mc-ink);
	border-radius: 4px 4px var(--mc-radius-card) var(--mc-radius-card);
	background: var(--wp--preset--color--tertiary);
	box-shadow: var(--mc-shadow-float);
}
.mb-content .post-summary > * { margin-block: 0; }
.mb-content .post-summary > * + * { margin-top: .8em; }
.mb-content .post-summary .post-callout-label { color: var(--mc-ink); }
.mb-content .post-summary .post-callout-label::before { color: var(--co-accent); }
.mb-content .post-summary ol,
.mb-content .post-summary ul { padding-left: 1.3em; }
.mb-content .post-summary li + li { margin-top: .45em; }
.mb-content .post-summary li::marker { color: var(--co-accent); font-weight: 700; }

/* Tabelele pe coloana lată, ca imaginile. */
.mb-content > .wp-block-table.alignwide { max-width: 1040px; margin-block: 48px; }
.mb-content > .wp-block-table.alignwide table { width: 100%; background: var(--wp--preset--color--tertiary); border-radius: var(--mc-radius-row); overflow: hidden; }
.mb-content > .wp-block-table thead th { background: var(--wp--preset--color--primary-alt); font-weight: 700; }
.mb-content > .wp-block-table td:first-child { font-weight: 600; }

/* Toate imaginile din articol au același cadru: 16:9, imaginea întreagă în el (nu
   tăiată), pe fondul cald al temei. Așa o captură înaltă și una lată ies la fel de mari. */
.mb-content > .wp-block-image:not(.alignleft):not(.alignright) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	padding: clamp(12px, 3vw, 36px);
	box-sizing: border-box;
	object-fit: contain;
	background: var(--wp--preset--color--primary-alt);
	border-radius: var(--mc-radius-card);
}
.mb-content > .wp-block-video video { width: 100%; aspect-ratio: 16 / 9; background: var(--mc-ink); border-radius: var(--mc-radius-card); }

@media (max-width: 640px) {
	.mb-content > .post-callout { padding: 18px 20px 20px; }
	.mb-content > .post-summary { padding: 22px 22px 24px; }
}


/* -----------------------------------------------------------------------------
   7. ECRANE ÎNGUSTE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	.mb-list .mb-grid > .wp-block-post:first-child { grid-template-columns: 1fr; gap: 24px; padding-bottom: 56px; }
}

@media (max-width: 640px) {
	.mb-grid { grid-template-columns: 1fr; gap: 56px; }
	.mb-post-hero .mh-inner > .mb-post-img { margin-block-start: 36px; }
	/* Categoria pe un rând, data și timpul de citire dedesubt (altfel rândul se rupe
	   și al doilea începe cu „·"). */
	.mb-post-head .mb-cat { flex-basis: 100%; margin-bottom: 8px; }
	.mb-post-head .mb-cat + *::before { content: none; }
	.mb-content > p:first-child::first-letter { font-size: 3.6em; }
}

/* Cuprinsul articolului (blog.js, din titlurile H2). Pe ecrane late stă în dreapta și
   urmărește pagina; mai îngust e o casetă pliată deasupra articolului. */
.mb-content > h2 { scroll-margin-top: 96px; }
.mb-toc {
	max-width: 740px;
	margin: 0 auto 40px;
	padding: 14px 20px;
	border-radius: 18px;
	background: var(--wp--preset--color--primary-accent);
	font-size: var(--wp--preset--font-size--x-small);
}
.mb-toc-t {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--main);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.mb-toc-t::after { content: "+"; }
.mb-toc.is-open .mb-toc-t::after { content: "–"; }
.mb-toc ol { display: none; margin: 10px 0 0; padding: 0; list-style: none; }
.mb-toc.is-open ol { display: block; }
.mb-toc a {
	display: block;
	padding: 5px 0;
	color: var(--wp--preset--color--secondary);
	line-height: 1.35;
	text-decoration: none;
}
.mb-toc a:hover, .mb-toc a.is-active { color: var(--wp--preset--color--main); }
.mb-toc a.is-active { font-weight: 600; }

@media (min-width: 1440px) {
	.mb-article { position: relative; }
	.mb-toc {
		position: absolute;
		top: var(--wp--preset--spacing--xx-large);
		left: calc(50% + 536px); /* lângă tabelele late (1040px), indiferent de lățimea ecranului */
		bottom: 0;
		width: 168px;
		max-width: none;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: none;
	}
	.mb-toc-in { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
	.mb-toc-t { cursor: default; pointer-events: none; }
	.mb-toc-t::after, .mb-toc.is-open .mb-toc-t::after { content: none; }
	.mb-toc ol, .mb-toc.is-open ol { display: block; padding-left: 0; border-left: 1px solid var(--mc-line); }
	.mb-toc a { margin-left: -1px; padding: 5px 0 5px 12px; border-left: 2px solid transparent; }
	.mb-toc a.is-active { border-left-color: currentColor; }
}