/* ===========================================================================
   FRANCHISEHUB, DE COMPOSITIE VAN /modules

   Alleen deze pagina laadt dit bestand. De basis, de bouwstenen, de kopbalk,
   het menupaneel, de voet, het donkere oppervlak en de twee slotblokken staan
   in landing-gedeeld.css en worden VOOR dit bestand geladen. De waarden staan
   in landing-tokens.css, dat daar weer voor komt. Die volgorde is load-bearing.

   DE VORM: EEN PLATTEGROND
   De zes eerdere verdiepingspagina's zijn alle zes LINEAIR. /matching is een
   tweeluik en gebruikt breedte als grens. /bewijs is een grootboek en gebruikt
   hoogte als volgorde. /ai-assistent legt een horizontale snede. /crm is een
   trap. /marketing-analytics is een zandloper. /samenwerken zijn drie banen met
   dwarsbalken. Ze hebben allemaal een leesrichting.

   Een index heeft die niet. Je komt hier niet om van boven naar beneden te
   lezen maar om te zien wat er is en dan ergens naartoe te springen. De vorm is
   daarom een VLAK in plaats van een lijn: vier verdiepingen met zestien ruimtes,
   met muren van een pixel breed ertussen.

   DRIE DINGEN DIE DEZE VORM DOET EN EEN LIJST NIET
   1. De groepering is te zien in plaats van te lezen. Vier verdiepingen met elk
      een eigen taak: vastleggen, wegen, werken, buiten het scherm.
   2. De breedte van een blok in de plattegrond is evenredig aan het aantal
      modules erin (4fr, 3fr, 5fr en 4fr). De verhoudingen van de tekening
      dragen dus informatie in plaats van alleen vorm te zijn.
   3. De onregelmatigheid van het cellenraster heeft een reden die de bezoeker
      kan zien: een module met een eigen verdiepingspagina krijgt een KORTE cel
      met een doorverwijzing, een module die alleen hier staat krijgt een BREDE
      cel met de volledige beschrijving. De vorm van het raster zegt dus waar je
      verder kunt lezen. De leeswijzer onder de plattegrond schrijft dat voluit;
      zonder die uitleg leest ongelijkheid als slordigheid.

   BEWUST GEEN VIERKANTJES OP DEZE PAGINA
   Het vierkantje ligt in de gedeelde laag vast als taal voor precies één ding
   waar een oordeel over gaat: een kenmerk, een eis, een bevinding. Een module
   is dat niet. De tegels op de plattegrond zijn daarom ruimtes met een naam
   erin en geen vakjes. Wie hier toch een .vak zet, maakt van die taal een
   decoratie en dan is ze niets meer waard op de plek waar ze wel iets zegt.

   HET ONDERSCHEID KORT TEGENOVER BREED DRAAGT NOOIT ALLEEN OP KLEUR
   De randbalk links op een tegel is 2px bij een korte en 5px bij een brede, dus
   het verschil zit ook in de dikte. Daarbij staat het in woorden in de
   leeswijzer en is het aan de cellen zelf te zien aan hun breedte en inhoud.

   GEEN ENKELE EIGEN KLASSE RENDEERT OP DISPLAYSCHAAL
   De schrijfregel "geen afsluitende punt in een kop" geldt voor h1 tot en met
   h6 en voor elke klasse die op 26px of groter rendert, ook zonder koptag. Op
   deze pagina staan de enige twee displaymaten op .titel-1 en .titel-2 uit de
   gedeelde laag; alles wat hier wordt gedefinieerd blijft op var(--t-2xl) van
   24px of lager. Dat is geen toeval maar een keuze: hoe kleiner de verzameling
   plekken waar die regel geldt, hoe kleiner de kans dat hij een vierde keer
   wordt overgeslagen.

   DE KOLOMMEN STAAN IN FRACTIES MET EEN NUL ERIN
   Elke kolombreedte is minmax(0,Nfr). Die nul is er niet voor de sier: zonder
   die nul is de minimale kolombreedte "auto" en duwt een lange ononderbroken
   naam het raster breder dan het venster.

   GEEN overflow:hidden OP HET OMHULSEL
   .mod-bouwwerk heeft afgeronde hoeken maar knipt niet, want overflow:hidden
   maakt van een element een scrollcontainer en dan werkt de meelopende rail
   erbinnen niet meer. De hoeken worden daarom per verdieping afgerond.

   Contrast is doorgerekend op de echte DOM met de alphalagen erin verwerkt,
   niet geschat. Wie een kleur wijzigt, meet opnieuw.

   VOLGORDE: landing-tokens.css, landing-gedeeld.css, dit bestand.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. DE OPENING
   Titel links, de inleiding rechts, daaronder de plattegrond over de volle
   breedte. De kop en de inleiding staan naast elkaar en niet onder elkaar: de
   plattegrond is het onderwerp van deze sectie en die moet boven de vouw
   beginnen in plaats van onder drie alinea's te verdwijnen.
   --------------------------------------------------------------------------- */
