/* PicUppy — de vindbare pagina's.
   Eigen stijlblad, los van de app. Deze pagina's hebben geen enkele component
   uit app.css nodig en app.css is groot; een reiziger op een trage verbinding
   in Addis hoeft niet de hele applicatie te downloaden om te lezen wat er in
   het Nationaal Museum staat. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sand-50);
  color: var(--ink);
  font: 400 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Tekst leest prettig op achtenzestig tekens; een raster van honderdzeventig
   tegels doet dat niet. Op 68ch paste er twee naast elkaar, en dan is de
   stadspagina vijfentachtig rijen lang -- eenendertigduizend pixels scrollen.
   Daarom mag de kolom breder worden zodra er een raster in staat: de tekst
   blijft smal, het raster niet. */
main { max-width: 68ch; margin: 0 auto; padding: 0 20px 80px; }
main:has(.rooster) { max-width: 1180px; }
main:has(.rooster) > :not(.rooster):not(.filters):not(.chips) { max-width: 68ch; }
.rooster, .chips, .kruimels ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, .merk, .naar-app, .chips a, .kruimels {
  font-family: var(--font-display);
}
/* Gewicht 600, net als base.css. De standaard 700 van een h1 valt naast de
   rest van de site op als een ander lettertype. */
h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 600; line-height: 1.12;
     letter-spacing: -.02em; color: var(--pine-900); margin: 0 0 .4rem; text-wrap: balance; }
h2 { font-size: 1.28rem; font-weight: 600; letter-spacing: -.015em;
     color: var(--pine-900); margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
     color: var(--pine-900); margin: 0 0 .25rem; }
p { margin: 0 0 1rem; color: var(--ink-2); }
a { color: var(--pine-700); }
.lead { font-size: 1.12rem; color: var(--ink-2); margin-bottom: 1.6rem; }
.lokaal { color: var(--ink-3); margin: 0 0 .6rem; font-size: 1.05rem; }
.fijn { font-size: .84rem; color: var(--ink-3); }

/* ------------------------------------------------------------------ kop -- */
.kop {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 68ch; margin: 0 auto; padding: 20px;
}
.merk { font-weight: 700; font-size: 1.1rem; color: var(--pine-900); text-decoration: none; letter-spacing: -.01em; }
.naar-app {
  font-size: .85rem; font-weight: 600; text-decoration: none;
  color: var(--on-dark); background: var(--pine-700);
  padding: 8px 14px; border-radius: 999px;
}
.naar-app:hover, .naar-app:focus-visible { background: var(--pine-800); }

/* ------------------------------------------------------------ kruimels -- */
.kruimels { font-size: .82rem; margin: 0 0 1.2rem; }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 6px; }
.kruimels li + li::before { content: '›'; color: var(--ink-4); margin-right: 6px; }
.kruimels a { color: var(--ink-3); }
.kruimels [aria-current] { color: var(--ink-2); }

/* --------------------------------------------------------------- chips -- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.8rem; }
.chips a {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: .88rem; text-decoration: none; color: var(--pine-700);
  background: var(--paper); border: 1px solid var(--sand-300);
  padding: 7px 13px; border-radius: 999px;
}
.chips a:hover, .chips a:focus-visible { border-color: var(--pine-500); }
.chips span { font-size: .78rem; color: var(--ink-4); }

/* ------------------------------------------------------------- rooster -- */
.rooster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); margin: 0 0 2rem; }
.kaart { background: var(--paper); border: 1px solid var(--sand-300); border-radius: 12px; overflow: hidden; }
.kaart a { display: block; text-decoration: none; color: inherit; height: 100%; }
.kaart a { display: flex; flex-direction: column; }
.kaart img, .kaart .geen-foto {
  display: block; width: 100%; height: 150px; object-fit: cover; background: var(--sand-200);
}
/* Een kaart zonder foto hoort dezelfde vorm te houden als een kaart met foto.
   Zonder dit springt het raster: de ene kaart begint met een plaatje en de
   andere met tekst, en dat leest als kapot in plaats van als leeg. Geen
   verzonnen plaatje dus, maar wel een blok van dezelfde hoogte. */
/* Even specifiek als de regel hierboven, anders wint `display:block` op
   specificiteit en staat de tekst linksboven in plaats van in het midden. */
.kaart .geen-foto {
  background: linear-gradient(160deg, var(--sand-200), var(--pine-050));
  display: grid; place-items: center;
}
.kaart .geen-foto span {
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pine-500);
}
.kaart-tekst { display: flex; flex-direction: column; flex: 1; }
.kaart-tekst { padding: 12px 14px 14px; }
.kaart p { margin: 0 0 .2rem; font-size: .9rem; color: var(--ink-2); }
.kaart:hover, .kaart:focus-within { border-color: var(--pine-500); }

/* ---------------------------------------------------------------- plek -- */
.hero { margin: 0 0 1.6rem; }
.hero img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--sand-200); }
.hero figcaption { margin-top: 6px; }

.tip {
  background: var(--paper); border-left: 3px solid var(--coral-500);
  padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 1.6rem 0;
}
.tip h2 { margin: 0 0 .3rem; font-size: .82rem; text-transform: uppercase;
          letter-spacing: .1em; color: var(--coral-tekst); }
.tip p { margin: 0; }

