/* Container spacing en donkere achtergrond */
.projects-page{
  background: var(--bg-solid);
  padding: clamp(16px, 3vw, 28px);
}

/* Header boven de grid */
.projects-header{
  max-width: 1100px;
  margin: 0 auto clamp(16px, 3vw, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.projects-header h1{
  margin: 0;
  color: var(--txt);
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  font-weight: 800;
}

/* Accent knop */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  font-weight: 600;
  color: var(--txt);
  background: rgba(255,255,255,0.04);
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.btn:hover{ background: rgba(255,255,255,0.06); }
.btn:active{ transform: translateY(1px); }
.btn--accent{
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}
.btn--accent:hover{ background: var(--accent-2); }

/* Grid met cards */
.grid{
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 0 1rem;                /* ademruimte op kleine schermen */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 20px);  /* schaalbare gap i.p.v. 5rem */
}
/* Tablet: 2 kolommen */
@media (max-width: 1024px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobiel: 1 kolom */
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; gap: 12px; padding: 0 .75rem; }
}

.form-card{
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(0,0,0,.35);
  padding: clamp(16px, 3.5vw, 28px);
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}

/* Velden */
.field{
  display: grid;
  gap: .4rem;
}
.field > span{
  color: var(--txt);
  font-weight: 600;
  font-size: .95rem;
  margin-left: 2rem;
}
.field input[type="text"],
.field input[type="url"],
.field textarea,
.field input[type="file"]{
  max-width: 100%;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
  padding: 0.4rem;
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: var(--txt);
  font-size: 1rem;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.field textarea{
  resize: vertical;
  min-height: 140px;
  line-height: 1.45;
}

.field input[type="file"]{
  padding: .55rem .8rem;
}

.field :is(input, textarea):focus{
  outline: none;
  border-color: var(--accent-2);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 2px rgba(31,122,31,.35);
}

/* Acties onderaan */
.actions{
  margin-top: .2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
	margin-left: 2rem;

}

/* Alerts */
.alert{
  max-width: 900px;
  margin: 0 auto clamp(12px, 2vw, 16px);
  padding: .8rem 1rem;
  border-radius: .6rem;
  border: 1px solid;
}
.alert.error{
  background: rgba(255,0,0,.12);
  color: #ffb3b3;
  border-color: rgba(255,0,0,.35);
}
.alert.success{
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: #dfffe0;
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
}
.alert ul{ margin:.4rem 0 0 1rem; }

/* Kleine mobiel-tweaks */
@media (max-width: 520px){
  .projects-header{ flex-direction: column; align-items: stretch; gap: .8rem; }
  .projects-header .btn{ width: 100%; }
  .form-card{ padding: 14px; }
}
/* Card basis */
.card{
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: clip;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 30px rgba(0,0,0,0.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  padding: clamp(14px, 2.5vw, 24px);   /* was 2.5rem */
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  border-color: var(--accent);
}


.card-media{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* schaalbare max-hoogte i.p.v. vaste 220px */
  max-height: clamp(140px, 24vw, 220px);
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.card-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* niets wordt meer afgekapt */
  display: block;
  transition: transform .3s ease;
}

/* Leuke hover-zoom */
.card-media:hover img{ transform: scale(1.03); }

/* Content */
.card-content{ display: grid; gap: 10px; padding: 14px; }
/* Grotere titel */
.card-title{
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: 700; color: var(--txt); margin: 0;
}
/* Beschrijving tekst iets groter en lichter */
.card-desc{
  font-size: clamp(.95rem, 2vw, 1rem);
  color: var(--muted); line-height: 1.45; margin: 0; word-wrap: break-word;
}
/* Meta: tags + datum */
.card-meta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 2px; flex-wrap: wrap;
}

/* Card actiebalk onderaan */
.card-actions{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
}

/* Tags netter en iets groter */
.tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag{
  font-size: .85rem; padding: .25rem .5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: .4rem; color: var(--txt); white-space: nowrap;
}
/* Datum-stijl */
.stamp{ font-size: .8rem; color: var(--muted); }


/* Empty state */
.empty-state{
  max-width: 900px;
  margin: 10vh auto;
  text-align: center;
  color: var(--muted);
}
.empty-state h2{ color: var(--txt); margin: .25rem 0 .5rem; }
.empty-icon{ font-size: 2.2rem; margin-bottom: .25rem; }


/* (Bestond al) accent knop voor "Nieuw project" — blijft groen */
.btn--accent{
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}
.btn--accent:hover{ background: var(--accent-2); }

/* Kleine tweaks voor mobiel */
@media (max-width: 480px){
  .projects-header{ flex-direction: column; align-items: stretch; }
  .projects-header .btn{ width: 100%; text-align: center; }
}

/* File upload container */
.file-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: .3rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  margin-left: 2rem;
  margin-right: 2rem;
  width: calc(100% - 4rem); /* Houdt rekening met marges */
}