.mod-opening{background:var(--wit);padding-bottom:clamp(56px,6vw,86px)}
.mod-opening-raster{position:absolute;inset:0;z-index:0;pointer-events:none}

.mod-opening-kop{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;
}
.mod-opening-kop .titel-1{margin-top:var(--r5);max-width:14ch}
.mod-opening-tekst{display:grid;gap:var(--r4)}
.mod-opening-tekst .lead{max-width:56ch}
.mod-opening-bij{
  font-size:var(--t-md);line-height:1.65;color:var(--ink-400);
  padding-top:var(--r4);border-top:1px solid var(--rand);max-width:56ch;
}

/* ---------------------------------------------------------------------------
   2. DE PLATTEGROND
   Tegelijk het beeld en de navigatie van deze pagina.

   De muren zijn geen randen maar GATEN: het raster heeft een gap van 1px en
   een achtergrond in de randkleur, de tegels zijn wit. Wat je als muur ziet is
   dus de achtergrond die tussen twee tegels doorkijkt. Dat scheelt een rand per
   tegel en, belangrijker, het levert overal een muur van precies één pixel op
   in plaats van twee randen die tegen elkaar aan liggen.
   --------------------------------------------------------------------------- */
.mod-plan{margin:clamp(34px,4vw,58px) 0 0}
.mod-plan-kop{margin-bottom:var(--r4)}

.mod-plan-vlak{
  display:grid;
  /* Vier, drie, vijf en vier modules. De breedte van een vleugel is dus
     evenredig aan wat erin zit. */
  grid-template-columns:4fr 3fr 5fr 4fr;
  gap:1px;background:var(--rand-sterk);
  border:1px solid var(--rand-sterk);border-radius:var(--rond-lg);
  overflow:hidden;
}
.mod-blok{
  display:grid;grid-template-rows:auto;
  /* De tegels verdelen wat er na de kop overblijft, zodat vier vleugels met
     een verschillend aantal ruimtes toch even hoog eindigen. Een vleugel van
     drie krijgt dus hogere ruimtes dan een vleugel van vijf; dat is precies
     hoe een plattegrond zich gedraagt. */
  grid-auto-rows:minmax(52px,1fr);
  gap:1px;background:var(--rand-sterk);
}
.mod-blok-kop{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 15px;background:var(--papier-lila);
  color:var(--ink-900);font-weight:700;font-size:var(--t-md);line-height:1.25;
  transition:background var(--duur-kort) var(--soepel),color var(--duur-kort) var(--soepel);
}
.mod-blok-reeks{color:var(--ink-400)}
.mod-tegel{
  display:flex;align-items:center;gap:var(--r3);
  padding:12px 15px;background:var(--wit);color:var(--ink-700);
  font-size:var(--t-md);font-weight:600;line-height:1.3;
  /* De randbalk links. Twee pixels bij een korte cel, vijf bij een brede: het
     onderscheid zit in de dikte en niet alleen in de kleur.

     De volle inkt en niet de lichte randtint. Doorgerekend op de echte DOM:
     --blauw-rand haalde 1,61 op wit en --lila-rand 1,63, allebei ver onder de
     3:1 die een grafisch element met betekenis moet halen. Op --blauw (6,18)
     en --lila (5,78) is de balk een getekende markering in plaats van een
     vermoeden. */
  box-shadow:inset 2px 0 0 var(--blauw);
  transition:background var(--duur-kort) var(--soepel),
             color var(--duur-kort) var(--soepel),
             box-shadow var(--duur-kort) var(--soepel);
}
.mod-tegel-diep{box-shadow:inset 5px 0 0 var(--lila)}
.mod-tegel-nr{
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-400);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.mod-blok-kop:focus-visible,.mod-tegel:focus-visible{outline:2px solid var(--blauw);outline-offset:-3px}
@media (hover:hover){
  .mod-blok-kop:hover{background:var(--lila-zacht);color:var(--lila)}
  /* De balk verandert niet bij aanwijzen: hij staat al op zijn volle inkt en
     draagt de betekenis kort of breed. De vulling is de aanwijzing. */
  .mod-tegel:hover{background:var(--blauw-zacht);color:var(--blauw-diep)}
  .mod-tegel-diep:hover{background:var(--lila-zacht);color:var(--lila)}
}
.mod-tegel:active{transform:none;background:var(--papier)}

