/* ====== Basis ====== */
body { 
    margin: 0; 
    background-color: beige; /* achtergrond beige */
    font-family: Arial, sans-serif;
    color: #000;
}

h1 {
    text-align: center;
    margin: 20px 0;
    font-size: clamp(28px, 4vw, 40px);
    color: #000; /* zwart */
}

h2 { 
    text-align: center;
    margin: 20px 0;
    font-size: clamp(22px, 3vw, 28px);
    color: #000;
}

h3 {
    text-align: center;
    margin: 20px 0;
    font-size: clamp(24px, 3vw, 32px); /* groter gemaakt */
    font-weight: bold;
    color: #000;
}

p { 
    color: white; 
}

/* ====== OVER ONS (profielen) ====== */
.photogrid {
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(auto-fill, 180px); 
    gap: 20px;
    justify-content: center;  /* ✅ gecentreerd */
    padding: 20px;
    overflow: visible;
    position: relative;
}

.photolist {
    background-color: #333;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
}

.personphoto-wrapper {
    width: 100%;
    aspect-ratio: 1/1; 
    border-radius: 20px;
    overflow: hidden;
    background-color: transparent;
}

.scrollphoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.name {
    margin-top: 8px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: white;
}

/* ====== CAMPUS FOTO'S ====== */
.campusphotogrid {
    display: flex;
    overflow-x: auto;
    padding: 20px;
    gap: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

.campusphotolist {
    flex: 0 0 auto;
    max-width: 220px;
    aspect-ratio: 16/9;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    background-color: #333;
    display: block;
    scroll-snap-align: start;
}

.campusphoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ====== Pijltjes (alleen mobiel zichtbaar) ====== */
.arrow-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 20px;
    padding: 8px 12px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
}

.arrow-btn.left { left: 10px; }
.arrow-btn.right { right: 10px; }

/* ====== Responsiveness ====== */
@media (min-width: 768px) {
    .campusphotogrid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        overflow-x: visible;
        justify-content: center;
    }

    .campusphotolist {
        max-width: none;
        width: 100%;
    }

    .photogrid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, 180px);
        gap: 20px;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    /* ✅ Campus scrollbaar met pijltjes */
    .campusphotogrid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
    .campusphotolist { 
        flex: 0 0 auto; 
        max-width: 160px;
        scroll-snap-align: start;
    }
    .arrow-btn { display: block; }

    /* ✅ Over ons blijft 2 naast elkaar */
    .photogrid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        justify-content: center;
    }
    .photolist {
        width: 100%;
    }
    
}

/* ====== Naam-links altijd wit ====== */
.name a,
.name a:link,
.name a:visited,
.name a:hover,
.name a:active,
.name a:focus {
  color: white;           /* blijft altijd wit */
  text-decoration: none;  /* geen underline standaard */
  font-weight: bold;
}

.name a:hover,
.name a:focus-visible {
  text-decoration: underline; /* underline bij hover/focus */
  outline: none;
}

/* ====== "Klik hier"-link stijl ====== */
.clickhere {
  color: lightblue;
  font-size: 20px;       /* 🔥 groter gemaakt */
  font-weight: bold;     /* extra opvallend */
  text-decoration: underline;
  display: inline-block;
  margin-top: 6px;
}

.clickhere:hover {
  color: yellow;
}