/* gids-funnel.css — 28/10/2026 Vorm & Site: foto's (stijl «Jaar in beeld») + duidelijke CTA op de gidspagina's en gidskaarten. Raakt de gate/het token niet. */
.gf-f{position:relative;overflow:hidden;border-radius:10px;background:#2b2a24;box-shadow:0 30px 64px -26px rgba(29,25,19,.6),0 10px 24px -14px rgba(29,25,19,.4);margin:0}
.gf-f img{display:block;width:100%;height:100%;object-fit:cover}
.gf-f::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 95% at 50% 45%,rgba(29,25,19,0) 58%,rgba(29,25,19,.42) 100%),linear-gradient(180deg,rgba(29,25,19,.16) 0%,rgba(29,25,19,0) 20%,rgba(29,25,19,0) 72%,rgba(29,25,19,.34) 100%)}
.gf-btn{display:inline-block;padding:.95rem 2.2rem;background:#0c0d0a;color:#f4efe2!important;border:1px solid #0c0d0a;border-radius:999px;text-decoration:none!important;font-family:var(--font-sc,inherit);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.3;transition:background .2s,border-color .2s}
.gf-btn:hover{background:#8a6a3b;border-color:#8a6a3b}
.gf-link{display:inline-block;margin-top:.9rem;font-size:.85rem;color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.8}
/* bovenaan */
.gf-top{text-align:center;padding:1.6rem 24px 0}
.gf-duo{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;width:min(1080px,calc(100% - 48px));margin:2.4rem auto}
.gf-duo .gf-f{aspect-ratio:3/2}.gf-duo .gf-f+.gf-f{aspect-ratio:auto}
/* midden */
.gf-mid{width:min(1080px,calc(100% - 48px));margin:3rem auto;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.gf-mid .gf-f{aspect-ratio:3/2}
.gf-mid-t{text-align:center}
.gf-mid-t h3{font-family:var(--font-d,serif);font-style:italic;font-weight:400;font-size:clamp(1.2rem,2.2vw,1.7rem);margin:0 0 1.1rem;color:var(--ink,#0c0d0a)}
/* onderaan (bestaande .cta-blok) */
.cta .gf-btn{background:#f4efe2;color:#0c0d0a!important;border-color:#f4efe2}
.cta .gf-btn:hover{background:#8a6a3b;border-color:#8a6a3b;color:#f4efe2!important}
.cta .gf-link{color:#f4efe2}
/* bedankstap na het formulier */
.gf-dank{width:min(780px,calc(100% - 48px));margin:1.6rem auto 0;padding:1.3rem 1.5rem;border-radius:12px;background:rgba(255,255,255,.55);box-shadow:0 10px 30px -18px rgba(29,25,19,.45);text-align:center}
.gf-dank p{margin:0 0 .9rem;font-family:var(--font-d,serif);font-style:italic;font-size:1.15rem;color:var(--ink,#0c0d0a)}
/* gate = landingspagina: foto + formulier + wat erin staat */
.gids-gate.gf-gate{gap:48px}
.gf-gate-foto{flex:0 0 min(420px,40vw);aspect-ratio:4/5}
.gf-in{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}
.gf-in li{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .8rem;border:1px solid rgba(12,13,10,.25);border-radius:999px}
.gf-in-t{font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin:0 0 .6rem}
/* gidskaarten (home, aanbod, blog, overzicht) */
.gf-kaarten{width:min(1080px,calc(100% - 48px));margin:4rem auto;text-align:center}
.gf-kaarten h2{font-family:var(--font-d,'Cormorant Garamond',serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3vw,2.3rem);margin:0 0 1.8rem}
.gf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.gf-kaart{display:block;text-decoration:none!important;color:inherit;text-align:left}
.gf-kaart .gf-f{aspect-ratio:4/5;transition:transform .3s}
.gf-kaart:hover .gf-f{transform:translateY(-3px)}
.gf-kaart b{display:block;margin:.85rem 2px .2rem;font-family:var(--font-d,'Cormorant Garamond',serif);font-style:italic;font-weight:400;font-size:1.2rem}
.gf-kaart span{display:inline-block;margin:0 2px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px}
@media (max-width:860px){
 .gids-gate.gf-gate{flex-direction:column;justify-content:flex-start;gap:20px;padding-top:1.5rem}
 .gf-gate-foto{flex:none;width:calc(100% + 2*var(--pad-h,24px));margin:0 calc(-1*var(--pad-h,24px));aspect-ratio:3/2;border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
 .gf-duo,.gf-mid{width:100%;grid-template-columns:1fr;gap:0;margin:1.6rem 0}
 .gf-duo .gf-f,.gf-mid .gf-f{border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
 .gf-duo .gf-f+.gf-f{display:none}
 .gf-mid-t{padding:1rem 24px 0}
 .gf-grid{grid-template-columns:repeat(4,72%);overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 24px 18px;margin:0 -24px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent 100%);mask-image:linear-gradient(90deg,#000 85%,transparent 100%)}
 .gf-kaart{scroll-snap-align:start}
 .gf-btn{padding:.9rem 1.6rem}
}
