/* ==============================================================
   MAATWERK (integraties, portalen, agents, werkwijze) — sinds 2026-10-30
   Bouwt voort op style.css; alleen aanvullende componenten.
   ============================================================== */

/* Hero: zelfde plaat (stofwolk) en glaspaneel als webdesign/diensten, plus kruimelpad */
.mw-hero .hero-content-inner { max-width: 600px; }
.mw-hero .hero-sub { max-width: none; }
.mw-hero .hero-actions { margin-bottom: 0; }
.mw-crumbs { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8125rem; color: var(--text-gray); margin-bottom: 1rem; }
.mw-crumbs a { color: var(--green-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Sectienavigatie: de vier pagina's als keten */
.mw-subnav { background: #fff; border-bottom: 1px solid rgba(8,77,44,.1); position: relative; z-index: 2; }
.mw-subnav ol { display: flex; gap: .5rem; overflow-x: auto; padding: .85rem 0; margin: 0; list-style: none; scrollbar-width: none; }
.mw-subnav ol::-webkit-scrollbar { display: none; }
.mw-subnav a { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .5rem .9rem; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--green-primary); border: 1.5px solid rgba(8,77,44,.15); transition: var(--ease); }
.mw-subnav a:hover { border-color: var(--green-primary); }
.mw-subnav a[aria-current="page"] { background: var(--green-primary); color: #fff; border-color: var(--green-primary); }
.mw-subnav .n { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(8,77,44,.08); font-size: .75rem; }
.mw-subnav a[aria-current="page"] .n { background: rgba(255,255,255,.2); }

/* Algemene sectie */
.mw-section { padding: 5rem 0; background: var(--bg-ivory); }
.mw-section.alt { background: #fff; }
.mw-narrow { max-width: 760px; margin: 0 auto; }
.mw-head { max-width: 760px; margin: 0 auto 2.75rem; text-align: center; }
.mw-head p { color: var(--text-gray); margin-top: .75rem; font-size: 1.0625rem; }
.mw-prose p { color: var(--text-gray); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 1rem; }
.mw-prose h2 { margin-bottom: 1rem; }
.mw-prose strong { color: var(--text-black); }

/* Definitie-kader ("Wat is een API?") */
.mw-define { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; background: #fff; border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-card); border-left: 4px solid var(--brass-accent); }
.mw-define svg, .mw-define img { width: 72px; height: 72px; object-fit: contain; }
.mw-define h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); margin-bottom: .5rem; }
.mw-define p { color: var(--text-gray); margin: 0; }
@media (max-width: 600px) { .mw-define { grid-template-columns: 1fr; padding: 1.5rem; } }

/* Logostrook "werkt met" */
.mw-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.mw-logo { flex: 0 0 calc((100% - 4rem) / 5); background: #fff; border: 1px solid rgba(8,77,44,.1); border-radius: var(--radius-md); height: 104px; display: grid; place-items: center; padding: 1rem 1.25rem; }
.mw-logo img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: var(--ease); }
.mw-logo:hover img { filter: none; opacity: 1; }
.mw-logo.txt { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--green-primary); font-size: 1.05rem; text-align: center; line-height: 1.2; }
.mw-logo.txt small { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: .75rem; color: var(--text-gray); margin-top: .2rem; }
.mw-disclaimer { font-size: .8125rem; color: var(--text-gray); text-align: center; margin-top: 1rem; }
@media (max-width: 899px) { .mw-logo { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 520px) { .mw-logo { flex-basis: calc((100% - 1rem) / 2); height: 84px; } }

/* Voordelen: genummerde kaarten */
.mw-benefits { display: grid; grid-template-columns: 1fr; gap: 1.25rem; counter-reset: mwb; }
@media (min-width: 768px) { .mw-benefits { grid-template-columns: repeat(2, 1fr); } }
.mw-benefit { background: #fff; border-radius: var(--radius-lg); padding: 1.75rem 1.75rem 1.5rem 4.75rem; position: relative; box-shadow: var(--shadow-card); border: 1px solid rgba(8,77,44,.06); }
.mw-benefit::before { counter-increment: mwb; content: counter(mwb, decimal-leading-zero); position: absolute; left: 1.5rem; top: 1.55rem; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.35rem; color: var(--brass-accent); }
.mw-benefit h3 { color: var(--green-primary); font-size: 1.15rem; margin-bottom: .4rem; }
.mw-benefit p { color: var(--text-gray); font-size: .9375rem; margin: 0; }

/* Twee kolommen: tekst + visual */
.mw-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .mw-split { grid-template-columns: 1.05fr 1fr; gap: 4rem; } .mw-split.rev > :first-child { order: 2; } }
.mw-split p { color: var(--text-gray); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 1rem; }
.mw-split h2 { margin-bottom: 1rem; }

/* Rekenkaart (dashboards zonder licenties) */
.mw-calc { background: var(--green-primary); color: #fff; border-radius: var(--radius-lg); padding: 2rem; box-shadow: 0 20px 64px rgba(8,77,44,.22); }
.mw-calc h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1.1rem; }
.mw-calc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.mw-calc li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: start; color: rgba(255,255,255,.88); font-size: .975rem; }
.mw-calc li b { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--mint-light); font-size: .85rem; }
.mw-calc .foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .875rem; color: var(--mint-light); }

