/*
 * Masterclass op locatie, go.salesarchitects.nl/masterclass-op-locatie
 *
 * Eigen opbouw, zodat deze pagina niet leest als een kopie van /masterclass:
 * lichte hero met foto, een feitenbalk, een vergelijking één persoon tegen het
 * hele team, een tijdlijn en een donker aanvraagblok. Tokens en componenten
 * komen uit /styles.css; hier geen eigen kleuren of maten buiten die tokens.
 */

.lc-h2{font-size:var(--fs-h1);max-width:22ch}
.lc-center{text-align:center;margin-left:auto;margin-right:auto}
.lc-lead{font-size:var(--fs-body-lg);max-width:62ch;margin-top:var(--space-5)}
.lc-center.lc-lead{margin-left:auto;margin-right:auto}
.lc-mark{background:linear-gradient(transparent 64%,rgba(255,105,0,.3) 64%);padding:0 .06em}

/* ---------- hero: licht, foto rechts met kaartje erover ---------- */
.hero.lc-hero{background:var(--sa-bg-light);color:var(--sa-text)}
.lc-hero__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-8);align-items:center;padding-top:var(--space-8);padding-bottom:var(--space-9)}
.hero.lc-hero h1{color:var(--sa-navy);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);max-width:16ch}
.lc-hero__label{display:inline-flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-5);padding:6px 14px 6px 10px;border-radius:var(--radius-pill);background:#fff;border:1px solid var(--sa-grey-line);font-size:var(--fs-sm);font-weight:700;color:var(--sa-navy)}
.lc-hero__label .icon{font-size:20px;color:var(--sa-orange)}
.lc-hero__body{margin:var(--space-5) 0 0;font-size:var(--fs-body-lg);max-width:54ch;text-wrap:pretty}
.lc-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-6)}
.lc-hero__note{margin:var(--space-5) 0 0;font-size:var(--fs-sm);color:var(--sa-text-muted)}
.lc-hero__media{position:relative;margin:0 0 var(--space-6) var(--space-6)}
.lc-hero__media::before{content:"";position:absolute;top:calc(var(--space-6) * -1);right:calc(var(--space-6) * -1);width:58%;height:70%;background:var(--sa-orange);border-radius:var(--radius-card)}
.lc-hero__media img{position:relative;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:60% 40%;border-radius:var(--radius-card);box-shadow:var(--shadow-float)}
.lc-hero__badge{position:absolute;left:calc(var(--space-6) * -1);bottom:calc(var(--space-6) * -1);display:flex;gap:var(--space-3);align-items:center;max-width:300px;padding:var(--space-4) var(--space-5);background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-float)}
.lc-hero__badge .icon-circle{flex:0 0 auto}
.lc-hero__badge b{display:block;color:var(--sa-navy);line-height:1.25}
.lc-hero__badge small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--sa-text-muted)}
@media (max-width:900px){
  .lc-hero__inner{grid-template-columns:1fr;gap:var(--space-8);padding-bottom:var(--space-8)}
  .lc-hero__media{margin:var(--space-5) var(--space-5) var(--space-5) 0}
  .lc-hero__media::before{right:calc(var(--space-5) * -1);top:calc(var(--space-5) * -1)}
  .lc-hero__badge{left:var(--space-4);bottom:calc(var(--space-5) * -1)}
}
@media (max-width:560px){.lc-hero__actions .btn{width:100%}}

