/* ==========================================================================
   MAHSEN: pagina/inspiratie.css
   Wat alleen /inspiratie en de pagina van elk ontwerp dragen, naast
   publiek.css (design-system.md §6 en §10). Het blad van een groep pagina's,
   zoals pagina/blik.css: pages/inspiratie/index en pages/inspiratie/toon
   hangen het elk zelf, via partials/stijlblad in @push('stijl').

   Onder dezelfde regels als publiek.css, en op zijn tokens: geen eigen
   tokenblok, geen letter, geen basis (OntwerpregelsTest). Elke selector draagt
   een klasse die alleen deze pagina's hebben; de paginakop, de kaders, het
   bijschrift, de kolommen, de stippen en de pijl-link staan in publiek.css.

   De beelden hebben hier de hoofdrol: een raster dat wrapt, met het eerste
   ontwerp groot, en geen rij van drie gelijke kaarten met een icoon (§1). Geen
   schaduw: een afdruk hangt in een kader of in de rand van een gsm.
   ========================================================================== */

/* -- Het raster van de ontwerpen (/inspiratie) ---------------------------- */
/* Eén kolom op een gsm, twee vanaf 43.75rem zodra er plaats is voor twee
   kaarten van 26rem, en nooit drie: op 1240px werden drie afdrukken van een
   scherm van 1440 breed te klein om er iets op te lezen. */
.ontwerpen { display: grid; row-gap: 4rem; column-gap: 2.5rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.ontwerpen > * { min-width: 0; }
@media (min-width: 43.75rem) {
  .ontwerpen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
}

.ontwerp-kaart { display: flex; flex-direction: column; }
.ontwerp-kaart h3 { margin-top: 1.5rem; }
.ontwerp-kaart h3 + p { margin-top: 0.75rem; max-width: 36rem; }
.ontwerp-link { margin-top: auto; padding-top: 0.75rem; }

/* Het eerste ontwerp van elke sectie over de volle breedte, met de afdruk
   links en de tekst ernaast: één dominant element per sectie (§2), en het
   raster eronder leest daardoor niet als een catalogus van gelijke vakjes. */
@media (min-width: 62.5rem) {
  .ontwerp-kaart:first-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 3rem;
  }
  .ontwerp-kaart:first-child figure { grid-row: 1 / -1; }
  .ontwerp-kaart:first-child > :not(figure) { grid-column: 2; }
  .ontwerp-kaart:first-child h3 { grid-row: 2; margin-top: 0; }
  .ontwerp-kaart:first-child h3 + p { grid-row: 3; }
  .ontwerp-kaart:first-child .ontwerp-link { grid-row: 4; }
}

/* -- Het begin van een scherm, op de kaart en in de kop ------------------- */
/* Op een gsm staat in de <picture> het begin op een gsm, en dat hangt in de
   rand van een gsm-afdruk (§6: 6px ebben, radius 28, het beeld radius 21) en
   niet in het kader van een groot scherm. Hoogstens 17.5rem breed, zodat een
   kaart op een gsm niet hoger wordt dan het scherm zelf. Daarboven het kader
   van publiek.css, met het begin op een groot scherm. */
@media (max-width: 43.6875rem) {
  .ontwerp-beeld, .op-donker .ontwerp-beeld { max-width: 17.5rem; padding: 0; overflow: hidden; border: 6px solid var(--ebben); border-radius: 28px; background: var(--ebben); }
  .ontwerp-beeld img { border-radius: 21px; }
}

/* -- De kop van een ontwerp ------------------------------------------------ */
/* De kolommen van publiek.css, meteen onder de kruimels en zonder hun lucht
   erboven, met de tekst op de hoogte van het beeld. */
.ontwerp-kop { margin-top: 0; }
@media (min-width: 62.5rem) {
  .ontwerp-kop { align-items: center; }
}
.ontwerp-held .bijschrift { margin-top: 0.75rem; }

/* Waar de pagina naartoe gaat: de site en het programma, als twee links op
   een rij, elk met een tikdoel van 48px. Die hoogte is het tikdoel, en de
   lucht van een link in de tekst (publiek.css) komt er dus niet bij: onder
   elkaar stonden ze anders 72px uit elkaar. */
.ontwerp-inhoud { display: flex; flex-wrap: wrap; column-gap: 1.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ontwerp-inhoud a { display: inline-flex; align-items: center; min-height: 3rem; padding-block: 0; font-weight: 700; }

/* Wat de site doet: de stippen van publiek.css, met meer lucht tussen de
   regels, want een regel beslaat op een gsm drie tot vijf regels tekst. */
.ontwerp-kenmerken { gap: 1rem; }
.kolommen h3 + .ontwerp-kenmerken { margin-top: 1.25rem; }

/* -- Een pagina van het ontwerp -------------------------------------------- */
/* De naam, wat ze toont, en de afdrukken. Op een gsm de hele pagina op een
   gsm, hoogstens 22rem breed; vanaf 43.75rem de hele pagina op een groot
   scherm, in een kader; vanaf 62.5rem daarnaast het begin op een gsm. Wat een
   breedte niet toont, staat op display: none, en daar haalt de browser een
   lui beeld ook niet binnen. */
.ontwerp-scherm { margin-top: var(--blok); }
.ontwerp-wat { max-width: var(--maat); margin-top: 1rem; }
.ontwerp-afdrukken { margin-top: 2rem; }

.ontwerp-gsm { overflow: hidden; border: 6px solid var(--ebben); border-radius: 28px; background: var(--ebben); }
.ontwerp-gsm img { width: 100%; border-radius: 21px; }
.ontwerp-gsm-vol, .ontwerp-gsm-begin, .ontwerp-hele { max-width: 22rem; }
.ontwerp-hele { margin-top: 1rem; }
.ontwerp-vol { display: none; }

@media (min-width: 43.75rem) {
  .ontwerp-vol { display: block; }
  .ontwerp-hele, .ontwerp-scherm:not(.ontwerp-scherm--gsm) .ontwerp-gsm-begin { display: none; }
}

@media (min-width: 62.5rem) {
  .ontwerp-afdrukken { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; column-gap: 3rem; align-items: start; }
  .ontwerp-scherm:not(.ontwerp-scherm--gsm) .ontwerp-gsm-begin { display: block; }
  .ontwerp-afdrukken .bijschrift { grid-column: 1; }

  /* Een scherm dat alleen voor een gsm ontworpen is: de gsm links en de naam
     en wat het toont ernaast, anders stond er rechts van een smalle afdruk
     een leeg vlak zo hoog als de afdruk zelf. */
  .ontwerp-scherm--gsm { display: grid; grid-template-columns: 22rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 3rem; }
  .ontwerp-scherm--gsm > :not(figure) { grid-column: 2; }
  .ontwerp-scherm--gsm .ontwerp-afdrukken { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: 22rem; margin-top: 0; }
}

/* -- Meer ideeën ------------------------------------------------------------ */
/* De andere ontwerpen als lijst van links onder elkaar, elk met de lucht van
   een link in de tekst (publiek.css), zodat ze samen een tikdoel van 54px
   hoog zijn. */
.ontwerp-andere { display: grid; margin: 0.75rem 0 0; padding: 0; list-style: none; }