/* Gedeelde opmaak voor het markt-blok op de 21 stadspagina's.
   Stond eerder 21x als <style> in de embed zelf. De scope is van
   #zms-<stad>-markt naar .zms-markt gegaan; css_risico.py toont dat geen
   enkele selector buiten dit blok deze klassennamen raakt, dus de lagere
   specificiteit kan niets omzetten. Bron: ronde5/bouw_markt_css.py. */
.zms-markt{
      --accent:#ffac00; --accent-dark:#ff8a00; --kick:#F97316; --mint:#02FEB5;
      --ink:#333; --dark:#111827; --muted:#5d6b6b; --white:#fff; --line:#e7ecec;
      isolation:isolate; display:block; width:100%;
      background-color:#F7F8FA;
      background-image:radial-gradient(45% 45% at 8% 2%,rgba(249,115,22,.10),rgba(249,115,22,0) 60%),radial-gradient(50% 55% at 95% 100%,rgba(255,150,80,.08),rgba(255,150,80,0) 60%);
      background-repeat:no-repeat; font-family:Ambit,sans-serif;
    }
    .zms-markt *{box-sizing:border-box;margin:0;padding:0;font-family:Ambit,sans-serif;-webkit-tap-highlight-color:transparent}
    .zms-markt a{text-decoration:none}
    .zms-markt .m-wrap{max-width:1180px;margin:0 auto;padding:40vh 24px}
    .zms-markt .m-head{max-width:760px;margin:0 auto clamp(34px,4vw,50px);text-align:center}
    .zms-markt .kicker{display:inline-block;color:var(--kick);font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:14px}
    .zms-markt h2{color:var(--ink);font-weight:900;line-height:1.15;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.4px;margin-bottom:14px}
    .zms-markt h2 b{color:var(--accent-dark);font-weight:900}
    .zms-markt .m-head p{color:var(--muted);font-size:clamp(15px,1.3vw,17px);line-height:1.65}
    .zms-markt .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:clamp(40px,5vw,60px)}
    .zms-markt .pillar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
    .zms-markt .pillar:hover{transform:translateY(-4px);box-shadow:0 12px 28px #1118270f;border-color:var(--accent)}
    .zms-markt .p-ic{width:46px;height:46px;border-radius:12px;background:#ffac001a;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
    .zms-markt .p-ic svg{width:28px;height:28px;color:#ea590d;display:block}
    .zms-markt .pillar:hover .p-ic svg{transform:translateY(-2px);transition:transform .2s ease}
    .zms-markt .pillar h3{color:var(--ink);font-weight:900;font-size:18px;margin-bottom:8px}
    .zms-markt .pillar p{color:var(--muted);font-size:14px;line-height:1.55}
    .zms-markt .discretion{background:var(--dark);border-radius:18px;padding:clamp(26px,3.4vw,40px);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-bottom:clamp(34px,4vw,48px)}
    .zms-markt .discretion .lock{width:56px;height:56px;border-radius:14px;background:#ffac0026;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .zms-markt .discretion .lock svg{width:32px;height:32px;color:#ea590d;display:block}
    .zms-markt .discretion h3{color:#fff;font-weight:900;font-size:clamp(19px,2.2vw,24px);margin-bottom:8px}
    .zms-markt .discretion p{color:#c4cdd6;font-size:15px;line-height:1.6}
    .zms-markt .discretion b{color:var(--mint);font-weight:700}
    .zms-markt .grid-head{text-align:center;margin-bottom:22px}
    .zms-markt .grid-head h3{color:var(--ink);font-weight:900;font-size:clamp(20px,2.2vw,26px)}
    .zms-markt .profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .zms-markt .profile{background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:16px;padding:24px;display:flex;flex-direction:column}
    .zms-markt .profile .meta{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
    .zms-markt .profile .lbl{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#9aa6a6;display:block;margin-bottom:3px}
    .zms-markt .profile .val{font-size:14px;font-weight:700;color:var(--ink)}
    .zms-markt .profile .challenge{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .zms-markt .profile .challenge .lbl{margin-bottom:5px}
    .zms-markt .profile .sector-ic{display:flex;justify-content:center;align-items:center;padding:2px 0 16px}
    .zms-markt .profile .sector-ic svg{width:78px;height:78px;display:block}
    .zms-markt .profile .result{margin-top:auto}
    .zms-markt .profile .result .lbl{color:var(--accent-dark)}
    .zms-markt .profile .metric{font-size:clamp(26px,2.8vw,32px);font-weight:900;color:var(--ink);line-height:1.1}
    .zms-markt .profile .metric em{font-style:normal;color:var(--accent-dark)}
    .zms-markt .profile .metric small{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:5px}

    /* De vier rijen van de profielkaarten op één lijn. Elke kaart was een losse
       flexkolom, dus een uitdaging van twee regels duwde het icoon en het
       resultaat omlaag en stond alles per kaart op een andere hoogte. Met
       subgrid delen de drie kaarten hun rijhoogtes.
       row-gap:0 want subgrid erft anders de 18px van het raster ook binnen de
       kaart, en align-self:start want de margin-top:auto hierboven duwt het
       resultaat anders naar de onderkant van zijn eigen rij. Alleen boven de
       eenkolomsgrens: daaronder staan de kaarten onder elkaar en valt er niets
       uit te lijnen. */
    @media (min-width:881px){
      .zms-markt .profiles{grid-template-rows:repeat(4,auto)}
      .zms-markt .profiles>.profile{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
      .zms-markt .profiles>.profile>.result{margin-top:0;align-self:start}
    }
    .zms-markt .note{text-align:center;color:#9aa6a6;font-size:12.5px;line-height:1.5;margin-top:18px;font-style:italic}
    .zms-markt .blueprint{margin-top:clamp(30px,4vw,44px);background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
    .zms-markt .blueprint .bp-txt h3{color:var(--ink);font-weight:900;font-size:clamp(18px,2vw,22px);margin-bottom:6px}
    .zms-markt .blueprint .bp-txt p{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:60ch}
    .zms-markt .bp-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:#02FEB5;color:#000;border:none;font-weight:600;font-size:16px;letter-spacing:.6px;border-radius:14px;padding:15px 30px;white-space:nowrap;cursor:pointer;box-shadow:0 8px 24px rgba(2,254,181,.4);position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}
    .zms-markt .bp-btn span{color:#000;position:relative;z-index:1}
    .zms-markt .bp-btn svg{position:relative;z-index:1}
    .zms-markt .bp-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(2,254,181,.6)}
    .zms-markt .bp-btn::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-25deg);transition:.6s}
    .zms-markt .bp-btn:hover::after{left:150%}
    @media (max-width:880px){
      .zms-markt .pillars,.zms-markt .profiles{grid-template-columns:1fr}
      .zms-markt .discretion{grid-template-columns:1fr;text-align:center}
      .zms-markt .discretion .lock{margin:0 auto}
    }