/* Vertaal-diagram: eigen structuur -> formaat van de ontvanger */
.mw-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .75rem; align-items: center; }
.mw-flow .box { background: #fff; border-radius: var(--radius-md); padding: 1.1rem 1rem; border: 1.5px solid rgba(8,77,44,.15); text-align: center; }
.mw-flow .box.mid { background: var(--green-primary); color: #fff; border-color: var(--green-primary); }
.mw-flow .box b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .95rem; }
.mw-flow .box span { font-size: .8125rem; color: var(--text-gray); }
.mw-flow .box.mid span { color: var(--mint-light); }
.mw-flow .arr { color: var(--brass-accent); font-size: 1.5rem; font-weight: 700; }
@media (max-width: 700px) { .mw-flow { grid-template-columns: 1fr; } .mw-flow .arr { transform: rotate(90deg); justify-self: center; } }

/* Voorbeeld-kader */
.mw-example { background: rgba(168,230,207,.25); border-radius: var(--radius-lg); padding: 1.75rem 2rem; margin-top: 2rem; }
.mw-example .label { margin-bottom: .4rem; color: var(--green-primary); }
.mw-example p { color: var(--text-black); margin: 0; }

/* Chips (wat we al bouwden) */
.mw-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.mw-chips li { list-style: none; padding: .6rem 1rem; border-radius: 999px; background: #fff; border: 1.5px solid rgba(8,77,44,.15); color: var(--green-primary); font-weight: 600; font-size: .9375rem; }

/* Screenshots in browserframe */
.mw-shots { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .mw-shots { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.mw-shot { margin: 0; }
.mw-frame { border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: 0 16px 48px rgba(8,77,44,.16); border: 1px solid rgba(8,77,44,.1); }
.mw-frame img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top left; }
.mw-shot figcaption { margin-top: .9rem; font-size: .9375rem; color: var(--text-gray); }
.mw-shot figcaption b { display: block; color: var(--green-primary); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; }

/* Lijst met modules (portalen) */
.mw-modules { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 700px) { .mw-modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .mw-modules { grid-template-columns: repeat(3, 1fr); } }
.mw-module { background: var(--bg-ivory); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid rgba(8,77,44,.08); }
.mw-module h3 { color: var(--green-primary); font-size: 1.1rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .6rem; }
.mw-module h3 svg { flex-shrink: 0; }
.mw-module ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.mw-module li { position: relative; padding-left: 1.1rem; color: var(--text-gray); font-size: .9375rem; }
.mw-module li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--brass-accent); }

/* Scenario's (agents) */
.mw-scenarios { display: grid; gap: 1.5rem; }
.mw-scenario { display: grid; grid-template-columns: 1fr; gap: 1.5rem; background: #fff; border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-card); }
@media (min-width: 900px) { .mw-scenario { grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; padding: 2.5rem; } }
.mw-scenario h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: .75rem; }
.mw-scenario p { color: var(--text-gray); margin-bottom: .75rem; }
.mw-timeline { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid rgba(8,77,44,.15); display: grid; gap: .9rem; }
.mw-timeline li { position: relative; font-size: .9375rem; color: var(--text-black); }
.mw-timeline li::before { content: ''; position: absolute; left: calc(-1.25rem - 7px); top: .35em; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--green-primary); }
.mw-timeline li:last-child::before { background: var(--brass-accent); border-color: var(--brass-accent); }
.mw-timeline small { display: block; color: var(--text-gray); font-size: .8125rem; }