/* ---------- feitenbalk ---------- */
.lc-facts{background:var(--sa-navy);color:#fff}
.lc-facts__list{list-style:none;margin:0 auto;padding-top:var(--space-6);padding-bottom:var(--space-6);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lc-facts__list li{display:flex;gap:var(--space-4);align-items:flex-start;padding:0 var(--space-5);border-left:1px solid rgba(255,255,255,.18)}
.lc-facts__list li:first-child{border-left:0;padding-left:0}
.lc-facts__list .icon{font-size:28px;color:var(--sa-orange)}
.lc-facts__label{display:block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps);color:rgba(255,255,255,.65)}
.lc-facts__value{display:block;margin-top:2px;font-weight:500;line-height:1.35}
.lc-facts__value strong{color:#fff}
@media (max-width:900px){
  .lc-facts__list{grid-template-columns:1fr 1fr;row-gap:var(--space-5)}
  .lc-facts__list li:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:520px){
  .lc-facts__list{grid-template-columns:1fr}
  .lc-facts__list li{border-left:0;padding-left:0}
}

/* ---------- drie stemmen en de vergelijking ---------- */
.lc-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-7)}
.lc-voices figure{display:flex;flex-direction:column}
.lc-voice{flex:1;position:relative;margin:0;padding:var(--space-5) var(--space-6);background:var(--sa-bg-light);border-radius:var(--radius-card)}
.lc-voice::after{content:"";position:absolute;left:var(--space-6);bottom:-10px;width:20px;height:20px;background:var(--sa-bg-light);transform:rotate(45deg)}
.lc-voice p{margin:0;font-size:var(--fs-body-lg);font-weight:500;color:var(--sa-navy)}
.lc-voices figcaption cite{display:block;margin:var(--space-5) 0 0 var(--space-6);font-style:normal;font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--sa-text-muted)}
.lc-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-8)}
.lc-compare__col{padding:var(--space-6);border-radius:var(--radius-card);border:1px solid var(--sa-grey-line)}
.lc-compare__col h3{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-h3);margin-bottom:var(--space-5)}
.lc-compare__col--team{border:2px solid var(--sa-orange);background:#fff;box-shadow:var(--shadow-card)}
.lc-compare__col--een{background:var(--sa-bg-light);border-color:transparent}
.lc-compare__col--een h3{color:var(--sa-navy-soft)}
.lc-answer{margin:var(--space-7) auto 0;max-width:62ch;text-align:center;font-size:var(--fs-body-lg)}
.lc-answer strong{color:var(--sa-navy)}
@media (max-width:900px){.lc-voices,.lc-compare{grid-template-columns:1fr}}

/* ---------- opbrengst: donker, grote cijfers ---------- */
.lc-gains{list-style:none;margin:var(--space-7) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.lc-gains li{padding:0 var(--space-6);border-left:1px solid rgba(255,255,255,.18)}
.lc-gains li:first-child{border-left:0;padding-left:0}
.lc-gains__num{display:block;font-size:4rem;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:2px var(--sa-orange)}
.lc-gains h3{margin:var(--space-5) 0 var(--space-3);font-size:var(--fs-h3);color:#fff}
.lc-gains p{margin:0;color:rgba(255,255,255,.82)}
@media (max-width:900px){
  .lc-gains{grid-template-columns:1fr;gap:var(--space-6)}
  .lc-gains li{border-left:0;padding:0 0 var(--space-6);border-bottom:1px solid rgba(255,255,255,.18)}
  .lc-gains li:last-child{border-bottom:0;padding-bottom:0}
}

/* ---------- programma: tijdlijn van links naar rechts ---------- */
.lc-timeline{list-style:none;margin:var(--space-7) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);position:relative}
.lc-timeline::before{content:"";position:absolute;top:23px;left:23px;right:23px;height:2px;background:var(--sa-grey-line)}
.lc-timeline li{position:relative}
.lc-timeline__dot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--sa-orange);color:var(--sa-navy);font-weight:700}
.lc-timeline li:first-child .lc-timeline__dot{background:var(--sa-orange);color:#fff}
.lc-timeline h3{margin:var(--space-5) 0 var(--space-3);font-size:var(--fs-h4)}
.lc-timeline p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-loose)}
.lc-dayline{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-top:var(--space-7);padding:var(--space-4) var(--space-5);background:var(--sa-orange-soft);border-radius:var(--radius-card);font-size:var(--fs-sm);font-weight:500;color:var(--sa-navy)}
.lc-dayline span{display:inline-flex;align-items:center;gap:6px}
.lc-dayline .icon{font-size:20px;color:var(--sa-orange)}
@media (max-width:900px){
  .lc-timeline{grid-template-columns:1fr;gap:var(--space-6);padding-left:0}
  .lc-timeline::before{top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto}
  .lc-timeline li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--space-5)}
  .lc-timeline h3{margin-top:var(--space-2)}
  .lc-timeline h3,.lc-timeline p{grid-column:2}
  .lc-timeline__dot{grid-row:1 / span 2}
}

/* ---------- fotoband ---------- */
.lc-photo{position:relative;min-height:420px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--sa-navy)}
.lc-photo{min-height:480px}
.lc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.lc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sa-navy-deep) 0%,rgba(0,11,58,.82) 45%,rgba(0,11,58,.15) 100%)}
.lc-photo__inner{position:relative;z-index:1;width:100%;padding-top:var(--space-9);padding-bottom:var(--space-8)}
.lc-photo h2{color:#fff;font-size:var(--fs-h1);max-width:16ch}
.lc-photo p{margin:var(--space-5) 0 0;max-width:46ch;font-size:var(--fs-body-lg);color:rgba(255,255,255,.88)}

/* ---------- zo werkt het: stappen onder elkaar ---------- */
.lc-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-8);align-items:start}
.lc-how__intro .btn{margin-top:var(--space-6)}
.lc-how__img{width:100%;height:auto;margin-top:var(--space-7);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.lc-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lc-steps li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--space-5);padding-bottom:var(--space-6)}
.lc-steps li:last-child{padding-bottom:0}
.lc-steps li:not(:last-child)::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--sa-grey-line)}
.lc-steps .icon-circle{width:56px;height:56px;background:var(--sa-navy)}
.lc-steps .icon-circle .icon{color:#fff}
.lc-steps h3{margin:var(--space-3) 0 var(--space-2);font-size:var(--fs-h4)}
.lc-steps p{margin:0}
.lc-steps__when{display:inline-block;margin-top:var(--space-2);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--sa-orange)}
@media (max-width:900px){.lc-how{grid-template-columns:1fr;gap:var(--space-7)}}

