/* =====================================================================
   SERVICES LIST PAGE  (templates/website/services.html  ->  /services/)
   The grid of all services people can donate to.
   ===================================================================== */

 
  .space-2 {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

@media (max-width: 768px) {
  .space-2 {
    padding-top: 6px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* ---------- service cards: cards in a row share one height (Bootstrap row stretches the cols),
   name takes 1 or 2 lines as needed, price pinned to the bottom — so a 2-line name only makes
   its own row taller and every price button in that row still lines up ---------- */
.svc-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.svc-info{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding-top:14px;
}
/* name: centred, max 2 lines ("…" after that), no fixed height */
.svc-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
  font-size:17px;
  line-height:1.35;
  text-align:center;
  overflow-wrap:anywhere;
}
/* price button: full width, same height, always at the bottom of the card */
.svc-price{
  margin-top:auto;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:40px;
  border-radius:4px;
  text-decoration:none;
}

@media (max-width: 768px) {
  .svc-info{ gap:8px; padding-top:10px; }
  .svc-name{ font-size:14.5px; }
  .svc-price{ min-height:36px; font-size:14px !important; }
}