/*
 * MoneyPantry Block Patterns — patterns.css
 * Loaded on singular posts/pages only via mp_enqueue_assets().
 * All colours reference CSS variables — zero hardcoded hex values.
 *
 * Patterns covered:
 *   .mp-qa               Quick Answer Box
 *   .mp-pro-tip          Pro Tip Box
 *   .mp-warning          Warning Box
 *   .mp-steps            Quick Start Steps
 *   .mp-summary          Summary / Takeaway Box
 *   .mp-earning          Earning Potential
 *   .mp-pros-cons        Pros & Cons
 *   .mp-platform         Platform Card
 *   .mp-research-methodology  Research Methodology
 * ============================================================ */


/* ----------------------------------------------------------
   Shared base — all left-bar patterns
   ---------------------------------------------------------- */
.mp-pattern {
	box-sizing: border-box;
	max-width: 680px;
	margin: 28px 0;
	padding: 18px 20px 16px 20px;
	border: 0.5px solid rgba(15, 23, 42, 0.10);
	border-radius: 0 10px 10px 0;
	font-family: 'DM Sans', system-ui, sans-serif;
}

/* Shared header row: eyebrow label + MP badge */
.mp-pattern-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.mp-pattern-eyebrow {
	font-family: 'Newsreader', Georgia, serif;
	font-style: italic;
	font-size: 12px;
	letter-spacing: 0.01em;
}

/* MP badge — dark variant (used on light-bg patterns) */
.mp-badge {
	display: inline-flex;
	align-items: center;
	background: var(--navy);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 9px;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 0.12em;
	line-height: 1;
	flex-shrink: 0;
}

/* MP badge — transparent variant (used on navy-bg patterns) */
.mp-badge-dim {
	display: inline-flex;
	align-items: center;
	background: rgba(240, 165, 0, 0.15);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 9px;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 0.12em;
	line-height: 1;
	flex-shrink: 0;
}

/* Shared pattern heading */
.mp-pattern-heading {
	font-family: 'Newsreader', Georgia, serif;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.3;
}

/* Shared pattern body text */
.mp-pattern-body {
	font-size: 15px;
	color: var(--ink-mid);
	margin: 0;
	line-height: 1.7;
}


/* ----------------------------------------------------------
   Quick Answer Box  (.mp-qa)
   ---------------------------------------------------------- */
.mp-qa {
	background: var(--white);
	border-left: 5px solid var(--gold);
}

.mp-qa .mp-pattern-eyebrow {
	color: var(--gold-dim);
}

.mp-qa .mp-pattern-heading {
	color: var(--navy);
	margin-bottom: 8px;
}


/* ----------------------------------------------------------
   Pro Tip Box  (.mp-pro-tip)
   ---------------------------------------------------------- */
.mp-pro-tip {
	background: var(--white);
	border-left: 5px solid var(--gold);
}

.mp-pro-tip .mp-pattern-eyebrow {
	color: var(--gold-dim);
}


/* ----------------------------------------------------------
   Warning Box  (.mp-warning)
   ---------------------------------------------------------- */
.mp-warning {
	background: #FFFBF0;
	border-left: 5px solid var(--coral);
}

.mp-warning .mp-pattern-eyebrow {
	color: #9A3412;
}

.mp-warning .mp-badge {
	background: var(--navy);
}

.mp-warning .mp-pattern-heading {
	color: #7C2D12;
	margin-bottom: 8px;
}

.mp-warning .mp-pattern-body {
	color: #9A3412;
}


/* ----------------------------------------------------------
   Quick Start Steps  (.mp-steps)
   ---------------------------------------------------------- */
.mp-steps {
	background: var(--white);
	border-left: 5px solid var(--gold);
}

.mp-steps .mp-pattern-eyebrow {
	color: var(--gold-dim);
}

.mp-steps .mp-pattern-heading {
	color: var(--navy);
	margin-bottom: 14px;
}

