/* === Task 1 — equal-height tiles === */
.cc-card-grid {
  display: grid;           /* keeps existing gap/columns */
  grid-auto-rows: 1fr;     /* 🔑 every child = same row height */
}

.cc-card {
  display: flex;           /* vertical stack */
  flex-direction: column;
  min-height: 280px;       /* adjust if tallest blurb exceeds */
  padding: 2rem;
  border: 1px solid #E5E8EC;
  background: #fff;
  height: 100%;            /* fill the grid cell completely */
}

.cc-card__body { 
  flex: 1 1 auto; 
}

/* === Task 2 — equal-height offering cards with aligned CTAs === */
.cc-offering-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 1fr;     /* ensure equal height rows */
}

/* Mobile-first responsive adjustments */
@media (max-width: 768px) {
  .cc-offering-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.cc-offering-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  min-height: 100%;
  height: 100%;            /* fill the grid cell completely */
}

.cc-offering-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.cc-offering-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  height: 100%;
}

.cc-offering-card__body {
  flex: 1;
}

.cc-offering-card__cta {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* === Task 3 — Mobile-specific optimizations === */
@media (max-width: 768px) {
  .cc-card {
    min-height: 240px;
    padding: 1.5rem;
  }
  
  .cc-card.flex {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .cc-card .flex-shrink-0 {
    flex-shrink: 1;
    align-self: center;
  }
  
  .cc-offering-card {
    border-radius: 8px;
  }
  
  .cc-offering-card__content {
    padding: 1.5rem;
  }
}

/* Mobile touch improvements */
@media (max-width: 768px) {
  .cc-offering-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .cc-card:hover {
    transform: none;
  }
  
  /* Larger touch targets for mobile */
  button {
    min-height: 48px;
    min-width: 48px;
  }
}

/* Better mobile padding */
@media (max-width: 640px) {
  .cc-card {
    padding: 1.25rem;
    min-height: 200px;
  }
  
  .cc-offering-card__content {
    padding: 1.25rem;
  }
}