/* ============================================================
   Layout — ruimtelijke structuur van Tranceversum
   ============================================================ */


/* ------------------------------------------------------------
   Container
------------------------------------------------------------ */

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ------------------------------------------------------------
   Page structure
------------------------------------------------------------ */

.page-section {
  padding-block: 0.00rem;                   /* gewijzigd, was voorheen: padding-block: var(--gutter); */
}

.page-section--large {
  padding-block: calc(var(--gutter) * 2);   /* uitgeschakeld, zie base.njk => was voorheen: <main id="main" class="container page-section--large"> */
}

/* Verticale afstand tussen header-menu en eerste body-inhoud.
   Eén algemene ontwerpregel — identiek op alle pagina's.
   Het eerste contentelement draagt geen eigen bovenmarge bij; de ruimte
   komt uitsluitend uit de padding van .page__content. Dit geldt ongeacht
   of de content begint met tekst, een H1 of een CLC. */
.page__content {
  padding-top: 1.5rem;
}

.page__content > :first-child {
  margin-top: 0;
}

/* Overgang ná de content — exact var(--gutter) naar de footer, onafhankelijk
   van het laatste-element-type. Overschrijft bestaande laatste-child-marges. */
.page__content > :last-child {
  margin-bottom: var(--gutter);
}


/* ------------------------------------------------------------
   Header layout
------------------------------------------------------------ */

/* Verwijder horizontale scheidingslijn */
.site-header {
  border-bottom: 1px solid transparent;    /* scheidingslijn onderzijde header, zo nodig hier instellen */
  box-shadow: none;
  background-color: var(--color-bg);       /* #fafaf9 */
}

/* Container voor logo + menu (zorgt dat menu binnen contentbreedte valt) */
.site-header__inner {
  width: 1150px;                 /* vaste containerbreedte */
  max-width: 100%;               /* voorkomt overflow op kleinere schermen */
  margin-left: auto;             /* centreert container */
  margin-right: auto;            /* centreert container */
  padding-left: var(--gutter);   /* horizontale marge links */
  padding-right: var(--gutter);  /* horizontale marge rechts */
  display: block;
}

/* Logo-grootte (rustig, sober, screenshot-conform) */
.site-logo {
  width: 220px;
  height: auto;
}


/* ------------------------------------------------------------
   Footer layout
------------------------------------------------------------ */

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gutter);
}

@media (max-width: var(--bp-tablet)) {
  .site-footer__inner {
    flex-direction: column;
    text-align: center;
  }
}


/* ------------------------------------------------------------
   Media-text layout (beeld + tekst)
------------------------------------------------------------ */

.hide-mobile {
  display: none;
}

@media (min-width: var(--bp-tablet)) {
  .hide-mobile {
    display: block;
  }
}


/* ------------------------------------------------------------
   Content Layout Component (CLC) — generieke layoutcomponent
   Ruimtelijke structuur van contentblokken (stack/row)
   Gebruik: via template-include "components/content-layout.njk"
------------------------------------------------------------ */

/* 1. Baseline component — mobile-first: stack (veilige standaard) */
.content-layout {
  display: grid;
  grid-template-columns: 1fr;              /* mobile-first: gestapeld */
  gap: var(--content-layout-gap, var(--gutter));
}

/* 2. Baseline: directe layout children (alleen directe kinderen) */
.content-layout > .content-layout__panel {
  min-width: 0;                            /* geen horizontale overflow door inhoud */
}