.mp-step-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 13px;
}

.mp-step-row:last-child {
	margin-bottom: 0;
}

.mp-step-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.mp-step-num {
	width: 24px;
	height: 24px;
	background: var(--navy);
	color: var(--gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.mp-step-line {
	width: 1px;
	height: 12px;
	background: rgba(240, 165, 0, 0.30);
	margin-top: 3px;
}

.mp-step-text {
	font-size: 15px;
	color: var(--ink-mid);
	line-height: 1.7;
	padding-top: 2px;
}

.mp-step-text strong {
	color: var(--navy);
}


/* ----------------------------------------------------------
   Summary / Takeaway Box  (.mp-summary)
   ---------------------------------------------------------- */
.mp-summary {
	background: var(--navy);
	border-left: 5px solid var(--gold);
	border-radius: 0 10px 10px 0;
	padding: 18px 20px 16px 20px;
	max-width: 680px;
	margin: 28px 0;
	box-sizing: border-box;
	font-family: 'DM Sans', system-ui, sans-serif;
}

.mp-summary .mp-pattern-eyebrow {
	color: var(--gold);
}

.mp-summary .mp-pattern-heading {
	color: var(--white);
	margin-bottom: 12px;
}

.mp-summary-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(240, 165, 0, 0.15);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.8;
}

.mp-summary-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.mp-summary-dash {
	color: var(--gold);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
	font-size: 16px;
	line-height: 1;
}


/* ----------------------------------------------------------
   Earning Potential  (.mp-earning)
   ---------------------------------------------------------- */
.mp-earning {
	background: var(--navy);
	border-left: 5px solid var(--gold);
	border-radius: 0 10px 10px 0;
	padding: 18px 20px;
	max-width: 680px;
	margin: 28px 0;
	box-sizing: border-box;
	font-family: 'DM Sans', system-ui, sans-serif;
}

.mp-earning .mp-pattern-eyebrow {
	color: var(--gold);
}

.mp-earning .mp-pattern-heading {
	color: var(--white);
	margin-bottom: 14px;
}

.mp-ep-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.mp-ep-tier {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 12px 8px;
	text-align: center;
	border-top: 2px solid var(--gold);
}

.mp-ep-amount {
	font-family: 'Newsreader', Georgia, serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--gold);
	line-height: 1;
}

.mp-ep-label {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.50);
	margin-top: 5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

@media (max-width: 480px) {
	.mp-ep-tiers {
		grid-template-columns: 1fr;
	}
}


/* ----------------------------------------------------------
   Pros & Cons  (.mp-pros-cons)
   ---------------------------------------------------------- */
.mp-pros-cons {
	border: 0.5px solid rgba(15, 23, 42, 0.10);
	border-top: 5px solid var(--gold);
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	max-width: 680px;
	margin: 28px 0;
	box-sizing: border-box;
	font-family: 'DM Sans', system-ui, sans-serif;
}

.mp-pc-header {
	background: var(--navy);
	padding: 12px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mp-pc-title {
	font-family: 'Newsreader', Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
	margin: 0;
	line-height: 1.3;
}

.mp-pc-title em {
	color: var(--gold);
}

.mp-pc-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.mp-pc-col {
	padding: 14px 16px;
}

.mp-pc-col.pros {
	background: #F0FDF4;
	border-right: 0.5px solid rgba(15, 23, 42, 0.08);
}

.mp-pc-col.cons {
	background: #FFF5F5;
}

.mp-pc-col-label {
	font-family: 'Newsreader', Georgia, serif;
	font-style: italic;
	font-size: 13px;
	margin-bottom: 10px;
}

.mp-pc-col.pros .mp-pc-col-label {
	color: var(--forest);
}

.mp-pc-col.cons .mp-pc-col-label {
	color: #9A3412;
}

.mp-pc-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: var(--ink-mid);
	margin-bottom: 8px;
	line-height: 1.6;
}

