.ymca-program-listing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.program-card {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.program-title { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
.program-dates, .program-ages, .program-location { margin: 4px 0; color: #333; }

.register-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  font-weight: 600;
}

.register-btn.active { background: #0072ce; color: #fff; }   /* Y blue */
.register-btn.waitlist { background: #fcaf17; color: #fff; } /* accent for waitlist */
.register-btn.not-open,
.register-btn.full,
.register-btn.closed {
  background: #c8c8c8; color: #fff; cursor: not-allowed;
}

.ymca-program-pagination {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ymca-program-pagination .page-num,
.ymca-program-pagination .page-link {
  padding: 6px 10px; border-radius: 6px; text-decoration: none; border: 1px solid #ddd;
}
.ymca-program-pagination .current {
  background: #0072ce; color: #fff; border-color: #0072ce;
}

.ymca-program-listing {
  font-size: 12px;     
  line-height: 1.4;
}


.ymca-program-listing .program-card p {
    font-size: 14px;     
    line-height: 1.4;
}
/* Put the button and price on one row */
.ymca-program-listing .program-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* button left, price right */
  gap: 12px;
}

.ymca-program-listing .price-desc {
  font-weight: 600;
  white-space: nowrap;
}

.ymca-program-listing .program-days { margin: 4px 0; }


.ymca-program-listing .program-actions {
    display: flex;          /* place button and price on one row */
    flex-wrap: wrap;        /* allow long price text to break onto a new line */
    align-items: center;    /* vertically center items */
    gap: 0.5rem;            /* space between button and text */
    margin-top: 0.5rem;     /* a little spacing above */
}

.ymca-program-listing .program-actions .price-desc {
    flex: 1 1 200px;        /* allow to shrink and wrap within card */
    word-wrap: break-word;  /* wrap long words if necessary */
    white-space: normal;    /* ensure text can wrap to multiple lines */
	font-size: 0.8rem;
	font-weight: normal;
}
/* Align icon + text nicely on one line */
.ymca-program-listing .program-ages,
.ymca-program-listing .program-location {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;        /* space between icon and text */
}

/* Size the icons (they inherit color from surrounding text) */
.ymca-program-listing .program-ages .icon-age,
.ymca-program-listing .program-location .icon-location {
  width: 1.25rem;
  height: 1.25rem;
	color: #c6168d;
	background-color: currentColor;

}
/* Add extra horizontal spacing before the location icon */
.ymca-program-listing .icon-location {
  margin-left: 1rem; /* adjust value as needed: try 0.75rem–1.5rem */
}
.program-dates-row {
  display: flex;
  justify-content: space-between; /* pushes time to right */
  align-items: center;
}

.program-dates-row .program-dates {
  font-weight: 400; /* match existing style */
}

.program-dates-row .program-times {
  font-weight: 400;
}


/* -------- Compact view (view="compact") -------- */
.ymca-program-listing--compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ymca-program-listing--compact .program-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);

  flex-wrap: nowrap; /* keep name + button on one line */
}

.ymca-program-listing--compact .program-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 600;
  white-space: normal;       /* allow wrap */
}


.ymca-program-listing--compact .program-row__action {
  flex: 0 0 auto;
}

.ymca-program-listing--compact .register-btn {
  margin-top: 0 !important;  /* override full view's margin-top */
  padding: 10px 14px;        /* slightly larger */
  font-size: 1rem;           /* increased */
  line-height: 1;
  white-space: nowrap;
}