/* ============================================================
   Photobooth Tilburg — pages.css
   Gedeelde componenten voor de content-pagina's (photobooths,
   gelegenheden, regio, reviews, faq). Geladen via $head_extra.
   Donker neon-thema; werkt samen met site.css.
   ============================================================ */

/* ---- page hero ---- */
.page-hero{position:relative;max-width:1200px;margin:0 auto;padding:64px 40px 36px;}
.page-hero .eyebrow{display:block;margin-bottom:16px;}
.page-hero h1{margin:0 0 18px;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(36px,6.4vw,64px);line-height:.96;text-transform:uppercase;letter-spacing:-.02em;max-width:900px;}
.page-hero__lead{margin:0;font:400 18px/1.6 'Space Grotesk',sans-serif;color:rgba(255,255,255,.62);max-width:640px;}
.grad{background:linear-gradient(90deg,#00e5ff,#7c4dff,#ff2e9a,#ffc107,#00e5ff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shim 5s linear infinite;}

/* ---- anchor chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.chip{font:700 12px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:11px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.82);transition:border-color .2s,color .2s;}
.chip:hover{border-color:rgba(255,255,255,.6);color:#fff;}

.hr{max-width:1200px;margin:0 auto;height:1px;background:rgba(255,255,255,.08);}
.booth-sec{scroll-margin-top:92px;}

/* ---- booth-detail rij (gallery + tekst) ---- */
.booth-detail{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:stretch;}
.booth-detail--rev{grid-template-columns:.95fr 1.05fr;}
.booth-gallery{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:12px;min-height:460px;}
.booth-gallery img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block;}
.booth-gallery--bigleft img:first-child{grid-row:1/3;}
.booth-gallery--bigright{grid-template-columns:1fr 1.4fr;}
.booth-gallery--bigright img:nth-child(2){grid-column:2;grid-row:1/3;}

/* feature-lijst met ▸ */
.flist{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;}
.flist > div{display:flex;gap:10px;align-items:flex-start;font:400 14px/1.5 'Space Grotesk',sans-serif;color:rgba(255,255,255,.75);}
.detail-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.detail-head__line{width:30px;height:1px;background:rgba(255,255,255,.2);}
.detail-h2{margin:0 0 16px;font:900 clamp(28px,4.4vw,40px)/1.0 'Archivo',sans-serif;text-transform:uppercase;}
.detail-p{margin:0 0 14px;font:400 16px/1.6 'Space Grotesk',sans-serif;color:rgba(255,255,255,.68);}
.price2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}

/* ---- generieke kaartgrids ---- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.card{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#0c0c0e;padding:24px;}

/* ---- band-sectie (volle breedte, subtiele bg) ---- */
.band{border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.015);}
.band--btm{border-bottom:1px solid rgba(255,255,255,.08);}

/* ---- CTA-band ---- */
.cta-band{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(124,77,255,.18),rgba(255,46,154,.12) 50%,rgba(0,229,255,.12));padding:56px 48px;}
.cta-band--center{text-align:center;}
.cta-band__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0%,rgba(0,229,255,.18),transparent 55%);}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;}
.cta-band--center .cta-actions{justify-content:center;}
.btn-white{display:inline-flex;align-items:center;padding:17px 32px;border-radius:100px;font:800 14px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#050505;background:#fff;}

/* ---- responsive ---- */
@media(max-width:980px){
  .cards-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .page-hero{padding:44px 20px 28px;}
  .booth-detail,.booth-detail--rev{grid-template-columns:1fr;gap:24px;}
  .booth-gallery{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;min-height:0;}
  .booth-gallery img{aspect-ratio:4/3;height:auto;}
  .booth-gallery--bigleft img:first-child,
  .booth-gallery--bigright img:nth-child(2){grid-row:auto;grid-column:auto;}
  .cta-band{padding:40px 24px;}
}
@media(max-width:560px){
  .cards-3,.cards-2,.price2{grid-template-columns:1fr;}
}

/* ---- gelegenheden: occasion-kaarten ---- */
.occ{display:grid;grid-template-columns:.85fr 1.15fr;border-radius:20px;overflow:hidden;}
.occ--rev{grid-template-columns:1.15fr .85fr;}
.occ > img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block;}
.occ__body{padding:34px 38px;}
.occ__tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{font:600 12px/1 'Space Grotesk',sans-serif;padding:7px 12px;border-radius:100px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);}
.occ h2{margin:0 0 12px;font:900 clamp(24px,3.4vw,32px)/1.0 'Archivo',sans-serif;text-transform:uppercase;}
.occ p{margin:0 0 18px;font:400 15px/1.6 'Space Grotesk',sans-serif;color:rgba(255,255,255,.68);}
.occ__tip{font:800 11px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:100px;}
@media(max-width:760px){
  .occ,.occ--rev{grid-template-columns:1fr;}
  .occ > img{min-height:200px;}
  .occ--rev > img{order:-1;}
  .occ__body{padding:26px 22px;}
}

/* ---- faq accordeon (native <details>) ---- */
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-list details{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#0c0c0e;overflow:hidden;transition:border-color .25s;}
.faq-list details[open]{border-color:rgba(124,77,255,.4);}
.faq-list summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;font:700 clamp(15px,2.4vw,17px)/1.3 'Archivo',sans-serif;color:#fff;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-plus{flex:none;width:24px;height:24px;position:relative;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:#7c4dff;border-radius:2px;}
.faq-plus::before{left:50%;top:4px;width:2px;height:16px;transform:translateX(-50%);}
.faq-plus::after{top:50%;left:4px;height:2px;width:16px;transform:translateY(-50%);}
.faq-list details[open] .faq-plus{transform:rotate(135deg);}
.faq-body{padding:0 26px 24px;font:400 15px/1.65 'Space Grotesk',sans-serif;color:rgba(255,255,255,.66);}
.faq-body a{color:#b79bff;border-bottom:1px solid rgba(183,155,255,.5);}

/* ---- reviews: hero met rating-box ---- */
.rev-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;}
@media(max-width:860px){ .rev-hero{grid-template-columns:1fr;gap:28px;} }

/* ---- regio: uitgelichte plaats ---- */
.regio-feat{display:grid;grid-template-columns:1.1fr .9fr;border-radius:22px;overflow:hidden;}
.regio-feat > img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block;}
@media(max-width:860px){
  .regio-feat{grid-template-columns:1fr;}
  .regio-feat > img{min-height:230px;order:-1;}
}