/* ==== Mobiel, september 2026. Laadt na rebrand.css. ====
   Gericht op de telefoon: ritme, laadgaten, tikdoelen en tekenkosten. */

/* --- 1. Hoogtes die niet meespringen met de adresbalk van Safari --- */
@supports (height: 100svh) {
  /* Op elk formaat dezelfde hoogte als voorheen, alleen in svh zodat de
     adresbalk van Safari hem niet laat springen. */
  .hero-frame { height: 100svh; }
  .cat-hero-frame { height: 62svh; }
  .cbm-lightbox-figure { max-height: 84dvh; }
  .cbm-lightbox-figure img { max-height: 84dvh; }

  @media (max-width: 860px) {
    .hero-frame { height: 78svh; }
    .cbm-front .hero-frame { height: calc(78svh - 51px); }
  }
  @media (max-width: 760px) {
    .cat-hero-frame { height: 48svh; }
  }
}

/* --- 2. Binnenkomst kort genoeg om mee te kunnen scrollen --- */
.reveal {
  transform: translateY(12px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.stagger > * { transition-delay: calc(var(--i, 0) * 60ms); }
.cat-card img, .work-card img, .proj-card img, .about-media img,
.serie-gallery img, .serie-grid img, .serie-opening img {
  transition: opacity 300ms var(--ease), transform 1200ms var(--ease);
}

/* --- 3. Voorproefje achter elk beeld, nooit meer een zwart gat --- */
.work-card-media, .cat-card, .proj-card-media, .about-media,
.serie-slot, .serie-opening, .serie-strip-item {
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- 4. Serie-index: titel op het beeld in plaats van eronder --- */
.work-card { gap: 0; position: relative; }
.work-card-media { position: relative; display: block; }
.work-card-note { display: none; }
.work-card-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14,15,12,0.86) 0%, rgba(14,15,12,0.34) 32%, rgba(14,15,12,0) 62%);
}
.work-card-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 5px;
  padding: clamp(16px, 3vw, 26px);
}
.work-card-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  color: rgba(244,242,236,0.74); margin: 0;
}
.work-card-count { flex: none; white-space: nowrap; }
.work-card-title { color: var(--ink); }

/* --- 5. Tikdoelen van minstens 44px, zoals de huisstijl voorschrijft --- */
.link-arrow { min-height: 44px; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  background: var(--cream); color: var(--ink-on-cream);
  border: 1px solid var(--cream);
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease);
}
.btn-hero:hover, .btn-hero:focus-visible { background: transparent; color: var(--cream); }
.btn-hero-arrow { display: inline-block; transition: transform var(--slow) var(--ease); }
.btn-hero:hover .btn-hero-arrow { transform: translate(3px, -3px); }

@media (max-width: 860px) {
  .contact-detail a,
  .footer-col a,
  .site-footer-bottom a,
  .work-all a,
  .serie-related-head a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .footer-col a { margin-bottom: 0; }
  .footer-col { gap: 2px; }
}

/* --- 6. Navbalk: leeg bovenaan, vast zodra je scrolt, licht boven zand --- */
.site-nav {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background var(--slow) var(--ease), border-color var(--slow) var(--ease);
}
.site-nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14,15,12,0.8), rgba(14,15,12,0));
  transition: opacity var(--slow) var(--ease);
}
.site-nav.is-vast {
  background: rgba(14,15,12,0.96);
  border-bottom-color: var(--hairline);
}
.site-nav.is-vast::before { opacity: 0; }

.site-nav.is-licht { background: rgba(230,216,196,0.96); border-bottom-color: rgba(14,15,12,0.16); }
.site-nav.is-licht::before { opacity: 0; }
.site-nav.is-licht .site-nav-brand-name,
.site-nav.is-licht .site-nav-brand-role,
.site-nav.is-licht .site-nav-links a,
.site-nav.is-licht .site-nav-back,
.site-nav.is-licht .site-nav-home { color: var(--ink-on-cream); }
.site-nav.is-licht .site-nav-links a::after { background: var(--accent); }
.site-nav.is-licht .site-nav-group { border-color: rgba(14,15,12,0.18); background: transparent; box-shadow: none; }
.site-nav.is-licht .site-nav-toggle { border-color: rgba(14,15,12,0.2); background: transparent; }
.site-nav.is-licht .site-nav-toggle span { background: var(--ink-on-cream); }

/* --- 7. Goedkoper tekenen op een telefoon --- */
@media (max-width: 860px) {
  body {
    background-color: var(--bg);
    background-image: radial-gradient(120% 55% at 50% 0%, var(--bg-lift) 0%, var(--bg) 62%, #0B0C09 100%);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: 100% 110vh;
  }
  body::before { display: none; }
  .site-nav-mobile { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14,15,12,0.985); }
  .hero-media img { will-change: auto; }
}