/* 3. Responsive: row vanaf autonoom breakpoint (768px) */
@media (min-width: 768px) {
  .content-layout--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 4. Structurele ratio-presets — alleen grid-template-columns, alleen in row
   (row-basis is gelijke verdeling; alleen afwijkingen worden gedefinieerd) */
@media (min-width: 768px) {
  .content-layout--row.content-layout--ratio-60-40 { grid-template-columns: 0.6fr 0.4fr; }
  .content-layout--row.content-layout--ratio-40-60 { grid-template-columns: 0.4fr 0.6fr; }
  .content-layout--row.content-layout--ratio-70-30 { grid-template-columns: 0.7fr 0.3fr; }
  .content-layout--row.content-layout--ratio-30-70 { grid-template-columns: 0.3fr 0.7fr; }
}

/* 5. Gecontroleerde custom optie — verfijnt bestaande eigenschappen
   --content-layout-gap overschrijft de gap (laatste redmiddel) */


/* ------------------------------------------------------------
   Content Layouts — algemene ontwerpregel
   Tekst- en afbeeldingspanelen worden bovenaan exact gelijk
   uitgelijnd; interne gap geharmoniseerd met de media-text
   scheiding van het designsysteem (--media-text-gap, min. 2rem).
   Eén algemene regel voor alle pagina's (was: startpagina-only).
------------------------------------------------------------ */

.page__content > .content-layout {
  align-items: start;
  --content-layout-gap: 2rem;
}

/* Algemene uitlijning: het eerste inhoudselement binnen ieder CLC-paneel
   begint bovenaan, gelijk met de bovenkant van het andere paneel. Geldt
   algemeen voor tekst, lijsten en andere eerste inhoudselementen. */
.content-layout__panel > :first-child {
  margin-top: 0;
}

/* CLC-08 (pagina Transitief werk) — paginabrede hero onderaan, direct
   aansluitend op de footer. De hero staat buiten de begrensde .container
   (via het belowMain-block in base.njk) in de full-width regio
   .hero-full-width; width:100% verwijst naar de werkelijke viewportbreedte
   en gebruikt géén viewport-eenheden.
   CLC-08 (definitief) — hero met vaste uitsnede. Natuurlijke verhouding
   2500×875 = 20:7. --media-wrapper-aspect-ratio 20/5,075 (= 20:7 ÷ 0,725)
   toont 72,5% van de beeldhoogte → totaal 27,5% uitsnede t.o.v. het
   oorspronkelijke beeld. Via object-position 50% 45,5% is die uitsnede
   asymmetrisch verdeeld: 12,5% bovenaan en 15% onderaan (bewust niet
   symmetrisch). De dame (silhouet rond rij 42–70%) blijft volledig binnen
   het zichtbare venster (12,5–87,5%) op desktop, tablet en mobiel; geen
   breakpoint-specifieke focuspositie nodig. */
html {
  overflow-x: clip;                     /* geen horizontale scroll door de 100vw-hero */
}

.hero-full-width {
  width: 100%;
  margin-inline: 0;
  margin-bottom: 0; /* hero sluit naadloos (0px) aan op de footer */
}

/* CLC-08 hero (transitief-werk) — responsive compositie.
   Mobiel/tablet: 2/1, horizontale crop, dame natuurlijk gecentreerd.
   Desktop: 20/4.5, rustiger en proportioneel ten opzichte van de footer. */
.hero-full-width .media-wrapper {
  --media-wrapper-aspect-ratio: 2 / 1;
  --media-wrapper-focus-point: 50% 55%;
}

@media (min-width: 768px) {
  .hero-full-width .media-wrapper {
    --media-wrapper-aspect-ratio: 20 / 4.5;
    --media-wrapper-focus-point: 50% 45%;
  }
}

@media (min-width: 1440px) {
  .hero-full-width .media-wrapper {
    width: 100%;
    max-height: clamp(370px, 20vw, 520px);
  }
}

/* CLC-03 (pagina Praktisch) — ratio 30-70: beeld links, tekst rechts.
   Passende witruimte na de introductietekst (zelfde ritmiek als
   startpagina); mobiel: tekst boven, afbeelding onder. */
.page__intro:has(+ .content-layout--ratio-30-70) {
  margin-bottom: 2rem;
}

@media (max-width: 767px) {
  .page__content > .content-layout--ratio-30-70 .content-layout__panel:first-child {
    order: 2;
  }

  .page__content > .content-layout--ratio-30-70 .content-layout__panel:last-child {
    order: 1;
  }
}

/* CLC-04 (pagina Over, profielfoto) — ratio 60-40: tekst links, afbeelding
   rechts; mobiel: afbeelding boven tekst (gespiegeld ten opzichte van het
   desktoplay-out). Scoping via de media-inhoud (bestaande structuur). */
@media (max-width: 767px) {
  .page__content > .content-layout:has(img[src*="profielfoto"]) .content-layout__panel:first-child {
    order: 2;
  }

  .page__content > .content-layout:has(img[src*="profielfoto"]) .content-layout__panel:last-child {
    order: 1;
  }
}

/* CLC-05 (pagina Over, keurmerk) — sectiewissel vóór het kwalificatieblok:
   iets grotere sectiewitruimte, overeenkomstig de grotere overgangen op
   Praktisch (schaal 2rem, zelfde als --content-layout-gap). */
.page__content > .content-layout:has(img[src*="keurmerk"]) {
  margin-top: 2rem;
}

/* CLC-06 (pagina Contact) — media-paneel rechts, ratio 50/50 (row-default).
   Mobiel: uitsluitend het media-paneel verbergen. Het (vooralsnog lege,
   gereserveerde) formulierpaneel links blijft als grid-item aanwezig; met één
   grid-item ontstaat geen grid-gap, dus geen lege ruimte. Scoping via de
   media-inhoud (bestaande structuur). `.hide-mobile` is hier niet rechtstreeks
   bruikbaar: het CLC-paneel wordt door de macro gegenereerd en biedt geen
   class-hook om een utility-klasse aan te hangen. */
@media (max-width: 767px) {
  .page__content > .content-layout:has(img[src*="torso"]) .content-layout__panel:last-child {
    display: none;
  }
}


/* CLC-07 (pagina's Hypnose & Regressie, mediaAfter) — 70-30: mobiel
   afbeelding boven, tekst onder. Eigen :has()-scoping op de afbeeldingen
   (Aanbod gebruikt ook 70-30; de algemene ratio-orderwissel mag hier dus
   niet gelden). Genummerde reflectiepunt-lijst met label (reflectiegrid
   hergebruikt); verticale afstand = normale bodytypografie i.p.v. de
   reflectie-afstand van Praktisch. */
@media (max-width: 767px) {
  .page__content > .content-layout:has(img[src*="autostuur"]) .content-layout__panel:first-child,
  .page__content > .content-layout:has(img[src*="horloges"]) .content-layout__panel:first-child {
    order: 2;
  }

  .page__content > .content-layout:has(img[src*="autostuur"]) .content-layout__panel:last-child,
  .page__content > .content-layout:has(img[src*="horloges"]) .content-layout__panel:last-child {
    order: 1;
  }
}

/* CLC-11 (pagina Delenwerk) — mobiel afbeelding boven tekst: zelfde
   :has()/order-mechanisme als CLC-06/07. De wegwijzerafbeelding komt
   uitsluitend op Delenwerk voor, dus deze selector kan geen andere pagina
   raken. CLC-12 (beton) blijft op mobiel tekst boven afbeelding. */
@media (max-width: 767px) {
  .page__content > .content-layout:has(img[src*="wegwijzer"]) .content-layout__panel:first-child {
    order: 2;
  }

  .page__content > .content-layout:has(img[src*="wegwijzer"]) .content-layout__panel:last-child {
    order: 1;
  }
}

/* CLC (pagina Symboolwerk, Droomwerk) — ratio 60-40: tekst links, afbeelding
   rechts; mobiel: afbeelding boven tekst (gespiegeld t.o.v. het desktoplay-out).
   Zelfde :has()/order-mechanisme als CLC-04/07/11; de verbeelding-imaginatie-2-
   afbeelding komt uitsluitend op Symboolwerk voor. */
@media (max-width: 767px) {
  .page__content > .content-layout:has(img[src*="verbeelding-imaginatie-2"]) .content-layout__panel:first-child {
    order: 2;
  }

  .page__content > .content-layout:has(img[src*="verbeelding-imaginatie-2"]) .content-layout__panel:last-child {
    order: 1;
  }
}

.page__content > .content-layout:has(img[src*="autostuur"]) .page__reflectie__label,
.page__content > .content-layout:has(img[src*="horloges"]) .page__reflectie__label {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.page__content > .content-layout:has(img[src*="autostuur"]) .page__reflectie,
.page__content > .content-layout:has(img[src*="horloges"]) .page__reflectie {
  margin-bottom: 0.75em;
}


/* CLC-11 (pagina Delenwerk) — Belangrijk-blok zonder afbeelding: zelfde
   reflectievormgeving als CLC-06/07 (label + genummerde reflectiepunten).
   Delenwerk-specifieke scoping via de eigen wrapperklasse. */
.page__belangrijk .page__reflectie__label {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.page__belangrijk .page__reflectie {
  margin-bottom: 0.75em;
}










/*

main {
  outline: 3px solid blue;
}

.page {
  outline: 3px solid red;
} 

.page__content {
  outline: 3px solid green;
} 

.page__header {
  background: rgba(255,0,0,.15);
}

.page__content {
  background: rgba(0,255,0,.15);
}

.page {
  background: rgba(255,0,0,.15);
}

.container {
  background-color: lightblue;
}

*/


/*
Wat je hiermee ziet (direct zichtbaar)
🔴 Rode lijn
→ .page (heb je al)

🔵 Blauwe lijn
→ .page-section (heb je al)

🟢 Groene lijn
→ .page__content (heb je al)

🟦 Lichtblauw vlak
→ .container (heb je al)
*/