/* ============================================================
   URBAN GRND — activiteit.css
   Gedeelde layout voor de activiteitenpagina's in /activiteiten/.
   Link vanaf elke pagina: <link rel="stylesheet" href="../assets/css/activiteit.css">
   ============================================================ */

/* ===== HERO ===== */
.act-hero{position:relative;overflow:hidden;background:var(--ug-violet-900);color:var(--on-dark);padding:calc(var(--space-8) + 6px) 24px var(--space-8)}
.act-hero__inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.act-hero__content{min-width:0}
.act-hero h1{font-size:clamp(2.4rem,5.5vw,4.25rem);line-height:.95;margin:.5rem 0 10px}
.act-tagline{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ug-amber-500);font-size:clamp(.95rem,1.5vw,1.15rem);margin:0 0 20px}
.act-lead{font-size:1.15rem;line-height:1.55;color:var(--on-dark-muted);max-width:56ch;margin:0 0 24px}
.act-hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.act-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:.5rem .9rem;border-radius:var(--radius-pill);line-height:1}
.act-pill svg{width:14px;height:14px;fill:none;stroke:var(--ug-amber-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.act-price-from{display:flex;flex-direction:column;line-height:1}
.act-price-from .lbl{font-size:.66rem;letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:800;color:var(--ug-lavender);margin-bottom:3px}
.act-price-from .amt{font-family:var(--font-heading);font-weight:800;font-size:1.5rem;color:#fff}
.act-price-from .amt small{color:var(--on-dark-muted);font-weight:600;font-size:.85rem}

/* hero visual (gradient/placeholder — vervang door foto) */
.act-hero__visual{position:relative;aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:linear-gradient(135deg,#2a0676,#5a08d2)}
.act-hero__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.act-hero__visual .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:rgba(255,255,255,.85)}
.act-hero__visual .ph .big{font-family:var(--font-display);text-transform:uppercase;font-size:2rem;letter-spacing:.02em}
.act-hero__visual .ph small{font-family:ui-monospace,monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ===== SECTIES ===== */
.act-section{max-width:var(--maxw);margin:0 auto;padding:var(--space-8) 24px}
.act-section--tight{padding-top:var(--space-7);padding-bottom:var(--space-7)}
.act-head{margin:0 0 var(--space-6);max-width:720px}
.act-head h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:.4rem 0 0;color:var(--on-light)}
.act-head--light h2{color:var(--on-light)}
.act-prose{max-width:760px}
.act-prose p{font-size:1.05rem;line-height:1.65;color:var(--on-light);margin:0 0 1.1rem}
.act-prose p:last-child{margin-bottom:0}
.act-prose strong{color:var(--on-light)}

/* feature-kaarten */
.act-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.act-feature{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px 28px}
.act-feature .ico{width:46px;height:46px;border-radius:12px;background:rgba(227,150,56,.15);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.act-feature .ico svg{width:24px;height:24px;fill:none;stroke:var(--ug-amber-700);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act-feature h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;margin:0 0 8px;color:var(--on-light)}
.act-feature p{margin:0;font-size:.95rem;color:var(--on-light-muted);line-height:1.5}

/* prijzen (60/90) */
.act-prices{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.act-price{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--ug-violet-700);color:#fff;border:2px solid transparent;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}
.act-price--featured{border-color:var(--ug-amber-500)}
.act-price__flag{position:absolute;top:-13px;left:var(--space-5);background:var(--ug-amber-500);color:var(--ug-violet-800);font-weight:700;font-size:.66rem;letter-spacing:var(--tracking-label);text-transform:uppercase;padding:.4rem .85rem;border-radius:var(--radius-pill)}
.act-price h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;margin:0}
.act-price__amt{display:flex;align-items:baseline;gap:6px}
.act-price__amt b{font-family:var(--font-heading);font-weight:800;font-size:2.6rem;line-height:1;color:var(--ug-amber-500)}
.act-price__amt span{color:var(--on-dark-muted);font-size:.9rem;font-weight:600}
.act-price p{margin:0;color:var(--on-dark-muted);font-size:.95rem;line-height:1.5}
.act-price .ug-btn{margin-top:auto}

/* prijs-tabel (per baan/per tafel, meerdere tijdstiers) */
.act-price-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.act-price-table thead th{background:var(--ug-violet-700);color:#fff;font-family:var(--font-body);font-weight:800;font-size:.72rem;letter-spacing:var(--tracking-label);text-transform:uppercase;text-align:left;padding:15px 22px}
.act-price-table thead th:last-child{text-align:right}
.act-price-table tbody td{padding:14px 22px;border-top:1px solid var(--border-light);font-size:1rem;color:var(--on-light)}
.act-price-table tbody td.dur{font-weight:700}
.act-price-table tbody td.amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;color:var(--ug-amber-700)}
.act-price-table tbody tr.is-pop td{background:rgba(227,150,56,.1)}
.act-price-table tbody tr.is-pop td.dur::after{content:"Populair";margin-left:10px;font-family:var(--font-body);font-weight:800;font-size:.58rem;letter-spacing:var(--tracking-label);text-transform:uppercase;color:#fff;background:var(--ug-amber-500);padding:3px 8px;border-radius:var(--radius-pill);vertical-align:middle}

/* combi-callout */
.act-combi{background:var(--ug-amber-500);color:var(--ug-violet-800);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}
.act-combi h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.3rem;margin:0 0 4px}
.act-combi p{margin:0;font-weight:600;max-width:560px}
.price-note{margin-top:14px;font-size:.85rem;color:var(--on-light-muted)}

/* review-strip */
.act-review{background:var(--ug-violet-800);color:#fff;border-radius:var(--radius-xl);padding:var(--space-7);text-align:center}
.act-review .stars{color:var(--ug-amber-500);font-size:1.4rem;letter-spacing:2px}
.act-review .score{font-weight:700;color:var(--on-dark-muted);font-size:.9rem;margin-top:6px}
.act-review blockquote{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.15;margin:18px auto 10px;max-width:800px}
.act-review cite{font-style:normal;color:var(--on-dark-muted);font-size:.85rem;letter-spacing:.05em;text-transform:uppercase}

/* FAQ (details) */
.act-faq details{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.act-faq details[open]{border-color:var(--ug-amber-500);box-shadow:var(--shadow-sm)}
.act-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--on-light)}
.act-faq summary::-webkit-details-marker{display:none}
.act-faq summary:hover{color:var(--ug-amber-700)}
.act-faq .chev{flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--ug-amber-500);border-bottom:2.5px solid var(--ug-amber-500);transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px}
.act-faq details[open] .chev{transform:rotate(-135deg);margin-top:4px}
.act-faq .a{padding:0 22px 20px;color:var(--on-light-muted);line-height:1.6;font-size:1rem}
.act-faq .a strong{color:var(--on-light)}

/* meer activiteiten */
.act-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.act-more a{display:flex;align-items:flex-end;min-height:120px;padding:18px;border-radius:var(--radius-lg);color:#fff;font-family:var(--font-display);text-transform:uppercase;font-size:1.05rem;line-height:1.05;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease;position:relative;overflow:hidden}
.act-more a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* hero fotoslider */
.hero-slider{position:absolute;inset:0;z-index:3}
.hero-slider .hs-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.hero-slider .hs-slide.is-on{opacity:1}
.hero-slider .hs-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:2.6rem;height:2.6rem;border:0;border-radius:50%;background:rgba(34,5,89,.5);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,background .2s;backdrop-filter:blur(4px)}
.hero-slider:hover .hs-nav,.hero-slider .hs-nav:focus-visible{opacity:1}
.hero-slider .hs-nav:hover{background:var(--ug-amber-500);color:var(--ug-violet-800)}
.hero-slider .hs-prev{left:12px}
.hero-slider .hs-next{right:12px}
.hero-slider .hs-dots{position:absolute;left:0;right:0;bottom:12px;z-index:5;display:flex;justify-content:center;gap:7px}
.hero-slider .hs-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s,width .2s}
.hero-slider .hs-dot.is-on{background:var(--ug-amber-500);width:22px;border-radius:var(--radius-pill)}
@media (max-width:640px){ .hero-slider .hs-nav{opacity:1;width:2.2rem;height:2.2rem;font-size:1.3rem} }

/* fotogalerij (meerdere foto's, drop-in) */
.act-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.act-gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:block}

/* CTA-band */
.act-cta{background:var(--ug-violet-500);color:#fff;border-radius:var(--radius-xl);max-width:var(--maxw);margin:0 auto var(--space-8);padding:var(--space-7);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.act-cta h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:0 0 6px;max-width:560px}
.act-cta p{margin:0;color:var(--on-dark-muted);max-width:520px}
.act-cta .btns{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  .act-hero__inner{grid-template-columns:1fr;gap:32px}
  .act-hero__visual{order:-1}
}
@media (max-width:720px){
  .act-prices{grid-template-columns:1fr}
}

/* contact-CTA (vervangt de oude formulieren) */
.contact-cta{display:flex;flex-direction:column;gap:14px}
.contact-cta h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.4rem;margin:0;color:var(--on-light)}
.contact-cta p{margin:0;color:var(--on-light-muted);line-height:1.6}
.contact-cta__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.contact-cta__note{font-size:.88rem;color:var(--on-light-muted);border-top:1px solid var(--border-light);padding-top:14px;margin-top:6px!important}

/* cross-sell combi deals */
.combi-cross__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;margin-bottom:22px}
.combi-cross__head h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:.4rem 0 8px}
.combi-cross__head p{margin:0;color:var(--on-light-muted);max-width:52ch}
.combi-cross__head .ug-btn{margin-left:auto}
.combi-cross__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.combi-card{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--radius-lg);background:var(--ug-violet-800);color:#fff;text-decoration:none;position:relative;overflow:hidden;min-height:130px;transition:transform .15s ease,box-shadow .15s ease}
.combi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.combi-card__tag{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ug-amber-500)}
.combi-card__title{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;line-height:1.1;flex:1}
.combi-card__go{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:#fff}
.combi-card__go svg{width:17px;height:17px;fill:none;stroke:var(--ug-amber-500);stroke-width:2.5;flex:0 0 auto;transition:transform .15s}
.combi-card:hover .combi-card__go svg{transform:translateX(4px)}