/* --- 8. Over-sectie volgt de inhoud in plaats van de schermhoogte --- */
@media (max-width: 860px) {
  .about { min-height: 0; }
  .about-media img { height: auto; aspect-ratio: 4 / 5; }
  .about-copy p { font-size: 16px; }
}

/* --- 9. Toestemmingsbalk compact en pas na de hero --- */
@media (max-width: 640px) {
  #cbm-consent { padding: 16px 18px 18px; }
  #cbm-consent p { margin-bottom: 12px; font-size: 13px; }
  .cbm-consent-actions button { min-height: 44px; flex: 1 1 auto; }
}

/* --- 10. Seriepagina: eerst het beeld, dan pas de tekst --- */
.serie-opening {
  max-width: var(--container);
  margin: 0 auto clamp(22px, 3vw, 36px);
  padding: 0 var(--edge);
}
.serie-opening img { width: 100%; height: auto; display: block; }
.cbm-inner .serie-opening { margin-top: 0; }

.serie-head { padding-top: clamp(4px, 1vw, 12px); }

.serie-grid .serie-slot { display: block; min-width: 0; }
.serie-grid .serie-slot.is-wide { grid-column: 1 / -1; }
.serie-grid .serie-slot img { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  .serie-opening { padding: 0; }
  .cbm-inner .site-main { padding-top: 0; }
  .serie-opening img { min-height: 46svh; object-fit: cover; }
}

/* --- 11. Contactvel met de juiste verhouding --- */
.serie-strip-item img { width: 100%; height: 100%; object-fit: cover; }

/* --- 12. Ritme van de kaarten op de telefoon --- */
@media (max-width: 860px) {
  .work-grid { gap: 20px; }
  .work-card-media { aspect-ratio: 4 / 5; }
  .work { padding-top: clamp(48px, 7vw, 80px); }
  /* Categorieen blijven liggend: dat leest als navigatie, niet als werk. */
  .cats-grid { gap: 20px; }
  .cat-card { aspect-ratio: 4 / 3; }
  .hero-copy { padding: var(--edge) var(--edge) 34px; }
  .serie-head { padding-left: var(--edge); padding-right: var(--edge); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-media img { animation: none !important; }
}

/* --- 13. Hoverkleur. Salie (#3D4A35) is op inkt vrijwel onzichtbaar; op zand juist wel.
       Op donkere vlakken gaat hover daarom naar zand. --- */
.link-arrow:hover,
.contact-detail a:hover,
.serie-related-head a:hover,
.info-body p a:hover,
.footer-col a:hover { color: var(--cream); }
.about .link-arrow:hover { color: var(--accent); }
.work-all a { border-bottom-color: var(--accent-muted); }
.work-all a:hover { border-bottom-color: var(--cream); }
.filter-link:hover, .filter-link.is-current { border-bottom-color: var(--cream); }

/* --- 14. Leesbaarheid van tekst op een beeld ---
   Achter het label in de hero zit deels de lichte achtergrond en het witte
   overhemd: daar haalde gedempt (#9AA287) een contrast van ongeveer 1,3 op 1.
   Twee ingrepen: het label wordt zand, en de sluier is onderin dichter waar de
   tekst staat. De bovenste helft van het beeld blijft onaangetast. */
.hero-scrim {
  background: linear-gradient(to top,
    rgba(14,15,12,0.92) 0%,
    rgba(14,15,12,0.72) 30%,
    rgba(14,15,12,0.38) 55%,
    rgba(14,15,12,0.05) 100%);
}
.hero-copy .eyebrow,
.cat-hero-copy .eyebrow { color: var(--cream); }
.cat-hero-scrim {
  background: linear-gradient(to top,
    rgba(14,15,12,0.9) 0%,
    rgba(14,15,12,0.66) 32%,
    rgba(14,15,12,0.3) 62%,
    rgba(14,15,12,0.08) 100%);
}

/* --- 15. Tablet en tikdoelen ---
   Het contactblok brak pas op 760px terwijl al het andere op 860px breekt.
   Op een iPad staand gaf dat twee smalle kolommen van 349 en 286px.
   Verder een paar knoppen die net onder de 44px bleven. */
@media (max-width: 860px) {
  .contact-inner { grid-template-columns: 1fr; gap: var(--lg); }
  .btn-cta { width: 100%; justify-content: center; }
}
.site-nav-brand { min-height: 44px; justify-content: center; }
.site-nav-back, .site-nav-home { min-height: 44px; }
.cbm-consent-actions a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 480px) {
  .site-nav-back, .site-nav-home { min-width: 44px; justify-content: center; }
}