/* ==========================================================================
   CREPS — the two catalogue pages
   Producten and Portfolio share the home page's world: the same ribbed
   ground, the same frosted panels, the same object-label schema. They are
   not a scroll film, so they carry no acts and no engine; what they add is
   a grid, a cover, and a lightbox that runs on :target and needs no JS to
   open, close, or be linked to.
   ========================================================================== */

.page { padding-block: clamp(6.5rem, 15vh, 9rem) clamp(4rem, 10vh, 7rem); position: relative; z-index: 3; }
.page__head { max-width: 46rem; }
.page__head .d { margin: 0; }
.page__head .p { margin: var(--sc-5) 0 0; max-width: 34rem; font-size: 1.05rem; }
.page__back {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: var(--sc-5);
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
}
.page__back:hover { color: var(--sc-accent); }
.page__back svg { width: .85rem; height: .85rem; }

/* ------------------------------------------------------------- the grid --
   One grid for both pages. Three up on a desk, two on a tablet, one on a
   phone, and the cards keep a common photo height so the captions land on
   one line per row, which is the whole lesson from the home page's rails. */
.grid {
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  display: grid; gap: clamp(1.6rem, 3.4vw, 2.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.item { margin: 0; display: flex; flex-direction: column; }
.item__f {
  position: relative; overflow: hidden;
  border-radius: var(--r-media);
  background: var(--sc-surface);
  box-shadow: var(--sc-e3);
}
.item__f::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), inset 0 0 0 2px rgb(30 38 56 / .05);
}
.item__f img {
  display: block; width: 100%; height: clamp(14rem, 34vh, 22rem);
  object-fit: cover;
}
.item__b { margin-top: var(--sc-4); }
.item__t { margin: 0; font-weight: 700; font-size: 1.24rem; letter-spacing: -.024em; color: var(--sc-ink); }
.item__p { margin: .5rem 0 0; color: var(--sc-ink-soft); line-height: 1.55; }
.item__k {
  display: inline-block; margin-top: .85rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--creps-label-dim);
}

/* a cover is an item you can open, so it gets the affordance an item lacks */
a.cover { text-decoration: none; display: flex; flex-direction: column; }
a.cover .item__f { transition: box-shadow .3s ease, translate .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  a.cover:hover .item__f, a.cover:focus-visible .item__f { translate: 0 -4px; box-shadow: var(--sc-e4, var(--sc-e3)); }
}
a.cover .item__f img { height: clamp(15rem, 40vh, 26rem); }
.cover__n {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / .9);
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-ink);
}

/* --------------------------------------------------------- the lightbox --
   :target rather than a script. It opens on a real URL, so a project is
   linkable and the browser back button closes it, which is the behaviour a
   home-rolled modal always has to be taught and usually is not. */
.proj {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
}
.proj:target { display: block; }
.proj__in { padding-block: clamp(4.5rem, 10vh, 7rem) clamp(4rem, 9vh, 6rem); }
.proj__head { max-width: 42rem; }
.proj__head h2 { margin: 0; font-weight: 800; letter-spacing: -.032em; line-height: 1.02;
                 font-size: clamp(2rem, 5vw, 3.2rem); color: var(--sc-ink); }
.proj__head .p { margin: var(--sc-4) 0 0; max-width: 34rem; }
.proj__meta {
  margin: 0 0 var(--sc-3); font-size: .7rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--creps-label-dim);
}
.proj__shots {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .proj__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .proj__shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proj__shots img {
  display: block; width: 100%; height: clamp(13rem, 30vh, 20rem);
  object-fit: cover; border-radius: var(--r-media);
  background: var(--sc-surface); box-shadow: var(--sc-e2);
}
/* the tall ones earn their height rather than being cropped to a letterbox */
.proj__shots .tall img { height: clamp(18rem, 46vh, 30rem); }
@media (min-width: 700px) { .proj__shots .wide { grid-column: span 2; } }

.proj__close {
  position: sticky; top: clamp(.7rem, 2vh, 1.2rem); float: right; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .9);
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
}
.proj__close:hover { color: var(--sc-accent); }

/* ------------------------------------------------------------- the foot -- */
.pfoot {
  margin-top: clamp(4rem, 12vh, 8rem);
  padding-top: var(--sc-5);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6);
  align-items: baseline; justify-content: space-between;
  font-size: .78rem; color: var(--sc-ink-soft);
}
.pfoot a { color: var(--sc-ink); }

/* while a project is open the page underneath does not scroll away behind it */
.has-proj, .has-proj body { overflow: hidden; }

/* the inquiry plate on Producten wants the room the home page gives it, and
   .plate's compact padding is defined later in creps.css than .ask__plate's */
.page .ask__plate { padding: clamp(1.8rem, 3.4vw, 2.8rem); }

/* --------------------------------------------------------- de prijsknop --
   Tien keer "prijs op aanvraag" als losse tekst was de grootste rem op deze
   pagina: je moest zelf een gesprek beginnen om te weten of je in de buurt
   zat. Het is nu een knop die het product meeneemt in het bericht, zodat de
   vraag al gesteld is voordat WhatsApp opent.

   Staat er later een echt bedrag? Vervang dan alleen de tekst in .prijs__v
   door bijvoorbeeld "€ 145" en de rest blijft werken. */
.prijs {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.72rem 1.05rem;
  min-height: 44px;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / .9);
  color: var(--sc-ink); text-decoration: none;
  font-size: 0.88rem; font-weight: 600; letter-spacing: -0.008em;
  transition: border-color .18s ease, color .18s ease, translate .18s ease;
}
.prijs svg { width: 1.05em; height: 1.05em; flex: none; color: var(--sc-accent); }
.prijs:hover, .prijs:focus-visible {
  color: var(--sc-accent);
  border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .prijs:hover { translate: 0 -2px; }
}
.prijs:active { translate: 0 1px; }

