/* ================================================================
   FAMILIEPAGINA /kleurfamilie/<slug>/ (KLEURFAMILIES.md, Kai 15-10-2026)
   Template: woocommerce/taxonomy-oz_kleurfamilie.php
   Alleen tokens en patronen die al bestaan:
   - kleurvakjes: zelfde regels als .oz-color-swatch op de productpagina
     (oz-variations-bcw/assets/css/oz-product-page.css), hier groter en
     gescoped, want dat bestand laadt alleen op productpagina's;
   - kop, kruimelpad en kleurknoppen: .oz-shop__* en .oz-shop-chip uit
     oz-blocks.css en shop-filter.css;
   - vragen: .oz-hp-faq-* uit homepage-v2.css.
   ================================================================ */

/* ── Kleurvakjes (patroon van de productpagina) ── */
.oz-kleurfamilie .oz-color-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 12px 6px;
}

.oz-kleurfamilie .oz-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  text-align: center;
}

.oz-kleurfamilie .oz-color-swatch .oz-swatch-img {
  width: calc(100% - 4px);
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid var(--oz-border);
  overflow: hidden;
  display: block;
  transition: border-color 0.2s var(--oz-ease), transform 0.2s var(--oz-ease);
}

.oz-kleurfamilie .oz-color-swatch .oz-swatch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oz-kleurfamilie .oz-color-swatch .oz-swatch-name {
  font-size: var(--oz-text-sm);
  font-weight: 500;
  color: var(--oz-text-body);
  line-height: 1.2;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.oz-kleurfamilie .oz-color-swatch .kf-omschrijving {
  font-size: var(--oz-text-xs);
  color: var(--oz-text-muted);
  line-height: 1.2;
}

.oz-kleurfamilie .oz-color-swatch:hover .oz-swatch-img,
.oz-kleurfamilie .oz-color-swatch:focus-visible .oz-swatch-img {
  transform: scale(1.04);
  border-color: var(--oz-text-muted);
}

/* ── Kruimelpad: zelfde opmaak als in de shop ── */
.oz-kleurfamilie .woocommerce-breadcrumb {
  font-size: var(--oz-text-sm);
  color: var(--oz-text-muted);
  margin: 0 0 8px;
}

.oz-kleurfamilie .woocommerce-breadcrumb a {
  color: var(--oz-text-muted);
}

.oz-kleurfamilie .woocommerce-breadcrumb a:hover {
  color: var(--oz-accent);
}

/* ── Springknoppen en kleurknoppen in de kop ── */
.kf-spring {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}

.kf-chips {
  border-bottom: 0;
  margin: 12px 0 0;
  padding: 0;
}

/* Gecentreerde knoppenrij onder een gecentreerde kop (blok op /kleuren/) */
.kf-chips--midden {
  justify-content: center;
}

.oz-shop-chip.is-actief {
  background: #FFF;
  border-color: var(--oz-accent);
  color: var(--oz-accent);
  font-weight: 600;
}

/* ── Blok per productlijn ── */
.kf-lijn {
  padding: 20px 0 24px;
  border-top: 1px solid var(--oz-border-light);
  scroll-margin-top: calc(var(--oz-header-height) + 16px);
}

.kf-lijn__kop {
  font-size: var(--oz-text-xl);
  margin: 0 0 4px;
}

.kf-lijn__meta {
  font-size: 14px;
  color: var(--oz-text-muted);
  margin: 0 0 14px;
}

.kf-lijn__meta a,
.kf-ook a {
  color: var(--oz-accent);
  font-weight: 600;
}

.kf-lijn__meta a {
  white-space: nowrap;
}

/* ── Stalenblok en vragen ── */
.kf-stalen {
  padding: 40px 0;
  margin-top: 16px;
}

.kf-knoppen {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kf-faq {
  padding-top: 40px;
  padding-bottom: 48px;
}

.kf-ook {
  max-width: 800px;
  margin: 20px auto 0;
  font-size: 14px;
}

@media (min-width: 1024px) {
  .kf-lijn {
    scroll-margin-top: calc(var(--oz-header-height-desktop) + 16px);
  }
}

@media (max-width: 768px) {
  .kf-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 12px -16px 0;
    padding: 0 16px 4px;
  }
  .kf-chips::-webkit-scrollbar {
    display: none;
  }
  .kf-chips .oz-shop-chip {
    white-space: nowrap;
  }
  /* Gecentreerde rij: op mobiel afbreken in plaats van vegen */
  .kf-chips.kf-chips--midden {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 12px 0 0;
    padding: 0;
  }
}

/* ── Grote kleurvlakken (Kai 16-10-2026, eindcontrole par. 10 A1) ──
   In plaats van kleine tegels met een emmer: het kleurvlak zelf groot, zoals een kleurenboek.
   Beeld uit oz_kf_kleurvlak() (bestaand beeld, eigen link). Uitsnede "links": Metallic Velvet
   heeft rechtsonder een potje. Uitsnede "hoek": geen los kleurvlak, dan de linkerbovenhoek van de
   productfoto, waar alleen de kleur staat; zo ook bij microcement en Metallic Velvet Duna, waar de
   productfoto de juiste kleur toont (Kai 16-10-2026). Op /gietvloer-kleuren/ vult het raster de
   breedte; de familiepagina's zetten met kf-raster een vast aantal kolommen (zie onderaan). */
.oz-kleurfamilie .oz-color-swatches.kf-vlakken {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 24px 16px;
}

.oz-kleurfamilie .kf-vlak {
  gap: 4px;
}

.oz-kleurfamilie .kf-vlak .oz-swatch-img {
  width: 100%;
  border-radius: 8px;
  border-width: 1px;
}

.oz-kleurfamilie .kf-vlak .oz-swatch-img img {
  object-fit: cover;
}

.oz-kleurfamilie .kf-vlak--links .oz-swatch-img img {
  object-position: left center;
}

.oz-kleurfamilie .kf-vlak--hoek .oz-swatch-img img {
  transform: scale(2.3);
  transform-origin: 0 0;
}

.oz-kleurfamilie .kf-vlak .oz-swatch-name {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--oz-text-primary);
}

