/* Brand variables – tweak as needed (sourced from public brand assets) */
:root{
  --cellcard-orange:  #084325; /* Button/CTA */
  --cellcard-gray:   #084325; /* Text/label */
  --cellcard-light:  #FFCC87; /* Accent */
  --card-bg: #fff;
  --card-border: #e8e8e8;
  --card-radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.cellcard-grid{
  display: grid;
  gap: 18px;
  margin: 10px 0 24px;
}

.cellcard-grid[data-columns="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cellcard-grid[data-columns="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cellcard-grid[data-columns="1"]{ grid-template-columns: 1fr; }

@media (max-width: 1024px){ .cellcard-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px){  .cellcard-grid{ grid-template-columns: 1fr !important; } }

.cellcard-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.cellcard-photo-wrap{ position: relative; background: #fff; }
.cellcard-photo{ width: 100%; height: auto; display: block; }
.cellcard-photo.placeholder{ min-height: 360px; background: #f6f6f6; }

.cellcard-name-ribbon{
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  background: rgba(63,60,67,0.85);
  color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
}

.cellcard-name{ font-weight: 700; display: block; }
.cellcard-role{ font-size: 0.95rem; opacity: 0.9; display: block; margin-top: 2px; }

.cellcard-text{ padding: 14px 16px 0; color: var(--cellcard-gray); }
.cellcard-text .cellcard-name{ color: var(--cellcard-gray); font-size: 1.05rem; }
.cellcard-text .cellcard-role{ font-size: 0.95rem; color: #60626a; }

.cellcard-actions{ padding: 16px; margin-top: auto; }

.cellcard-button{
  width: 100%;
  background: #084325;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  padding: 12px 18px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.02s ease;
}
.cellcard-button:hover{ filter: brightness(0.95); }
.cellcard-button:active{ transform: translateY(1px); }

/* Modal */
.cellcard-modal{ position: fixed; inset: 0; display: none; }
.cellcard-modal[aria-hidden="false"]{ display: block; }
.cellcard-modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.cellcard-modal__inner{
  position: relative;
  z-index: 1;
  background: #fff;
  width: min(720px, 92vw);
  margin: 6vh auto;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 24px 24px 28px;
}
.cellcard-modal__close{
  position: absolute; right: 14px; top: 10px;
  background: transparent; border: none; font-size: 28px; line-height: 1;
  color: var(--cellcard-gray); cursor: pointer;
}
.cellcard-modal__title{ margin: 0 0 6px; color: var(--cellcard-gray); }
.cellcard-modal__role{ color: #5a5d64; margin-bottom: 12px; }
.cellcard-modal__content{ color: #333; }


/* Make sure the modal is highest in the page */
.cellcard-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99998; /* higher than any card/image */
}

.cellcard-modal[aria-hidden="false"] {
  display: block;
}

/* backdrop below the dialog but above page content */
.cellcard-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99998;
}

/* inner dialog panel sits on top of the backdrop */
.cellcard-modal__inner {
  position: relative;
  z-index: 99999;
}

/* optional: keep card elements low, so they never cover overlays */
.cellcard-card,
.cellcard-photo-wrap,
.cellcard-photo {
  z-index: auto; /* ensure no unexpected high z-index on cards/photos */
}