/* grafisch-ontwerper-formaten 1.0.0 · formaatschakelaar met rubberen duim, naar ReactBits RubberSegment
   (eigen vanilla). Kleuren en letters alleen via --m-*-tokens; tinten met color-mix. */
.msm-grafisch-ontwerper-formaten {
  --gf-ink: var(--m-ink, #171717);
  --gf-paper: var(--m-bg, #f4f0e8);
  --gf-red: var(--m-primary, #cf2f22);
  --gf-sheet: color-mix(in srgb, var(--gf-paper) 30%, #fff);
  --gf-muted: color-mix(in srgb, var(--gf-ink) 62%, var(--gf-paper));
  --gf-line: color-mix(in srgb, var(--gf-ink) 18%, transparent);
  --gf-gutter: clamp(16px, 2vw, 28px);
  --gf-spring: cubic-bezier(0.34, 1.28, 0.5, 1);
  display: block;
  scroll-margin-top: 110px;
  padding: clamp(84px, 9vw, 136px) clamp(24px, 5vw, 76px) clamp(88px, 9vw, 136px);
  background: var(--gf-sheet);
  color: var(--gf-ink);
  font: 400 16px/1.5 var(--m-font-body, Arial, sans-serif);
}
.msm-grafisch-ontwerper-formaten *,
.msm-grafisch-ontwerper-formaten *::before,
.msm-grafisch-ontwerper-formaten *::after { box-sizing: border-box; }

.msm-grafisch-ontwerper-formaten .gf-kop {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gf-gutter);
  padding-top: 18px;
  border-top: 2px solid var(--gf-ink);
  margin-bottom: clamp(56px, 7vw, 100px);
}
.msm-grafisch-ontwerper-formaten .gf-label {
  grid-column: 1 / 4;
  display: grid;
  align-content: start;
  gap: 2px;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}
.msm-grafisch-ontwerper-formaten .gf-label span + span { font-weight: 400; color: var(--gf-muted); }
.msm-grafisch-ontwerper-formaten .gf-kop h2 {
  grid-column: 4 / 13;
  margin: 0;
  font: 800 clamp(44px, 6.4vw, 98px)/0.9 var(--m-font-display, Arial, sans-serif);
  letter-spacing: -0.055em;
}
.msm-grafisch-ontwerper-formaten .gf-lede {
  grid-column: 4 / 10;
  margin: 30px 0 0;
  max-width: 52ch;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.5;
}

.msm-grafisch-ontwerper-formaten .gf-werk {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gf-gutter);
  row-gap: 40px;
  align-items: start;
}
.msm-grafisch-ontwerper-formaten .gf-paneel { grid-column: 1 / 5; }
.msm-grafisch-ontwerper-formaten .gf-podium { grid-column: 5 / 13; }

/* De schakelaar: vier gelijke vakken, een inktzwarte duim die met clip-path over de baan rekt. */
.msm-grafisch-ontwerper-formaten .gf-schakel {
  --gf-inset: 4px;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: var(--gf-inset);
  border: 1.5px solid var(--gf-ink);
  background: var(--gf-sheet);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.msm-grafisch-ontwerper-formaten .gf-optie,
.msm-grafisch-ontwerper-formaten .gf-duim > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--gf-ink);
  font: 700 15px/1 var(--m-font-body, Arial, sans-serif);
  white-space: nowrap;
}
.msm-grafisch-ontwerper-formaten .gf-optie {
  cursor: pointer;
  outline: none;
  opacity: 0.78;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.msm-grafisch-ontwerper-formaten .gf-optie[aria-checked="true"] { opacity: 1; cursor: grab; }
.msm-grafisch-ontwerper-formaten .gf-schakel[data-held],
.msm-grafisch-ontwerper-formaten .gf-schakel[data-held] .gf-optie { cursor: grabbing; }
.msm-grafisch-ontwerper-formaten .gf-optie[data-pressed] { transform: scale(0.96); }
.msm-grafisch-ontwerper-formaten .gf-optie:hover { opacity: 1; }
.msm-grafisch-ontwerper-formaten .gf-optie:focus-visible { box-shadow: inset 0 0 0 2px var(--gf-red); }
.msm-grafisch-ontwerper-formaten .gf-duim {
  position: absolute;
  inset: var(--gf-inset);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--gf-ink);
  pointer-events: none;
  clip-path: inset(0 75% 0 0 round 1px);
}
.msm-grafisch-ontwerper-formaten .gf-duim > span { color: var(--gf-paper); }
.msm-grafisch-ontwerper-formaten .gf-hint { margin: 10px 0 0; font-size: 13px; color: var(--gf-muted); }

/* Wat je per formaat krijgt. */
.msm-grafisch-ontwerper-formaten .gf-krijg { margin: 34px 0 0; }
.msm-grafisch-ontwerper-formaten .gf-krijg > div { padding: 14px 0 16px; border-top: 1px solid var(--gf-line); }
.msm-grafisch-ontwerper-formaten .gf-krijg dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font: 800 clamp(28px, 2.6vw, 38px)/1 var(--m-font-display, Arial, sans-serif);
  letter-spacing: -0.045em;
}
.msm-grafisch-ontwerper-formaten .gf-krijg dt span { font: 700 13px/1.2 var(--m-font-body, Arial, sans-serif); letter-spacing: 0; color: var(--gf-red); }
.msm-grafisch-ontwerper-formaten .gf-krijg dd { margin: 10px 0 0; max-width: 40ch; font-size: 16px; line-height: 1.5; }
.msm-grafisch-ontwerper-formaten .gf-altijd { margin: 30px 0 0; padding: 16px 0 0; border-top: 1px solid var(--gf-line); }
.msm-grafisch-ontwerper-formaten .gf-altijd p { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--gf-muted); }
.msm-grafisch-ontwerper-formaten .gf-altijd ul { list-style: none; margin: 0; padding: 0; }
.msm-grafisch-ontwerper-formaten .gf-altijd li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.4;
}
.msm-grafisch-ontwerper-formaten .gf-altijd svg { width: 14px; height: 14px; margin-top: 3px; color: var(--gf-red); }
.msm-grafisch-ontwerper-formaten.is-live .gf-krijg > div:not(.is-actief) { display: none; }
.msm-grafisch-ontwerper-formaten.is-live .gf-krijg > div.is-actief { border-top-color: var(--gf-ink); animation: gf-in 0.4s cubic-bezier(0.2, 0.7, 0.1, 1); }
@keyframes gf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Podium: zonder script vier schermen naast elkaar, met script één scherm dat van verhouding wisselt. */
.msm-grafisch-ontwerper-formaten .gf-podium {
  position: relative;
  padding: clamp(20px, 2.4vw, 32px);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gf-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(color-mix(in srgb, var(--gf-ink) 5%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--gf-paper);
}
.msm-grafisch-ontwerper-formaten .gf-schermen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.msm-grafisch-ontwerper-formaten .gf-scherm { margin: 0; display: flex; flex-direction: column; align-items: center; }
.msm-grafisch-ontwerper-formaten .gf-scherm[data-format="post"] { --gf-ar: 4 / 5; --gf-cel: 4.4cqw; }
.msm-grafisch-ontwerper-formaten .gf-scherm[data-format="story"] { --gf-ar: 9 / 16; --gf-cel: 5.2cqw; }
.msm-grafisch-ontwerper-formaten .gf-scherm[data-format="website"] { --gf-ar: 16 / 10; --gf-cel: 2.4cqw; }
.msm-grafisch-ontwerper-formaten .gf-scherm[data-format="presentatie"] { --gf-ar: 16 / 9; --gf-cel: 2.6cqw; }
.msm-grafisch-ontwerper-formaten .gf-vlak {
  position: relative;
  width: 100%;
  aspect-ratio: var(--gf-ar, 4 / 5);
  overflow: hidden;
  container-type: size;
  background: var(--gf-sheet);
  outline: 1px solid var(--gf-ink);
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--gf-ink) 60%, transparent);
}
.msm-grafisch-ontwerper-formaten .gf-scherm figcaption {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}
.msm-grafisch-ontwerper-formaten .gf-scherm figcaption span { font-weight: 400; color: var(--gf-muted); }

