.clergy-search-container {
margin: 20px auto;
font-family: sans-serif;
}
.clergy-search-form {
display: flex;
gap: 10px;
margin-bottom: 20px;
background: #f9f9f9;
padding: 25px;
border-radius: 10px;
border: 1px solid #eee;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.clergy-search-input {
flex: 1;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
outline: none;
transition: border 0.3s;
}
.clergy-search-input:focus {
border-color: #0073aa;
}
.clergy-search-button {
padding: 0 35px;
background: #0073aa;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
}
.clergy-search-button:disabled {
background: #999;
cursor: not-allowed;
}
.clergy-filters-top {
display: flex;
gap: 15px;
align-items: flex-end;
margin-bottom: 20px;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
border: 1px solid #eee;
flex-wrap: wrap;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1;
min-width: 200px;
}
.filter-group label {
font-size: 12px;
font-weight: bold;
color: #555;
text-transform: uppercase;
}
.filter-select {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
outline: none;
background: #fff;
}
.filter-select:focus {
border-color: #0073aa;
}
.clergy-search-results {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 20px;
}
.clergy-card {
display: flex;
gap: 25px;
padding: 25px;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 12px;
transition: transform 0.2s;
}
.clergy-card:hover {
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.clergy-photo img {
width: 120px;
height: 160px;
object-fit: cover;
border-radius: 8px;
background: #f0f0f0;
border: 1px solid #ddd;
transition: opacity 0.3s ease-in-out;
}
.clergy-photo img.lazy-image {
opacity: 0.5;
}
.clergy-photo img:not(.lazy-image) {
opacity: 1;
}
.clergy-details {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.clergy-header {
grid-column: 1 / -1;
border-bottom: 2px solid #f0f7fb;
padding-bottom: 10px;
margin-bottom: 5px;
}
.clergy-name {
margin: 0;
font-size: 20px;
color: #0073aa;
font-weight: 800;
text-transform: uppercase;
}
.clergy-info-box {
font-size: 13px;
color: #444;
}
.clergy-info-box strong {
color: #888;
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 3px;
}
.status-badge {
display: inline-block;
background: transparent;
color: #0073aa;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.expand-trigger {
user-select: none;
background: #f0f7fb;
padding: 10px;
border-radius: 4px;
transition: background 0.3s;
}
.expand-trigger:hover {
background: #e1f0f7;
}
.expand-icon {
float: right;
font-size: 12px;
color: #0073aa;
}
.clergy-roles {
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
margin-top: 10px;
}
.role-item {
padding: 10px;
background: #fff;
border-left: 3px solid #0073aa;
margin-bottom: 10px;
border-radius: 4px;
}
.role-item:last-child {
margin-bottom: 0;
}
.role-item strong {
display: block;
color: #0073aa;
font-size: 14px;
margin-bottom: 5px;
}
.role-location {
font-size: 12px;
color: #666;
font-style: italic;
}
.clergy-pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 40px;
padding: 20px 0;
}
.page-num {
padding: 10px 18px;
border: 1px solid #0073aa;
background: #fff;
color: #0073aa;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
transition: 0.3s;
}
.page-num.active {
background: #0073aa;
color: #fff;
}
.page-num:hover:not(.active):not(.page-ellipsis) {
background: #f0f7fb;
}
.page-ellipsis {
border: none;
background: transparent;
cursor: default;
padding: 10px 8px;
color: #999;
}
@media (max-width: 768px) {
.clergy-search-container {
margin: 10px;
}
.clergy-search-form {
flex-direction: column;
padding: 15px;
}
.clergy-search-button {
width: 100%;
padding: 15px;
}
.clergy-filters-top {
flex-direction: column;
align-items: stretch;
padding: 15px;
}
.filter-group {
min-width: 100%;
width: 100%;
}
.filter-select {
width: 100%;
font-size: 16px; 
}
.clergy-card {
flex-direction: column;
padding: 15px;
gap: 15px;
}
.clergy-photo {
display: flex;
justify-content: center;
}
.clergy-photo img {
width: 100px;
height: 133px;
}
.clergy-details {
grid-template-columns: 1fr;
}
.clergy-name {
font-size: 18px;
}
.status-badge {
font-size: 10px;
}
.clergy-info-box {
font-size: 12px;
}
.page-num {
padding: 8px 14px;
font-size: 13px;
}
}
.loading-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid #ddd;
border-top-color: #0073aa;
border-radius: 50%;
animation: spin 0.8s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}