/* ---------------------------------------------------------------------------
   3. DE LEESWIJZER
   Legt uit waarom het raster hieronder ongelijk is. Dat is geen bijzin: zonder
   deze twee regels leest de ongelijkheid als een fout in plaats van als de
   mededeling die ze is.
   --------------------------------------------------------------------------- */
.mod-leeswijzer{
  margin-top:var(--r6);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r5) clamp(24px,4vw,60px);
}
.mod-leeswijzer-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r4);align-items:start}
.mod-merk{display:block;width:5px;height:38px;border-radius:3px;margin-top:2px}
.mod-merk-kort{width:2px;background:var(--blauw)}
.mod-merk-diep{width:5px;background:var(--lila)}
.mod-leeswijzer-item b{display:block;font-size:var(--t-base);font-weight:600;color:var(--ink-900)}
.mod-leeswijzer-item p{margin-top:6px;font-size:var(--t-md);line-height:1.6;color:var(--ink-500)}

/* ---------------------------------------------------------------------------
   4. HET GEBOUW
   Vier verdiepingen in één omhulsel met scheidingen van één pixel. Bewust geen
   vier losse secties met witruimte ertussen: dat zouden vier gebouwen zijn en
   de hele bewering van deze pagina is dat het er één is.
   --------------------------------------------------------------------------- */
.mod-gebouw{background:var(--papier);border-top:1px solid var(--rand)}
.mod-bouwwerk{
  border:1px solid var(--rand-sterk);border-radius:var(--rond-xl);
  background:var(--wit);box-shadow:var(--schaduw-2);
}

.mod-verdieping{
  display:grid;grid-template-columns:minmax(0,252px) minmax(0,1fr);
  border-top:1px solid var(--rand);scroll-margin-top:96px;
}
.mod-verdieping:first-child{border-top:0}

/* De rail. Blijft staan terwijl de cellen ernaast langslopen: op een kaart moet
   je kunnen zien waar je bent. De top van 96px is de hoogte van de plakkende
   kopbalk plus een marge; zonder die waarde schuift de railtekst er onderdoor. */
.mod-rail{
  border-right:1px solid var(--rand);background:var(--papier);
  padding:clamp(22px,2.6vw,34px);
}
.mod-verdieping:first-child .mod-rail{border-top-left-radius:calc(var(--rond-xl) - 1px)}
.mod-verdieping:last-child .mod-rail{border-bottom-left-radius:calc(var(--rond-xl) - 1px)}
.mod-rail-binnen{position:sticky;top:96px;display:grid;gap:var(--r3)}
.mod-rail-reeks{color:var(--ink-400)}
.mod-rail-naam{
  font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);
  letter-spacing:-.025em;line-height:1.1;
}
.mod-rail-zin{font-size:var(--t-md);line-height:1.6;color:var(--ink-500)}

/* ---------------------------------------------------------------------------
   5. DE CELLEN
   Zes kolommen, met een span per cel die volgt uit hoeveel er te vertellen is.
   De vier verdiepingen vullen hun rijen exact; er blijft nergens een gat over,
   want een onbedoeld gat in een plattegrond leest als een fout en niet als een
   binnenplaats.
   --------------------------------------------------------------------------- */
.mod-cellen{
  padding:clamp(20px,2.4vw,32px);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);align-content:start;
}
.mod-span-2{grid-column:span 2}
.mod-span-3{grid-column:span 3}
.mod-span-4{grid-column:span 4}
.mod-span-6{grid-column:span 6}

.mod-cel{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--r3);
  padding:clamp(17px,1.8vw,24px);border-radius:var(--rond);
  border:1px solid var(--rand);background:var(--wit);
  scroll-margin-top:104px;
}
/* Dezelfde randbalk als op de plattegrond, in dezelfde twee diktes. */
.mod-cel-kort{box-shadow:inset 2px 0 0 var(--blauw)}
.mod-cel-diep{background:var(--papier);border-color:var(--rand-sterk);box-shadow:inset 5px 0 0 var(--lila)}

.mod-cel-kop{display:flex;align-items:baseline;gap:var(--r3);flex-wrap:wrap}
.mod-cel-nr{color:var(--ink-400)}
.mod-cel-kop h3{
  font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.022em;
}
.mod-cel p{font-size:var(--t-md);line-height:1.62;color:var(--ink-600)}
.mod-cel .mod-cel-lead{font-size:var(--t-base);line-height:1.6;color:var(--ink-700);font-weight:500}
.mod-cel .verder{margin-top:auto;padding-top:var(--r2)}