.msm-grafisch-ontwerper-formaten.is-live .gf-schermen { display: flex; align-items: center; justify-content: center; height: clamp(440px, 40vw, 560px); }
.msm-grafisch-ontwerper-formaten.is-live .gf-scherm:not(:first-child) { display: none; }
.msm-grafisch-ontwerper-formaten.is-live .gf-vlak {
  aspect-ratio: auto;
  transition: width 0.62s var(--gf-spring), height 0.62s var(--gf-spring);
}

/* Elementen van de opmaak; alle maten in procenten en containereenheden zodat ze meeschuiven. */
.msm-grafisch-ontwerper-formaten .gf-vlak > span {
  position: absolute;
  display: block;
  transition-property: left, top, width, height, font-size, opacity, transform;
  transition-duration: 0.62s;
  transition-timing-function: var(--gf-spring);
}
.msm-grafisch-ontwerper-formaten .gf-cirkel { aspect-ratio: 1 / 1; border-radius: 50%; background: var(--gf-red); }
.msm-grafisch-ontwerper-formaten .gf-blok { background: var(--gf-ink); }
.msm-grafisch-ontwerper-formaten .gf-raster {
  background:
    linear-gradient(90deg, transparent 58%, var(--gf-sheet) 58%) 0 0 / var(--gf-cel, 3cqw) var(--gf-cel, 3cqw),
    linear-gradient(transparent 58%, var(--gf-sheet) 58%) 0 0 / var(--gf-cel, 3cqw) var(--gf-cel, 3cqw),
    var(--gf-red);
}
.msm-grafisch-ontwerper-formaten .gf-balk { background: var(--gf-red); }
.msm-grafisch-ontwerper-formaten .gf-vlak > .gf-knop {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gf-red);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}
.msm-grafisch-ontwerper-formaten .gf-woord {
  font-family: var(--m-font-display, Arial, sans-serif);
  font-style: italic;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.msm-grafisch-ontwerper-formaten .gf-regel { font-weight: 700; line-height: 1.15; white-space: nowrap; }

/* Post 4 : 5 */
.msm-grafisch-ontwerper-formaten [data-format="post"] .gf-cirkel { left: 46%; top: -14%; width: 70%; }
.msm-grafisch-ontwerper-formaten [data-format="post"] .gf-blok { left: 8%; top: 40%; width: 52%; height: 36%; }
.msm-grafisch-ontwerper-formaten [data-format="post"] .gf-raster { left: 66%; top: 49%; width: 26%; height: 22%; }
.msm-grafisch-ontwerper-formaten [data-format="post"] .gf-balk { left: 8%; top: 37%; width: 0%; height: 0.8%; opacity: 0; }
.msm-grafisch-ontwerper-formaten [data-format="post"] .gf-knop { left: 8%; top: 88%; width: 30%; height: 6%; font-size: 3.6cqw; opacity: 0; }
.msm-grafisch-ontwerper-formaten [data-format="post"] .gf-woord { left: 7%; top: 9%; font-size: 21cqw; }
.msm-grafisch-ontwerper-formaten [data-format="post"] .gf-regel { left: 8%; top: 82%; font-size: 4.4cqw; }

/* Story 9 : 16 */
.msm-grafisch-ontwerper-formaten [data-format="story"] .gf-cirkel { left: 22%; top: -9%; width: 100%; }
.msm-grafisch-ontwerper-formaten [data-format="story"] .gf-blok { left: 8%; top: 47%; width: 84%; height: 25%; }
.msm-grafisch-ontwerper-formaten [data-format="story"] .gf-raster { left: 8%; top: 76%; width: 38%; height: 9%; }
.msm-grafisch-ontwerper-formaten [data-format="story"] .gf-balk { left: 8%; top: 43%; width: 30%; height: 0.6%; opacity: 1; }
.msm-grafisch-ontwerper-formaten [data-format="story"] .gf-knop { left: 54%; top: 76%; width: 38%; height: 6%; font-size: 5cqw; opacity: 1; }
.msm-grafisch-ontwerper-formaten [data-format="story"] .gf-woord { left: 7%; top: 30%; font-size: 25cqw; }
.msm-grafisch-ontwerper-formaten [data-format="story"] .gf-regel { left: 8%; top: 89%; font-size: 5.6cqw; }

/* Website 16 : 10 */
.msm-grafisch-ontwerper-formaten [data-format="website"] .gf-cirkel { left: 80%; top: 50%; width: 15%; }
.msm-grafisch-ontwerper-formaten [data-format="website"] .gf-blok { left: 52%; top: 15%; width: 43%; height: 54%; }
.msm-grafisch-ontwerper-formaten [data-format="website"] .gf-raster { left: 5%; top: 78%; width: 90%; height: 14%; }
.msm-grafisch-ontwerper-formaten [data-format="website"] .gf-balk { left: 5%; top: 8%; width: 90%; height: 0.5%; opacity: 1; }
.msm-grafisch-ontwerper-formaten [data-format="website"] .gf-knop { left: 5.5%; top: 56%; width: 15%; height: 8%; font-size: 1.6cqw; opacity: 1; }
.msm-grafisch-ontwerper-formaten [data-format="website"] .gf-woord { left: 5%; top: 19%; font-size: 12.5cqw; }
.msm-grafisch-ontwerper-formaten [data-format="website"] .gf-regel { left: 5.5%; top: 45%; font-size: 1.9cqw; }

/* Presentatie 16 : 9 */
.msm-grafisch-ontwerper-formaten [data-format="presentatie"] .gf-cirkel { left: 79%; top: 60%; width: 15%; }
.msm-grafisch-ontwerper-formaten [data-format="presentatie"] .gf-blok { left: 0%; top: 0%; width: 40%; height: 100%; }
.msm-grafisch-ontwerper-formaten [data-format="presentatie"] .gf-raster { left: 46%; top: 66%; width: 26%; height: 16%; }
.msm-grafisch-ontwerper-formaten [data-format="presentatie"] .gf-balk { left: 46%; top: 54%; width: 48%; height: 0.8%; opacity: 1; }
.msm-grafisch-ontwerper-formaten [data-format="presentatie"] .gf-knop { left: 46%; top: 88%; width: 18%; height: 6%; font-size: 1.6cqw; opacity: 0; }
.msm-grafisch-ontwerper-formaten [data-format="presentatie"] .gf-woord { left: 45.5%; top: 15%; font-size: 11cqw; }
.msm-grafisch-ontwerper-formaten [data-format="presentatie"] .gf-regel { left: 46.5%; top: 41%; font-size: 2.1cqw; }

/* Apparaten: drie grote vrijstaande beelden; het actieve formaat krijgt een rode lijn. */
.msm-grafisch-ontwerper-formaten .gf-apparaten {
  list-style: none;
  margin: clamp(64px, 7vw, 104px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gf-gutter);
}
.msm-grafisch-ontwerper-formaten .gf-apparaten figure { margin: 0; }
.msm-grafisch-ontwerper-formaten .gf-plaat {
  aspect-ratio: 1 / 0.9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--gf-paper);
}
.msm-grafisch-ontwerper-formaten .gf-plaat img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.msm-grafisch-ontwerper-formaten .gf-apparaten figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gf-ink);
  font-size: 14px;
  transition: box-shadow 0.25s ease;
}
.msm-grafisch-ontwerper-formaten .gf-apparaten figcaption span { color: var(--gf-muted); }
.msm-grafisch-ontwerper-formaten .gf-apparaten li.is-actief figcaption { box-shadow: inset 0 3px 0 var(--gf-red); }
.msm-grafisch-ontwerper-formaten .gf-apparaten li.is-actief figcaption span { color: var(--gf-ink); font-weight: 700; }