.oz-kleurfamilie .kf-vlak .kf-omschrijving {
  font-size: 12px;
}

/* All-In-One als één regel met tekstlinks, zonder vakjes of prijs (optie B, Kai 16-10-2026) */
.kf-ook-aio {
  margin: 0;
  padding: 16px 0 24px;
  border-top: 1px solid var(--oz-border-light);
  font-size: 14px;
  line-height: 1.7;
  color: var(--oz-text-muted);
}

.kf-ook-aio a {
  color: var(--oz-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kf-ook-aio a:hover {
  color: var(--oz-text-primary);
}

/* ── /gietvloer-kleuren/: één raster met filterknoppen (Kai 16-10-2026, voorbeeld k16/k18) ── */
.gk-raster-blok .gk-filter {
  justify-content: center;
  margin: 0 0 28px;
  padding: 0;
}

.gk-raster-blok button.oz-shop-chip {
  cursor: pointer;
}

.gk-raster-blok .gk-raster {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gk-raster-blok .gk-raster li[hidden],
.gk-raster-blok .gk-familielink a[hidden] {
  display: none;
}

.gk-raster-blok .gk-familielink {
  text-align: center;
  margin: 24px auto 0;
  font-size: 14px;
}

.gk-raster-blok .gk-familielink a {
  color: var(--oz-accent);
  font-weight: 600;
}

.gk-raster-blok .gk-onder {
  text-align: center;
  margin-top: 36px;
}

.gk-raster-blok .gk-onder p {
  margin: 10px auto 0;
  font-size: 14px;
  color: var(--oz-text-muted);
}

.gk-tekst {
  max-width: 820px;
  margin: 24px auto 0;
  padding: 0 var(--gap, 20px);
}

@media (max-width: 768px) {
  .gk-raster-blok .gk-filter.kf-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    margin: 0 0 20px;
    padding: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .oz-kleurfamilie .oz-color-swatches.kf-vlakken {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
}

/* ── Familiepagina: wandraster met kaartjes en fotorij (Kai 16-10-2026, voorbeeld k39 tot en met k51) ──
   Telefoon 2, iPad staand 4, vanaf 900 px 6 vlakken naast elkaar. Microcement en Metallic Velvet lopen
   door in het raster van Original: hun kop staat in een kaartje op de plek van een vlak. Een vloerlijn
   met 1 tot 3 tinten krijgt een brede kop naast de vlakken (kf-s6-*, kf-s4-*: samen één rij). */
.oz-kleurfamilie .oz-color-swatches.kf-raster {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 12px;
}

.kf-kaart {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--oz-bg-warm);
  border-radius: var(--oz-radius);
}

.kf-kaart--smal {
  grid-column: auto;
}

.kf-kaart .oz-eyebrow {
  margin: 0;
}

.kf-kaart__kop {
  font-size: var(--oz-text-lg);
  line-height: 1.2;
  margin: 2px 0 0;
}

.kf-kaart__meta {
  font-size: 13px;
  line-height: 1.45;
  color: var(--oz-text-muted);
  margin: 0;
}

.kf-kaart__link {
  margin-top: auto;
  padding-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--oz-accent);
}

.kf-kaart--breed .kf-kaart__kop {
  font-size: var(--oz-text-xl);
}

.kf-kaart--breed .kf-kaart__meta {
  font-size: 14px;
  max-width: 560px;
}

.kf-kaart--breed .kf-kaart__link {
  margin-top: 8px;
}

/* Eén vloertint op de telefoon: het vlak over de volle breedte, 2 : 1 */
@media (max-width: 599px) {
  .oz-kleurfamilie .kf-raster--een .kf-vlak {
    grid-column: 1 / -1;
  }

  .oz-kleurfamilie .kf-raster--een .kf-vlak .oz-swatch-img {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 600px) {
  .oz-kleurfamilie .oz-color-swatches.kf-raster {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
  }

  .kf-kaart,
  .kf-kaart--smal {
    grid-column: auto;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .kf-kaart.kf-s4-1 { grid-column: span 1; }
  .kf-kaart.kf-s4-2 { grid-column: span 2; }
  .kf-kaart.kf-s4-3 { grid-column: span 3; }
}

@media (min-width: 900px) {
  .oz-kleurfamilie .oz-color-swatches.kf-raster {
    grid-template-columns: repeat(6, 1fr);
  }

  .kf-kaart.kf-s6-3 { grid-column: span 3; }
  .kf-kaart.kf-s6-4 { grid-column: span 4; }
  .kf-kaart.kf-s6-5 { grid-column: span 5; }
}

/* Rij projectfoto's: vier naast elkaar, op de telefoon twee */
.kf-fotorij__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 4px;
}

.kf-fotorij__raster figure {
  margin: 0;
}

.kf-fotorij__raster img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--oz-radius);
  display: block;
}

.kf-fotorij__raster figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--oz-text-muted);
}

