/* Barber Floris — site-styling. Tokens en basisklassen staan in tokens.css (bron: design.md). */

/* ---------- basis ---------- */
html { scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 var(--space-md); max-width: 60ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.label { margin: 0 0 var(--space-md); max-width: none; }
.display-lg { font-size: var(--text-display-lg); }
.nowrap { white-space: nowrap; }

/* één onderstreept woord per sectie: lamp als licht, niet als tekstkleur */
.mark {
  text-decoration: underline;
  text-decoration-color: var(--lamp);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.12em;
}

.link {
  color: var(--chalk);
  text-decoration: underline;
  text-decoration-color: var(--lamp);
  text-underline-offset: 4px;
}
.link:hover { text-decoration-thickness: 2px; }

.arrow { display: inline-block; transition: transform var(--motion-fast); }
a:hover .arrow, a:focus-visible .arrow { transform: translateX(4px); }

.btn--sm { min-height: 44px; padding: 12px 20px; }
.btn--primary:focus-visible { box-shadow: 0 0 28px 6px var(--lamp-glow); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--lamp); color: var(--on-lamp);
  font: 500 var(--text-label)/1 var(--font-label);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 10px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgb(20 17 15 / 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}
.wordmark {
  padding-block: 8px;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800; font-size: 1.625rem; line-height: 1;
  letter-spacing: 0; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.wordmark__icon { color: var(--lamp); flex: none; }
/* desktop: zodra de hero-knop uit beeld is, wordt de header-knop de ene primaire knop */
@media (min-width: 768px) {
  .show-book .site-header .btn {
    background: var(--lamp); color: var(--on-lamp); border-color: transparent;
  }
  .show-book .site-header .btn:hover { background: var(--lamp-deep); }
}

/* ---------- foto's ---------- */
.photo {
  position: relative; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ink-raised);
}
.photo img { width: 100%; }
/* korrel-overlay (3% ruis) */
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- hero ---------- */
.hero { padding-top: 64px; padding-bottom: var(--space-2xl); overflow: clip; }
.hero .bulbs { padding-block: var(--space-lg) var(--space-xl); }
.hero__grid { display: grid; gap: var(--space-xl); }
.hero h1 span { display: block; }
.hero h1 { animation: rise 300ms cubic-bezier(0.2, 0.7, 0.2, 1) 540ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.facts { margin: var(--space-lg) 0 var(--space-md); color: var(--chalk); }
.hero__text { max-width: 34ch; margin-bottom: var(--space-lg); }
.hero__media { position: relative; max-width: 520px; }
.hero__media::before {
  content: ""; position: absolute; inset: -22%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--lamp-glow), transparent);
}
.hero__media .photo { z-index: 1; }

@media (min-width: 1100px) {
  .hero { padding-bottom: var(--space-3xl); }
  .hero__grid {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
  }
  .hero__media { justify-self: end; width: 100%; max-width: 400px; }
  /* de naam schaalt ook mee met de schermhoogte, zodat de boekknop bij het openen meteen in beeld staat
     (400px = header, lampjes, label, feitenstrip, tekst en knop; 1.84 = twee regels van 0.92) */
  .hero h1 { font-size: clamp(5rem, min(21vw, calc((100svh - 400px) / 1.84)), 14rem); }
  .hero__media .photo img { max-height: calc(100svh - 200px); object-fit: cover; }
}

/* ---------- secties ---------- */
.section__head { margin-bottom: var(--space-xl); }
.section__head h2 + .label { margin-top: var(--space-lg); margin-bottom: 0; }

/* scroll-in, één keer (alleen met JS) */
.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--motion-base), transform var(--motion-base);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* werk */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (min-width: 768px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}
.work-hint { display: none; }
.tile {
  position: relative;
  border-radius: var(--radius-sm);
  transition: opacity var(--motion-base), box-shadow var(--motion-base);
}
.tile .photo img, .tile .photo video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), filter var(--motion-base);
}
.tile .photo video { cursor: pointer; }
/* lampje linksboven: uit in rust, aan zodra de video speelt */
.tile::after {
  content: ""; position: absolute; top: 14px; left: 14px; z-index: 3;
  width: 10px; height: 10px; border-radius: var(--radius-pill);
  background: var(--lamp); opacity: 0.3; pointer-events: none;
  transition: opacity var(--motion-base), box-shadow var(--motion-base);
}
.tile.is-playing::after { opacity: 1; box-shadow: 0 0 14px 4px var(--lamp-glow); }
/* actieve tegel: het licht gaat aan (lamp-rand en gloed, geen slagschaduw) */
.tile.is-playing {
  z-index: 1;
  box-shadow: 0 0 0 1px var(--lamp), 0 0 44px 6px var(--lamp-glow);
}
.tile.is-playing .photo img, .tile.is-playing .photo video { transform: scale(1.06); }
.tile video:focus-visible { outline-offset: -4px; }

@media (hover: hover) and (min-width: 1100px) {
  /* alleen desktop met muis: in rust gedimd en bijna zwart-wit; bij hover komt de kleur terug en zakken de andere tegels weg */
  .tile .photo video { filter: grayscale(0.85) brightness(0.62) contrast(1.05); }
  .tile:hover .photo video, .tile.is-playing .photo video { filter: none; }
  .work-grid:has(.tile:hover) .tile:not(:hover) { opacity: 0.45; }
}
/* tablet en telefoon: video's spelen vanzelf in beeld (assets/site.js), dus geen uitvergroting per tegel */
.work-auto .tile.is-playing .photo video { transform: none; }
.work-auto .tile.is-playing { box-shadow: none; }
.tile--link a {
  position: relative; display: block;
  border-radius: var(--radius-sm); text-decoration: none;
}
.tile__more {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-2xl) var(--space-md) var(--space-md);
  background: linear-gradient(to bottom, transparent, rgb(20 17 15 / 0.94) 70%);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.tile__more .label { margin: 0; color: var(--chalk); }
