/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Shared Card Styles */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body:not(.dark-mode) .card {
  background-color: var(--white);
}

.card {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  border: none;
  position: relative;
  max-width: 100%;
}

.card-img {
  background-color: var(--gray-400);
}

.card-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  min-height: 0;
}

.card h3 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--gray-900);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.card p {
  color: var(--gray-600);
  margin: 0;
  line-height: 1.5;
  font-size: 0.95rem;
  flex: 1;
}

.card-img {
  position: relative;
  overflow: hidden;
  height: 250px;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.before-after-img {
  transition: opacity 0.5s ease-in-out;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Before-After Image Container */
.card-img.before-after-img {
  position: relative;
  height: 250px; /* Adjust to match your existing .card-img height if different */
  overflow: hidden;
}

/* Before and After Images */
.card-img.before-after-img .before-img,
.card-img.before-after-img .after-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.3s ease-in-out;
}

/* Toggle Buttons Container */
.card-img.before-after-img .toggle-buttons {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  padding: 6px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Toggle Button Styles */
.card-img.before-after-img .btn-toggle {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  background-color: rgba(255, 255, 255, 0.1);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.card-img.before-after-img .btn-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.card-img.before-after-img .btn-toggle:active {
  transform: translateY(0);
}

.card-img.before-after-img .btn-toggle.active {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .card-img.before-after-img .btn-toggle {
  background-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .card-img.before-after-img .btn-toggle:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .card-img.before-after-img .btn-toggle.active {
  background-color: var(--primary-light);
  color: var(--black);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Dark Mode Card Styles */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body.dark-mode .card-content {
  background-color: var(--dark-surface-1);
  box-shadow: var(--shadow-md);
}

body.dark-mode .card h3 {
  color: var(--primary-light);
}

body.dark-mode .card p {
  color: var(--gray-300);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Section Specific Card Styles */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.team-card {
  width: calc(100% / var(--team-max-columns) - 1rem);
  max-width: var(--team-card-width);
  min-width: var(--team-card-width);
}

.service-card {
  width: calc(100% / var(--services-max-columns) - 1rem);
  max-width: var(--services-card-width);
  min-width: var(--services-card-width);
}

.project-card {
  width: calc(100% / var(--projects-max-columns) - 1rem);
  max-width: var(--projects-card-width);
  min-width: var(--projects-card-width);
}

.gallery-card {
  width: calc(100% / var(--gallery-max-columns) - 1rem);
  max-width: var(--gallery-card-width);
  min-width: var(--gallery-card-width);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Card Accent Bar */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.card-accent-bar {
  height: 4px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--primary-light) 50%,
    var(--primary) 100%
  );
  background-size: 200% 100%;
  animation: shine 3s infinite linear;
}

body.dark-mode .card-accent-bar {
  background: linear-gradient(
    90deg,
    var(--primary-dark) 0%,
    var(--primary-light) 50%,
    var(--primary-dark) 100%
  );
  background-size: 200% 100%;
  animation: shine 3s infinite linear;
}
@keyframes shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Admin Card Toolbar (New Footer for Admin Cards) */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.admin-card-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--gray-100);
  border-top: 1px solid var(--gray-200);
}

.admin-card-toolbar .btn-icon {
  background-color: var(--gray-200);
  color: var(--gray-700);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.admin-card-toolbar .btn-icon:hover {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

.admin-card-toolbar .btn-icon.edit-team-member {
  background-color: var(--primary);
  color: var(--white);
}

.admin-card-toolbar .btn-icon.edit-team-member:hover {
  background-color: var(--primary-dark);
}

.admin-card-toolbar .btn-icon.delete-team-member {
  background-color: var(--danger);
  color: var(--white);
}

.admin-card-toolbar .btn-icon.delete-team-member:hover {
  background-color: var(--danger-dark);
}

/* Dark Mode Styles for Admin Card Toolbar */
body.dark-mode .admin-card-toolbar {
  background-color: var(--dark-surface-2);
  border-top: 1px solid var(--gray-700);
}

body.dark-mode .admin-card-toolbar .btn-icon {
  background-color: var(--gray-600);
  color: var(--gray-200);
}

body.dark-mode .admin-card-toolbar .btn-icon:hover {
  background-color: var(--gray-500);
  color: var(--gray-100);
}

body.dark-mode .admin-card-toolbar .btn-icon.edit-team-member {
  background-color: var(--primary-light);
  color: var(--black);
}

body.dark-mode .admin-card-toolbar .btn-icon.edit-team-member:hover {
  background-color: var(--primary);
  color: var(--white);
}

body.dark-mode .admin-card-toolbar .btn-icon.delete-team-member {
  background-color: var(--danger-dark);
  color: var(--white);
}

body.dark-mode .admin-card-toolbar .btn-icon.delete-team-member:hover {
  background-color: var(--danger);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Card Hover Effect */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.card:not(.before-after-card):hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card:not(.before-after-card):hover img {
  transform: scale(1.05);
}

@media (hover: none) {
  .card:not(.before-after-card):hover {
    transform: none;
    box-shadow: none;
  }

  .card:not(.before-after-card):hover img {
    transform: none;
  }
}