/* ------------------------------------------------------- contactpagina --
   Hetzelfde blok als onderaan de startpagina, maar zonder de acts van de
   scrollpagina eromheen: hier is het de inhoud en niet de afsluiting. */
.contact { margin-top: clamp(2.5rem, 7vh, 4rem); }
.contact .maker { margin-bottom: clamp(2.5rem, 7vh, 4rem); }
.contact .ask__plate { border-top: 0; }

/* De prijsknoppen stonden per kaart op een andere hoogte, want de ene
   omschrijving is een regel langer dan de andere. De kaart vult nu de hoogte
   van zijn rij en de staart wordt naar onderen geduwd, zodat alles in een rij
   op dezelfde lijn staat.

   De duw zat eerst op .prijs, en dan lijnden alleen de knoppen uit: het
   soortlabel bleef aan de omschrijving hangen en zweefde dus per kaart op een
   andere hoogte. Nu staat de duw op .item__k, het eerste element van de staart,
   en schuift het label met de knop mee. Bij kaarten zonder prijsknop, zoals de
   galerij op /verf, zakt het label net zo goed naar de onderlijn. */
.item__b { flex: 1 1 auto; display: flex; flex-direction: column; }
.item__k { margin-top: auto; padding-top: 0.85rem; }
.prijs { margin-top: 0.72rem; align-self: flex-start; }
/* de tekst mag niet uitrekken, alleen de ruimte eronder */
.item__p { margin-bottom: 0.9rem; }

/* --------------------------------------------------------------- secties --
   Verf valt uiteen in twee stapels: wat hij vaker maakt en wat één keer
   bestond. Een tussenkop scheidt ze zonder er een tweede pagina van te maken. */
.sect {
  margin: clamp(3.4rem, 9vh, 5.6rem) 0 0;
  font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -.03em; color: var(--sc-ink);
}
.sect--far { margin-top: clamp(4.6rem, 12vh, 7.5rem); }
.sect__p {
  margin: .7rem 0 0; max-width: 34rem;
  color: var(--sc-ink-soft); line-height: 1.55;
}
.sect + .sect__p + .grid { margin-top: clamp(1.8rem, 4.5vh, 3rem); }

/* De aanvraagplaat is op deze pagina's een grid van twee kolommen, en de knop
   rekte mee met zijn cel: 282 bij 154 pixels, een ovale vlek in plaats van een
   knop. Hij hoort links boven in zijn cel te staan, op zijn eigen maat. */
.page .ask__plate .act-cta { align-self: start; justify-self: start; }

/* Een project met één foto stond als een klein kaartje links in een leeg
   raster van drie kolommen. Bij één opname is de opname het project, dus die
   krijgt twee kolommen en meer hoogte. */
@media (min-width: 700px) {
  .proj__shots:has(> figure:only-child) > figure { grid-column: span 2; }
}
.proj__shots:has(> figure:only-child) img,
.proj__shots:has(> figure:only-child) .tall img { height: clamp(20rem, 62vh, 38rem); }

/* ------------------------------------------------ teksten bij een project --
   Casper levert per eigen project vier dingen aan: een kop, een tekst, een
   regel met kenmerken en soms een slotzin. Ze staan in die volgorde en ze
   lopen af in gewicht, zodat je de kop leest en de rest erbij pakt als je meer
   wilt weten. De oudere projecten hebben alleen een tekst; die rijen slaan de
   andere drie gewoon over. */
.proj__kop {
  margin: 0.35rem 0 0; max-width: 46rem;
  font-weight: 700; font-size: 1.12rem; letter-spacing: -0.015em;
  color: var(--sc-ink);
}
.proj__ken {
  margin: 0.9rem 0 0; max-width: 46rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--creps-label-dim);
}
.proj__slot {
  margin: 0.75rem 0 0; max-width: 46rem;
  font-style: italic; color: var(--sc-ink-soft);
}

/* ------------------------------------------------- het aanbod op /verf ----
   Twee blokken met wat hij hier aanbiedt, in zijn eigen woorden. Ze staan
   boven de twee stapels werk, want ze zeggen wat je kunt vragen; de stapels
   laten zien wat dat oplevert. Naast elkaar zodra er ruimte is, want los
   onder elkaar duwen ze het werk te ver naar beneden.

   De twee slotzinnen die hij eronder had staan zijn eruit: op verzoek. Ze
   zeiden in andere woorden wat de alinea erboven al zegt. In het portfolio
   staan zijn slotzinnen wel gewoon. */
.aanbod {
  margin-top: clamp(2.2rem, 6vh, 3.6rem);
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .aanbod { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aanbod__blok .d { margin: 0; }
.aanbod__blok .p { margin: var(--sc-4) 0 0; max-width: 34rem; }
.aanbod__ken {
  margin: var(--sc-4) 0 0;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--creps-label-dim);
}

/* Op /producten staan nu Caspers eigen teksten, woordelijk: een kop, een of
   twee alinea's, een slotzin en zijn kenmerkenregel. Die kenmerkenregel neemt
   de plek van het soortlabel in plaats van eronder te gaan staan, want twee
   regels kapitalen onder elkaar is één te veel en het is dezelfde .item__k,
   dus de uitlijning met de prijsknoppen blijft staan. */
.item__kop {
  margin: 0.45rem 0 0;
  font-weight: 700; font-size: 1rem; letter-spacing: -0.012em; color: var(--sc-ink);
}
.item__p + .item__p { margin-top: 0.55rem; }
.item__slot { margin: 0.7rem 0 0; font-style: italic; color: var(--sc-ink-soft); }