.tile__more .tile__handle { color: var(--chalk-muted); }

/* huisregels */
.rules { display: grid; gap: var(--space-md); }
@media (min-width: 768px) {
  .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}
.rule { color: var(--chalk); }
.rule__num {
  display: block; margin-bottom: var(--space-md);
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 800; font-size: var(--text-display-md); line-height: 0.92;
  color: var(--lamp);
}
.rule__title { margin-bottom: var(--space-xs); font-weight: 600; }
.rule p:last-child { margin-bottom: 0; color: var(--chalk-muted); }

/* over floris */
.about { display: grid; gap: var(--space-xl); }
.about h2 { margin-bottom: var(--space-lg); }
.about__media { max-width: 420px; }
@media (min-width: 768px) {
  .about { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .about__media { justify-self: end; width: 100%; }
}

/* locatie */
.location { display: grid; gap: var(--space-xl); }
.location h2 { margin-bottom: var(--space-lg); }
.map-credit { margin: var(--space-sm) 0 0; max-width: none; font-size: 0.8125rem; color: var(--chalk-muted); }
/* adres staat groot en heeft de volle breedte nodig; kaart eronder */

/* boeken */
.booking__meta { color: var(--chalk); }
.booking__rules { display: none; }
@media (min-width: 1100px) {
  .booking__rules { display: block; margin-top: var(--space-xl); max-width: 26rem; }
  .booking__rules li {
    display: flex; align-items: baseline; gap: var(--space-md);
    padding-block: var(--space-md);
    border-top: 1px solid var(--ink-line);
    font-weight: 600;
  }
  .booking__rules li:last-child { border-bottom: 1px solid var(--ink-line); }
  .booking__num {
    min-width: 1ch;
    font-family: var(--font-display); font-stretch: var(--display-stretch);
    font-weight: 800; font-size: 1.75rem; line-height: 1;
    color: var(--lamp);
  }
}
/* desktop: tekst links, agenda rechts ernaast */
@media (min-width: 1100px) {
  .booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    grid-template-areas: "head embed" "fallback embed";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-2xl);
  }
  .booking__head { grid-area: head; margin-bottom: 0; }
  .booking .calendly { grid-area: embed; }
  .booking .fallback { grid-area: fallback; margin-top: var(--space-lg); }
}
.calendly {
  box-sizing: content-box; /* de door Calendly gemelde hoogte is de inhoud, zonder de rand */
  min-width: 280px; height: 700px; min-height: 700px;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
}
/* mobiel: embed over de volle schermbreedte, zodat de agenda genoeg ruimte heeft */
@media (max-width: 767px) {
  .calendly {
    margin-inline: calc(-1 * var(--gutter));
    border-inline: 0; border-radius: 0;
  }
}
.calendly.is-loaded { min-height: 0; }
.calendly__inner { width: 100%; height: 700px; transform-origin: 0 0; }
.calendly iframe { display: block; width: 100%; height: 100%; border: 0; }
.fallback { margin: var(--space-md) 0 0; color: var(--chalk-muted); }

/* ---------- footer ---------- */
.site-footer { padding-block: var(--space-lg) var(--space-2xl); }
.site-footer p { margin-bottom: var(--space-md); }
.site-footer__name { font-weight: 600; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-lg); }
.site-footer__links a {
  display: inline-block; padding-block: 10px;
  text-decoration: underline; text-decoration-color: var(--ink-line); text-underline-offset: 4px;
}
.site-footer__links a:hover { text-decoration-color: var(--lamp); }
.site-footer__credit { color: var(--chalk-muted); font-size: 0.9375rem; }

/* ---------- mobiele boekbalk ---------- */
.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-raised);
  border-top: 1px solid var(--ink-line);
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--motion-base), visibility 0s linear 300ms;
}
.bookbar .label { margin: 0; color: var(--chalk); }
.show-book .bookbar {
  transform: none; visibility: visible;
  transition: transform var(--motion-base), visibility 0s;
}
@media (max-width: 767px) {
  .site-footer { padding-bottom: calc(var(--space-2xl) + 76px); }
}
@media (min-width: 768px) {
  .bookbar { display: none; }
}

/* ---------- losse pagina's (privacy, 404) ---------- */
.page main { padding-top: calc(64px + var(--space-2xl)); padding-bottom: var(--space-2xl); min-height: 70vh; }
.prose { max-width: 62ch; }
.prose h1 { margin-bottom: var(--space-lg); }
.prose h2 { margin: var(--space-xl) 0 var(--space-md); font-size: clamp(1.75rem, 5vw, 2.5rem); }
.prose ul { margin: 0 0 var(--space-md); padding-left: 1.2em; list-style: disc; }
.prose li { margin-bottom: var(--space-sm); }
.prose .btn { margin-top: var(--space-md); }
.notice {
  margin-bottom: var(--space-xl); padding: var(--space-md);
  border: 1px solid var(--lamp); border-radius: var(--radius-sm);
  background: var(--ink-raised);
}
.notice .label { margin: 0 0 var(--space-sm); color: var(--lamp); }
.notice p:last-child { margin: 0; }

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .tile.is-playing .photo img, .tile.is-playing .photo video { transform: none; }
  .tile .photo video { filter: none; }
  a:hover .arrow, a:focus-visible .arrow { transform: none; }
}