/* assets/css/portfolio.css */
@import './theme.css';

/* Sectie (eigen achtergrond; geen hero-video erdoor) */
.folio{
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 5rem);
  background: radial-gradient(1000px 600px at 50% -10%, var(--bg-start) 0%, var(--bg-end) 100%);
}
[data-theme="dark"] .folio{
  background: radial-gradient(1400px 800px at 50% -10%,
              #0b0b0c 0%, #0f0f10 45%, #131315 75%, #161617 100%);
}
.folio-wrap{ max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Header */
.folio-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.folio-title{ font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight:800; letter-spacing:-.01em; color: var(--text); }
.folio-sub{ color: var(--text-muted); }

/* Rail */
.folio-nav{ position:relative; }
.folio-strip{
  display:flex; gap:1rem; padding: .5rem 1rem 1rem;
  overflow:auto; overscroll-behavior-x: contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  cursor: grab;
}
.folio-strip:active{ cursor: grabbing; }

/* Card (klikbaar) */
.folio-card{
  scroll-snap-align: center;
  flex: 0 0 clamp(280px, 36vw, 360px);
  display: grid; gap:.75rem; text-decoration: none;
  background: var(--glass);
  border: 1px solid rgba(127,127,127,.16);
  border-radius: 16px;
  box-shadow: 0 8px 28px var(--shadow);
  color: var(--text);
  padding: .9rem;
  transform: translateY(10px) scale(.985);
  opacity: 0;
  transition: transform .5s ease, opacity .5s ease, box-shadow .3s ease, filter .3s ease;
  will-change: transform, opacity;
}
.folio-card.in{ transform: none; opacity: 1; }
.folio-card:hover{ box-shadow: 0 14px 38px var(--shadow); transform: translateY(-2px) scale(1.005); filter: saturate(105%); }

/* Thumb */
.f-cover{
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16/10; background: rgba(127,127,127,.12);
}
.f-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.f-cover::after{
  /* subtiele overlay voor leesbaarheid */
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.18), transparent 60%);
  pointer-events:none;
}

/* Chips */
.f-chips{ position:absolute; left:.6rem; top:.6rem; display:flex; gap:.35rem; flex-wrap:wrap; z-index:1; }
.chip{
  font-size:.75rem; font-weight:700; color:#fff;
  padding:.2rem .5rem; border-radius:999px;
  background: linear-gradient(180deg, var(--accent), #07c1ff);
  box-shadow: 0 4px 12px rgba(0,176,239,.45);
}

/* Meta */
.f-meta{ display:grid; gap:.35rem; }
.f-name{ font-size: 1.05rem; font-weight: 800; letter-spacing:-.01em; }
.f-desc{ color: var(--text-muted); font-size:.95rem; }
.f-list{ list-style:none; margin:.1rem 0 0; padding:0; }
.f-list li{ position:relative; padding-left:1.05rem; margin:.35rem 0; }
.f-list li::before{
  content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(0,176,239,.45);
}

/* Arrows (optisch als bij reviews) */
.folio-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  background: var(--glass); backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px var(--shadow);
  display:grid; place-items:center; cursor:pointer; user-select:none;
  opacity:0; transition: opacity .25s ease, transform .2s ease;
  z-index: 2;
}
.folio:hover .folio-arrow, .folio:focus-within .folio-arrow{ opacity:1; }
.folio-arrow--prev{ left: .25rem; }
.folio-arrow--next{ right: .25rem; }
.folio-arrow .glyph{ font-size: 1.3rem; color: var(--text); }
.folio-arrow:active{ transform: translateY(-50%) scale(.96); }
.folio-arrow:focus-visible{ outline:2px solid var(--accent); }

/* Scrollbar (donker in dark mode) */
.folio-strip::-webkit-scrollbar{ height: 8px; }
.folio-strip::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius:8px; }
.folio-strip::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.25); border-radius:8px; }
[data-theme="dark"] .folio-strip::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
[data-theme="dark"] .folio-strip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); }
.folio-strip{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.25) rgba(0,0,0,.06); }
[data-theme="dark"] .folio-strip{ scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .folio-card{ transition: none !important; }
}