/* Ensar Yufka — mozaïek.
   ===========================================================================
   Nagebouwd naar het voorbeeld dat de gebruiker stuurde: het scherm is één
   raster van beelden die elkaar raken, met de teksten óver de foto's in plaats
   van eronder. Geen secties met witruimte ertussen.

   Kleuren: het warme crème van het voorbeeld, maar met het goud van Ensar in
   plaats van het blauw dat daar stond. Hun merkkleur is #c4a127, gemeten in de
   CSS van hun eigen site.
   =========================================================================== */

:root{
  --creme:#e9dfd1;
  --creme-diep:#ddd0be;
  --bruin:#3a2a1d;         /* de donkere voet uit het voorbeeld */
  --bruin-2:#2a1e14;
  --goud:#c4a127;
  --goud-licht:#e0c65a;
  --inkt:#231a12;
  --wit-zacht:#f6f1e8;
  --lijn:rgba(58,42,29,.18);
  --tekst:"Archivo",system-ui,sans-serif;
  --serif:"Cardo",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--creme);color:var(--inkt);font-family:var(--tekst);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
::selection{background:var(--goud);color:var(--inkt)}
:focus-visible{outline:3px solid var(--goud);outline-offset:-4px}

.overslaan{position:absolute;left:1rem;top:-4rem;z-index:99;background:var(--bruin);
  color:var(--wit-zacht);padding:.8rem 1.4rem;text-decoration:none;font-weight:600;
  transition:top .18s ease}
.overslaan:focus{top:.6rem}

/* Kleine gesperde kapitalen: in het voorbeeld staat boven elke vette regel
   zo'n labeltje. Dat is wat de tegels aan elkaar bindt. */
.label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:.45rem;color:var(--goud)}

/* --------------------------------------------------------------- raster
   Op een telefoon één kolom, daarboven een raster waarin de eerste tegel
   twee bij twee is en de rest eromheen valt. De tegels raken elkaar met een
   haarlijn ertussen, niet met marge. */
.mozaiek{display:grid;gap:2px;background:var(--creme-diep);padding:2px}
@media(min-width:900px){
  .mozaiek{grid-template-columns:repeat(4,1fr);
    grid-auto-rows:minmax(210px,auto)}
  .tegel--groot{grid-column:span 2;grid-row:span 2}
  .tegel--breed{grid-column:span 2}
  .tegel--tekst{grid-column:span 2}
}

.tegel{position:relative;overflow:hidden;background:var(--creme);
  min-height:210px;isolation:isolate}
.tegel img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:no-preference){
  .tegel:hover img{transform:scale(1.03)}
}

/* De tekstlaag ligt op de foto, links onderin, met een verloop eronder zodat
   de letters leesbaar blijven op elk beeld. */
.tegel__laag{position:absolute;inset:auto 0 0 0;z-index:1;
  padding:clamp(1.1rem,2.4vw,2rem);
  background:linear-gradient(to top,rgba(20,14,9,.86) 0%,rgba(20,14,9,.55) 45%,transparent 100%);
  color:var(--wit-zacht)}
.tegel__laag h2{font-family:var(--serif);font-weight:700;margin:0;
  font-size:clamp(1.1rem,1.9vw,1.55rem);line-height:1.15;text-wrap:balance;
  max-width:22ch}
.tegel__laag--vol{inset:0;display:flex;flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(to top,rgba(20,14,9,.9) 0%,rgba(20,14,9,.35) 55%,rgba(20,14,9,.55) 100%)}

/* --------------------------------------------------------- grote tegel */
.kop{display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap}
.merk img{width:clamp(140px,15vw,190px);height:auto;object-fit:contain}
.kop nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.kop nav a{font-size:.9rem;font-weight:500;text-decoration:none;
  padding-bottom:.15rem;border-bottom:2px solid transparent}
.kop nav a:hover,.kop nav a[aria-current]{border-bottom-color:var(--goud)}

.tegel__woord{max-width:32ch}
.tegel__woord h1{font-family:var(--serif);font-weight:700;margin:0 0 .6rem;
  font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.06;text-wrap:balance}
.tegel__woord p{margin:0 0 1.3rem;color:#e2d8c8;font-size:.98rem}

.knop{display:inline-flex;align-items:center;justify-content:center;
  background:var(--creme);color:var(--inkt);text-decoration:none;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.95rem 1.6rem;min-height:48px;
  transition:background .16s ease,transform .1s ease}
.knop:hover{background:#fff}
.knop:active{transform:translateY(1px)}

/* -------------------------------------------------------- tekst-tegel
   Zonder foto, in het crème. Doorbreekt de fotomuur zodat het raster ademt. */
.tegel--tekst{background:var(--creme);color:var(--inkt);
  padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column;
  justify-content:center}
.tegel--tekst .label{color:#8a6f12}
.tegel--tekst h2{font-family:var(--serif);font-weight:700;margin:0 0 1rem;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1}
.tegel--tekst p{margin:1.1rem 0 0;font-size:.92rem;color:#5c4c3c;max-width:46ch}

.vier{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lijn)}
@media(min-width:520px){.vier{grid-template-columns:repeat(4,1fr)}}
.vier li{background:var(--creme);padding:.75rem .6rem .85rem}
.vier b{display:block;font-family:var(--serif);font-size:1.25rem;line-height:1}
.vier span{font-size:.76rem;color:#6d5b48}

/* --------------------------------------------------------- wachtvlak
   Waar nog een foto hoort. Een streepmotief in plaats van een verzonnen beeld:
   op de site van een voedselproducent hoort geen plaatje van andermans product. */
.tegel--wacht{background:
  repeating-linear-gradient(135deg,var(--creme) 0 14px,var(--creme-diep) 14px 28px);
  display:flex;align-items:center}
.tegel--wacht .tegel__laag{position:static;background:none;color:var(--inkt);
  border:1px dashed rgba(58,42,29,.4);margin:clamp(.9rem,2vw,1.6rem);width:100%}
.tegel--wacht .label{color:#8a6f12}
.tegel--wacht h2{color:var(--inkt);font-size:clamp(1.1rem,2vw,1.4rem)}
.tegel--wacht p{margin:.5rem 0 0;font-size:.85rem;color:#6d5b48;max-width:34ch}

/* -------------------------------------------------------------- voet
   Donkerbruin, zoals in het voorbeeld. */
.voet{background:var(--bruin);color:#e6dbcb;padding:clamp(2.2rem,5vw,3.4rem) clamp(1.2rem,4vw,3rem) 2rem}
.voet__in{display:grid;gap:1.8rem;max-width:1400px;margin-inline:auto}
@media(min-width:860px){.voet__in{grid-template-columns:1.1fr 1.2fr .8fr;gap:2.6rem}}
.voet b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1;
  margin-bottom:.4rem;color:#fff}
.voet__merk span{font-size:.88rem;color:#bdae9a}
.voet__waar .label{color:var(--goud)}
.voet__waar p{margin:0;font-size:.92rem}
.voet__contact{display:flex;flex-direction:column;gap:.45rem;font-size:.92rem}
.voet__contact a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);
  align-self:flex-start;padding-bottom:.1rem}
.voet__contact a:hover{border-bottom-color:var(--goud);color:#fff}
.voet__klein{max-width:1400px;margin:2.2rem auto 0;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.14);font-size:.78rem;color:#9c8f7d}