/* ==========================================================================
   ORGX POSTS / MASONRY / CARD STYLES (cleaned + variables + fade-in)
========================================================================== */

:root{
  /* layout */
  --orgx-gap: 30px;

  /* core colors */
  --orgx-green: #93C027;
  --orgx-bg: #070a0f;
  --orgx-white: #ffffff;
  --orgx-black: #000000;

  /* common surfaces */
  --orgx-surface: rgba(5, 8, 10, 0.55);
  --orgx-surface-strong: rgba(5, 8, 10, 0.75);
  --orgx-surface-hero: rgba(15, 18, 16, 0.55);
  --orgx-surface-hero-strong: rgba(15, 18, 16, 0.75);

  /* borders */
  --orgx-border-strong: rgba(255, 255, 255, 1);
  --orgx-border-soft: rgba(255, 255, 255, 0.5);

  /* blur */
  --orgx-blur: 6px;
  --orgx-blur-soft: 2px;

  /* text */
  --orgx-text: rgba(255, 255, 255, 0.85);
  --orgx-text-soft: rgba(255, 255, 255, 0.8);

  /* gradients */
  --orgx-card-overlay-grad: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.0) 100%
  );

  /* pos 2/5 gradient layers */
  --orgx-pos25-base: linear-gradient(
    to bottom,
    rgba(147,192,39,0.7) 0%,
    rgba(147,192,39,0.9) 100%
  );
  --orgx-pos25-hover: linear-gradient(
    135deg,
    rgba(147,192,39,0.85),
    rgba(110,160,30,0.95)
  );

  /* pos 6 bottom readability fade */
  --orgx-pos6-bottomfade: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 35%,
    rgba(0, 0, 0, 0) 65%
  );

  /* timings */
  --orgx-ease: cubic-bezier(.2,.8,.2,1);
  --orgx-trans-fast: 0.25s;
  --orgx-trans-med: 0.35s;

  /* card fade-in */
  --orgx-card-fade-dur: 420ms;
  --orgx-card-fade-y: 10px;
}

/* ===============================
   PAGE
=============================== */

.orgx-posts-page{
  padding: 110px 0 80px;
}

.orgx-posts-title{
  margin: 0 0 36px 0;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: #fff;
  position:relative;
}

.orgx-posts-inner{
  width: min(100%, 1100px);
  margin: 0 auto;
}

h1.orgx-posts-title{
  margin-top: 50px;
}

@media (max-width: 980px){
  .orgx-posts-title{
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
}

/* ===============================
   TOOLBAR (filters + search pill)
=============================== */

.orgx-posts-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  width: 100%;
}

/* filters */
.orgx-posts-filters{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.orgx-filter{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 4px 20px 4px 14px;
  border-radius: 999px;

  background: var(--orgx-surface);
  border: 1px solid var(--orgx-border-strong);

  color: var(--orgx-green);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;

  backdrop-filter: blur(var(--orgx-blur));
  -webkit-backdrop-filter: blur(var(--orgx-blur));
  transition: all var(--orgx-trans-fast) ease;
}

.orgx-filter__arrow{
  font-size: 0.85rem;
  opacity: 0.8;
  color: var(--orgx-white);
  transition: transform var(--orgx-trans-fast) ease,
              opacity var(--orgx-trans-fast) ease,
              color var(--orgx-trans-fast) ease;
}

.orgx-filter:hover{
  border-color: var(--orgx-green);
  background: var(--orgx-surface-strong);
}

.orgx-filter:hover .orgx-filter__arrow{
  transform: translateX(3px);
  opacity: 1;
  color: var(--orgx-green);
}

.orgx-filter.is-active{
  border-color: var(--orgx-green);
  background: rgba(147,192,39,0.15);
  color: var(--orgx-green);
}

.orgx-filter.is-active .orgx-filter__arrow{
  color: var(--orgx-green);
}

/* search pill */
.orgx-search-pill{
  display: flex;
  align-items: center;
  gap: 14px;

  width: 300px;
  padding: 6px 20px;

  border-radius: 999px;
  background: var(--orgx-surface-hero);

  backdrop-filter: blur(var(--orgx-blur));
  -webkit-backdrop-filter: blur(var(--orgx-blur));
}

.orgx-search-icon{
  display: inline-flex;
  align-items: center;
  color: var(--orgx-white);
  font-size: 0.9rem;
  opacity: 0.9;
}

.orgx-search-pill input{
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;

  color: var(--orgx-green);
  font-size: 0.85rem;
}

.orgx-search-pill input::placeholder{
  color: rgba(147,192,39,0.8);
}

.orgx-search-arrow{
  display: inline-flex;
  align-items: center;
  color: var(--orgx-white);
  font-size: 0.85rem;
  opacity: 0.8;
  transition: transform var(--orgx-trans-fast) ease, opacity var(--orgx-trans-fast) ease;
}

.orgx-search-pill:hover .orgx-search-arrow{
  transform: translateX(4px);
  opacity: 1;
}

.orgx-search-pill:focus-within{
  border-color: var(--orgx-green);
  background: var(--orgx-surface-hero-strong);
}

/* ===============================
   MASONRY CONTAINER
=============================== */

.orgx-masonry{
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* ===============================
   CARD (base)
=============================== */

.orgx-card{
  position: absolute; /* JS sets left/top/width/height */
  border-radius: 0;
  overflow: hidden;

  /* fade-in support */
  opacity: 0;
  transform: translateY(var(--orgx-card-fade-y));
  transition: opacity var(--orgx-card-fade-dur) ease,
              transform var(--orgx-card-fade-dur) ease;
  will-change: opacity, transform;
}

.orgx-card.is-in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .orgx-card{
    transition: none;
    transform: none;
  }
}

.orgx-card__link{
  display: block;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  height: 100%;
}

/* media */
.orgx-card__media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transform: scale(1.02);
  transition: transform var(--orgx-trans-med) ease,
              filter var(--orgx-trans-med) ease;
}

