/* ========================================
   Flowix - Blogoverzicht (bl-). Laadt na site-2026.css en p-artikel.css.
   ======================================== */
.bl-kop { padding-bottom: 44px; }
.bl-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.bl-filter { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--fx-wit); box-shadow: inset 0 0 0 1.5px var(--fx-lijn), var(--fx-schaduw-s); font-weight: 700; font-size: 0.95rem; color: var(--fx-ink-2); transition: background-color 0.3s var(--fx-ease), color 0.3s, transform 0.4s var(--fx-ease), box-shadow 0.3s; }
.bl-filter:hover { transform: translateY(-2px); color: var(--fx-ink); }
.bl-filter.is-actief { background: var(--fx-ink); color: #fff; box-shadow: 0 14px 26px -14px rgba(26, 20, 16, 0.7); }
.bl-sectie { padding: 12px 0 60px; }
.bl-sectie [hidden] { display: none !important; }
.bl-in { animation: fx-kind 0.6s var(--fx-ease) backwards; }

.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-tag { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; background: var(--fx-perzik); color: var(--fx-oranje-tekst); font-size: 0.82rem; font-weight: 700; }
.bl-tag--donker { background: var(--fx-ink); color: #fff; }
.bl-tag--wit { background: var(--fx-wit); color: var(--fx-ink); }
.bl-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; color: var(--fx-ink-2); }
.bl-meta span { display: inline-flex; align-items: center; gap: 7px; }
.bl-meta .fx-i { color: var(--fx-oranje-tekst); }
.bl-uittreksel { color: var(--fx-ink-2); }
.bl-lees { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.bl-lees .fx-i { transition: transform 0.4s var(--fx-ease); }
a:hover > * .bl-lees .fx-i, a:hover > .bl-lees .fx-i, .bl-kaart:hover .bl-lees .fx-i, .bl-case:hover .bl-lees .fx-i { transform: translateX(5px); }

/* uitgelicht */
.bl-uitgelicht { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); border-radius: var(--fx-r-xl); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), 0 50px 90px -55px rgba(26, 20, 16, 0.5); overflow: hidden; transition: transform 0.6s var(--fx-ease), box-shadow 0.6s var(--fx-ease); }
.bl-uitgelicht:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--fx-lijn), 0 60px 100px -50px rgba(184, 60, 6, 0.55); }
.bl-uitgelicht-tekst { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; padding: clamp(28px, 4.4vw, 64px); }
.bl-uitgelicht h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.02; letter-spacing: -0.03em; }
.bl-uitgelicht .bl-uittreksel { font-size: 1.1rem; max-width: 50ch; }
.bl-uitgelicht-beeld { position: relative; overflow: hidden; display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); background: var(--fx-verloop); }
.bl-uitgelicht-beeld::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%); }
.bl-uitgelicht-beeld::after { content: ''; position: absolute; right: -110px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent); }
.bl-jaar { position: absolute; z-index: 1; left: 22px; bottom: -34px; font-family: var(--fx-display); font-weight: 800; font-size: clamp(7rem, 13vw, 12rem); line-height: 1; letter-spacing: -0.06em; color: rgba(26, 20, 16, 0.13); }
.bl-trends { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; width: min(100%, 420px); display: grid; gap: 10px; }
.bl-trends li { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--fx-schaduw-m); font-weight: 700; font-size: 0.98rem; line-height: 1.25; transition: transform 0.5s var(--fx-ease); }
.bl-trends li:nth-child(odd) { transform: translateX(-14px) rotate(-0.800deg); } .bl-trends li:nth-child(even) { transform: translateX(14px) rotate(0.800deg); }
.bl-uitgelicht:hover .bl-trends li { transform: none; }
.bl-trends b { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--fx-ink); color: var(--fx-oranje-licht); font-family: var(--fx-display); font-weight: 800; }

