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;
  }
}

/* =========================
   CLIP MODAL
========================= */

.text-responsive-center {
    text-align: center;
}

.flex-responsive-center {
    display: flex;
    justify-content: center;
    text-align: center;
}

.clip-modal__dialog {
    width: min(980px, 100%);
    border-radius: 24px;
    overflow: hidden;
    background: rgba(11, 12, 15, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
    position: relative;
}

.clip-modal__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(255, 59, 59, 0.14), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.05), transparent 28%);
}

.clip-modal__header {
    position: relative;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.clip-modal__body {
    position: relative;
    padding: 20px;
}

.clip-modal__footer {
    position: relative;
    padding: 0 20px 20px;
}

.clip-modal__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.clip-modal__close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.clip-modal__close:hover {
    background: rgba(255, 255, 255, 0.10);
}

.clip-modal__close:active {
    transform: scale(.98);
}

.clip-modal__video {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.60);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    aspect-ratio: 16 / 9;
}

.clip-modal__video iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.clip-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.clip-modal__card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
}

.clip-modal__info {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.30);
    padding: 16px;
}

.clip-modal__input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.30);
    padding: 12px 16px;
    color: #fff;
    outline: none;
    text-align: center;
}

.clip-modal__input::placeholder {
    color: rgba(255, 255, 255, 0.30);
}

.clip-modal__input:focus {
    border-color: rgba(255, 59, 59, 0.60);
    box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.20);
}

.clip-modal__btn-primary {
    width: 100%;
    border: 0;
    cursor: pointer;
    border-radius: 14px;
    background: linear-gradient(to right, var(--tw-gradient-from, #ff3b3b), var(--tw-gradient-to, #b30000));
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 0 24px rgba(255, 59, 59, 0.25);
    transition: filter .2s ease, transform .2s ease;
}

.clip-modal__btn-primary:hover {
    filter: brightness(1.10);
}

.clip-modal__btn-primary:active {
    transform: scale(.98);
}

.clip-modal__btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    transition: background .2s ease;
}

.clip-modal__btn-secondary:hover {
    background: rgba(255, 255, 255, 0.10);
}

.clip-modal__note {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.25);
    padding: 12px 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.50);
}

@media (min-width: 768px) {
    .clip-modal__header {
        padding: 28px;
    }

    .clip-modal__body {
        padding: 28px;
    }

    .clip-modal__footer {
        padding: 0 28px 28px;
    }
}

@media (min-width: 1024px) {
    .text-responsive-center {
        text-align: left;
    }

    .flex-responsive-center {
        justify-content: flex-start;
        text-align: left;
    }

    .clip-modal__actions {
        justify-content: flex-start;
    }

    .clip-modal__input {
        text-align: left;
    }
}