/* =============================================================================
   PAGINILE DE COMPARAȚIE  (/compare/ și „Modula vs …"; vezi
   Canvas\is_compare_page() în inc/assets.php)

   Generate de ~/modula-ollie-build/gen_compare.py, cu piesele din site.css:
   secțiunile (`.mh-section`), eticheta (`.mh-rule`), capul de pagină (`.mh-head`),
   CTA-ul final (`.mh-start-box`). Tabelul funcție cu funcție e [wpchill_vs], cu
   stilul lui în plugin-ul comparison-table. Aici: verdictul, cifrele, capitolele,
   citatele, FAQ-ul pe două coloane și cardurile din hub.

   CUPRINS
     1. Capul paginii
     2. Verdictul („Modula fits if / … fits if")
     3. Demo-ul pe negru
     4. Cifrele principale
     5. Capitolele („Where Modula is different")
     6. Citatele
     7. Întrebările
     8. Hub-ul /compare/
     9. Ecrane înguste
   -------------------------------------------------------------------------- */


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

.mv-hero .mh-head .mh-title { max-width: 760px; }
.mv-hero-btns { gap: 12px; }
.mv-hero .mh-inner > .mv-hero-btns { margin-block-start: 40px; }
.mv-hero .mh-inner > .mv-checked { margin-block-start: 20px; }


/* -----------------------------------------------------------------------------
   2. VERDICTUL
   Două carduri: Modula pe negru, celălalt plugin pe alb, cu câte trei motive.
   -------------------------------------------------------------------------- */

/* Grilele de carduri: fără marginea de sus pe care tema o pune între blocuri (în grilă
   ar împinge al doilea card mai jos decât primul). */
.mv-verdict > *, .mv-quotes > *, .mv-hub > * { margin: 0; }
.mv-verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mv-side { padding: 40px 44px 44px; border-radius: var(--mc-radius-card); }
.mv-side > * { margin: 0; }
.mv-side > * + * { margin-top: 24px; }
.mv-side.is-modula { background: var(--mc-ink); color: var(--wp--preset--color--base); }
.mv-side.is-rival { border: 1px solid var(--mc-line); background: var(--mc-card); }
.mv-points { display: grid; gap: 16px; padding: 0; list-style: none; }
.mv-points li { position: relative; padding-left: 32px; font-size: var(--wp--preset--font-size--base); line-height: 1.5; }
.mv-points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 12px;
	height: 6px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(-45deg);
}


/* -----------------------------------------------------------------------------
   3. DEMO-UL PE NEGRU
   -------------------------------------------------------------------------- */

.mv-dark .mh-lead { color: var(--wp--preset--color--main-accent) !important; }
.mv-demo > * { margin: 0; }


/* -----------------------------------------------------------------------------
   4. CIFRELE PRINCIPALE
   Un rând pe cifră: ce comparăm, Modula, celălalt plugin.
   -------------------------------------------------------------------------- */

.mv-glance { border-top: 1px solid var(--mc-line); }
.mv-glance > * { margin: 0; }
.mv-g-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
	gap: 24px;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px solid var(--mc-line);
}
.mv-g-row > * { margin: 0; }
.mv-g-label { color: var(--mc-muted); font-size: var(--wp--preset--font-size--small); }
.mv-g-row:first-child > * { font-size: var(--wp--preset--font-size--small); }


/* -----------------------------------------------------------------------------
   5. CAPITOLELE
   Numărul, titlul și textul pe trei coloane, cu linii fine între rânduri (ca
   paginile de extensii din canvas).
   -------------------------------------------------------------------------- */

.mv-chapters { border-top: 1px solid var(--mc-line); }
.mv-chapters > * { margin: 0; }
.mv-c-row {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 24px;
	padding: 40px 0;
	border-bottom: 1px solid var(--mc-line);
}
.mv-c-row > * { margin: 0; }
.mv-c-n { padding-top: 10px; color: var(--mc-muted); font-size: var(--wp--preset--font-size--xx-small); font-weight: 600; letter-spacing: .14em; }
.mv-c-title { font-size: var(--wp--preset--font-size--large); line-height: 1.1; }
.mv-c-text { color: var(--mc-muted); line-height: 1.6; }


/* -----------------------------------------------------------------------------
   6. CITATELE
   Cardurile albe ale recenziilor de pe pricing; numele recenzentului e linkul
   spre articol.
   -------------------------------------------------------------------------- */

.mv-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mv-quote {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 34px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
}
.mv-quote > * { margin: 0; }
.mv-q-text { font-family: var(--wp--preset--font-family--cormorant-garamond, Georgia, serif); font-size: var(--wp--preset--font-size--medium); line-height: 1.3; }
.mv-q-who { color: var(--mc-muted); font-size: var(--wp--preset--font-size--x-small); }
.mv-q-who a { color: inherit; text-underline-offset: 3px; }


/* -----------------------------------------------------------------------------
   7. ÎNTREBĂRILE
   Titlul în stânga, întrebările în dreapta, ca FAQ-ul de pe pricing.
   -------------------------------------------------------------------------- */

.mv-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.mv-faq > * { margin: 0; }


/* -----------------------------------------------------------------------------
   8. HUB-UL /compare/
   Trei carduri; tot cardul e linkul (prin „Read the comparison").
   -------------------------------------------------------------------------- */

.mv-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mv-hub-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.mv-hub-card > * { margin: 0; }
.mv-hub-card:hover { border-color: var(--mc-ink); box-shadow: var(--mc-shadow-float); }
.mv-hub-title { font-size: var(--wp--preset--font-size--x-large); line-height: 1.05; }
.mv-hub-text { line-height: 1.6; }
.mv-hub-link { margin-top: auto !important; padding-top: 8px; font-weight: 600; }
.mv-hub-link a { color: var(--mc-ink); text-decoration: none; }
.mv-hub-link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mv-hub-card:focus-within { outline: 2px solid var(--mc-ink); outline-offset: 2px; }


/* -----------------------------------------------------------------------------
   9. ECRANE ÎNGUSTE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.mv-verdict, .mv-quotes, .mv-hub, .mv-faq { grid-template-columns: minmax(0, 1fr); }
	.mv-faq { gap: 24px; }
	.mv-c-row { grid-template-columns: 60px minmax(0, 1fr); }
	.mv-c-row > .mv-c-text { grid-column: 2; }
}

@media (max-width: 600px) {
	.mv-side { padding: 32px 28px; }
	.mv-g-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
	.mv-g-row > .mv-g-label { grid-column: 1 / -1; }
	.mv-c-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 32px 0; }
	.mv-c-row > .mv-c-text { grid-column: auto; }
}