/**
 * Vloeren Kameraad — Utilities
 * Minimale helper-klassen. Semantisch benoemd, geen utility-soup.
 * Importeer als laatste in je WordPress theme style.css.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * LAYOUT HELPERS
 * ─────────────────────────────────────────────────────────────────────────── */

/* Twee-koloms grid (gelijk) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 1024px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* Drie-koloms grid */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Vier-koloms grid */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Formulier + sidebar (2/3 + 1/3) */
.grid-form-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .grid-form-sidebar {
    grid-template-columns: 2fr 1fr;
  }
}

/* Content + sidebar (3/4 + 1/4) */
.grid-content-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .grid-content-sidebar {
    grid-template-columns: 3fr 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * GEEN HORIZONTALE SCROLL (site-breed)
 * Stray overflow rekt de layout-viewport (ICB) op waardoor fixed bars
 * (header, announcement, sticky, cookie) breder dan het scherm worden en
 * de pagina horizontaal scrollt. `clip` clipt dit weg zonder een
 * scroll-container te maken -> position:sticky blijft werken (i.t.t. hidden).
 * ─────────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * MOBILE GRID OVERRIDE
 * Inline grid-template-columns in page-templates werken niet responsive.
 * Forceer 1-kolom op mobile; desktop behoudt de inline waarde.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Structurele grids -> 1 kolom op mobiel, ongeacht nesting-diepte.
     Vangt inline repeat(3..7), asymmetrische (1fr 2fr / 2fr 1fr / 1fr 1fr 1fr)
     en alle genoemde structurele grid-classes. Tweekoloms 1fr 1fr (stats/
     feature-paren) blijft bewust 2-koloms, behalve directe container/section
     children (bestaand gedrag behouden). */
  [style*="repeat(3"],
  [style*="repeat(4"],
  [style*="repeat(5"],
  [style*="repeat(6"],
  [style*="repeat(7"],
  [style*="1fr 2fr"],
  [style*="2fr 1fr"],
  [style*="1fr 1fr 1fr"],
  .collectie-grid,
  .diensten-grid,
  .vloertype-grid,
  .werkproces-grid,
  .waarom-pvc-grid,
  .showroom-grid,
  .kennisbank-grid,
  .regio-grid,
  .related-projects-grid,
  .project-detail-grid,
  .egaliseren-grid,
  .grid-content-sidebar,
  .container > div[style*="grid-template-columns"],
  .container > div > div[style*="grid-template-columns"],
  section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Reset child-spans: inline grid-column/grid-row span 2/3 (desktop featured
     cards) maken op een 1-koloms grid impliciete kolommen -> scheve layout.
     Op mobiel is elk item toch volle breedte, dus span -> auto. */
  [style*="grid-column"] {
    grid-column: auto !important;
  }
  [style*="grid-row"] {
    grid-row: auto !important;
  }

  /* Inline flex-rijen (icoon + tekst + knop callouts e.d.) passen op mobiel
     vaak niet -> nowrap duwt content buiten het scherm = horizontale scroll.
     Laat ze wrappen; korte rijen blijven vanzelf op 1 regel. */
  [style*="display:flex"]:not([style*="flex-direction:column"]) {
    flex-wrap: wrap;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * VERGELIJKINGSTABELLEN OP MOBIEL (Plak-PVC vs Klik-PVC e.d.)
 * Deze 3-koloms grids (1fr 1fr 1fr) mogen NIET naar 1 kolom collapsen — dan is
 * onduidelijk welke waarde bij klik of plak hoort. Houd 3 koloms maar compact
 * zodat de tabel binnen het scherm past. Komt NA de collapse-regel hierboven,
 * dus wint bij gelijke specificiteit. (Andere 1fr 1fr 1fr grids zoals
 * ;gap:3rem collapsen wel, want die matchen deze selectors niet.)
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  [style*="1fr 1fr 1fr;text-align:center"],
  [style*="1fr 1fr 1fr;background"] {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.1fr) !important;
  }
  [style*="1fr 1fr 1fr;text-align:center"] > div,
  [style*="1fr 1fr 1fr;background"] > div {
    padding: 0.5rem 0.4rem !important;
  }
  [style*="1fr 1fr 1fr;text-align:center"] span,
  [style*="1fr 1fr 1fr;background"] span {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }
  /* "Aanbevolen"-badge naast Plak-PVC-kop mag onder de kop wrappen */
  [style*="1fr 1fr 1fr;text-align:center"] [style*="display:flex"] {
    flex-wrap: wrap;
    gap: 0.25rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SECTIE ACHTERGRONDEN
 * ─────────────────────────────────────────────────────────────────────────── */

.section-light {
  background-color: var(--color-cream);
  padding: var(--section-pad-y) 0;
}

.section-white {
  background-color: var(--color-white);
  padding: var(--section-pad-y) 0;
}

.section-dark {
  background-color: var(--color-charcoal);
  padding: var(--section-pad-y) 0;
}

.section-sm {
  padding: var(--section-pad-y-sm) 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * TEKST UITLIJNING
 * ─────────────────────────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ─────────────────────────────────────────────────────────────────────────────
 * AFBEELDINGEN
 * ─────────────────────────────────────────────────────────────────────────── */

/* Volledige hoogte afbeelding (voor split-layouts) */
.img-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Afbeelding wrapper met vaste hoogte */
.img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
}

.img-wrapper-hero {
  min-height: 480px;
}

.img-wrapper-card {
  height: 13rem;   /* 208px */
}

.img-wrapper-card-lg {
  height: 15rem;   /* 240px */
}

/* Gradient overlay op afbeelding */
.img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 26, 24, 0.7) 0%,
    transparent 60%
  );
}