.feiten { display: grid; gap: 1px; background: var(--sand-300);
          border: 1px solid var(--sand-300); border-radius: 10px; overflow: hidden; margin: 1.6rem 0; }
.feiten div { display: flex; justify-content: space-between; gap: 20px;
              background: var(--paper); padding: 11px 16px; }
.feiten dt { color: var(--ink-3); font-size: .9rem; }
.feiten dd { margin: 0; font-weight: 600; }

.naar-app-groot a {
  display: inline-block; font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; text-decoration: none; color: var(--on-dark);
  background: var(--pine-700); padding: 12px 20px; border-radius: 999px;
}
.naar-app-groot a:hover, .naar-app-groot a:focus-visible { background: var(--pine-800); }

/* ---------------------------------------------------------------- gids -- */
.gids article { border-top: 1px solid var(--sand-300); padding: 16px 0; }
.gids .tip { background: transparent; border-left: none; padding: 0; margin: .4rem 0 0;
             font-size: .92rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- voet -- */
.voet { max-width: 68ch; margin: 0 auto; padding: 28px 20px 60px;
        border-top: 1px solid var(--sand-300); }
.voet p { margin: 0 0 .3rem; font-size: .88rem; color: var(--ink-3); }

:focus-visible { outline: 2px solid var(--pine-600); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------- filteren -- */
/* De balk vervangt de rij categorielabels die hier stond. Die zag eruit als een
   keuze maar was een lijst met links, en hij duwde de plekken onder de vouw. */
.filters {
  position: sticky; top: 0; z-index: 5;
  background: var(--papier, #FBF8F3);
  border-bottom: 1px solid var(--sand-300, #E4DCD0);
  padding: var(--s-4, 12px) 0;
  margin-bottom: var(--s-5, 20px);
}
.filters-kop { margin: 0 0 var(--s-3, 8px); font-weight: 600; }
.filters-rij {
  display: flex; flex-wrap: wrap; gap: var(--s-3, 8px); align-items: flex-end;
}
.filters label {
  display: grid; gap: 4px;
  font-size: var(--fs-xs, .8rem); color: var(--ink-3, #55595E);
}
.filters select, .filters input {
  font: inherit; font-size: var(--fs-sm, .92rem);
  padding: 7px 10px; min-height: 40px;
  border: 1px solid var(--sand-300, #E4DCD0); border-radius: var(--r-md, 10px);
  background: #fff; color: var(--ink, #1B1D1F);
}
.filters-zoek input { min-width: 190px; }
.filters-knop {
  font: inherit; font-size: var(--fs-sm, .92rem); min-height: 40px;
  padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--pine-700, #2F4034); border-radius: var(--r-md, 10px);
  background: var(--pine-700, #2F4034); color: #fff;
}
.filters-knop[disabled] { opacity: .6; cursor: default; }
.filters-uitleg:empty { display: none; }
.filters-uitleg { margin: var(--s-3, 8px) 0 0; }

.niets { padding: var(--s-6, 24px) 0; text-align: center; }
.niets button {
  font: inherit; margin-left: 8px; cursor: pointer;
  background: none; border: 0; text-decoration: underline;
  color: var(--pine-700, #2F4034);
}

/* Herkomst op de tegel. Hetzelfde onderscheid als in de app: een naam uit open
   data is iets anders dan een plek waar wij zijn geweest. */
.herkomst {
  display: inline-block; border-radius: 999px;
  padding: 1px 8px; font-size: .72rem; font-weight: 600;
}
.herkomst--bezocht { background: var(--pine-700, #2F4034); color: #fff; }
.herkomst--basis { background: var(--sand-200, #EFE7DA); color: var(--ink-2, #33373B); }
.kaart .waar { margin: 2px 0 4px; font-size: var(--fs-sm, .92rem); color: var(--ink-3, #55595E); }
.kaart .fijn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kaart[hidden] { display: none; }

/* Op een telefoon staat één kaart per rij, en bij honderdzeventig plekken is
   dat zesenzestig schermen scrollen. Daarom daar hetzelfde kaartje op zijn
   kant: beeld links, tekst rechts. Dezelfde inhoud, een derde van de hoogte.

   Geen apart kaartje maar dezelfde html met een andere indeling -- twee
   varianten naast elkaar lopen een keer uiteen, en dan mist de ene wat de
   andere heeft. */
@media (max-width: 559px) {
  .rooster { gap: 10px; grid-template-columns: 1fr; }
  .kaart a { flex-direction: row; align-items: stretch; }
  .kaart img, .kaart .geen-foto {
    width: 104px; height: 100%; min-height: 104px; flex: 0 0 104px;
  }
  .kaart-tekst { padding: 10px 12px; justify-content: center; }
  .kaart h3 { font-size: 1rem; }
  /* De omschrijving valt weg: op honderd pixels breed levert hij vier regels
     op en duwt hij de rest van de kaart uit beeld. Naam, wijk en herkomst
     blijven -- dat is wat je nodig hebt om te kiezen of je doorklikt. */
  .kaart-tekst > p:not(.waar):not(.fijn) { display: none; }
  .filters { position: static; }
  .filters-rij { gap: 8px; }
  .filters label { flex: 1 1 46%; }
  .filters-zoek { flex: 1 1 100%; }
  .filters-zoek input { min-width: 0; width: 100%; }
}