/* Werkwijze: vier stappen */
.mw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; counter-reset: mws; }
@media (min-width: 768px) { .mw-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mw-steps { grid-template-columns: repeat(4, 1fr); } }
.mw-steps li { background: #fff; border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; box-shadow: var(--shadow-card); position: relative; }
.mw-steps li::before { counter-increment: mws; content: counter(mws); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green-primary); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.15rem; margin-bottom: 1rem; box-shadow: 0 0 0 5px rgba(228,120,61,.25); }
.mw-steps h3 { color: var(--green-primary); font-size: 1.1rem; margin-bottom: .4rem; }
.mw-steps p { color: var(--text-gray); font-size: .9375rem; margin: 0; }
.mw-steps .phase { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-accent); margin-bottom: .35rem; }

/* Opties (web / app / eigen omgeving) */
.mw-options { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) { .mw-options { grid-template-columns: repeat(3, 1fr); } }
.mw-option { background: var(--bg-ivory); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid rgba(8,77,44,.08); }
.mw-option h3 { color: var(--green-primary); font-size: 1.1rem; margin: .75rem 0 .4rem; }
.mw-option p { color: var(--text-gray); font-size: .9375rem; margin: 0; }

/* Citaat / statement */
.mw-quote { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; color: var(--green-primary); text-align: center; max-width: 820px; margin: 0 auto; }
.mw-quote em { font-style: normal; color: var(--brass-accent); }

/* Hub: keten van vier */
.mw-chain { display: grid; grid-template-columns: 1fr; gap: 1.25rem; counter-reset: mwc; }
@media (min-width: 768px) { .mw-chain { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mw-chain { grid-template-columns: repeat(4, 1fr); } }
.mw-link-card { display: flex; flex-direction: column; gap: .6rem; background: #fff; border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; box-shadow: var(--shadow-card); border: 1px solid rgba(8,77,44,.06); transition: transform var(--ease), box-shadow var(--ease); color: inherit; }
.mw-link-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.mw-link-card .k { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-accent); }
.mw-link-card h3 { color: var(--green-primary); font-size: 1.2rem; margin: 0; }
.mw-link-card p { color: var(--text-gray); font-size: .9375rem; margin: 0; flex: 1; }
.mw-link-card .go { font-weight: 700; color: var(--green-primary); font-size: .9375rem; }

/* Verder lezen (doorverwijzing onderaan) */
.mw-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border-radius: var(--radius-lg); padding: 1.5rem 2rem; box-shadow: var(--shadow-card); border: 1.5px solid rgba(8,77,44,.1); transition: var(--ease); color: inherit; max-width: 900px; margin: 0 auto; }
.mw-next:hover { border-color: var(--green-primary); }
.mw-next span { color: var(--text-gray); font-size: .9375rem; }
.mw-next b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--green-primary); font-size: 1.2rem; }
.mw-next .arrow { font-size: 1.6rem; color: var(--brass-accent); }

/* API-icoon (eigen beeld) in mint cirkel */
.mw-define .mw-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(168,230,207,.35); }
.mw-define .mw-icon img { width: 44px; height: 44px; }

