/**
 * DD Learn - single-post blocks (money bridge + learning path).
 *
 * Design law (DESIGN-BANS.md): the whole border vocabulary is a 1px
 * hairline; emphasis comes from the icon tile, the tint and type weight.
 * No eyebrow pills, no accent bars, no logical border shorthands carrying
 * colour (trap #10), no :not([class]) (trap #11).
 *
 * Dark mode (traps #7/#9): light-authored; the dark block re-declares each
 * token with !important AND pins the plugin's own twin with the literal
 * value repeated. Brand gold is written per channel (`rgb(var(--lrn-g1) ...)`)
 * so the plugin cannot parse the CTA gradient as a colour and mud it.
 */

.dd-lrn-bridge,
.dd-lrn-sibs {
	--lrn-card: #ffffff;
	--lrn-tile: rgba(146, 90, 10, 0.08);
	--lrn-brd: rgba(36, 26, 6, 0.12);
	--lrn-ink: #241a06;
	--lrn-mut: #6d6353;
	--lrn-gold: rgb(154, 125, 0);
	/* The CTA gold, per channel. The dark plugin rewrites every colour it can
	   parse, so the gradient is assembled from integers it cannot read as one;
	   the /learn/ hub carries the same pair. */
	--lrn-g1: 196;
	--lrn-g2: 120;
	--lrn-g3: 17;
	--lrn-b1: 255;
	--lrn-b2: 191;
	--lrn-b3: 47;
	margin: 34px 0 0;
	border: 1px solid var(--lrn-brd);
	border-radius: 18px;
	background: linear-gradient(var(--lrn-card), var(--lrn-card));
	padding: 22px 24px;
}

/* The site default is content-box (measured, not read), so every designed
   block opts in for itself. Without this a padded `width: 100%` overflows
   its own card by exactly its horizontal padding. */
.dd-lrn-bridge,
.dd-lrn-sibs,
.dd-lrn-bridge *,
.dd-lrn-sibs * {
	box-sizing: border-box;
}

/* ---- the bridge ---- */
.dd-lrn-bridge {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.dd-lrn-bridge__tile {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: var(--lrn-tile);
	color: var(--lrn-gold);
}
.dd-lrn-bridge__tile svg {
	width: 22px;
	height: 22px;
	transform: scaleX(-1); /* the arrow points the RTL reading way */
}
.dd-lrn-bridge__txt {
	flex: 1 1 260px;
	min-width: 0;
}
.dd-lrn-bridge .dd-lrn-bridge__t {
	margin: 0 0 4px !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--lrn-ink);
	line-height: 1.5;
	text-align: start;
}
.dd-lrn-bridge .dd-lrn-bridge__d {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--lrn-mut);
	line-height: 1.9;
	text-align: start;
}
.dd-lrn-bridge__go {
	flex: 0 0 auto;
	display: inline-block;
	padding: 12px 22px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgb(var(--lrn-g1) var(--lrn-g2) var(--lrn-g3)), rgb(var(--lrn-b1) var(--lrn-b2) var(--lrn-b3)));
	color: #241a06 !important;
	font-size: 14px;
	font-weight: 800 !important;
	text-decoration: none !important;
	line-height: 1;
	box-shadow: none !important;
}
.dd-lrn-bridge__go:hover {
	filter: brightness(1.06);
	color: #241a06 !important;
}

/* ---- the learning path ---- */
.dd-lrn-sibs {
	display: grid;
	gap: 10px;
}
.dd-lrn-sibs .dd-lrn-sibs__t {
	margin: 0 0 4px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: var(--lrn-ink);
	text-align: start;
}
.dd-lrn-sibs__it {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--lrn-brd);
	border-radius: 12px;
	text-decoration: none !important;
	background: linear-gradient(var(--lrn-card), var(--lrn-card));
	box-shadow: none !important;
}
.dd-lrn-sibs__it:hover {
	background: var(--lrn-tile);
}
.dd-lrn-sibs__mark {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--lrn-tile);
	color: var(--lrn-gold);
}
.dd-lrn-sibs__mark svg {
	width: 17px;
	height: 17px;
}
.dd-lrn-sibs__tt {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 700 !important;
	color: var(--lrn-ink);
	line-height: 1.7;
}
.dd-lrn-sibs__m {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--lrn-mut);
}
.dd-lrn-sibs__hub {
	justify-self: start;
	font-size: 13px;
	font-weight: 700 !important;
	color: var(--lrn-gold) !important;
	text-decoration: none !important;
	padding: 6px 2px 0;
}
.dd-lrn-sibs__hub:hover {
	text-decoration: underline !important;
}

