/* ============================================================
   FIX: mobiele header niet transparant (geen hero bleed-through)
   ============================================================ */
@media (max-width: 980px){

  .site-header{
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-bottom: 1px solid rgba(12,17,23,.08) !important;
    box-shadow: 0 10px 30px rgba(12,17,23,.10) !important;
  }

  /* Als je JS de .scrolled class zet: op mobiel ook wit houden */
  .site-header.scrolled{
    background: #ffffff !important;
    border-bottom: 1px solid rgba(12,17,23,.08) !important;
    box-shadow: 0 10px 30px rgba(12,17,23,.10) !important;
  }

  /* Tekst/icoon altijd donker op witte header */
  .site-header .nav a,
  .site-header .brand-text{
    color: #0c1117 !important;
  }

  .site-header .brand img{
    filter: none !important;
  }
}
/* ============================================================
   MOBILE PORTFOLIO = CASE STACK (ruimer + premium)
   ============================================================ */
@media (max-width: 980px){

  /* Section: meer lucht rondom */
  #portfolio.horizontal-portfolio{
    height: auto !important;
    padding: 72px 0 64px !important;
    overflow: clip !important;
  }

  /* Sticky uit */
  #portfolio .sticky-wrapper{
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Container: vertical stack */
  #portfolio .portfolio-container{
    display: flex !important;
    flex-direction: column !important;
    gap: 34px !important;              /* ⬅️ meer ruimte tussen cases */
    padding: 0 18px !important;
    transform: none !important;
    will-change: auto !important;
    width: 100% !important;
  }

  /* Intro blok: groter en rustiger */
  #portfolio .portfolio-intro{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px 0 !important;
  }

  /* Item = kaart + tekst eronder */
  #portfolio .portfolio-item{
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* Kaart: groter + mooie verhouding */
  #portfolio .glass-card{
    width: 100% !important;
    height: clamp(260px, 62vw, 360px) !important; /* ⬅️ ruimer */
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 80px rgba(12,17,23,.14) !important;
  }

  /* Overlay mag subtiel blijven voor sfeer */
  #portfolio .card-overlay{
    background: linear-gradient(
      to top,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.10) 55%,
      transparent 100%
    ) !important;
  }

  /* Tekst onder kaart: als “caption” */
  #portfolio .parallax-text{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    pointer-events: auto !important;
  }

  #portfolio .category{
    font-size: 12px !important;
    letter-spacing: 2.6px !important;
    margin-bottom: 6px !important;
    color: #3b71fe !important;
  }

  #portfolio .project-title,
  #portfolio .project-title .italic-text{
    color: #0c1117 !important;
    text-shadow: none !important;
    white-space: normal !important;
    font-size: clamp(28px, 7.2vw, 38px) !important; /* ⬅️ groter */
    line-height: 1.02 !important;
  }

  /* Subtiele divider voor ‘ruim’ gevoel */
  #portfolio .portfolio-item::after{
    content: "";
    display: block;
    height: 1px;
    margin-top: 18px;
    background: rgba(12,17,23,.08);
  }
  #portfolio .portfolio-item:last-child::after{
    display: none;
  }

  /* Optioneel: snap feel (zet uit als je het irritant vindt) */
  #portfolio .portfolio-container{
    scroll-snap-type: y proximity;
  }
  #portfolio .portfolio-item{
    scroll-snap-align: start;
  }
}
/* ============================================================
   FIX: #actie perfect gecentreerd op mobiel
   ============================================================ */
@media (max-width: 980px){

  /* 1) Pak de padding van de section zelf strak en symmetrisch */
  #actie.pricing-section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Geef #actie z’n eigen “betrouwbare” container width */
  #actie .container{
    width: calc(100% - 36px) !important;   /* 18px links + 18px rechts */
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  /* 3) Haal de extra grid padding weg (die schuift ‘m vaak net off-center) */
  #actie .pricing-grid{
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    justify-items: stretch !important;
  }

  /* (optioneel maar fijn) cards nooit “net te smal” waardoor het optisch scheef voelt */
  #actie .price-card{
    width: 100% !important;
  }
}
/* ============================================================
   MOBIEL: "geen verrassingen" op nieuwe regel in #actie titel
   ============================================================ */