/* Zoom-effect bij hover (op parent) */
.img-zoom img {
  transition: transform var(--transition-slower);
}

.img-zoom:hover img {
  transform: scale(1.05);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ZICHTBAARHEID
 * ─────────────────────────────────────────────────────────────────────────── */

.hidden { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Verberg op mobiel, toon op desktop */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* Toon op mobiel, verberg op desktop */
.hide-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ANIMATIES (CSS-only, vervangt Framer Motion)
 * ─────────────────────────────────────────────────────────────────────────── */

/* Fade in van onderen (voor cards, secties) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale in (voor popup) */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Slide in van links (voor mobiel menu) */
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Slide in van rechts */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Klassen om animaties toe te passen */
.animate-fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease forwards;
}

.animate-scale-in {
  animation: scaleIn 0.35s ease forwards;
}

/* Intersection Observer: elementen beginnen onzichtbaar */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Vertraagde reveal voor staggered effecten */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ─────────────────────────────────────────────────────────────────────────────
 * BREADCRUMBS
 * ─────────────────────────────────────────────────────────────────────────── */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  margin-bottom: var(--space-6);
}

.breadcrumb-item {
  color: rgba(240, 237, 230, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item:hover {
  color: var(--color-gold);
}

.breadcrumb-separator {
  color: rgba(240, 237, 230, 0.4);
  font-size: 0.625rem;
}

.breadcrumb-current {
  color: var(--color-cream-dark);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LEVENSDUUR BALK
 * ─────────────────────────────────────────────────────────────────────────── */

.levensduur-bar {
  height: 0.5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-cream-mid);
}

.levensduur-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-gold);
  transition: width 0.8s ease;
}

.levensduur-bar-fill-green {
  background-color: var(--color-green);
}

.levensduur-bar-fill-gray {
  background-color: #aaa;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * FLOATING WHATSAPP KNOP
 * ─────────────────────────────────────────────────────────────────────────── */

/* Bel-knop boven WhatsApp, gestapeld linksonder (desktop) */
.float-contact {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.float-contact-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl);
  text-decoration: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.float-contact-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-2xl);
}

.float-call {
  background-color: oklch(0.68 0.08 75); /* warm-goud, site-accent */
  color: oklch(0.12 0.005 65);
}

.float-whatsapp {
  background-color: #25D366;
  color: #fff;
}

/* Op mobiel neemt de sticky-bar het over → float verbergen */
@media (max-width: 767px) {
  .float-contact {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * STICKY MOBIELE BALK (onderaan op mobiel)
 * ─────────────────────────────────────────────────────────────────────────── */

.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background-color: var(--color-charcoal);
  border-top: 1px solid var(--color-charcoal-light);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .mobile-sticky-bar {
    display: none;
  }
}

.mobile-sticky-bar .btn {
  flex: 1;
  font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * DIVIDERS
 * ─────────────────────────────────────────────────────────────────────────── */

.divider {
  border: none;
  border-top: 1px solid var(--color-cream-mid);
  margin: var(--space-8) 0;
}

.divider-dark {
  border-top-color: var(--color-charcoal-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SECTIE HEADER (gecentreerd)
 * ─────────────────────────────────────────────────────────────────────────── */

.section-header {
  text-align: center;
  margin-bottom: var(--space-14);
}

.section-header-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .section-header-title {
    font-size: var(--text-4xl);
  }
}

.section-header-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 36rem;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* Dark variant */
.section-header-dark .section-header-title {
  color: var(--color-white);
}

.section-header-dark .section-header-subtitle {
  color: var(--color-cream-dark);
}