/* case */
.bl-case { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: 18px; padding: clamp(28px, 4vw, 56px); border-radius: var(--fx-r-xl); background: linear-gradient(140deg, var(--fx-perzik), var(--fx-perzik-2)); transition: transform 0.6s var(--fx-ease), box-shadow 0.6s var(--fx-ease); }
.bl-case:hover { transform: translateY(-6px); box-shadow: 0 50px 80px -50px rgba(184, 60, 6, 0.6); }
.bl-case-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.bl-case h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.05; }
.bl-case-cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bl-cijfer { display: grid; gap: 6px; padding: 22px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); }
.bl-cijfer b { font-family: var(--fx-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -0.03em; }
.bl-cijfer span { font-size: 0.9rem; color: var(--fx-ink-2); }
.bl-cijfer--groot { grid-column: 1 / -1; background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 30px 50px -30px rgba(255, 106, 18, 0.9); }
.bl-cijfer--groot b { font-size: clamp(3rem, 5vw, 4.4rem); } .bl-cijfer--groot span { color: var(--fx-ink); font-weight: 500; }

/* kaarten */
.bl-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.fx-js .bl-raster[data-toon] { opacity: 1; transform: none; }
.bl-kaart { display: flex; flex-direction: column; border-radius: var(--fx-r-xl); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-s); overflow: hidden; transition: transform 0.6s var(--fx-ease), box-shadow 0.6s var(--fx-ease); }
.bl-kaart:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-m); }
.bl-omslag { position: relative; height: 200px; padding: 26px; display: grid; align-content: center; overflow: hidden; background: radial-gradient(90% 90% at 85% 0%, #ffd9bd, transparent 60%), linear-gradient(160deg, var(--fx-perzik), #ffd3b3); }
.bl-omslag::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(184, 60, 6, 0.2) 1px, transparent 1.400px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 80% at 20% 90%, #000, transparent); mask-image: radial-gradient(70% 80% at 20% 90%, #000, transparent); }
.bl-omslag > * { position: relative; transition: transform 0.6s var(--fx-ease); }
.bl-kaart:hover .bl-omslag > * { transform: scale(1.04); }
.bl-omslag .fx-bel { box-shadow: var(--fx-schaduw-s); font-size: 0.88rem; }
.bl-omslag .fx-bel--klant { background: var(--fx-wit); }
.bl-omslag--social .fx-balken { padding: 18px; border-radius: 18px; background: var(--fx-wit); box-shadow: var(--fx-schaduw-m); }
.bl-bel { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--fx-ink); box-shadow: var(--fx-schaduw-m); }
.bl-bel .fx-golf { margin-left: 0; flex: 1; justify-content: space-between; height: 34px; }
.bl-kaart:hover .bl-bel .fx-golf i { animation: fx-golf 0.900s ease-in-out infinite; }
.bl-kaart:hover .bl-bel .fx-golf i:nth-child(2n) { animation-delay: -0.300s; } .bl-kaart:hover .bl-bel .fx-golf i:nth-child(3n) { animation-delay: -0.600s; }
.bl-kaart-tekst { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 12px; padding: 26px; }
.bl-kaart h3 { font-size: 1.4rem; line-height: 1.12; }
.bl-kaart .bl-uittreksel { font-size: 0.97rem; }
.bl-kaart-onder { margin-top: auto; padding-top: 18px; width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--fx-lijn); }
.bl-kaart-onder .bl-meta span:last-child { display: none; }
.bl-leeg { margin-top: 24px; text-align: center; color: var(--fx-ink-2); }

