/* css-hex-guard: allow */
/*
 * COD-017 — article template styles.
 *
 * Extracted verbatim from the two near-identical inline <style> blocks
 * in `articles/article_tpl.php` (one for embed-in-shell, one for the
 * standalone body) so the same selectors live in a cacheable
 * stylesheet rather than ship in the HTML on every article render,
 * and the hex literals stop showing up in css-hex-guard's per-PHP
 * tally for that file.
 *
 * The only delta between the two original blocks was `.mm-aw`'s
 * layout. We default to the standalone layout and let
 * `.mm-aw.mm-aw--embedded` override for the in-shell case.
 *
 * Semantics unchanged. The visual diff against the previous inline
 * blocks should be empty.
 */

body{background:var(--color-bg-page,#F4F6FA);color:var(--color-text,#111111);font-family:var(--mm-font-body);margin:0}
.mm-aw{max-width:860px;margin:28px auto;padding:0 20px 60px}
.mm-aw.mm-aw--embedded{margin:0 auto;padding:0 0 12px}
.mm-bc{font-size:13px;color:#6b7280;margin-bottom:14px}
.mm-bc a{color:#6b7280;text-decoration:none}.mm-bc a:hover{text-decoration:underline}
.mm-bc span{margin:0 5px}
.mm-ah h1{color:var(--color-primary-700,#1A2B4C);font-size:clamp(26px,4vw,36px);margin:0 0 12px;line-height:1.25}
.mm-byl{display:flex;align-items:center;gap:10px;font-size:14px;color:#475569;flex-wrap:wrap;margin-bottom:24px}
.mm-byl a{color:var(--color-primary-700,#1A2B4C);font-weight:600;text-decoration:none}.mm-byl a:hover{color:var(--color-accent-500,#FF6B00)}
.mm-byl-s{color:#CBD5E0}
.mm-ab{font-size:17px;line-height:1.72;color:#1e293b}
.mm-ab h2{color:var(--color-primary-700,#1A2B4C);font-size:clamp(20px,2.8vw,26px);margin:36px 0 12px;border-bottom:2px solid #EEF2F7;padding-bottom:6px}
.mm-ab h3{color:var(--color-primary-700,#1A2B4C);font-size:20px;margin:28px 0 10px}
.mm-ab p{margin:0 0 18px}
.mm-ab ul,.mm-ab ol{margin:0 0 18px;padding-left:24px}
.mm-ab li{margin:6px 0}
.mm-ab a{color:#0050B3}.mm-ab a:hover{color:var(--color-accent-500,#FF6B00)}
.mm-ab strong{color:#0f172a}
.mm-ab blockquote{border-left:4px solid var(--color-primary-700,#1A2B4C);margin:24px 0;padding:12px 20px;background:#F7FAFC;color:#334155;font-style:italic;border-radius:0 8px 8px 0}
.mm-ab table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;overflow-x:auto;display:block}
.mm-ab th{background:var(--color-primary-700,#1A2B4C);color:#fff;padding:10px 14px;text-align:left;white-space:nowrap}
.mm-ab td{padding:9px 14px;border-bottom:1px solid #DDE3EA;vertical-align:top}
.mm-ab tr:nth-child(even) td{background:#F7FAFC}
.mm-disclosure{background:#FFF8EC;border:1px solid #F4D58C;border-left:4px solid var(--color-accent-500,#FF6B00);border-radius:var(--mm-radius-card,8px);padding:14px 18px;margin:0 0 22px;font-size:14px;line-height:1.55;color:#4a4a4a}
.mm-disclosure strong{color:var(--color-primary-700,#1A2B4C)}
.mm-disclosure a{color:var(--color-primary-700,#1A2B4C);text-decoration:underline}
.mm-disclosure a:hover{color:var(--color-accent-500,#FF6B00)}
.mm-cta{background:var(--color-primary-700,#1A2B4C);color:#fff;border-radius:var(--mm-radius-xl,16px);padding:26px 28px;margin:40px 0;text-align:center}
.mm-cta h3{margin:0 0 8px;color:#fff;font-size:20px}
.mm-cta p{margin:0 0 16px;color:#94a3b8;font-size:15px}
.mm-cta a{display:inline-block;background:var(--color-accent-500,#FF6B00);color:#fff;padding:13px 24px;border-radius:var(--mm-radius-card,8px);text-decoration:none;font-weight:700}
.mm-cta a:hover{background:var(--color-accent-600,#E35600)}
.mm-auth{background:#F7FAFC;border:1px solid #DDE3EA;border-radius:var(--mm-radius-xl,16px);padding:20px 22px;margin:36px 0;display:flex;gap:18px;align-items:flex-start}
.mm-auth-av{width:56px;height:56px;border-radius:50%;background:var(--color-primary-700,#1A2B4C);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0}
.mm-auth-av--photo{object-fit:cover;background:transparent}
.mm-auth-inf h4{margin:0 0 4px;font-size:15px}
.mm-auth-inf h4 a{color:var(--color-primary-700,#1A2B4C);text-decoration:none;font-weight:700}.mm-auth-inf h4 a:hover{color:var(--color-accent-500,#FF6B00)}
.mm-auth-inf p{margin:0;font-size:14px;color:#475569;line-height:1.5}
.mm-rel{margin:36px 0 0;padding-top:28px;border-top:2px solid #DDE3EA}
.mm-rel h2{color:var(--color-primary-700,#1A2B4C);font-size:20px;margin:0 0 16px}
.mm-rel-g{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.mm-rel-c{background:#fff;border:1px solid #DDE3EA;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.mm-rel-c:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.06)}
.mm-rel-c__visual{aspect-ratio:16/10;overflow:hidden;background:#F7FAFC;display:block}
.mm-rel-c__visual img{width:100%;height:100%;object-fit:contain;display:block}
.mm-rel-c__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.mm-rel-c__meta{font-size:12px;color:#94a3b8;margin:0 0 6px}
.mm-rel-c__title{margin:0 0 8px;font-size:17px;line-height:1.35;color:#1A2B4C}
.mm-rel-c__title a{color:#1A2B4C;text-decoration:none;font-weight:600}
.mm-rel-c__title a:hover{color:#FF6B00}
.mm-rel-c__desc{color:#475569;font-size:14px;line-height:1.5;flex:1;margin:0 0 12px}
.mm-rel-c__read{margin-top:auto;font-size:13px;font-weight:600;color:#FF6B00;text-decoration:none}
.mm-rel-c__read:hover{text-decoration:underline}
@media(max-width:640px){.mm-auth{flex-direction:column}}
.mm-ab figure{margin:28px 0}
.mm-ab figure img{width:100%;height:auto;display:block;border-radius:var(--mm-radius-card,8px);box-shadow:0 2px 14px rgba(0,0,0,.08)}
.mm-ab figcaption{font-size:13px;color:#64748b;text-align:center;padding:7px 0 0;font-style:italic}
.mm-ab .mm-hero-img{margin:0 0 32px}
.mm-ab .mm-hero-img img{border-radius:12px}
.mm-callout{background:#EEF6FF;border-left:4px solid var(--color-primary-700,#1A2B4C);border-radius:0 10px 10px 0;padding:16px 20px;margin:24px 0;font-size:16px;color:#1e293b;line-height:1.6}
.mm-callout strong{color:var(--color-primary-700,#1A2B4C)}
.article-hero{margin:0 0 32px;aspect-ratio:16/9;overflow:hidden;border-radius:12px}
.article-hero img{width:100%;height:100%;object-fit:cover;display:block}
.mm-ab .article-figure{margin:28px 0}
.mm-ab .article-figure img{aspect-ratio:auto}

/*
 * V2-013 — articles/index.php inline blocks extracted to share the
 * cacheable stylesheet. The two near-identical .mm-* listing-grid
 * style blocks (embed-in-shell + standalone) plus the .mm-cat-cards
 * topic chooser are folded together; .mm-lw selector switches its
 * layout on the standalone body via the same default/embedded toggle
 * we already use for .mm-aw.
 */
.mm-lw { max-width: 1100px; margin: 28px auto; padding: 0 24px 60px; }
.mm-lw.mm-lw--embedded { margin: 0 auto; padding: 0 0 12px; }
.mm-lh { margin-bottom: 28px; }
.mm-lh h1 { color: var(--color-primary-700, #1A2B4C); font-size: clamp(28px, 4vw, 38px); margin: 0 0 8px; }
.mm-lh p { color: #475569; font-size: 17px; margin: 0; line-height: 1.5; }
.mm-tabs { display: flex; gap: 0; border-bottom: 2px solid #DDE3EA; margin-bottom: 24px; overflow-x: auto; }
.mm-tab { padding: 9px 18px; font-size: 14px; font-weight: 600; color: #475569; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.mm-tab.active { color: var(--color-primary-700, #1A2B4C); border-bottom-color: var(--color-primary-700, #1A2B4C); }
.mm-tab:hover:not(.active) { color: var(--color-primary-700, #1A2B4C); }
.mm-al { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mm-ai { background: #fff; border: 1px solid #DDE3EA; border-radius: var(--mm-radius-lg, 12px); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.mm-ai:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.mm-ai-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.mm-ai .article-card__visual { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #F7FAFC; display: block; }
.mm-ai .article-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.mm-ai-m { font-size: 12px; color: #94a3b8; margin-bottom: 6px; }
.mm-ai h2 { margin: 0 0 8px; }
.mm-ai h2 a { color: var(--color-primary-700, #1A2B4C); text-decoration: none; font-size: 17px; line-height: 1.35; font-weight: 600; }
.mm-ai h2 a:hover { color: var(--color-accent-500, #FF6B00); }
.mm-ai p { margin: 0 0 12px; color: #475569; font-size: 14px; line-height: 1.5; flex: 1; }
.mm-ai-c { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: #eef2f7; color: var(--color-primary-700, #1A2B4C); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; }
.mm-ai-r { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--color-accent-500, #FF6B00); text-decoration: none; }
.mm-ai-r:hover { text-decoration: underline; }
.mm-empty { background: #fff; border: 1px solid #DDE3EA; border-radius: var(--mm-radius-lg, 12px); padding: 22px 24px; color: #475569; grid-column: 1/-1; }

.mm-cat-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 0 28px; }
.mm-cat-cards a { display: block; background: #fff; border: 1px solid #DDE3EA; border-radius: 10px; padding: 14px 16px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.mm-cat-cards a:hover { border-color: #1A2B4C; transform: translateY(-1px); }
.mm-cat-cards strong { display: block; color: #1A2B4C; font-size: 14px; margin-bottom: 2px; }
.mm-cat-cards span { color: #64748b; font-size: 12px; }