@media (max-width: 980px){

  #actie .main-title .italic-text{
    display: block !important;
    margin-top: 6px;
  }
}
.footer-link--button{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.footer-link--button {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  line-height: inherit;
}
/* Cookie voorkeuren titels fix */
.cc__category-title,
.cm__title,
.cc__section-title {
    color: #ffffff !important;
}
/* ============================================================
   COOKIE MODAL: TITELS / HEADINGS WIT (FIX)
   ============================================================ */

.cb-backdrop,
.cb-modal,
.cb-modal *{
  color: var(--cb-text) !important;
}

/* Specifiek de koppen */
.cb-modal-title,
.cb-card h4{
  color: var(--cb-text) !important;
}

/* Optioneel: headings iets meer contrast */
.cb-card p,
.cb-modal-desc{
  color: var(--cb-muted) !important;
}
/* ============================================================
   MOBIEL: foto terug + 12px onder hero-tekst
   ============================================================ */
@media (max-width: 980px){

  /* 1 kolom: tekst boven, foto eronder */
  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;              /* ✅ 12px ruimte tussen tekst en foto */
    align-items: start !important;
  }

  /* Foto mag weer zichtbaar zijn */
  .hero-right{
    display: flex !important;           /* ✅ override op 'display:none' */
    order: 2 !important;                /* onder de tekst */
    width: 100% !important;
    height: auto !important;
  }

  /* Tekstblok bovenaan */
  .hero-left{
    order: 1 !important;
  }

  /* Kaart/foto full width zoals je pricing cards */
  .hero-photo{
    width: 100% !important;
    max-width: 100% !important;
    height: 340px !important;           /* tune: 300–420 */
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .hero-image-portrait{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
  }
}
/* ============================================================
   MOBILE FIX: hero + foto zichtbaar, en #tarieven niet eroverheen
   ============================================================ */
@media (max-width: 980px){

  /* 1) Zet de "sticky hero stack" uit op mobiel */
  .sticky-hero{
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    z-index: auto !important;
    align-items: flex-start !important;
    padding-bottom: 0 !important;
  }

  /* 2) Zorg dat #tarieven gewoon onder de hero komt (niet eroverheen) */
  .pricing-section,
  #actie.pricing-section{
    position: relative !important;
    z-index: auto !important;
    margin-top: 0 !important;
    box-shadow: none !important; /* haalt die 'overlap-schaduw' weg */
  }

  /* 3) Foto ALTIJD terug op mobiel (ook als er ergens display:none staat) */
  .hero-right{
    display: flex !important;
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 4) Layout: tekst boven, foto 12px eronder */
  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 32px !important; /* ✅ 12px onder hero-tekst */
    align-items: start !important;
  }

  /* 5) Foto/card lekker breed */
  .hero-photo{
    width: 100% !important;
    max-width: 100% !important;
    height: 340px !important;   /* pas aan als je wil */
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .hero-image-portrait{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
  }
}
/* ============================================================
   iPad mini / Air / Pro: HERO FOTO CARD HOGER + BETERE CROP
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1366px){

  /* Geef rechts meer verticale ruimte */
  .hero-right{
    height: clamp(520px, 62vh, 820px) !important;
  }

  /* Kaart iets breder (optioneel, maar helpt op iPad Pro) */
  .hero-photo{
    width: min(520px, 46vw) !important;
    height: 100% !important;
  }

  /* Crop/positie tunen voor portrait */
  .hero-image-portrait{
    object-fit: cover !important;
    object-position: center 18% !important; /* schuif gezicht iets omhoog/omlaag */
  }
}
/* ============================================================
   iPad mini / Air / Pro: HERO FOTO BREEDER (schouders zichtbaar)
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1366px){

  /* Geef de foto-kolom meer ruimte */
  .hero-grid{
    grid-template-columns: 1fr 1.15fr !important;
    align-items: center !important;
  }

  /* Laat de rechterkolom echt groeien */
  .hero-right{
    height: clamp(520px, 62vh, 820px) !important;
    justify-content: flex-end !important;
  }

  /* Maak de card duidelijk breder */
  .hero-photo{
    width: min(620px, 52vw) !important;
    max-width: none !important;
  }

  /* Crop aanpassen zodat schouders zichtbaar blijven */
  .hero-image-portrait{
    object-fit: cover !important;
    object-position: center 12% !important;
  }
}
/* ============================================================
   iPad Pro SAFARI FIX – stop viewport overflow
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 981px) and (max-width: 1366px){

  html, body{
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .stack-wrapper,
  main#page,
  .page,
  section{
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  .container{
    width: calc(100% - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    overflow: visible !important;
  }

  /* Glow / transforms veroorzaken iPad overflow */
  .hero-photo::before,
  .hero-photo::after{
    display:none !important;
  }
}
/* ============================================================
   iPad Layout = Mobile stacking
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 981px) and (max-width: 1366px){

  /* HERO */
  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .hero-right{
    width: 100% !important;
    justify-content: center !important;
  }

  /* TARIEVEN */
  #actie .pricing-grid{
    grid-template-columns: 1fr !important;
  }

  /* PORTFOLIO */
  #portfolio .portfolio-container{
    flex-direction: column !important;
    transform: none !important;
  }

  #portfolio .portfolio-item{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* REVIEWS */
  #reviews .reviews-container{
    flex-direction: column !important;
    transform: none !important;
  }
}
@media (hover: none) and (pointer: coarse) and (min-width: 981px) and (max-width: 1366px){

  .sticky-hero{
    position: relative !important;
    height: auto !important;
  }

  .pricing-section{
    box-shadow: none !important;
    margin-top: 0 !important;
  }
}
/* ============================================================
   iPad Pro: SCROLL FIX (iPadOS Safari bug / scroll-lock)
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 981px) and (max-width: 1366px){

  html, body{
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;           /* ✅ scroll terug */
    -webkit-overflow-scrolling: touch;
  }

  /* Als JS per ongeluk menu-open of is-intro laat staan: niet vastzetten */
  body.menu-open,
  body.is-intro{
    overflow-y: auto !important;
    height: auto !important;
    touch-action: auto !important;
  }

  /* iPad Safari: clip kan soms y-scroll killen -> terug naar hidden op x */
  .stack-wrapper,
  main#page,
  .page,
  section{
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}
/* ============================================================
   Skip link (“Ga naar inhoud”) netjes verbergen behalve bij focus
   ============================================================ */