.orgx-card__media--fallback{
  background: var(--orgx-pos25-hover);
}

/* overlay */
.orgx-card__overlay{
  position: relative;
  z-index: 2;
  height: 100%;

  padding: 22px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;

  overflow: hidden;
  background: var(--orgx-card-overlay-grad);
}

/* ensure overlay children always above any pseudo layers */
.orgx-card__overlay > *{
  position: relative;
  z-index: 1;
}

/* text */
.orgx-card__title{
  margin: 0;
  color: var(--orgx-green);
  font-size: 1.35rem;
  line-height: 1.15;
}

.orgx-card__excerpt{
  margin: 0;
  color: var(--orgx-text);
  font-size: 0.95rem;
  max-width: 42ch;
}

.orgx-card__meta{
  margin: 0;
  color: var(--orgx-text-soft);
  font-size: 0.95rem;
  max-width: 42ch;
  font-weight: 300;
}

/* cta */
.orgx-card__cta{
  position: absolute;
  z-index: 3;
  left: 30px;
  bottom: 25px;

  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.8);

  display: grid;
  place-items: center;

  color: var(--orgx-white);
  transition: border-color var(--orgx-trans-fast) ease,
              color var(--orgx-trans-fast) ease,
              background var(--orgx-trans-fast) ease;
}

/* hover */
.orgx-card__link:hover .orgx-card__media{
  filter: grayscale(0%);
  transform: scale(1.05);
}

.orgx-card__link:hover .orgx-card__cta{
  border-color: rgba(147,192,39,1);
  background: rgba(0,0,0,0.25);
  color: var(--orgx-green);
}

/* ===============================
   LOAD MORE
=============================== */