/* ---------- voor wie: één gedeeld blok ---------- */
.lc-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-7);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--sa-grey-line)}
.lc-fit > div{padding:var(--space-7) var(--space-6)}
.lc-fit__wel{background:var(--sa-orange-soft)}
.lc-fit__niet{background:#fff}
.lc-fit h3{font-size:var(--fs-h3);margin-bottom:var(--space-5)}
.lc-fit__foot{margin:var(--space-6) 0 0;font-size:var(--fs-sm);color:var(--sa-text-muted)}
@media (max-width:800px){.lc-fit{grid-template-columns:1fr}}

/* ---------- ervaringen: één grote, twee kleine ---------- */
.lc-quotes{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-5);margin-top:var(--space-7)}
.lc-quote-big{position:relative;margin:0;padding:var(--space-8) var(--space-7) var(--space-7);background:var(--sa-navy);color:#fff;border-radius:var(--radius-card);overflow:hidden}
.lc-quote-big::before{content:"\201C";position:absolute;top:var(--space-3);left:var(--space-6);font-size:7rem;line-height:1;font-weight:700;color:var(--sa-orange)}
.lc-quote-big blockquote{position:relative;margin:0;font-size:var(--fs-h3);line-height:var(--lh-loose);font-weight:500;text-wrap:pretty}
.lc-quote-big figcaption{margin-top:var(--space-6);font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.lc-quote-big figcaption b{display:block;font-size:var(--fs-body);color:#fff}
.lc-quotes__side{display:grid;gap:var(--space-5)}
.lc-quote{margin:0;padding:var(--space-6);border-left:4px solid var(--sa-orange);background:#fff;border-radius:0 var(--radius-card) var(--radius-card) 0}
.lc-quote blockquote{margin:0;text-wrap:pretty}
.lc-quote figcaption{margin-top:var(--space-4);font-size:var(--fs-sm);color:var(--sa-text-muted)}
.lc-quote figcaption b{display:block;color:var(--sa-navy)}
.lc-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5) var(--space-7);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--sa-grey-line)}
.lc-logos p{margin:0;font-size:var(--fs-sm);color:var(--sa-text-muted)}
.lc-logos p strong{color:var(--sa-navy)}
@media (max-width:900px){.lc-quotes{grid-template-columns:1fr}.lc-quote-big{padding:var(--space-8) var(--space-6) var(--space-6)}}

/* ---------- trainer: compact, ronde foto ---------- */
.lc-trainer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-7);align-items:center;padding:var(--space-7);background:var(--sa-bg-light);border-radius:var(--radius-card)}
.lc-trainer img{width:200px;height:200px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:6px solid #fff;box-shadow:var(--shadow-card)}
.lc-trainer h2{font-size:var(--fs-h2)}
.lc-trainer__role{margin:var(--space-2) 0 var(--space-4);color:var(--sa-text-muted);font-weight:500}
.lc-trainer p:last-of-type{margin-bottom:0}
.lc-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-5) 0 0;padding:0;list-style:none}
.lc-chips li{padding:5px 12px;border-radius:var(--radius-pill);background:#fff;border:1px solid var(--sa-grey-line);font-size:var(--fs-sm);font-weight:500;color:var(--sa-navy)}
@media (max-width:700px){.lc-trainer{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-6)}.lc-trainer img{width:140px;height:140px}}

/* ---------- aanvragen: donker blok met witte formulierkaart ---------- */
.lc-apply{background:var(--sa-navy);color:#fff}
.lc-apply .eyebrow{color:var(--sa-orange)}
.lc-apply h2{color:#fff}
.lc-apply__lead{margin:var(--space-5) 0 var(--space-6);font-size:var(--fs-body-lg);color:rgba(255,255,255,.88)}
.lc-price{padding:var(--space-6);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-card)}
.lc-price__from{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-caps);color:rgba(255,255,255,.65)}
.lc-price__amount{display:block;margin-top:var(--space-1);font-size:var(--fs-display);font-weight:700;line-height:1.05;color:#fff}
.lc-price__note{display:block;margin-top:var(--space-2);font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.lc-price .checks{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.22)}
.lc-price .checks li{font-size:var(--fs-sm)}
.lc-apply__small{margin:var(--space-6) 0 0;font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.lc-apply__small a{color:#fff}
.lc-apply .form-card{color:var(--sa-text);box-shadow:var(--shadow-float)}

/* ---------- vragen: twee kolommen ---------- */
.lc-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-7);margin-top:var(--space-7);border-top:0}
.lc-faq > div{border-top:1px solid var(--sa-grey-line)}
@media (max-width:800px){.lc-faq{grid-template-columns:1fr}.lc-faq > div + div{border-top:0}}

/* ---------- slot: licht in plaats van donker ---------- */
.lc-slot{background:var(--sa-orange-soft);text-align:center}
.lc-slot h2{font-size:var(--fs-h1);max-width:20ch;margin:0 auto}
.lc-slot p{max-width:58ch;margin:var(--space-5) auto 0;font-size:var(--fs-body-lg)}
.lc-slot__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);margin-top:var(--space-6)}
.lc-slot__small{font-size:var(--fs-sm)!important;color:var(--sa-text-muted)}
.lc-photo .eyebrow{margin:0 0 var(--space-3);font-size:var(--fs-sm);color:var(--sa-orange)}
