/*
 * The mission patches in the Work section: each role's patch, with the organisation's own logo,
 * beside a short brief, linking to its page. Uses work-pro.css's shared bits.
 */

/* ---------- The patches ---------- */
.mpatch { display: block; width: clamp(10rem, 17vw, 12.5rem); height: auto; overflow: visible; filter: drop-shadow(0 16px 26px rgb(0 0 0 / 0.65)); }
.mpatch__edge { fill: var(--mp-edge); }
.mpatch__band { fill: var(--mp-band); }
.mpatch__field { fill: var(--mp-field); }
.mpatch__stitch { fill: none; stroke: var(--mp-stitch, var(--mp-thread)); stroke-width: 1.6; stroke-dasharray: 3 2.2; opacity: 0.9; }
.mpatch__ring { font: 700 11px var(--mono); letter-spacing: 2.4px; fill: var(--mp-text); }
.mpatch__year { font: 400 7px var(--mono); letter-spacing: 2.2px; fill: rgb(243 239 226 / 0.7); }
.mpatch--college { --mp-edge: #126285; --mp-band: #0b2233; --mp-field: #060a18; --mp-thread: #fdbe60; --mp-text: #fdbe60; }
.mpatch--plusmove { --mp-edge: #06d6a0; --mp-band: #08130f; --mp-field: #040806; --mp-thread: #06d6a0; --mp-text: #06d6a0; --mp-stitch: #04261c; } /* a dark stitch through the green edge, as the college has gold through its blue */
.mpatch--plusmove .mpatch__year { fill: rgb(255 255 255 / 0.7); }
.motion .mpatch { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------- The brief ---------- */
.mp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3.4rem); }
.mp-brief .wo-title { margin-top: 0.6rem; }
.mp-line { margin-top: 0.7rem; max-width: 44ch; color: var(--muted); }
.mp-stats { display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; margin-top: 1.1rem; }
.mp-stats b { display: block; font: 200 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--font); color: var(--star); font-variant-numeric: tabular-nums; }
.mp-stats span { display: block; margin-top: 0.25rem; font: 400 0.6rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hud-dim); }
.mp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.3rem; }

/* ================================================================ A. Embroidered */
.mp--embroidered .mp-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); align-items: start; }
.mp--embroidered .mp-item:hover .mpatch { transform: rotate(-8deg) scale(1.04); }
.mp--embroidered .mpatch { width: clamp(8.5rem, 13vw, 11rem); }

/* ================================================================ B. Brand-shaped */

/* ================================================================ C. Flip */
/* with a script the two faces are one card that turns over; without one, both faces show */

/* ================================================================ D. On the sleeve */

/* ================================================================ E. Timeline */
.mp-stop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2.6vw, 2rem); align-items: start; }
.mp-stop .mpatch { width: clamp(7.5rem, 11vw, 9.5rem); }
.mp-stop:hover .mpatch { transform: rotate(-6deg) scale(1.04); }

/* "Both missions still running.": the sign-off under the patches */
.mp-running { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.9rem; padding-top: clamp(0.4rem, 2vh, 1rem); font: italic 500 1.2rem/1.2 var(--serif); color: var(--muted); }
.mp-running__node { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 0 4px rgb(125 255 176 / 0.15), 0 0 14px #7dffb0; }
.motion .mp-running__node { animation: twinkle 2s ease-in-out infinite; }

/* ---------- Narrower screens ---------- */
@media (max-width: 62em) {
  .mp--embroidered, .mp--shaped { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40em) {
  .mp--embroidered .mp-item { grid-template-columns: minmax(0, 1fr); }
  .mp-stop { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mpatch, .mp-velcro, .mp-velcro .mpatch, .mp-card.can-flip .mp-card__inner { transition: none !important; }
}