.kf-fotorij__raster figcaption strong {
  color: var(--oz-text-primary);
  font-weight: 600;
}

/* Foto met een kleurpagina: foto en bijschrift samen één link (Gemini r4 N3, Kai 19-10-2026).
   De kleurnaam in de accentkleur laat zien dat je kunt tikken. */
.kf-fotorij__raster a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.kf-fotorij__raster a figcaption strong {
  color: var(--oz-accent);
}

.kf-fotorij__raster a figcaption strong::after {
  content: " \2192";
}

.kf-fotorij__raster a:hover figcaption strong,
.kf-fotorij__raster a:focus-visible figcaption strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kf-fotorij__raster a:hover img {
  opacity: 0.92;
}

@media (max-width: 768px) {
  .kf-fotorij__raster {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ── /kleuren/: lichte kop zoals op de familiepagina's (Kai 16-10-2026, eindcontrole R5) ──
   De klasse oz-rp2-ksh-top zet in header.php de vaste witte menubalk aan in plaats van de
   doorzichtige balk over een donkere hero. De zandkleur van die kop wordt hier wit, zoals de kop
   van de familiepagina's. Het blok "Kleuren per kleurfamilie" staat in dezelfde band, met de
   kleurknoppen in één rij zoals op de familiepagina's. Alleen op deze kop (oz-kleuren-kop). */
.oz-rp2-ksh-top.oz-kleuren-kop {
  background: var(--oz-bg-page);
}

.oz-kleuren-kop .oz-shop__header {
  padding: 8px 0 20px;
}

.oz-kleuren-kop .oz-shop__title {
  margin: 0 0 4px;
}

.oz-kleuren-kop .kf-lijn {
  padding-bottom: 32px;
}