/* TWS Volunteer Showcase styles */
.tws-volunteer-list {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(var(--tws-vol-columns-mobile, 2), minmax(0, 1fr));
}
.tws-volunteer-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.tws-volunteer-image-wrap { position: relative; width:100%; padding-top: 75%; background:#f3f4f6; overflow:hidden; }
.tws-volunteer-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tws-no-image { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:14px; }

.tws-volunteer-content { padding: 14px; display:flex; flex-direction:column; gap:8px; }
.tws-volunteer-title { margin:0; font-size: 18px; line-height:1.3; color:#111827; }
.tws-volunteer-short { color:#374151; font-size:14px; }

@media (min-width: 1024px) {
    .tws-volunteer-list {
        grid-template-columns: repeat(var(--tws-vol-columns-desktop, 5), minmax(0, 1fr));
    }
}

/* CSS variable bridge from data attributes */
.tws-volunteer-list {
    --tws-vol-columns-mobile: 2;
    --tws-vol-columns-desktop: 5;
}
.tws-volunteer-list[data-columns-mobile] { --tws-vol-columns-mobile: attr(data-columns-mobile number); }
.tws-volunteer-list[data-columns-desktop] { --tws-vol-columns-desktop: attr(data-columns-desktop number); }