/* =====================================================================
   mot-blocks.css  —  Internal Link cards + Tips boxes
   Used by BOTH the admin editor (as TinyMCE content_css) and the public
   blog page (blog-single.php). Self-contained: only CSS variables with
   fallbacks, inline SVG icons (no icon-font / JS dependency).
   ===================================================================== */
.mot-link-card, .mot-tip { box-sizing: border-box; max-width: 100%; margin: 1.6em 0; font-family: inherit; line-height: 1.6; }
.mot-link-card *, .mot-tip * { box-sizing: border-box; }

/* ---------------- Internal link card ---------------- */
.mot-link-card { border: 1px solid var(--mot-line, #e3e6ee); border-left: 4px solid var(--mot-accent, #6c5ce7); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; overflow: hidden; }
.mot-link-card:hover, .mot-link-card:focus-within { box-shadow: 0 8px 24px rgba(16,24,40,.12); transform: translateY(-2px); border-color: var(--mot-accent, #6c5ce7); }
.mot-link-card__a { display: flex; align-items: center; gap: 16px; padding: 14px 16px; color: inherit !important; text-decoration: none !important; }
.mot-link-card__thumb { flex: 0 0 120px; width: 120px; height: 80px; border-radius: 8px; overflow: hidden; background: #f1f0fd; display: flex; align-items: center; justify-content: center; }
.mot-link-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.mot-link-card__thumb--icon::before { content: ""; width: 34px; height: 34px; background-color: var(--mot-accent, #6c5ce7); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.mot-link-card__body { flex: 1 1 auto; min-width: 0; display: block; }
.mot-link-card__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mot-accent, #6c5ce7); margin-bottom: 2px; }
.mot-link-card__title { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--mot-ink, #1f2937); overflow-wrap: anywhere; }
.mot-link-card__desc { display: block; margin-top: 4px; font-size: 14px; color: var(--mot-ink-soft, #5b6472); overflow-wrap: anywhere; }
.mot-link-card__cta { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--mot-accent, #6c5ce7); }
.mot-link-card__cta::after { content: " \2192"; display: inline-block; transition: transform .2s ease; }
.mot-link-card:hover .mot-link-card__cta::after { transform: translateX(4px); }
.mot-link-card__a:focus-visible { outline: 3px solid var(--mot-accent, #6c5ce7); outline-offset: -3px; border-radius: 10px; }
@media (max-width: 560px) {
	.mot-link-card__a { flex-direction: column; align-items: stretch; gap: 10px; }
	.mot-link-card__thumb { flex: none; width: 100%; height: 150px; }
	.mot-link-card__title { font-size: 16px; }
}

/* ---------------- Tips box ---------------- */
.mot-tip { --c: #d97706; --bg: #fffbeb; --bd: #fde68a;
	border: 1px solid var(--bd); border-left: 5px solid var(--c); background: var(--bg); border-radius: 10px; padding: 14px 18px 12px; color: var(--mot-ink, #1f2937); }
.mot-tip--note  { --c: #2563eb; --bg: #eff6ff; --bd: #bfdbfe; }
.mot-tip--warning { --c: #dc2626; --bg: #fef2f2; --bd: #fecaca; }
.mot-tip--exam  { --c: #6c5ce7; --bg: #f5f3ff; --bd: #ddd6fe; }
.mot-tip--quick { --c: #16a34a; --bg: #f0fdf4; --bd: #bbf7d0; }

.mot-tip__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mot-tip__icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--c); position: relative; }
.mot-tip__icon::before { content: ""; position: absolute; inset: 5px; background: #fff;
	-webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.mot-tip      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E"); }
.mot-tip--note  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); }
.mot-tip--warning { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); }
.mot-tip--exam  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E"); }
.mot-tip--quick { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E"); }

.mot-tip .mot-tip__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--c); filter: brightness(.78); }
.mot-tip .mot-tip__body { font-size: 15.5px; line-height: 1.65; }
.mot-tip__body > :first-child { margin-top: 0; }
.mot-tip__body > :last-child { margin-bottom: 0; }
.mot-tip__body p { margin: 0 0 .6em; }
.mot-tip__body ul, .mot-tip__body ol { margin: .3em 0 .7em; padding-left: 1.4em; }
.mot-tip__body li { margin: .2em 0; }
.mot-tip__body a { color: var(--c); text-decoration: underline; filter: brightness(.78); }
@media (max-width: 560px) {
	.mot-tip { padding: 12px 14px 10px; border-radius: 8px; }
	.mot-tip .mot-tip__title { font-size: 16px; }
	.mot-tip .mot-tip__body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.mot-link-card, .mot-link-card__cta::after { transition: none; }
	.mot-link-card:hover { transform: none; }
}
@media print { .mot-link-card { box-shadow: none; break-inside: avoid; } .mot-tip { break-inside: avoid; } }