/* Additions on top of the Webflow stylesheet (funpix.css), for pages rebuilt in code. */

/* Key figures on the XXL LIVE page: large numbers instead of light card titles. */
.fx-cijfers .aiv-h3 { font-family: Oswald, sans-serif; font-size: 44px; font-weight: 700; letter-spacing: -0.02em; color: #e60046; margin-bottom: 6px; }

/* Before/after slider (public/webflow/voorna.js). */
.vn { position: relative; margin: 0; overflow: hidden; background: #232024; user-select: none; touch-action: pan-y; box-shadow: 0 18px 50px rgb(0 0 0 / 0.25); }
.vn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn__na, .vn__voor { position: absolute; inset: 0; }
.vn__voor { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vn__lijn { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; z-index: 2; }
.vn__greep { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #e60046; color: #fff; font: 700 15px/1 Montserrat, sans-serif; box-shadow: 0 6px 20px rgb(0 0 0 / 0.3); }
.vn__label { position: absolute; top: 14px; z-index: 2; pointer-events: none; padding: 7px 12px; font: 700 11px/1 Montserrat, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgb(35 32 36 / 0.7); }
.vn__label--voor { left: 14px; }
.vn__label--na { right: 14px; background: #e60046; }
.vn__schuif { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.vn:has(.vn__schuif:focus-visible) { outline: 3px solid #e60046; outline-offset: 3px; }
.vn figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 2; pointer-events: none; padding: 7px 12px; font: 500 12px/1.3 Montserrat, sans-serif; background: rgb(255 255 255 / 0.9); color: #232024; }

/* Link to funpix.ai under the buttons on the AI Photobooth page. */
.fx-ai-link { margin-top: 22px; }
.fx-ai-link .aiv-text-link { color: #fff; }

/* Two before/after sliders side by side (XXL LIVE page). */
.fx-voorna-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }

/* Hand-built case pages: show the whole group photo (3:2) instead of a tall crop. */
.case-detail-v3-hero-image.fx-case-hero { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
.fx-ai-meer { margin-top: 40px; }

/* Forms: Turnstile check and buttons must fit a phone screen (390px). */
.cf-turnstile { max-width: 100%; margin: 16px 0 0; }
.offerte-stap-acties { flex-wrap: wrap; }
@media screen and (max-width: 479px) {
  .offerte-stap-acties { flex-direction: column-reverse; align-items: stretch; }
  .offerte-stap-acties .offerte-stap-knop-secundair { margin-right: 0; }
  .button-blue.offerte-verstuur { width: 100%; }
}

/* Cookie banner (public/webflow/cookies.js) */
.fx-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 10000;
  max-width: 720px; margin: 0 auto; padding: 20px 24px;
  background: #fff; color: #333; border-top: 4px solid #e60046;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .25);
  font-family: Montserrat, sans-serif; font-size: 15px; line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.fx-cookies p { flex: 1 1 320px; margin: 0; }
.fx-cookies a { color: #e60046; text-decoration: underline; }
.fx-cookies-knoppen { display: flex; gap: 12px; flex: 0 0 auto; }
.fx-cookies button {
  min-height: 44px; padding: 10px 22px; border: 2px solid #e60046; border-radius: 4px;
  font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer;
}
.fx-cookies-ja { background: #e60046; color: #fff; }
.fx-cookies-nee { background: #fff; color: #e60046; }
@media screen and (max-width: 479px) {
  .fx-cookies { left: 8px; right: 8px; bottom: 8px; padding: 16px; }
  .fx-cookies-knoppen { width: 100%; }
  .fx-cookies button { flex: 1; }
}

/* Privacy- en cookieverklaring (/privacy) */
.fx-privacy { max-width: 800px; margin: 0 auto 60px; text-align: left; font-family: Montserrat, sans-serif; }
.fx-privacy li, .fx-privacy td, .fx-privacy th { font-family: Montserrat, sans-serif; line-height: 1.6; }
.fx-privacy h3 { margin-top: 32px; }
.fx-privacy ul { margin-bottom: 16px; }
.fx-privacy a { color: #e60046; }
.fx-privacy table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; display: block; overflow-x: auto; }
.fx-privacy th, .fx-privacy td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid #e5e5e5; }
.fx-privacy th { font-weight: 700; }

/* Portfolio and FAQ: the red first line sat right under the logo (Gertruud, 2026-11-02). */
.portfoliov2-kicker, .faqv2-eyebrow { margin-top: 56px; }
@media screen and (max-width: 767px) {
  .portfoliov2-kicker, .faqv2-eyebrow { margin-top: 40px; }
}

/* XXL page: "Bekijk alle veelgestelde vragen" had no space above it (Gertruud, 2026-11-02). */
.fx-faq-meer { margin-top: 32px; }

/* Hand-built blog posts (src/pages/post/*.astro): subheadings, lists and the before/after slider in the article text. */
.fx-blog h2 { margin: 36px 0 12px; font-size: 26px; line-height: 1.25; color: #333; }
.fx-blog ul { margin: 0 0 20px; padding-left: 22px; }
.fx-blog li { margin-bottom: 4px; }
.fx-blog a { color: #e60046; }
.fx-blog-media { margin: 28px 0; }
.fx-blog-media .vn { width: 100%; max-width: none; margin: 0; display: block; }

/* Theme party pages (src/pages/thema/[slug].astro): breadcrumb, backgrounds list, photo stack, theme cards. */
.fx-kruimel { color: inherit; text-decoration: none; }
.fx-kruimel:hover { text-decoration: underline; }
.fx-thema-lijst { margin: 16px 0 0; padding-left: 20px; }
.fx-thema-lijst li { margin-bottom: 6px; }
.fx-thema-fotos { display: grid; gap: 16px; }
.fx-thema-kaart { color: inherit; text-decoration: none; display: block; }
.fx-thema-kaart img { aspect-ratio: 4 / 3; object-fit: cover; }
.fx-thema-kaart:hover .aiv-h3 { color: #e60046; }
.fx-pill { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: #e60046; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.fx-hero-noot { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.fx-hero-noot a { color: #fff; }
.fx-thema-foto { margin: 0; }
.fx-thema-foto figcaption { margin-top: 6px; font-size: 12px; color: #777; }
.fx-ai-voorbeeld { margin-top: 40px; align-items: center; }
/* Theme without a photo yet (concept in src/data/themas.ts). */
.fx-foto-volgt { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #ded6d3; color: #777; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Homepage product card: "green screen photobooth" on one line (Alex, 2026-11-02). */
@media screen and (min-width: 768px) { .service-title.home-fase1-product-card-title.fx-een-regel { white-space: nowrap; padding-left: 0; padding-right: 0; } }

/* Homepage stats (adjust() in the importer adds .fx-stats): icon next to its own number, dividers between the columns. */
.fx-stats .icon-wrapper { border-right: 0; height: auto; padding-top: 6px; }
.fx-stats .icon-wrapper:empty { display: none; }
.fx-stats .stats-col + .stats-col { border-left: 2px solid #ffffff4a; padding-left: 24px; }
@media screen and (max-width: 767px) { .fx-stats .stats-col + .stats-col { border-left: 0; padding-left: 0; } }

/* Homepage before/after block: more room above "Bekijk Green Screen LIVE XXL fotostudio" (Alex, 2026-11-02). */
.fx-voorna .aiv-copy + p { margin-top: 28px; }
.fx-stats .icon-block:has(.icon-wrapper img):not(.home-fase1-stats-content-inline) { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
.fx-stats .icon-block:has(.icon-wrapper img):not(.home-fase1-stats-content-inline) .icon-wrapper { grid-row: 1 / span 2; grid-column: 1; float: none; margin: 0; padding: 0; }
.fx-stats .icon-block:has(.icon-wrapper img):not(.home-fase1-stats-content-inline) .stat-title { grid-column: 2; }

/* Page titles that were an H2 in Webflow are now an H1 (fx-h1) with the H2 look. h1:where() keeps the specificity of a
   plain h1, so class rules such as .page-header-title still win, as they did on the H2. */
h1:where(.fx-h1) { margin-top: 0; margin-bottom: 30px; font-family: Oswald, sans-serif; font-size: 33px; font-weight: 700; line-height: 33px; }
@media screen and (max-width: 767px) { h1:where(.fx-h1) { margin-bottom: 22px; font-size: 28px; line-height: 23px; } }
@media screen and (max-width: 479px) { h1:where(.fx-h1) { margin-bottom: 18px; font-size: 24px; line-height: 25px; } }

/* Homepage slider: only the first slide's photo loads with the page; slides 2-5 follow after the load event
   (class fx-dias on <html>, set in Webflow.astro). Saves ~800 KB before the page is usable. */
html:not(.fx-dias) .home-slide-2, html:not(.fx-dias) .home-slide-3,
html:not(.fx-dias) .home-slide-4, html:not(.fx-dias) .home-slide-5 { background-image: none !important; }

/* Rental request form on /fotoprinter-verhuur (2026-11-03): white card in the red closing section. */
.fx-huur .fx-huur-form { max-width: 680px; margin: 30px auto 0; padding: 35px 40px; background: #fff; border-radius: 2px; text-align: left; }
.fx-huur .fx-huur-rij { display: flex; gap: 16px; }
.fx-huur .fx-huur-rij > .fx-huur-veld { flex: 1; min-width: 0; }
.fx-huur .fx-huur-veld { margin-bottom: 14px; }
.fx-huur .fx-huur-label { margin-bottom: 5px; color: #333; font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 700; }
.fx-huur .fx-huur-label span { color: #777; font-weight: 400; }
.fx-huur .field { width: 100%; text-align: left; font-family: Montserrat, sans-serif; color: #333; }
.fx-huur textarea.field { min-height: 110px; }
.fx-huur .fx-huur-knop { width: 100%; margin-top: 8px; }
.fx-huur .w-form-done, .fx-huur .w-form-fail { color: #333; }
.fx-huur .fx-huur-bel { margin: 22px 0 0; color: #fff; font-family: Montserrat, sans-serif; }
.fx-huur .fx-huur-bel a { color: #fff; font-weight: 700; }
@media screen and (max-width: 767px) {
  .fx-huur .fx-huur-form { padding: 25px 20px; }
  .fx-huur .fx-huur-rij { display: block; }
}

/* Photo of the Green Screen photobooth card on /producten (Alex, 2026-11-05): a business event (KLM 25 years) instead of
   the children's party. Swap the file here. */
.products-v2-media-basic { background-image: linear-gradient(#0a111800, #0a111826), url(/images/klant/klm/klm3.webp); background-position: 50% 35%; }

/* Archive page (/archief): year links and one block per year. */
.fx-jaren { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 48px; }
.fx-jaren-link { padding: 8px 14px; border: 1px solid #d9d6da; background: #fff; color: #232024; font: 600 14px/1 Montserrat, sans-serif; text-decoration: none; }
.fx-jaren-link:hover, .fx-jaren-link:focus-visible { border-color: #e60046; color: #e60046; }
.fx-archief-jaar { scroll-margin-top: 100px; }
.fx-archief-jaar + .fx-archief-jaar { margin-top: 56px; }
.fx-archief-kop { display: flex; align-items: baseline; gap: 14px; font-family: Oswald, sans-serif; font-size: 36px; font-weight: 700; color: #e60046; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid #d9d6da; }
.fx-archief-aantal { font: 500 14px/1 Montserrat, sans-serif; color: #6b666d; }
.fx-archief-knop { margin-top: 40px; text-align: center; }
/* Many cases per page: smaller cards, three in a row on desktop. */
.fx-archief-jaar .home-recent-v2-card { min-height: 320px; }
@media (min-width: 992px) { .fx-archief-jaar .home-recent-v2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .fx-archief-jaar .home-recent-v2-card { min-height: 280px; } }