/* WPFirefly Staff Directory – component-only styles (updated) */

:root{
  --wpf-primary:#0a4b78;
  --wpf-accent:#00a0d2;
  --wpf-card-bg:#ffffff;
  --wpf-text:inherit;
  --wpf-grid-columns:4;
  --wpf-scale:1.25; /* overridden via inline CSS from settings; XL now bigger */
}

/* DIRECTORY (full-width, grid) */
.wpf-staff-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--wpf-text);
}

.wpf-staff-toolbar {
  display: flex;
  gap: 12px;
  margin: 0 0 16px 0;
  flex-wrap: wrap;
}
.wpf-staff-toolbar input[type="search"],
.wpf-staff-toolbar select {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  font-size: clamp(1rem, 1.05vw, 1.1rem);
}

.wpf-btn {
  background: var(--wpf-primary);
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  text-decoration: none;
  display: inline-block;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1;
}
.wpf-btn:hover { filter: brightness(1.1); }
.wpf-btn-outline {
  background:#fff;
  border:1px solid var(--wpf-primary);
  color: var(--wpf-primary);
  padding:12px 16px;
  border-radius:12px;
  text-decoration: none;
  display: inline-block;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1;
}

/* Grid & equal-height cards */
.staff-list {
  display: grid;
  grid-template-columns: repeat(var(--wpf-grid-columns), 1fr);
  gap: 24px;
}
.staff-item {
  background: var(--wpf-card-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease;
  padding: 16px;
  border-radius: 14px;
  display: flex;              /* NEW: equal-height rows */
  flex-direction: column;     /* NEW */
  height: 100%;               /* NEW */
}
.staff-item:hover { box-shadow: 0 6px 22px rgba(0,0,0,.12); transform: translateY(-2px); }
.staff-item img { width:100%; height:auto; border-radius:12px; display:block; }
.staff-item .no-photo { width:100%; aspect-ratio: 4/3; background:#f2f2f2; border-radius:12px; }
.staff-item .card-body { flex: 1 1 auto; display:flex; flex-direction:column; } /* NEW */
.staff-item .spacer { flex:1 1 auto; } /* pushes CTA to bottom */

/* Card text (larger) */
.staff-item h3 { margin: 12px 0 6px; font-size: clamp(2.25rem, 1.6vw, 1.6rem); }
.staff-heading { opacity:.9; font-weight:700; font-size: clamp(1.50rem, 1.4vw, 1.4rem); }
.staff-subheading { opacity:.85; margin-top:4px; font-size: clamp(1.7rem, 1.3vw, 1.3rem);font-weight:bold; }

/* Directory icons + excerpt */
.wpf-list-contact { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.wpf-list-contact li { display:flex; align-items:center; gap:10px; font-size: clamp(1.5rem, 1.1vw, 1.1rem); }
.wpf-icon { width:18px; height:18px; flex:0 0 18px; opacity:.85; }
.wpf-excerpt { margin-top:12px; font-size: clamp(1.75rem, 1.2vw, 1.2rem); opacity:.95; }
.wpf-link { color: var(--wpf-accent); text-decoration: none; }
.wpf-link:hover { text-decoration: underline; }
.staff-cta { display:flex; gap:10px; margin-top:14px; }

/* SINGLE PAGE */
.wpf-staff-single-article { color: var(--wpf-text); margin-top: 24px; } /* NEW top margin */

.wpf-staff-grid { display:grid; grid-template-columns: 320px 1fr; gap: 2.25rem; align-items:start; }
.wpf-staff-photo img { width: 100%; border-radius: 16px; height:auto; display:block; }

/* Bigger title + sub/heading */
.wpf-staff-title h1 { margin:0 0 6px; font-size: clamp(2.2rem, 3vw, 3rem); }
.wpf-staff-title .staff-heading { font-size: clamp(1.35rem, 1.8vw, 1.9rem); font-weight: 800; }
.wpf-staff-title .staff-subheading { font-size: clamp(1.6rem, 2vw, 1.75rem); opacity:.9; } /* requested 1.75 */

/* Right column CTA near name */
.wpf-staff-cta { display:flex; gap:14px; margin-top:14px; }

/* Left column contact list */
.wpf-contact-list { list-style:none; padding:0; margin: 16px 0 0; display:grid; gap:12px; }
.wpf-contact-list li { display:flex; align-items:flex-start; gap:12px; font-size: clamp(1.50rem, 1.3vw, 1.3rem); }
.wpf-contact-list .wpf-icon { width:20px; height:20px; flex:0 0 20px; margin-top:2px; }

/* vCard button anchored bottom-left */
.wpf-left-actions { margin-top: 18px; }

/* Bio bigger for readability */
.wpf-staff-bio { font-size: clamp(2rem, 1.3vw, 1.25rem); line-height: 1.7; margin-top: 10px; }

.wpf-pagination ul { display:flex; gap:8px; list-style:none; padding:0; margin: 16px 0; }
.wpf-pagination a, .wpf-pagination span {
  padding:10px 14px; border:1px solid #e0e0e0; border-radius:12px; text-decoration:none;
}

/* Responsive */
@media (max-width: 1200px){
  :root{ --wpf-grid-columns:3; }
}
@media (max-width: 900px){
  .wpf-staff-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  :root{ --wpf-grid-columns:1; }
}



/* === Single Staff "Card" chrome (safe add-on) ============================= */
.wpf-staff-card {
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: var(--wpf-card-radius, 16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  padding: clamp(16px, 2.4vw, 36px);
  margin: clamp(8px, 1.2vw, 16px) 0;
}

/* Hook card radius to settings (avatar shape) */
.radius-rounded { --wpf-card-radius: 16px; }
.radius-circle  { --wpf-card-radius: 24px; }  /* a touch more pill-like */
.radius-square  { --wpf-card-radius: 0px; }

/* Make the portrait echo the card radius a bit */
.wpf-staff-photo img {
  border-radius: calc(var(--wpf-card-radius, 16px) - 4px);
}

/* Tighter, more premium spacing on smaller screens */
@media (max-width: 900px){
  .wpf-staff-card { padding: 16px; }
  .wpf-staff-grid { gap: 1.25rem; }
}

/* Ensure nothing kisses the edges on very small phones */
@media (max-width: 480px){
  .wpf-staff-card { padding: 14px; }
}



/* Force directory cards to stack nicely on smaller screens */
@media (max-width: 900px){
  .staff-list{
    grid-template-columns: 1fr 1fr;  /* 2-up on tablets */
  }
}
@media (max-width: 600px){
  .staff-list{
    grid-template-columns: 1fr;      /* 1-up on phones (stack) */
  }
  .staff-item{
    padding: 14px;                    /* a hair more breathing room on tiny screens */
  }
}



/* Consistent aspect ratio for staff images */
.staff-image .photo-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;   /* all images portrait shaped */
  overflow: hidden;
  border-radius: var(--staff-border-radius, 12px);
  display: block;
}

.staff-image .photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop instead of stretch */
  display: block;
}


.wpf-staff-back {
  margin: 2rem 0;
}

.wpf-staff-back .wpf-btn-outline {
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-radius: var(--wpf-radius, 8px); /* matches settings */
}