/* De punten in een brede cel. Geen bolletjes en geen streepjes maar haarlijnen:
   dat leest als een register en het past bij de getekende toon van de pagina.
   Een liggend streepje als opsommingsteken zou bovendien precies de vorm zijn
   die in de tekst nergens mag staan. */
.mod-punten{display:grid;gap:0;margin:0;padding:0;list-style:none;width:100%}
.mod-punten li{
  padding:11px 0;border-top:1px solid var(--rand);
  font-size:var(--t-md);line-height:1.6;color:var(--ink-600);
}
.mod-punten li:first-child{border-top:0;padding-top:2px}
.mod-punten-breed{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(22px,3vw,48px)}
.mod-punten-breed li:nth-child(2){border-top:0;padding-top:2px}

/* Wat er vandaag nog niet werkt. Amber, want het is geen fout maar wel iets wat
   je beter nu kunt weten dan in je eerste week. */
.mod-eerlijk{
  margin-top:var(--r2);padding:12px 14px;border-radius:var(--rond-sm);
  background:var(--papier-amber);border:1px solid var(--amber-rand);
}
.mod-cel .mod-eerlijk{font-size:var(--t-sm);line-height:1.55;color:var(--ink-700)}
.mod-eerlijk b{color:var(--amber);font-weight:700}

/* ---------------------------------------------------------------------------
   6. HET ENE PRODUCTVENSTER: DE TAKENMATRIX

   Waarom juist deze: taken heeft geen eigen verdiepingspagina, de vier
   kwadranten echoën de vier verdiepingen van deze pagina en het is een vlak in
   plaats van een lijn, net als de rest hier.

   In CSS gebouwd, met dezelfde voorbeeldverwijzingen als elders op de site.
   Geen ingesloten scherm en geen schermafdruk: die veroudert, kan zich niet
   aanpassen aan een telefoonbreedte en zou echte kandidaatgegevens op een
   publieke pagina zetten.

   Alleen "Nu doen" krijgt een tint. Vier tinten zouden vier kleuren zijn die
   niets zeggen; één tint zegt welk kwadrant brandt. De naam staat er in alle
   vier voluit bij, dus kleur draagt nergens de betekenis alleen.
   --------------------------------------------------------------------------- */
.mod-cel-venster{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,46px);align-items:start;
}
.mod-cel-venster-tekst{display:grid;gap:var(--r3);align-content:start}
.mod-cel-onderschrift{grid-column:1 / -1}
.mod-cel .mod-cel-onderschrift{
  font-size:var(--t-sm);line-height:1.55;color:var(--ink-400);
  padding-top:var(--r4);border-top:1px solid var(--rand);width:100%;
}

.mod-matrix{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);gap:var(--r2);width:100%;
}
.mod-matrix-as{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-400);
}
.mod-matrix-as-boven{grid-column:2;grid-row:1}
/* De as links staat verticaal. Geen rotatie erbovenop: met writing-mode alleen
   loopt de tekst van boven naar beneden en houden "Belangrijk" en "Niet
   belangrijk" dezelfde volgorde als de rijen waar ze bij horen. */
.mod-matrix-as-zij{grid-column:1;grid-row:2;writing-mode:vertical-rl}
.mod-matrix-vlak{
  grid-column:2;grid-row:2;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rand-sterk);
  border:1px solid var(--rand-sterk);border-radius:var(--rond-sm);overflow:hidden;
}
.mod-matrix-vak{
  background:var(--wit);padding:12px;display:grid;gap:7px;
  align-content:start;min-height:104px;
}
.mod-matrix-doen{background:var(--papier-roze)}
.mod-matrix-naam{color:var(--ink-700)}
.mod-matrix-doen .mod-matrix-naam{color:var(--roze-diep)}
.mod-matrix-taak{
  font-size:var(--t-xs);line-height:1.4;color:var(--ink-600);
  padding:7px 9px;border-radius:var(--rond-xs);
  background:var(--wit);border:1px solid var(--rand);
}
.mod-matrix-doen .mod-matrix-taak{border-color:var(--roze-rand)}

/* ---------------------------------------------------------------------------
   7. DE ZEVENTIENDE
   Donker, want het is het enige merkmoment op deze pagina en het is ook het
   enige blok hier dat geen module beschrijft.
   --------------------------------------------------------------------------- */
