/* =========================================================
   HOME — alleen wat op deze pagina eigen is.
   De gedeelde opmaak staat in pages/page.css (.tscb_pagina).
   ========================================================= */

/* ---------------------------------------------------------
   4b. DE EUROPAKAART — het enige echte beeld op de pagina.

   Staat in de linkerkolom van het tweeluik, onder de kop. Die
   kolom was verder leeg, en een kop die in z'n eentje blijft
   plakken terwijl er rechts tekst langsschuift oogt als een
   vergeten hoek.

   WAAROM HIER GROOT EN NIET ALS ICOON: op icoonformaat is heel
   Europa zo'n 40 px breed, oftewel 1 px per 100 km. Nederland
   wordt dan 2 px en Luxemburg een halve — ruim een derde van de
   lidstaten is dan niet als eigen land te onderscheiden, en dan
   is er niets meer te volgen aan een animatie die juist over
   afzonderlijke landen gaat. Op 300 px is Duitsland 30 px en
   Nederland 12, en dan werkt het wel.

   Net als de weegschaal een background-image: de animatie zit in
   het SVG-bestand en een mask zou niet bewegen.

   aspect-ratio houdt de hoogte gelijk aan de verhouding van het
   bestand. Zonder die regel is een leeg blok nul hoog en zie je
   niets — er zit immers geen inhoud in.
   --------------------------------------------------------- */
.tscb_home__kaart {
  --tscb_home_kaart_max: none;   /* de volle kolombreedte */

  width: 100%;
  max-width: var(--tscb_home_kaart_max);
  aspect-ratio: 63.4 / 75.8;   /* = de viewBox van img/europa.svg */
  margin-block-start: var(--tscb_space_m);

  background: url("../../img/europa.svg") left top / contain no-repeat;
}

/* Onder de klapbreedte van het tweeluik staat de kaart onder de kop in
   plaats van ernaast, en mag hij daar de volle breedte pakken. Dat is
   een bewuste keuze: hij wordt daardoor zo hoog als de kolom breed is,
   maar op deze maat is Europa pas echt te volgen. */

/* ---------------------------------------------------------
   5b. PORTRET — de foto naast het slot.

   De sectie wordt een tweeluik: tekst links, foto rechts. Andersom
   dan bij de Europakaart, want twee beelden aan dezelfde kant
   onder elkaar zouden de pagina naar één kant laten hangen.

   DE SCHADUW. Een afdruk die op papier ligt geeft twee schaduwen
   tegelijk: een heel korte, donkere waar hij het papier raakt, en
   een bredere, veel lichtere eronder. Alleen die tweede geeft een
   zwevend vlak; pas de combinatie leest als "dit ligt ergens op".
   --tscb_shadow_soft_2 uit onderdelen/shadow.css is precies zo
   opgebouwd, dus die gebruik ik in plaats van een eigen waarde —
   dan blijft hij ook meebewegen met --tscb_shadow_strength.

   Geen witte rand eromheen: dat maakt er een polaroid van, en dat
   is een ander register dan de rest van deze pagina.

   De <img> op display: block, anders staat er onder de foto een
   paar pixel ruimte binnen de schaduw — de regelafstand van de
   inline-doos waar een afbeelding standaard in staat. Die naad is
   precies waar het "fysieke" beeld op stukloopt.
   --------------------------------------------------------- */
.tscb_home__portret {
  --tscb_home_portret_max: 48rem;   /* = 480 px; 1rem is hier 10 px */

  max-width: var(--tscb_home_portret_max);
  box-shadow: var(--tscb_shadow_soft_2);
}

.tscb_home__portret img {
  display: block;
  width: 100%;
  height: auto;
}


/* kaart + onderschrift als <figure> */
.tscb_home__figuur {
  width: 100%;
  margin: 0;
}

.tscb_home__onderschrift {
  margin-block-start: var(--tscb_space_s);
  color: var(--tscb_grey_700);
  font-size: 1.4rem;   /* = 14 px, net onder de lopende tekst */
  font-style: italic;
  text-align: start;   /* links, op de lijn van de kaart */
  line-height: 1.5;
}