.mp-pc-item:last-child {
	margin-bottom: 0;
}

.mp-pc-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 6px;
}

.mp-pc-col.pros .mp-pc-dot {
	background: var(--forest);
}

.mp-pc-col.cons .mp-pc-dot {
	background: #DC2626;
}

@media (max-width: 480px) {
	.mp-pc-cols {
		grid-template-columns: 1fr;
	}

	.mp-pc-col.pros {
		border-right: none;
		border-bottom: 0.5px solid rgba(15, 23, 42, 0.08);
	}
}


/* ----------------------------------------------------------
   Platform Card  (.mp-platform)
   ---------------------------------------------------------- */
.mp-platform {
	border: 0.5px solid rgba(15, 23, 42, 0.10);
	border-top: 5px solid var(--gold);
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	max-width: 680px;
	margin: 28px 0;
	box-sizing: border-box;
	font-family: 'DM Sans', system-ui, sans-serif;
}

.mp-platform-header {
	background: var(--gold-pale);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 0.5px solid rgba(240, 165, 0, 0.30);
}

.mp-platform-identity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mp-platform-monogram {
	width: 40px;
	height: 40px;
	background: var(--navy);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Newsreader', Georgia, serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--gold);
	flex-shrink: 0;
	line-height: 1;
}

.mp-platform-name {
	font-family: 'Newsreader', Georgia, serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.2;
}

.mp-platform-tagline {
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 3px;
}

.mp-platform-badge {
	display: inline-flex;
	align-items: center;
	background: var(--navy);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 9px;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 0.12em;
	line-height: 1;
	flex-shrink: 0;
	margin-left: 12px;
}

.mp-platform-body {
	background: var(--white);
	padding: 14px 18px;
}

.mp-platform-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 12px;
}

.mp-platform-stat {
	text-align: center;
	padding: 10px 6px;
	border-top: 2px solid var(--gold);
	background: var(--paper);
	border-radius: 0 0 6px 6px;
}

.mp-platform-stat-value {
	font-family: 'Newsreader', Georgia, serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1;
}

.mp-platform-stat-label {
	font-size: 10px;
	color: var(--ink-soft);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mp-platform-verdict {
	font-size: 15px;
	color: var(--ink-mid);
	line-height: 1.7;
}

.mp-platform-verdict strong {
	color: var(--gold-dim);
}


/* ----------------------------------------------------------
   Research Methodology  (.mp-research-methodology)
   ---------------------------------------------------------- */
.mp-research-methodology {
	background: var(--paper);
	border: 0.5px solid rgba(15, 23, 42, 0.10);
	border-left: 5px solid var(--navy-soft);
	border-radius: 0 10px 10px 0;
	padding: 16px 18px 15px 18px;
	max-width: 680px;
	margin: 28px 0;
	box-sizing: border-box;
	font-family: 'DM Sans', system-ui, sans-serif;
}

.mp-rm-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.mp-rm-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.mp-rm-icon {
	flex-shrink: 0;
	color: var(--navy-soft);
}

.mp-rm-eyebrow {
	font-family: 'Newsreader', Georgia, serif;
	font-style: italic;
	font-size: 12px;
	color: var(--ink-soft);
	letter-spacing: 0.01em;
}

.mp-rm-heading {
	font-family: 'Newsreader', Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 7px;
	line-height: 1.3;
}

.mp-rm-body {
	font-size: 13.5px;
	color: var(--ink-mid);
	line-height: 1.58;
}

.mp-rm-body p {
	margin: 0;
}

@media (max-width: 480px) {
	.mp-research-methodology {
		padding: 14px 14px 13px;
	}

	.mp-rm-heading {
		font-size: 15px;
	}

	.mp-rm-body,
	.mp-rm-body p,
	.mp-rm-body ul,
	.mp-rm-body ol {
		font-size: 13.5px;
		line-height: 1.56;
	}
}