.mod-zeventien-spread{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,78px);align-items:start;
}
.mod-zeventien-spread .lead{max-width:60ch;margin-top:var(--r5)}
.mod-zeventien-spread .titel-2{margin-top:var(--r4)}
.mod-zeventien-knoppen{margin-top:var(--r7);display:flex;flex-wrap:wrap;gap:var(--r3)}
/* .knop-rand zet een witte vulling en een donkere inkt. Op de band moet dat
   omgekeerd, anders staat er een wit blok in een bijna zwart vlak. */
.mod-knop-licht{background:transparent;border-color:var(--band-rand-sterk);color:#fff}
.mod-knop-licht:active{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
@media (hover:hover){
  .mod-knop-licht:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
}
.mod-noot{
  padding:clamp(20px,2.4vw,30px);border:1px solid var(--band-rand);
  border-radius:var(--rond-lg);background:rgba(255,255,255,.045);
}
.mod-noot .mono{color:#fff}
.mod-noot p{margin-top:var(--r4);font-size:var(--t-md);line-height:1.65;color:var(--band-zacht)}

/* ---------------------------------------------------------------------------
   8. SCHERMBREEDTES
   Alleen de omslagpunten van deze compositie. Die van de kopbalk, het
   menupaneel en de voet staan in landing-gedeeld.css.
   --------------------------------------------------------------------------- */

/* De rail wordt smaller voordat hij verdwijnt, anders springt hij in één stap
   van een kolom naar een band. */
@media (max-width:1180px){
  .mod-verdieping{grid-template-columns:minmax(0,210px) minmax(0,1fr)}
}

/* De rail gaat boven de cellen staan. Meelopen vervalt: boven de cellen zou
   een plakkende rail de halve hoogte van het scherm innemen. */
@media (max-width:1000px){
  .mod-verdieping{grid-template-columns:minmax(0,1fr)}
  .mod-rail{border-right:0;border-bottom:1px solid var(--rand);padding-bottom:var(--r5)}
  .mod-verdieping:first-child .mod-rail{border-radius:calc(var(--rond-xl) - 1px) calc(var(--rond-xl) - 1px) 0 0}
  .mod-verdieping:last-child .mod-rail{border-radius:0}
  .mod-rail-binnen{position:static;max-width:72ch}
}

/* Het venster van de takenmatrix wordt één kolom: de tekst boven, de matrix
   eronder. Naast elkaar wordt de matrix hier smaller dan zijn eigen inhoud. */
@media (max-width:980px){
  .mod-cel-venster{grid-template-columns:minmax(0,1fr)}
}

/* De opening wordt één kolom. Boven deze breedte staat de kop naast de
   inleiding zodat de plattegrond hoog op de pagina begint. */
@media (max-width:900px){
  .mod-opening-kop{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--r5)}
  .mod-opening-kop .titel-1{max-width:none}
  .mod-plan-vlak{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mod-punten-breed{grid-template-columns:minmax(0,1fr)}
  .mod-punten-breed li:nth-child(2){border-top:1px solid var(--rand);padding-top:11px}
  .mod-zeventien-spread{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
}

/* Zes kolommen worden er twee. Een cel van twee zesden is hier één helft, een
   cel van vier of zes zesden is de volle breedte. */
@media (max-width:860px){
  .mod-cellen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mod-span-2,.mod-span-3{grid-column:span 1}
  .mod-span-4,.mod-span-6{grid-column:span 2}
}

@media (max-width:720px){
  .mod-leeswijzer{grid-template-columns:minmax(0,1fr)}
}

/* Eén kolom. Twee kolommen van 300 pixels breken de kopjes af en een raster met
   afgebroken woorden leest als een fout. */
@media (max-width:620px){
  .mod-cellen{grid-template-columns:minmax(0,1fr)}
  .mod-span-2,.mod-span-3,.mod-span-4,.mod-span-6{grid-column:span 1}
}

/* De verticale as van de matrix gaat eronder liggen. Verticale tekst kost hier
   een kwart van de breedte en dat gaat ten koste van de kwadranten zelf. */
@media (max-width:560px){
  .mod-matrix{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .mod-matrix-as-boven{grid-column:1;grid-row:1}
  .mod-matrix-vlak{grid-column:1;grid-row:2}
  .mod-matrix-as-zij{grid-column:1;grid-row:3;writing-mode:horizontal-tb}
}

@media (max-width:540px){
  .mod-plan-vlak{grid-template-columns:minmax(0,1fr)}
  /* Onder elkaar hoeven de vleugels niet meer even hoog te zijn: dan zouden
     drie ruimtes hoger worden dan vijf zonder dat daar nog iets uit valt af te
     lezen. */
  .mod-blok{grid-auto-rows:auto}
}