/* Hide the default file input */
.file-input {
  position: absolute;
  left: -9999px;
}

/* Custom button */
.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.2rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  border-radius: .5rem;
  cursor: pointer;
  border: none;
  transition: background .2s ease, transform .1s ease;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.file-btn:hover {
  background: var(--accent-2);
}
.file-btn:active {
  transform: scale(0.97);
}

/* Selected file name */
.file-name {
  font-size: .9rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; /* Neemt resterende ruimte in */
  min-width: 0; /* Zorgt dat ellipsis werkt */
}


@media (max-width: 600px) {
  .file-upload {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 1rem;
    margin-right: 1rem;
    width: calc(100% - 2rem);
  }

  .file-btn {
    width: 100%; /* Knop vult de hele breedte */
    text-align: center;
    padding: .7rem;
    font-size: 1rem;
  }

  .file-name {
    width: 100%;
    text-align: center;
    font-size: .85rem;
  }
}
}
/* Responsief gedrag */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* op tablets 2 kaarten per rij */
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr; /* op mobiel 1 kaart per rij */
  }
}
@media (max-width: 520px){
  .projects-header{ flex-direction: column; align-items: stretch; gap: .8rem; }
  .projects-header .btn{ width: 100%; }
}

/* Container voor acties rechtsboven */
.projects-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Rode delete knop */
.btn--danger {
  background: rgba(255, 0, 0, 0.15);
  border: 1px solid rgba(255, 0, 0, 0.4);
  color: #ff4d4d;
  padding: .6rem .9rem;
  border-radius: .6rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--danger:hover {
  background: rgba(255, 0, 0, 0.3);
  color: #ff6666;
  border-color: rgba(255, 0, 0, 0.6);
}

.btn--danger i {
  font-size: 1rem;
}
.inline-delete { display: inline-block; margin: 0; }
.inline-delete .btn--danger { padding: 0.75rem; } /* compacter */
.btn{ flex-shrink: 0; }        /* voorkom squish */
/* Zorg dat acties niet uit beeld lopen */
.projects-actions{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;         /* <— laat wrappen */
  max-width: 100%;
}

/* Knoppen zelf mogen krimpen en niet uitrekken */
.projects-actions .btn{
  flex: 0 1 auto;          /* krimpen toegestaan */
  min-width: 0;            /* <— voorkomt overflow door lange content */
  box-sizing: border-box;  /* padding telt mee in breedte */
}

/* Mobiel: stack en full width knoppen */
@media (max-width: 640px){
  .projects-header{
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
  }
  .projects-actions{
    width: 100%;
  }
  .projects-actions .btn{
    width: 100%;               /* <— volle breedte */
    justify-content: center;   /* icon + tekst centreren */
    white-space: normal;       /* tekst mag afbreken indien nodig */
  }
}

/* (optioneel) extra ademruimte in header op kleine schermen */
@media (max-width: 640px){
  .projects-header{ padding: 0 .75rem; }
}

/* Zorg dat het formulier netjes schaalt */
.form-card {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background: var(--bg);
  padding: clamp(16px, 3vw, 28px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 0 30px rgba(0,0,0,.35);
  display: grid;
  gap: 1rem;
}

/* File upload styling */
.file-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.file-input {
  position: absolute;
  left: -9999px;
}

.file-btn {
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: .5rem;
  cursor: pointer;
  transition: background .2s ease;
}

.file-btn:hover {
  background: var(--accent-2);
}

.file-name {
  font-size: .9rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

@media (max-width: 640px) {
  .file-upload {
    flex-direction: column;
    align-items: stretch;
  }
  .file-name {
    max-width: 100%;
  }
}

.btn--github {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: .6rem;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn--github i {
  font-size: 1rem;
}

.btn--github:hover {
  background: #333;
  color: #fff;
  border-color: #555;
}