/* ---- dark mode: authored, with the plugin's twins pinned ---- */
html[data-dracula-scheme="dark"] .dd-lrn-bridge,
html[data-dracula-scheme="dark"] .dd-lrn-sibs {
	--lrn-card: #211b10 !important;
	--dracula-bg--lrn-card: #211b10 !important;
	--dracula-bgimg--lrn-card: #211b10 !important;
	--lrn-tile: rgba(255, 191, 47, 0.10) !important;
	--dracula-bg--lrn-tile: rgba(255, 191, 47, 0.10) !important;
	--lrn-brd: rgba(255, 255, 255, 0.14) !important;
	--dracula-border--lrn-brd: rgba(255, 255, 255, 0.14) !important;
	--lrn-ink: #f2ead8 !important;
	--dracula-text--lrn-ink: #f2ead8 !important;
	--lrn-mut: #b5a988 !important;
	--dracula-text--lrn-mut: #b5a988 !important;
	--lrn-gold: rgb(255, 191, 47) !important;
	--dracula-text--lrn-gold: rgb(255, 191, 47) !important;
}
/* Brand gold is a brand, not a surface: the CTA keeps its dark ink in both
   schemes, and the plugin's twin for that literal is pinned with it. */
html[data-dracula-scheme="dark"] .dd-lrn-bridge__go {
	color: #241a06 !important;
	--dracula-text-241a06: #241a06 !important;
}

@media (max-width: 560px) {
	.dd-lrn-bridge {
		align-items: flex-start;
	}
	.dd-lrn-bridge__go {
		flex: 1 1 100%;      /* its own wrapped line, and free to shrink */
		padding: 15px 22px;  /* 44px tall: a thumb target, not a link */
		text-align: center;
	}
}

/* ------------------------------------------------------------------ *
 * The cover
 *
 * The cover is drawn on the diagram library's own figure ground, so it is
 * styled as a figure card: one hairline, the `--dg-shadow` lift, and the
 * `--dg-rad-l` corner. The dark twin is painted as this wrapper's
 * background and the light bitmap is hidden - which is also why the dark
 * file is only ever downloaded in dark mode.
 * ------------------------------------------------------------------ */

.dd-lrn-cover {
	display: block;
	position: relative;
	margin: 30px 0;
	border: 1px solid rgba(31, 26, 16, 0.09);
	border-radius: 22px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	box-shadow: 0 18px 40px -26px rgba(146, 90, 10, 0.25);
}
/* The site frames every `.custom-featured-image` in a 2px gold border at a
 * fixed 550px and centres it with a margin. On a cover that frame is exactly
 * the banned coloured rail, and the fixed width would leave the dark twin
 * painting a wider box than the bitmap it replaces. Both are overridden here
 * with weight, because the rule being beaten also carries weight. */
.dd-lrn-cover > img,
.dd-lrn-cover > img.custom-featured-image,
.dd-lrn-cover > img.wp-post-image {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	box-shadow: none !important;
}

html[data-dracula-scheme="dark"] .dd-lrn-cover {
	border-color: rgba(255, 255, 255, 0.11) !important;
	--dracula-border--lrn-cover: rgba(255, 255, 255, 0.11) !important;
	background-image: var(--ddl-cover-dark) !important;
	box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.8) !important;
}
html[data-dracula-scheme="dark"] .dd-lrn-cover > img {
	visibility: hidden;
}