/* SAS X NOUN – home-banner. Gescoped onder .sxb; alleen geladen waar [sas_x_noun_banner] staat. */

@font-face{font-family:'SXN Bagel';src:url('fonts/bagel-fat-one-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SXN Sniglet';src:url('fonts/sniglet-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

.sxb{
  --sx-pink:#F56BA4;--sx-pink-deep:#E2177E;--sx-purple:#7A00B8;--sx-purple-hover:#5E008E;--sx-ink:#4A0072;--sx-lime:#D6DC2E;--sx-rust:#A8360F;--sx-off:#FBF1EC;
  --sx-display:'SXN Bagel','SXN Sniglet',system-ui,sans-serif;--sx-round:'SXN Sniglet',system-ui,sans-serif;--sx-ease:cubic-bezier(.16,.84,.44,1);
  --sxb-r:0px;
  color:var(--sx-ink);line-height:1.55;overflow:hidden;
}
@media (min-width:750px){.sxb{--sxb-r:28px;padding:20px 0}}
.sxb *,.sxb *::before,.sxb *::after{box-sizing:border-box}
.sxb :where(h2,p){margin:0;padding:0}
.sxb :where(h2){font-weight:400;letter-spacing:normal;text-transform:none}
.sxb img{display:block;max-width:100%}
.sxb a{text-decoration:none}
.sxb a:focus-visible{outline:3px solid var(--sx-purple);outline-offset:3px}
.sxb-deco{position:absolute;color:var(--sx-off);pointer-events:none}

/* Banner */
.sxb-banner{position:relative;background:var(--sx-pink);border-radius:var(--sxb-r);overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4vw,64px);padding:clamp(32px,4.5vw,64px) clamp(20px,4.5vw,64px)}
.sxb-banner__star{left:2.5%;top:8%;width:clamp(30px,4vw,56px);opacity:.75}
.sxb-banner__curl{right:3%;bottom:7%;width:clamp(24px,2.6vw,38px);opacity:.7}
.sxb-banner__text{position:relative;flex:1.3 1 380px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,22px)}
.sxb-pill{display:inline-flex;align-items:center;min-height:30px;padding:4px 14px;border:2px solid var(--sx-purple);border-radius:999px;font-family:var(--sx-round);font-weight:800;font-size:12px;letter-spacing:.12em;color:var(--sx-ink)}
@media (max-width:479px){.sxb-pill{font-size:10.5px;letter-spacing:.06em;white-space:nowrap}}
.sxb-title{display:flex;flex-direction:column;gap:2px}
.sxb-title__name{font-family:var(--sx-display);font-size:clamp(46px,7.4vw,120px);line-height:.95;color:var(--sx-lime);-webkit-text-stroke:.055em var(--sx-rust);paint-order:stroke fill;white-space:nowrap}
.sxb-title__sub{font-family:var(--sx-display);font-size:clamp(22px,2.8vw,44px);line-height:1;color:var(--sx-purple)}
.sxb-intro{max-width:44ch;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--sx-ink);text-wrap:pretty}
.sxb-meta{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 16px;background:var(--sx-purple);color:var(--sx-off);border-radius:14px;font-family:var(--sx-round);font-weight:800;font-size:15px;line-height:1.3}
.sxb-meta [aria-hidden]{color:var(--sx-lime)}
.sxb .sxb-btn{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;background:var(--sx-lime);color:var(--sx-ink);border:2px solid var(--sx-ink);font-family:var(--sx-round);font-weight:800;font-size:16px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;box-shadow:4px 4px 0 var(--sx-ink);transition:transform .2s var(--sx-ease),box-shadow .2s var(--sx-ease)}
.sxb .sxb-btn:hover{color:var(--sx-ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sx-ink)}
.sxb .sxb-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sx-ink)}
.sxb-banner__media{position:relative;flex:1 1 280px;min-width:0;display:flex;justify-content:center;padding:18px 10px 6px}
.sxb-frame{position:relative;display:block;width:min(100%,360px);transform:rotate(2.5deg);padding:10px;background:var(--sx-pink-deep);border-radius:20px}
.sxb-photo{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--sx-off)}
.sxb-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sxb-notches{position:absolute;left:-10px;top:14%;bottom:14%;display:flex;flex-direction:column;justify-content:space-between}
.sxb-notches span{display:block;width:20px;height:20px;border-radius:50%;background:var(--sx-pink)}
.sxb-badge{position:absolute;right:-16px;top:-22px;width:clamp(92px,9vw,120px);aspect-ratio:1;border-radius:50%;background:var(--sx-lime);border:2px solid var(--sx-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(10deg);font-family:var(--sx-round);font-weight:800;color:var(--sx-ink)}
@media (max-width:440px){.sxb-badge{right:4px}}
.sxb-badge__price{font-family:var(--sx-display);font-size:clamp(22px,2vw,28px);line-height:normal}
.sxb-badge__per{font-size:10px;letter-spacing:.03em;line-height:1.1;max-width:72%}

/* Strook */
.sxb .sxb-strip{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:clamp(18px,2.2vw,28px) clamp(20px,3vw,40px);background:var(--sx-pink);border-radius:calc(var(--sxb-r) * .8);color:var(--sx-ink);overflow:hidden}
.sxb .sxb-strip:hover{color:var(--sx-ink);opacity:1}
.sxb-strip__text{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-width:0}
.sxb-strip__name{font-family:var(--sx-display);font-size:clamp(32px,4vw,56px);line-height:1;color:var(--sx-lime);-webkit-text-stroke:.06em var(--sx-rust);paint-order:stroke fill;white-space:nowrap}
.sxb-strip__sub{display:flex;flex-direction:column;gap:2px}
.sxb-strip__event{font-family:var(--sx-display);font-size:clamp(17px,1.6vw,22px);line-height:1.1;color:var(--sx-purple)}
.sxb-strip__meta{font-family:var(--sx-round);font-weight:800;font-size:14px;line-height:1.3}
.sxb-strip__btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--sx-purple);color:var(--sx-off);font-family:var(--sx-round);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:background-color .2s}
.sxb-strip:hover .sxb-strip__btn{background:var(--sx-purple-hover)}

.sxb-nw{white-space:nowrap}

/* Mobiel: de banner staat dan meestal in de content-kolom, dus ook daar ronde hoeken. De strook netjes gestapeld. */
@media (max-width:749px){
  .sxb{--sxb-r:22px}
  .sxb .sxb-strip{border-radius:22px;padding:22px 20px;gap:18px}
  .sxb-strip__text{flex-direction:column;align-items:flex-start;gap:6px}
  .sxb-strip__meta{display:flex;flex-direction:column;gap:2px}
  .sxb-strip__sep{display:none}
  .sxb-strip__btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){.sxb *{transition:none!important}}