/* Mr. Auto Finance: program pages. Loads after brand.css; only what the maf- components do not cover. */

/* Hero image position is set per page (--mp-pos) so faces stay in frame; phones crop higher for headroom */
.mp-hero .maf-hero__img { object-position: var(--mp-pos, 62% 50%); }
@media (max-width: 959px) { .mp-hero .maf-hero__img { object-position: 50% 22%; } }

/* Programs index hero: the six program symbols ARE the navigation (real links, name and one line each).
   Phones: one column of rows with the symbol at the start; wider: two columns of tiles. */
.mp-glyphs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.mp-glyphs > li { display: grid; }
.mp-glyphs__cell { position: relative; align-self: stretch; align-content: start; display: grid; grid-template-columns: 48px minmax(0, 1fr) 36px; grid-template-areas: "glyph name go" "glyph line go"; gap: 2px 16px; align-items: center; min-height: 88px; padding: 14px 14px 14px 16px; border: 1px solid var(--maf-line); border-radius: 18px; background: var(--maf-iv); color: var(--maf-ink); transition: background .2s ease, border-color .2s ease; }
.mp-glyphs__glyph { grid-area: glyph; width: 48px; height: 48px; }
.mp-glyphs__glyph .maf-glyph { width: 100%; height: 100%; }
.mp-glyphs__name { grid-area: name; align-self: end; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.012em; line-height: 1.2; color: var(--maf-ox); }
.mp-glyphs__line { grid-area: line; align-self: start; font-size: 0.9rem; line-height: 1.45; color: var(--maf-body); }
.mp-glyphs__go { grid-area: go; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #D9CDBB; color: var(--maf-ox); transition: transform .25s var(--maf-ease), background .25s ease, color .25s ease, border-color .25s ease; }
.mp-glyphs__cell:hover, .mp-glyphs__cell:focus-visible { background: var(--maf-white); border-color: var(--maf-ox); }
.mp-glyphs__cell:active { background: #EFE6D6; }
.mp-glyphs__cell:hover .mp-glyphs__go, .mp-glyphs__cell:focus-visible .mp-glyphs__go { background: var(--maf-ox); border-color: var(--maf-ox); color: var(--maf-iv); }
[dir="rtl"] .mp-glyphs__go svg { transform: scaleX(-1); }
@media (min-width: 600px) and (max-width: 959px), (min-width: 1200px) {
  .mp-glyphs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mp-glyphs__cell { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "glyph go" "name name" "line line"; align-items: start; gap: 14px 8px; min-height: 0; padding: 20px 18px 22px; }
  .mp-glyphs__glyph { width: 56px; height: 56px; }
  .mp-glyphs__name { align-self: auto; margin-top: 4px; }
  .mp-glyphs__go { justify-self: end; }
  .mp-glyphs__line { margin-top: -8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mp-glyphs__cell:hover .maf-glyph .g-line[pathLength] { animation: maf-redraw .7s var(--maf-ease); }
  .mp-glyphs__cell:hover .maf-glyph .g-dot { animation: maf-pop .45s .35s var(--maf-ease) both; transform-box: fill-box; transform-origin: center; }
}

/* Breadcrumb link back to the programs index */
.mp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mp-crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.9rem; font-weight: 700; color: var(--maf-muted); }
.mp-crumb svg { transform: scaleX(-1); }
.mp-crumb:hover, .mp-crumb:active { color: var(--maf-ox); }
[dir="rtl"] .mp-crumb svg { transform: none; }

/* Two-column block: heading left, copy right */
.mp-split { display: grid; gap: 12px; align-items: start; }
@media (min-width: 960px) { .mp-split { grid-template-columns: 0.8fr 1.2fr; gap: 72px; } }
.mp-story .maf-lead { margin-bottom: 26px; }

/* What to bring: a hairline list (no boxed card) */
.mp-card { border-top: 1px solid var(--maf-line); }
.mp-card .maf-points { gap: 0; }
.mp-card .maf-points li { padding: 16px 0; border-bottom: 1px solid var(--maf-line); }
.mp-bring .maf-lead { margin-bottom: 14px; }
.mp-bring .maf-note { margin-top: 0; }

/* Other programs: compact links */
.mp-others { background: var(--maf-paper); }
.mp-pills { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.mp-pill { display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--maf-line); border-radius: 16px; color: var(--maf-ink); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mp-pill:hover { transform: translateY(-2px); border-color: rgba(211, 98, 58, 0.45); box-shadow: 0 16px 32px -26px rgba(14, 58, 63, 0.45); }
.mp-pill__icon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #FCF1EB; color: var(--maf-tc-text); }
.mp-pill__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-pill strong { color: var(--maf-ox); font-size: 1.02rem; }
.mp-pill small { color: var(--maf-body); font-size: 0.9rem; line-height: 1.45; }

/* Final CTA without the photo (hero already uses it) */
.mp-cta--plain { background: var(--maf-iv); }

/* Program heroes: the program's own symbol, drawn large (replaces AI photos, 2026-10-16) */
.mp-art { display: grid; place-items: center; aspect-ratio: 1 / 1.05; border-radius: var(--maf-radius); }
.mp-badge { display: none; }
@media (max-width: 959px) {
  .mp-hero--prog .maf-hero__media { display: none; }
  .mp-badge { display: grid; flex: none; width: 60px; height: 60px; aspect-ratio: 1; border-radius: 16px; }
  .mp-badge .maf-glyph { width: 36px; max-width: none; }
  .mp-badge .g-line { stroke-width: 2.4; }
  .mp-badge .g-line--thin { stroke-width: 1.7; }
}
.mp-art .maf-glyph { width: 52%; height: auto; max-width: 340px; }
.mp-art .g-line { stroke-width: 1.7; }
.mp-art .g-line--thin { stroke-width: 1.2; }
.mp-art .g-line--dots { stroke-width: 2.2; }
.mp-art--ox { background: var(--maf-ox); }
.mp-art--ox .g-line { stroke: var(--maf-iv); }
.mp-art--ox .g-fill { fill: var(--maf-ox); }
.mp-art--ox .g-dot { fill: var(--maf-ap); }
.mp-art--iv { background: var(--maf-iv); border: 1px solid var(--maf-line); }
.mp-art--iv .g-fill { fill: var(--maf-iv); }
@media (prefers-reduced-motion: no-preference) {
  .maf-js .mp-art .g-line[pathLength] { animation: maf-redraw 1.3s .3s var(--maf-ease) both; }
  .maf-js .mp-art .g-dot { transform-box: fill-box; transform-origin: center; animation: maf-pop .5s 1.2s var(--maf-ease) both; }
}