/* ══════════════════════════════════════════════════════════════
   ATELYA — extra componenten voor paraatheid.html en groep.html
   Gebruikt uitsluitend de tokens uit perm-global.css.
   ══════════════════════════════════════════════════════════════ */
.ax-hero-ctas { display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }
.ax-prose p { max-width:62ch; font-size:clamp(15px,1.4vw,17px); line-height:1.8; color:rgba(245,239,235,0.75); margin-bottom:18px; }
.ax-prose p:last-child { margin-bottom:0; }
.ax-prose strong { color:#F5EFEB; font-weight:600; }
.ax-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:rgba(134,169,185,.12); border:1px solid rgba(200,217,230,0.12); margin-top:clamp(32px,5vw,56px); }
.ax-card { background:var(--perm-dark); padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; gap:12px; }
.ax-card-num { font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#C8D9E6; }
.ax-card-title { font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.9vw,23px); line-height:1.2; color:#F5EFEB; }
.ax-card-body { font-size:clamp(13.5px,1.25vw,15px); line-height:1.75; color:rgba(245,239,235,0.75); }
.ax-card--placeholder .ax-card-body { color:#C8D9E6; font-style:italic; }
.ax-note { margin-top:clamp(32px,4vw,48px); padding:18px 0 18px 22px; border-left:1px solid #C8D9E6; max-width:64ch; font-family:var(--font-wordmark); font-style:italic; font-size:clamp(17px,1.8vw,22px); line-height:1.5; color:rgba(245,239,235,0.8); }
.ax-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(134,169,185,.12); border:1px solid rgba(200,217,230,0.12); margin:clamp(32px,5vw,56px) 0; }
.ax-stat { background:var(--perm-darker); padding:clamp(24px,3vw,40px); }
.ax-stat-val { font-family:var(--font-wordmark); font-weight:900; font-size:clamp(40px,6vw,72px); line-height:1; color:#F5EFEB; }
.ax-stat-lbl { margin-top:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#C8D9E6; }
.ax-link { display:inline-flex; margin-top:28px; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--perm-blue); text-decoration:none; }
.ax-link:hover { color:#F5EFEB; }
.ax-facts { list-style:none; margin-top:clamp(28px,4vw,40px); display:flex; flex-direction:column; gap:12px; max-width:64ch; }
.ax-facts li { position:relative; padding-left:20px; font-size:clamp(14px,1.3vw,16px); color:rgba(245,239,235,0.75); line-height:1.7; }
.ax-facts li::before { content:''; position:absolute; left:0; top:.7em; width:7px; height:7px; border-radius:50%; background:var(--perm-tan); opacity:.7; }
.ax-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(134,169,185,.12); border:1px solid rgba(200,217,230,0.12); }
.ax-col { background:var(--perm-dark); padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; gap:10px; }
.ax-col p { font-size:clamp(13px,1.05vw,14.5px); line-height:1.7; color:rgba(245,239,235,0.75); }
.ax-col-meta { margin-top:auto; padding-top:14px; border-top:1px solid rgba(245,239,235,0.08); font-size:13px !important; color:rgba(245,239,235,0.75); }
.ax-col-meta a { color:var(--perm-blue); text-decoration:none; }
.ax-col-meta a:hover { color:#F5EFEB; }
.ax-cols--2 { grid-template-columns:repeat(2,1fr); }
.ax-col--wide { margin-top:1px; border:1px solid rgba(200,217,230,0.12); display:grid; grid-template-columns:minmax(220px,1fr) 2fr; gap:clamp(24px,4vw,56px); align-items:start; }
.ax-wide-brand { display:flex; flex-direction:column; gap:12px; }
.ax-partner-logo { display:block; width:200px; max-width:100%; height:auto; background:#FFFFFF; padding:14px 18px; border-radius:4px; box-sizing:content-box; }
.ax-partner-fallback { display:none; font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,30px); color:#F5EFEB; }
.ax-wide-text { display:flex; flex-direction:column; gap:10px; }
.ax-col--wide .ax-col-meta { margin-top:4px; }
@media (max-width:900px) { .ax-cols, .ax-cols--2 { grid-template-columns:1fr; } .ax-col--wide { grid-template-columns:1fr; } }
@media (max-width:640px) {
  .ax-stats { grid-template-columns:1fr; }
}