/* voorbeelden */
.bl-voorbeelden { padding-top: 20px; }
.bl-voorb-vlak { padding: clamp(28px, 4vw, 52px); border-radius: var(--fx-r-xl); background: var(--fx-zand); }
.bl-voorb-vlak header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 26px; }
.bl-voorb-vlak h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.bl-voorb-vlak header p { color: var(--fx-ink-2); }
.bl-voorb-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bl-voorb { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 24px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); }
.bl-voorb:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-m); }
.bl-voorb-icoon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; font-size: 1.25rem; background: var(--fx-verloop); color: var(--fx-ink); box-shadow: 0 12px 22px -12px rgba(255, 106, 18, 0.9); transition: transform 0.5s var(--fx-ease); }
.bl-voorb:hover .bl-voorb-icoon { transform: rotate(-6deg) scale(1.06); }
.bl-voorb-tekst { display: grid; gap: 4px; padding-right: 30px; }
.bl-voorb-tekst small { font-size: 0.82rem; font-weight: 700; color: var(--fx-oranje-tekst); }
.bl-voorb-tekst b { font-family: var(--fx-display); font-weight: 800; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.015em; }
.bl-voorb-tekst em { font-style: normal; font-size: 0.88rem; color: var(--fx-ink-2); }
.bl-pijl { position: absolute; right: 20px; top: 22px; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--fx-zand); transition: background-color 0.3s, color 0.3s, transform 0.4s var(--fx-ease); }
.bl-voorb:hover .bl-pijl { background: var(--fx-ink); color: #fff; transform: rotate(45deg); }

@media (max-width: 1000px) {
  .bl-uitgelicht, .bl-case { grid-template-columns: minmax(0, 1fr); }
  .bl-raster, .bl-voorb-raster { grid-template-columns: minmax(0, 1fr); }
  .bl-omslag { height: 170px; }
}
@media (max-width: 768px) {
  .bl-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding: 4px 18px 10px; scrollbar-width: none; }
  .bl-filters::-webkit-scrollbar { display: none; }
  .bl-filter { flex: none; }
  .bl-uitgelicht, .bl-case, .bl-kaart, .bl-voorb-vlak { border-radius: var(--fx-r-l); }
  .bl-uitgelicht-tekst .fx-btn { width: 100%; }
  .bl-trends li, .bl-trends li:nth-child(odd), .bl-trends li:nth-child(even) { transform: none; font-size: 0.92rem; }
  .bl-jaar { font-size: 6rem; bottom: -18px; }
  .bl-case-cijfers { grid-template-columns: 1fr 1fr; }
  .bl-sectie { padding-bottom: 30px; }
}

/* ---------- Omslagen van de nieuwe artikelen ---------- */
.bl-keuze { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bl-keuze span { padding: 14px 18px; border-radius: 16px; background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); font-weight: 700; color: var(--fx-ink-2); }
.bl-keuze span.is-aan { background: var(--fx-verloop); color: var(--fx-ink); box-shadow: 0 16px 28px -14px rgba(255, 106, 18, 0.9); transform: rotate(-3deg) scale(1.08); }
.bl-keuze em { font-style: normal; font-size: 0.9rem; color: var(--fx-ink-2); }
.bl-stapjes { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px; }
.bl-stapjes li { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); font-family: var(--fx-display); font-weight: 800; font-size: 1.2rem; color: var(--fx-ink-3); }
.bl-stapjes li.is-klaar { background: var(--fx-ink); color: var(--fx-oranje-licht); }
.bl-stapjes li.is-nu { background: var(--fx-verloop); color: var(--fx-ink); transform: translateY(-8px) scale(1.12); box-shadow: 0 16px 28px -12px rgba(255, 106, 18, 0.9); }
.bl-prijsje { justify-self: center; display: flex; align-items: baseline; gap: 8px; padding: 16px 24px; border-radius: 20px; background: var(--fx-ink); color: #fff; box-shadow: var(--fx-schaduw-m); }
.bl-prijsje b { font-family: var(--fx-display); font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--fx-oranje-licht); }
.bl-prijsje small { font-size: 0.9rem; color: #e8dfd6; }
.bl-kaart-onder .bl-meta span:last-child { display: inline-flex; }
.bl-kaart-onder .bl-meta span:nth-child(2) { display: none; }