/* Hub: zes kaarten in drie kolommen */
@media (min-width: 1100px) { .mw-chain { grid-template-columns: repeat(3, 1fr); } }

/* Platform-architectuur: landschap | Entra-poort | platform */
.mw-arch { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.mw-arch .zone, .mw-arch .gate { border-radius: var(--radius-lg); padding: 1.5rem; }
.mw-arch .zone.own { background: #fff; border: 2px dashed rgba(8,77,44,.25); }
.mw-arch .zone.plat { background: var(--green-primary); color: #fff; }
.mw-arch .gate { background: rgba(168,230,207,.35); border: 2px solid var(--green-primary); min-width: 200px; position: relative; }
.mw-arch .k { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-accent); margin-bottom: .35rem; }
.mw-arch b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--green-primary); margin-bottom: .6rem; }
.mw-arch .plat b { color: #fff; }
.mw-arch ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .9375rem; color: var(--text-gray); }
.mw-arch .plat ul { color: rgba(255,255,255,.85); }
.mw-arch li::before { content: '\2022'; color: var(--brass-accent); margin-right: .45rem; }
.mw-arch .back { grid-column: 1 / -1; text-align: center; margin: .5rem 0 0; padding: .9rem 1rem; border-radius: var(--radius-md); background: #fff; border: 1.5px solid rgba(8,77,44,.12); color: var(--text-black); font-size: .9375rem; }
.mw-arch .back span { color: var(--brass-accent); font-weight: 700; margin-right: .35rem; }
@media (max-width: 800px) { .mw-arch { grid-template-columns: 1fr; } }

/* Contrast zonder/met stijlgids */
.mw-contrast { display: grid; gap: 1rem; }
.mw-contrast > div { border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; }
.mw-contrast .zonder { background: #fff; border: 2px dashed rgba(8,77,44,.2); }
.mw-contrast .met { background: var(--green-primary); }
.mw-contrast .k { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-accent); margin-bottom: .4rem; }
.mw-contrast p { margin: 0; color: var(--text-gray); }
.mw-contrast .met p { color: #fff; font-weight: 600; }

/* Voorkanten stijlgidsen */
.mw-covers { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .mw-covers { grid-template-columns: 1.45fr 1fr 1fr; gap: 1.75rem; } }
.mw-cover { margin: 0; }
.mw-cover-img { border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 16px 48px rgba(8,77,44,.16); border: 1px solid rgba(8,77,44,.1); background: #fff; }
.mw-cover-img img { width: 100%; height: auto; }
.mw-cover figcaption { margin-top: .9rem; font-size: .9375rem; color: var(--text-gray); }
.mw-cover figcaption b { display: block; color: var(--green-primary); font-family: 'Montserrat', sans-serif; font-weight: 800; }

/* Stijlgids naast resultaat */
.mw-pairs { display: grid; gap: 2rem; }
.mw-pair { display: grid; grid-template-columns: 180px auto 1fr; gap: 1.5rem; align-items: center; background: #fff; border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-card); }
.mw-pair figure { margin: 0; }
.mw-pair figure > img { border-radius: 8px; box-shadow: 0 8px 24px rgba(8,77,44,.15); border: 1px solid rgba(8,77,44,.1); }
.mw-pair figcaption { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-accent); margin-top: .6rem; text-align: center; }
.mw-pair .arr { font-size: 2rem; color: var(--brass-accent); font-weight: 700; }
.mw-pair p { grid-column: 1 / -1; margin: 0; color: var(--text-gray); }
.mw-pair p b { color: var(--green-primary); font-family: 'Montserrat', sans-serif; margin-right: .5rem; }
@media (max-width: 700px) { .mw-pair { grid-template-columns: 1fr; } .mw-pair figure:first-child { max-width: 200px; margin: 0 auto; } .mw-pair .arr { transform: rotate(90deg); justify-self: center; } }
@media (min-width: 1050px) { .mw-modules:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }