html,
  body {
      overflow-x: hidden;
  }


  /* mooie rook/film grain vibe zonder extra libs */
  .grain:before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      opacity: .18;
      pointer-events: none;
  }

  html {
      scroll-behavior: smooth;
  }

  section {
      scroll-margin-top: 90px;
  }

  /* header hoogte */
  /* Anti “links/rechts scroll” fix */
  html,
  body {
      overflow-x: clip;
      /* modern */
  }

  @supports not (overflow: clip) {

      html,
      body {
          overflow-x: hidden;
      }

      /* fallback */
  }

  /* Hero bg via CSS zodat we netjes kunnen zoomen */
  .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url("/assets/hero.png");
      background-repeat: no-repeat;
      background-position: center 12%;
      background-size: 100%;
      will-change: background-size;
      transform: translateZ(0);
  }

  /* Alleen op mobiel zoomen (desktop blijft rustig) */
  @media (max-width: 767px) {
      .hero-bg {
          animation: heroZoomCycle 30s ease-in-out infinite;
      }
  }

  @media (min-width: 768px) {
      .hero-bg {
          background-position: center top;
          background-size: 100%;
          animation: none;
      }
  }

  /* Zoom-out -> iedereen zichtbaar -> zoom-in -> terug */
  @keyframes heroZoomCycle {
      0% {
          background-size: 170%;
      }

      38% {
          background-size: 108%;
      }

      /* “iedereen zichtbaar” moment */
      62% {
          background-size: 138%;
      }

      /* weer iets inzoomen */
      100% {
          background-size: 170%;
      }
  }

  /* Subtiele white wash (geen logo) */
  .hero-wash {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
              rgba(255, 255, 255, 0),
              rgba(255, 255, 255, .10),
              rgba(255, 255, 255, 0));
      opacity: 0;
      pointer-events: none;
  }

  @media (max-width: 767px) {
      .hero-wash {
          animation: heroWash 14s ease-in-out infinite;
      }
  }

  @keyframes heroWash {

      0%,
      52% {
          opacity: 0;
      }

      56% {
          opacity: .25;
      }

      62%,
      100% {
          opacity: 0;
      }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {

      .hero-bg,
      .hero-wash {
          animation: none !important;
      }
  }

  /* HERO: alles center op mobiel, zonder Tailwind afhankelijkheid */
  @media (max-width: 1023.98px) {

      /* hele linkerkolom */
      .hero-center-mobile>.lg\:col-span-7 {
          text-align: center;
      }

      /* pill badge centreren */
      .hero-center-mobile>.lg\:col-span-7>.inline-flex {
          margin-left: auto;
          margin-right: auto;
      }

      /* intro tekst centreren */
      .hero-center-mobile>.lg\:col-span-7 p.max-w-xl {
          margin-left: auto;
          margin-right: auto;
      }

      /* buttons blok centreren */
      .hero-center-mobile>.lg\:col-span-7 .mt-8.flex {
          justify-content: center;
      }

      /* rechterkaart: header (icon + tekst) center op mobiel */
      .hero-center-mobile>.lg\:col-span-5 .flex.items-start.gap-4 {
          flex-direction: column;
          align-items: center;
          text-align: center;
      }

      /* contact buttons in kaart center */
      .hero-center-mobile>.lg\:col-span-5 .mt-5.flex {
          justify-content: center;
      }
  }

  @media (max-width: 1023.98px) {

      /* ✅ Rechter card: 2x2 stats grid centreren + items netjes */
      .hero-center-mobile>.lg\:col-span-5 .grid.gap-3.sm\:grid-cols-2 {
          justify-items: center;
          /* center de grid-items */
          text-align: center;
          /* center tekst in de cards */
      }

      /* cards in die grid: beetje consistente breedte */
      .hero-center-mobile>.lg\:col-span-5 .grid.gap-3.sm\:grid-cols-2>div {
          width: 100%;
          max-width: 22rem;
          /* voorkomt super brede cards op mobiel */
      }
  }

  /* Footer: center op mobiel, desktop blijft zoals nu */
  @media (max-width: 767.98px) {
      .site-footer .md\:flex-row {
          align-items: center;
          text-align: center;
      }

      .site-footer .md\:flex-row>div:first-child {
          width: 100%;
      }

      .site-footer .md\:flex-row>div:last-child {
          width: 100%;
          justify-content: center;
          /* socials naar midden */
      }
  }

  /* Contactkaart: maak alle rijen visueel gelijk */
  .contact-row {
      align-items: flex-start;
      /* icoon bovenaan */
  }

  .contact-body {
      min-height: 78px;
      /* tune: 72/78/84 afhankelijk van jouw font/spacing */
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* centreert 2 regels mooi in dezelfde hoogte */
  }

  /* Subregel (WhatsApp / lege placeholder) */
  .contact-sub {
      line-height: 1.2;
      min-height: 1.2em;
      /* reserveert altijd ruimte voor “derde regel” */
      margin-top: 2px;
  }

  /* Lege subregel onzichtbaar maar houdt ruimte */
  .contact-sub.is-empty {
      visibility: hidden;
  }

  /* ===== BIO MODAL (responsive) ===== */
  .bio-modal__panel {
      width: min(820px, 100%);
  }

  .bio-modal__body {
      display: grid;
      gap: 16px;
      padding: 16px;
      grid-template-columns: 260px 1fr;
      align-items: start;
  }

  .bio-modal__left {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .bio-modal__avatar {
      width: 220px;
      height: 220px;
      border-radius: 9999px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(0, 0, 0, .25);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset;
  }

  .bio-modal__avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 6%;
      display: block;
  }

  .bio-modal__socials {
      margin-top: 12px;
      display: none;
      /* JS zet 'm op flex als er socials zijn */
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
  }

  /* Mobile: stack (1 column) */
  @media (max-width: 640px) {
      .bio-modal__body {
          grid-template-columns: 1fr;
      }

      .bio-modal__avatar {
          width: 180px;
          height: 180px;
      }

      /* optioneel: iets meer ruimte voor tekst */
      .bio-modal__panel {
          width: min(820px, 100%);
      }
  }

  .badges-center {
      display: flex;
      flex-wrap: wrap;
      justify-content: center !important;
      width: 100%;
  }

  @media (max-width: 767px) {
      .hide-on-mobile {
          display: none !important;
      }
  }

  @media (max-width: 767px) {
      .hide-on-mobile {
          display: none !important;
      }
  }


  /* =========================
   BIO MODAL – iOS Safari fix
   ========================= */

  /* fallback: wordt door JS gezet via --vvh */
  :root {
      --vvh: 1vh;
  }

  /* ✅ de HELE modal scrollt */
  #bioModal {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
  }

  /* ✅ panel niet afkappen (geen max-height/hidden) */
  #bioPanel {
      max-height: none !important;
      overflow: visible !important;
  }

  /* ✅ wrap bovenaan zodat lange content kan scrollen */
  #bioWrap {
      align-items: flex-start !important;
  }

  /* ===== BIO MODAL FOOTER (mobile + tablet) ===== */

  .bio-modal__footer {
      position: sticky;
      /* blijft zichtbaar tijdens scroll */
      bottom: 0;
      z-index: 5;
      padding: 12px 16px;
      border-top: 1px solid rgba(255, 255, 255, .10);
      background: rgba(11, 12, 15, .96);
      backdrop-filter: blur(10px);
      display: flex;
      justify-content: center;
  }

  /* button styling */
  .bio-modal__closebtn {
      width: 100%;
      max-width: 520px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .92);
      font-weight: 700;
      cursor: pointer;
  }

  /* hover (desktop only praktisch, maar ok) */
  .bio-modal__closebtn:hover {
      background: rgba(255, 255, 255, .12);
  }

  /* ✅ Desktop: footer verbergen */
  @media (min-width: 1024px) {
      .bio-modal__footer {
          display: none;
      }
  }

  /* Toon footer-knop alleen op mobiel/tablet (niet op desktop) */
  @media (max-width: 1023.98px) {
      #bioFooter {
          display: block !important;
      }
  }


  /* =========================================
   NAV fix: smartphone landscape (lage hoogte)
   Forceer hamburger i.p.v. desktop nav
   ========================================= */
  @media (orientation: landscape) and (max-height: 520px) {

      /* desktop nav uit */
      #desktopNav {
          display: none !important;
      }

      /* hamburger knop aan (overschrijft md:hidden) */
      #menuBtn {
          display: inline-flex !important;
      }

      /* mobile menu scrollbaar maken als er weinig hoogte is */
      #mobileMenu {
          max-height: calc(100vh - 64px);
          /* 64px ≈ header hoogte */
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
      }

      /* iets compacter zodat er meer items passen */
      #mobileMenu a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
  }

  /* =========================================
   NAV fix: alles kleiner dan 912x1368
   Forceer hamburger i.p.v. desktop nav
   ========================================= */
  @media (max-width: 912px) and (max-height: 1368px) {

      /* desktop nav uit */
      #desktopNav {
          display: none !important;
      }

      /* hamburger knop aan (overschrijft md:hidden) */
      #menuBtn {
          display: inline-flex !important;
      }

      /* mobile menu scrollbaar bij beperkte ruimte */
      #mobileMenu {
          max-height: calc(100vh - 64px);
          /* 64px ≈ header hoogte */
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
      }
  }


  /* ==========================================
   NAV: force mobile menu t/m 912px breedte
   (override Tailwind md:hidden / md:flex)
   ========================================== */
  @media (max-width: 912px) {

      /* desktop nav uit */
      #desktopNav {
          display: none !important;
      }

      /* hamburger knop aan (ook al staat er md:hidden) */
      #menuBtn {
          display: inline-flex !important;
          align-items: center;
          justify-content: center;
      }

      /* mobile menu container mag bestaan (hidden class bepaalt open/dicht) */
      #mobileMenu {
          display: block !important;
          /* override md:hidden */
      }
  }

  /* vanaf 913px weer desktop */
  @media (max-width: 912px) {

      /* desktop nav uit */
      #desktopNav {
          display: none !important;
      }

      /* hamburger aan */
      #menuBtn {
          display: inline-flex !important;
          align-items: center;
          justify-content: center;
      }

      /* mobile menu: mag bestaan, MAAR hidden moet winnen */
      #mobileMenu {
          display: block !important;
      }

      /* override md:hidden */
      #mobileMenu.hidden {
          display: none !important;
      }

      /* ✅ hidden wint weer */
  }

  @media (min-width: 913px) {
      #desktopNav {
          display: flex !important;
      }

      #menuBtn {
          display: none !important;
      }

      #mobileMenu {
          display: none !important;
      }
  }

  /* HERO fullscreen op tablets (768x1024 en groter) */
  @media (min-width: 768px) and (max-width: 1368px) {
      #home {
          min-height: calc(100svh - 80px);
          /* 80px ≈ jouw header + pt-20 */
      }
  }

  /* fallback voor browsers zonder svh */
  @supports not (height: 100svh) {
      @media (min-width: 768px) and (max-width: 1368px) {
          #home {
              min-height: calc(100vh - 80px);
          }
      }
  }

  /* =========================
   HERO HEIGHT TUNING
   ========================= */

  #home {
      min-height: auto !important;
  }


  /* FORCE: Contact info-blok footer naar beneden duwen (desktop naast formulier) */
@media (min-width: 1024px) {
  /* linkerkolom (info) zelf laten stretchen */
  #contact .lg\:col-span-5 {
    display: flex;
  }

  /* de kaart in de linkerkolom: flex column en volle hoogte */
  #contact .lg\:col-span-5 > .rounded-2xl {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* je "bovenste content" (space-y-4) groeit niet, blijft boven */
  #contact .lg\:col-span-5 > .rounded-2xl > .space-y-4 {
    flex: 0 0 auto;
  }

  /* alles NA die .space-y-4 (jouw social + prijsinfo) wordt footer en zakt omlaag */
  #contact .lg\:col-span-5 > .rounded-2xl > .space-y-4 + * {
    margin-top: auto;
    padding-top: 24px; /* zelfde feel als mt-auto pt-6 */
  }
}

/* CONTACT info blok: rijen visueel even hoog */
#contact .contact-row {
  align-items: flex-start;
}

#contact .contact-row > div:last-child {
  /* dit is de tekstkolom naast het icoon */
  min-height: 78px;           /* tweak: 72/78/84 naar smaak */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* reserveer altijd ruimte voor de 'subregel' (WhatsApp link) */
#contact .contact-row .contact-sub {
  line-height: 1.2;
  min-height: 1.2em;
  margin-top: 2px;
}

#contact .contact-row .contact-sub.is-empty {
  visibility: hidden;
}

/* CONTACT: cards altijd full width op mobile/tablet */
@media (max-width: 1023.98px) {
  #contact .lg\:col-span-5,
  #contact .lg\:col-span-7 {
    width: 100%;
  }

  /* de kaart zelf */
  #contact .lg\:col-span-5 > div,
  #contact .lg\:col-span-7 > form {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  /* Alleen als er exact 5 kaarten zijn */
  .musicians-grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* Alle kaarten even breed */
  .musicians-grid:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }

  /* Onderste 2 kaarten gecentreerd */
  .musicians-grid:has(> :nth-child(5):last-child) > :nth-child(4) {
    grid-column: 2 / span 2;
  }

  .musicians-grid:has(> :nth-child(5):last-child) > :nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* Standaard zichtbaar */
.share-mobile-only {
  display: inline-flex;
}

/* Desktop verbergen */
@media (min-width: 1024px) {
  .share-mobile-only {
    display: none !important;
  }
}