/* ==========================================================================
   Hooked Tilburg — huisstijl op het stramien van cobra-antwerp.com
   Kleuren en logo uit het Figma-huisstijlbestand, opbouw en typografische
   terughoudendheid uit Cobra. Rood is dominant.
   ========================================================================== */

:root {
  /* Huisstijl Hooked (Figma) */
  --rood:      #ce4a15;
  --rood-diep: #a5380c;
  --bordeaux:  #7c1f2e;
  --navy:      #132141;
  --groen:     #98b287;
  --creme:     #faf5ee;
  --creme-2:   #f2eadf;
  --wit:       #ffffff;

  /* Afgeleiden */
  --lijn:      rgba(19, 33, 65, .18);
  --lijn-licht:rgba(250, 245, 238, .28);

  /* Maatvoering — Cobra werkt met kleine type en veel lucht */
  --marge:     clamp(18px, 4vw, 56px);
  --sectie:    clamp(72px, 11vw, 150px);
  --breed:     1560px;
  --smal:      760px;

  --klein:     13px;
  --basis:     15px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--navy);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--basis);
  font-weight: 500;
  line-height: 1.75;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul { list-style: none; padding: 0; }
::selection { background: var(--rood); color: var(--creme); }

/* --- typografie ----------------------------------------------------------- */
/* Cobra houdt álles op 13–16px, uppercase, gewicht 500. Dat is de hele truc. */
.kop {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.25;
}
.label {
  font-size: var(--klein);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--rood);
  font-weight: 600;
}
.lood { font-size: var(--basis); max-width: 62ch; }

/* Het enige moment waarop Hooked z'n eigen stem verheft: de displayregel.
   Headline Gothic ATF uit de huisstijl; Anton is daarvan de webvariant. */
.display {
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .005em;
  font-size: clamp(38px, 7.6vw, 108px);
}

/* --- layout --------------------------------------------------------------- */
.omhulsel { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 var(--marge); }
.omhulsel--smal { max-width: var(--smal); }
.sectie { padding: var(--sectie) 0; }
.sectie--krap { padding: calc(var(--sectie) * .55) 0; }
.midden { text-align: center; }
.midden .lood { margin-left: auto; margin-right: auto; }

/* --- knoppen (Cobra: transparant, 1px rand, radius 5px, 13px uppercase) ---- */
.knop {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 13px 31px;
  font-size: var(--klein);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  transition: background-color .25s, color .25s, border-color .25s;
  cursor: pointer;
  background: transparent;
}
.knop:hover { background: var(--rood); border-color: var(--rood); color: var(--creme); }
.knop--vol { background: var(--rood); border-color: var(--rood); color: var(--creme); }
.knop--vol:hover { background: var(--navy); border-color: var(--navy); }
.knop--licht { color: var(--creme); }
.knop--licht:hover { background: var(--creme); border-color: var(--creme); color: var(--rood); }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.midden .knoppen { justify-content: center; }

/* --- meldingsbalk --------------------------------------------------------- */
.melding {
  background: var(--rood);
  color: var(--creme);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 9px var(--marge);
  text-align: center;
  font-weight: 600;
}

/* --- kopbalk -------------------------------------------------------------- */
.kopbalk {
  position: sticky; top: 0; z-index: 60;
  background: var(--creme);
  border-bottom: 1px solid var(--lijn);
}
.kopbalk__binnen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 62px;
  max-width: var(--breed); margin: 0 auto; padding: 0 var(--marge);
}
.kopbalk__merk img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.nav a {
  font-size: 14px; font-weight: 500; text-transform: lowercase;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--rood); border-color: var(--rood); }
.nav .knop { text-transform: uppercase; padding: 9px 20px; }
.nav .knop:hover { border-color: var(--rood); }

.hamburger {
  display: none; background: none; border: 0; padding: 6px; cursor: pointer;
  font-size: var(--klein); text-transform: uppercase; letter-spacing: .1em;
  color: inherit; font-family: inherit; font-weight: 600;
}
.mobielnav {
  display: none; border-bottom: 1px solid var(--lijn); background: var(--creme);
  padding: 8px var(--marge) 22px;
}
.mobielnav.open { display: block; }
.mobielnav a {
  display: block; padding: 11px 0; border-bottom: 1px solid var(--lijn);
  text-transform: lowercase; font-size: 17px;
}
.mobielnav .knop { display: inline-block; margin-top: 18px; text-transform: uppercase; }

/* --- hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 880px);
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--navy);
}
.hero__beeld {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  /* rode waas over het beeld — het rood mag de overhand hebben */
  background:
    radial-gradient(ellipse 58% 46% at 50% 56%, rgba(19,33,65,.58) 0%, rgba(19,33,65,0) 100%),
    linear-gradient(180deg, rgba(19,33,65,.44) 0%, rgba(19,33,65,.04) 34%, rgba(124,31,46,.66) 100%),
    linear-gradient(0deg, rgba(206,74,21,.10), rgba(206,74,21,.10));
}
.hero__inhoud {
  position: relative; z-index: 2; text-align: center;
  padding: var(--marge); color: var(--creme);
  display: grid; justify-items: center; gap: 26px;
}
.hero__logo { width: min(560px, 74vw); height: auto; filter: drop-shadow(0 6px 26px rgba(0,0,0,.35)); }
.hero__regel {
  font-size: var(--klein); text-transform: uppercase; letter-spacing: .22em;
  font-weight: 600; text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 0 6px rgba(0,0,0,.5);
}
.hero .knop--licht {
  border-width: 1.5px;
  background: rgba(19,33,65,.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero .knop--licht:hover {
  background: var(--creme); color: var(--rood); text-shadow: none;
}

/* --- beeldstrook (horizontaal scrollend, zoals Cobra's rij) --------------- */
.strook {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(210px, 21vw, 320px);
  gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--marge) 6px;
  scrollbar-width: none;
}
.strook::-webkit-scrollbar { display: none; }
.strook img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; scroll-snap-align: start; }