.orgx-loadmore-wrap{
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.orgx-loadmore{
  background: transparent;
  color: var(--orgx-white);
  border: 1px solid var(--orgx-border-soft);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.orgx-loadmore.is-loading{
  opacity: 0.65;
  cursor: wait;
}

.orgx-loadmore:disabled{
  opacity: 0.35;
  cursor: not-allowed;
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 900px){
  .orgx-masonry{
    position: relative;
    width: 100%;
    height: auto !important;
  }

  .orgx-card{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;

    margin-bottom: var(--orgx-gap);

    opacity: 1;
    transform: none;
  }

  .orgx-card__link{
    height: auto;
    min-height: 320px;
  }

  .orgx-card__media{
    position: absolute;
    inset: 0;
  }

  .orgx-card__overlay{
    min-height: 320px;
  }
}

@media (max-width: 1100px){
  .orgx-posts-page{
    padding: 110px 2rem 70px 2rem;
  }

  .orgx-masonry{
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 900px){
  .orgx-posts-toolbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .orgx-search-pill{
    width: 100%;
  }
}

@media (max-width: 680px){
  .orgx-posts-page{
    padding: 110px 1.2rem 70px 1.2rem;
  }

  .orgx-masonry{
    width: 100%;
    margin: 0;
  }
}

/* ===============================
   CARD – POSITION OVERRIDES
=============================== */

/* overlay padding override */
.orgx-card .orgx-card__overlay{
  padding: 25px 35px;
}

/* titles per position */
.orgx-card[data-pos="1"] .orgx-card__title{ font-size: 1.6rem; line-height: 1.3em; width: 250px; }
.orgx-card[data-pos="2"] .orgx-card__title{ font-size: 1rem; line-height: 1.3em; color: var(--orgx-black); width: 100%; }
.orgx-card[data-pos="3"] .orgx-card__title{ font-size: 1rem; line-height: 1.3em; width: 380px; }
.orgx-card[data-pos="4"] .orgx-card__title{ font-size: 1.6rem; line-height: 1.3em; width: 100%; }
.orgx-card[data-pos="5"] .orgx-card__title{ font-size: 1.6rem; line-height: 1.3em; color: var(--orgx-black); width: 230px; }
.orgx-card[data-pos="6"] .orgx-card__title{ font-size: 1rem; line-height: 1.3em; width: 380px; }

/* meta tweaks */
.orgx-card[data-pos="2"] .orgx-card__meta,
.orgx-card[data-pos="3"] .orgx-card__meta{
  margin-top: -6px;
}

.orgx-card[data-pos="3"] .orgx-card__meta{
  width: 250px;
}

/* CTA alignment */
.orgx-card[data-pos="2"] .orgx-card__cta,
.orgx-card[data-pos="4"] .orgx-card__cta,
.orgx-card[data-pos="6"] .orgx-card__cta{
  left: auto;
  right: 30px;
}

/* pos 2 + 5 special: no media + frosted link */
.orgx-card[data-pos="2"] .orgx-card__media,
.orgx-card[data-pos="5"] .orgx-card__media{
  display: none;
}

.orgx-card[data-pos="2"] .orgx-card__link,
.orgx-card[data-pos="5"] .orgx-card__link{
  background: rgba(0,0,0,0.1);
  backdrop-filter: blur(var(--orgx-blur-soft));
  -webkit-backdrop-filter: blur(var(--orgx-blur-soft));
}

/* pos 2/5 hover layer fade (no snapping) */
.orgx-card[data-pos="2"] .orgx-card__overlay::before,
.orgx-card[data-pos="5"] .orgx-card__overlay::before,
.orgx-card[data-pos="2"] .orgx-card__overlay::after,
.orgx-card[data-pos="5"] .orgx-card__overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.orgx-card[data-pos="2"] .orgx-card__overlay::before,
.orgx-card[data-pos="5"] .orgx-card__overlay::before{
  background: var(--orgx-pos25-base);
  opacity: 1;
}

.orgx-card[data-pos="2"] .orgx-card__overlay::after,
.orgx-card[data-pos="5"] .orgx-card__overlay::after{
  background: var(--orgx-pos25-hover);
  opacity: 0;
  transition: opacity 0.9s var(--orgx-ease);
}

.orgx-card[data-pos="2"]:hover .orgx-card__overlay::after,
.orgx-card[data-pos="5"]:hover .orgx-card__overlay::after{
  opacity: 1;
}

.orgx-card[data-pos="2"] .orgx-card__overlay,
.orgx-card[data-pos="5"] .orgx-card__overlay{
  background: transparent;
}

/* pos 6 bottom fade */
.orgx-card[data-pos="6"] .orgx-card__overlay{
  justify-content: flex-end;
}

.orgx-card[data-pos="6"] .orgx-card__overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orgx-pos6-bottomfade);
  z-index: 0;
  pointer-events: none;
}

/* ===============================
   SEARCH INPUT – browser quirks
=============================== */

.orgx-search-pill input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.orgx-search-pill input::-webkit-search-decoration{
  -webkit-appearance: none;
}

.orgx-search-pill input[type="search"]{
  appearance: textfield;
}


/* =========================================================
   CATEGORY HERO — image = 110vh + fade to bg (meescrollend)
   ========================================================= */

.orgx__category-hero{
  position: relative;
  background: var(--orgx-bg);
  overflow: hidden;
}

/* background image layer (altijd zichtbaar) */
.orgx__category-bg,
.orgx__posts-bg{
  display: block !important;
  opacity: 1 !important;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 90vh;                /* ✅ hoger dan scherm */
  z-index: 0;
  pointer-events: none;

  background-image: url(/images/digital-default.webp);
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

/* fade vanaf onderkant van de image-layer naar de page bg */
.orgx__category-hero::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(110vh - 260px);      /* begint net voor het einde van je 110vh */
  height: 260px;

  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(7,10,15,0) 0%,
    rgba(7,10,15,0.7) 55%,
    var(--orgx-bg) 100%
  );
}

/* content boven bg */
.orgx__category-container{
  position: relative;
  z-index: 2;
}

/* voorkom dat content wrappers de bg dicht smeren */
.orgx__category-container,
.orgx-posts-page{
  background: transparent !important;margin-top:20px;
}

/* MOBILE */
@media (max-width: 980px){
  .orgx__category-bg,
  .orgx__posts-bg{
    background-image: url(/images/digital-mobile.webp);
    background-position: center top;
  }
}

/* WIDE */
@media (min-aspect-ratio: 21/9){
  .orgx__category-bg,
  .orgx__posts-bg{
    background-image: url(/images/digital-wide.webp);
    background-position: top center;
  }
}