/* Page-specific styles: De band / The band */

/* ---------- Members ---------- */
.members { background: #000; padding: 70px 0 110px; }
.members .brush-title { transform: rotate(-3deg); margin-bottom: 56px; }
.member-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 40px; }
.member { --accent: var(--yellow); flex: 0 1 calc((100% - 80px) / 3); min-width: 0; }
.member--pink   { --accent: var(--pink2); }
.member--yellow { --accent: var(--yellow); }
.member--green  { --accent: var(--green); }
.member--blue   { --accent: var(--blue); }

.member-photo {
    position: relative; aspect-ratio: 4 / 5; width: 100%; margin-bottom: 26px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    text-align: center; padding: 24px; color: var(--accent);
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px),
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%),
        #141414;
    box-shadow: 8px 8px 0 color-mix(in srgb, var(--accent) 35%, #000);
    transform: rotate(-1.5deg);
}
/* kartelrand op een apart laagje, zodat de inhoud van de foto niet vervormt */
.member-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 4px solid var(--accent);
    filter: url('../../images/rough-edges.svg#rough-edges');
    pointer-events: none;
}
.member:nth-child(even) .member-photo { transform: rotate(1.5deg); }
.member-photo svg { width: 64px; height: 64px; }
.photo-hint { font-family: var(--font-ui); font-weight: 600; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: #ccc; }

.member-role {
    display: inline-block; margin-bottom: 4px; padding: 3px 14px;
    background: var(--accent); color: #000;
    font-family: var(--font-ui); font-weight: 700; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase;
    clip-path: polygon(0 10%, 100% 0, 97% 100%, 2% 90%);
}
.member-name {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: .03em; color: var(--white);
}

/* ---------- Booking band ---------- */
.band-book { padding: 100px 0; }
.band-book-wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.band-book-text { font-family: var(--font-display); text-transform: uppercase; line-height: 1; font-size: clamp(2.2rem, 5vw, 4rem); transform: rotate(-3deg); text-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.band-book-text span { display: block; color: var(--white); }
.band-book-text em { display: block; font-style: italic; color: var(--yellow); font-size: 1.12em; text-shadow: 3px 3px 0 #000; }
.band-book .btn { --btn-bw: 0px; border: none; box-shadow: 5px 5px 0 rgba(0,0,0,.6); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .member { flex-basis: calc((100% - 40px) / 2); }
}
@media (max-width: 768px) {
    .band-book-wrap { justify-content: center; text-align: center; }
}
@media (max-width: 520px) {
    .member { flex-basis: 100%; max-width: 360px; }
    .members .brush-title { padding-right: 60px; }
    .band-book { padding: 80px 0; }
    .band-book .btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .btn:hover { transition: none; transform: none; }
}

/* ---------- Echte ledenfoto's ---------- */
.member-photo.has-photo { padding: 0; overflow: hidden; background: #000; }
.member-photo.has-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 22%;
}