/* --- rode statementband --------------------------------------------------- */
.band-rood {
  background: var(--rood); color: var(--creme);
  padding: clamp(64px, 9vw, 132px) 0;
}
.band-rood .label { color: rgba(250,245,238,.72); }
.band-rood .display { color: var(--creme); }
.band-bordeaux { background: var(--bordeaux); color: var(--creme); }
.band-bordeaux .label { color: rgba(250,245,238,.72); }
.band-navy { background: var(--navy); color: var(--creme); }
.band-navy .label { color: var(--groen); }

/* --- lopende band (marquee) ----------------------------------------------- */
.loper {
  background: var(--rood); color: var(--creme);
  overflow: hidden; padding: 15px 0;
  border-top: 1px solid var(--rood-diep); border-bottom: 1px solid var(--rood-diep);
}
.loper__spoor { display: flex; width: max-content; animation: schuif 42s linear infinite; }
.loper span {
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  font-size: clamp(22px, 3.4vw, 40px);
  text-transform: uppercase; letter-spacing: .02em;
  padding: 0 26px; white-space: nowrap;
}
.loper span::after { content: "✦"; margin-left: 26px; opacity: .55; font-size: .55em; vertical-align: middle; }
@keyframes schuif { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .loper__spoor { animation: none; } }

/* --- beeldrasters ---------------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 22px); }
.duo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.duo--breed img { aspect-ratio: 16 / 10; }
.volbeeld img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* --- tekst-naast-beeld ----------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 84px); align-items: center;
}
.split--omgekeerd .split__beeld { order: 2; }
.split__beeld img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split__tekst { display: grid; gap: 20px; align-content: center; }
.split__tekst .knoppen { margin-top: 6px; }

/* --- prijsregel (menukaart) ------------------------------------------------ */
.gang { display: grid; gap: 30px; }
.gerecht { display: grid; gap: 4px; padding-bottom: 22px; border-bottom: 1px solid var(--lijn); }
.gerecht__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.gerecht__naam { text-transform: uppercase; font-weight: 600; letter-spacing: .02em; font-size: var(--basis); }
.gerecht__prijs { color: var(--rood); font-weight: 600; white-space: nowrap; }
.gerecht__uitleg { font-size: 14px; opacity: .8; line-height: 1.6; }
.kaartkolommen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 90px); }

/* --- Spotify --------------------------------------------------------------- */
.spotify { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 64px); align-items: center; }
.spotify iframe { border-radius: 12px; border: 0; width: 100%; height: 352px; }
.spotify__beeld img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.spotify__tekst { display: grid; gap: 18px; align-content: center; }
.spotify__tekst .kop { max-width: 24ch; }

/* --- instagramraster ------------------------------------------------------- */
.ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ig a { display: block; overflow: hidden; }
.ig img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .5s, filter .5s; }
.ig a:hover img { transform: scale(1.06); filter: saturate(1.15); }

/* --- kaartjes (apéro / sobremesa / hideout) -------------------------------- */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.kaart { display: grid; grid-template-rows: auto 1fr; background: var(--wit); }
.kaart img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.kaart__body { padding: 26px 26px 30px; display: grid; gap: 12px; align-content: start; }
.kaart__body .knop { justify-self: start; margin-top: 8px; }

/* --- voettekst ------------------------------------------------------------- */
.voet { background: var(--rood); color: var(--creme); padding: clamp(52px, 7vw, 96px) 0 0; }
.voet a:hover { opacity: .7; }
.voet__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(26px, 4vw, 60px); padding-bottom: 56px;
}
.voet__merk img { width: 210px; margin-bottom: 20px; }
.voet h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; margin-bottom: 14px; opacity: .72;
}
.voet li { margin-bottom: 6px; }
.voet__slot {
  border-top: 1px solid var(--lijn-licht); padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .78;
}

/* --- verschijnen bij scrollen ---------------------------------------------- */
.verschijn { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.verschijn.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .verschijn { opacity: 1; transform: none; transition: none; }
}

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .voet__grid { grid-template-columns: 1fr 1fr; }
  .ig { grid-template-columns: repeat(4, 1fr); }
  .kaarten { grid-template-columns: 1fr; }
  .spotify { grid-template-columns: 1fr; }
  .spotify iframe { height: 380px; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .hamburger { display: block; }
  .split, .kaartkolommen { grid-template-columns: 1fr; }
  .split--omgekeerd .split__beeld { order: 0; }
  .duo { grid-template-columns: 1fr; }
  .volbeeld img { aspect-ratio: 3/2; }
}
@media (max-width: 560px) {
  .ig { grid-template-columns: repeat(3, 1fr); }
  .voet__grid { grid-template-columns: 1fr; }
  .hero { min-height: min(78vh, 620px); }
}