a.skip-link,
a[href="#main"],
a[href="#content"]{
  position: absolute !important;
  left: -9999px !important;
  top: 10px !important;
  z-index: 999999 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #0c1117 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}

a.skip-link:focus,
a[href="#main"]:focus,
a[href="#content"]:focus{
  left: 14px !important;   /* ✅ alleen zichtbaar wanneer je tabt */
}
/* ============================================================
   iPad Pro: top safe-area + hero spacing fix
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 981px) and (max-width: 1366px){

  /* 1) Laat de header óók de 'bovenbalk' (safe-area) vullen */
  .site-header{
    top: 0 !important;
    padding-top: env(safe-area-inset-top) !important;
    margin-top: 0 !important;
  }

  /* Zorg dat de header-hoogte visueel hetzelfde blijft */
  .header-inner{
    height: 76px !important;
  }

  /* 2) Duw de hero content iets omlaag (ruimte onder header) */
  .hero-grid{
    padding-top: calc(46px + 18px) !important; /* meer lucht bovenaan */
  }

  /* Extra vangrail: sommige builds hebben .page te krap */
  .page{
    padding-top: 20px !important; /* laat bestaan, maar we fixen hero specifiek */
  }
}
/* Alleen de progress-lijn in #werkwijze */
#werkwijze .process-line-container .line-active{
  height: 0%;                      /* start */
  transition: height 0.1s ease-out; /* belangrijk */
}
/* Verberg Hightech section op mobiel */
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  #hightech {
    display: none !important;
  }
}
/* Zorg dat de <a> items er uitzien als je bestaande portfolio-item */
.portfolio-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Tom & Jessy hover melding */
.portfolio-locked .glass-card {
  position: relative;
}

.portfolio-locked .locked-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;

  /* Subtiel “glass” effect (past bij je glass-cards) */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}

/* Toon bij hover én bij toetsenbord-focus */
.portfolio-locked:hover .locked-badge,
.portfolio-locked:focus .locked-badge,
.portfolio-locked:focus-within .locked-badge {
  opacity: 1;
  transform: translateY(0);
}

/* Optioneel: cursor hint dat dit niet klikbaar is */
.portfolio-locked {
  cursor: default;
}