@media (max-width: 1000px) {
  .msm-grafisch-ontwerper-formaten .gf-paneel,
  .msm-grafisch-ontwerper-formaten .gf-podium { grid-column: 1 / -1; }
  .msm-grafisch-ontwerper-formaten .gf-label { grid-column: 1 / -1; display: flex; gap: 12px; margin-bottom: 18px; }
  .msm-grafisch-ontwerper-formaten .gf-kop h2,
  .msm-grafisch-ontwerper-formaten .gf-lede { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .msm-grafisch-ontwerper-formaten { padding-inline: 18px; scroll-margin-top: 100px; }
  .msm-grafisch-ontwerper-formaten .gf-optie,
  .msm-grafisch-ontwerper-formaten .gf-duim > span { height: 44px; padding: 0 4px; font-size: 13px; }
  .msm-grafisch-ontwerper-formaten .gf-schermen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msm-grafisch-ontwerper-formaten.is-live .gf-schermen { height: 420px; }
  .msm-grafisch-ontwerper-formaten .gf-krijg { margin-top: 24px; }
  .msm-grafisch-ontwerper-formaten .gf-apparaten { grid-template-columns: 1fr; gap: 36px; }
  .msm-grafisch-ontwerper-formaten .gf-plaat { aspect-ratio: 1 / 0.78; }
  .msm-grafisch-ontwerper-formaten .gf-plaat img { width: 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-grafisch-ontwerper-formaten .gf-optie,
  .msm-grafisch-ontwerper-formaten .gf-apparaten figcaption { transition: none; }
  .msm-grafisch-ontwerper-formaten.is-live .gf-vlak,
  .msm-grafisch-ontwerper-formaten .gf-vlak > span { transition: none; }
  .msm-grafisch-ontwerper-formaten.is-live .gf-krijg > div.is-actief { animation: none; }
}
@media (max-width: 400px) {
  .msm-grafisch-ontwerper-formaten .gf-kop h2 { font-size: clamp(34px, 10.4vw, 42px); }
}