/* Full width + grid (unchanged) */
.bpl-two-row-cards.bpl-wide { display:block; width:100%; }
.entry-content .bpl-two-row-cards.bpl-wide,
.wp-block-group .bpl-two-row-cards.bpl-wide { max-width:none !important; }

.bpl-two-row-cards .bpl-grid{
  display:grid; grid-template-columns:repeat(1, minmax(0, 1fr)); grid-auto-rows:1fr;
  gap:1rem; margin:0; padding:0;
}
@media (min-width:640px){ .bpl-two-row-cards .bpl-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:900px){ .bpl-two-row-cards .bpl-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1120px){ .bpl-two-row-cards .bpl-grid{ grid-template-columns:repeat(4, 1fr); } }

/* Card look */
.bpl-two-row-cards .bpl-grid li.event{
  list-style:none; display:flex; flex-direction:column;
  border:1px solid #ddd; border-radius:0px;
  padding:.9rem .9rem .9rem 1.1rem; background:#fff; box-sizing:border-box; position:relative;
  margin:0 !important;
}

/* Make the date bigger and/or bold
.bpl-two-row-cards .bpl-grid li.event > .date{
  font-size: 1.05rem; 
  font-weight: 700; 
  line-height: 1.25;
}
 */

/* Optional: add a little breathing room under the date 
.bpl-two-row-cards .bpl-grid li.event > .date{
  margin-bottom: .15rem;
}
*/

/* Optional: small-screen tweak if it feels crowded
@media (max-width: 480px){
  .bpl-two-row-cards .bpl-grid li.event > .date{
    font-size: 1rem;
    font-weight: 600;
  }
}
 */

/* Use a controlled vertical rhythm with gap (instead of child margins) */
.bpl-two-row-cards .bpl-grid li.event .event-info{
  display:flex;
  flex-direction:column;
  gap:.35rem;                     /* master spacer */
}

/* Prevent vertical list flash when ICS re-renders */
.bpl-two-row-cards .ics-calendar.layout-basic:not(.bpl-ready) ul.events{ visibility:hidden; }

/* After our grid is built (.bpl-ready on the ICS wrapper), hide the native ICS markup */
.bpl-two-row-cards .ics-calendar.layout-basic.bpl-ready > *:not(.bpl-grid){
  display: none !important;
}

/* If our grid is visible, hide ICS's no-events placeholders */
.bpl-two-row-cards .ics-calendar.layout-basic .bpl-grid ~ .no-events,
.bpl-two-row-cards .ics-calendar.layout-basic .bpl-grid ~ .no-events-found,
.bpl-two-row-cards .ics-calendar.layout-basic .bpl-grid ~ .ics-no-events {
  display: none !important;
}

/* Cap at 8 cards (2 rows × 4) */
.bpl-two-row-cards .bpl-grid > li.event:nth-of-type(n+9){ display:none !important; }

/* Vertical bar: uses either --aud-gradient (for multi) or --aud-color (single). Fallback gray. */
.bpl-two-row-cards .bpl-grid li.event::before{
  content:""; position:absolute; left:0; top:.6rem; bottom:.6rem; width:6px; border-radius:6px;
  background: var(--aud-gradient, var(--aud-color, #999));
}

/* Keep .title typography only (no layout battles here) */
.bpl-two-row-cards .bpl-grid .title{
  font-weight:650;
  margin-top:.2rem;
  margin-bottom:.35rem;
  line-height:1.25;
}

/* Make the TITLE LINK itself a compact inline-flex row: text + icons */
.bpl-two-row-cards .bpl-grid .title .bpl-title-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:.35rem;
  max-width:100%;
  text-align:left !important;
  float:none !important; /* avoid themes floating anchors */
  width:auto;            /* avoid anchors stretched full-width */
}

/* Clamp just the text inside the link; let icons sit immediately after */
.bpl-two-row-cards .bpl-grid .title .bpl-title-link .title-text{
  flex:1 1 auto;
  min-width:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Inline icons live inside the link, to the right of the text */
.bpl-two-row-cards .bpl-grid .title .bpl-title-link .title-icons{
  display:inline-flex !important;
  align-items:center !important;
  gap:.35rem;
  flex:0 0 auto;
  margin-left:0 !important; /* kill any :last-child auto margins */
}

/* Icon sizing */
.bpl-two-row-cards .bpl-grid .title .bpl-title-link .title-icons .meta-icon,
.bpl-two-row-cards .bpl-grid .title .bpl-title-link .title-icons .meta-icon svg{
  width:16px; height:16px; display:block;
}

/* Hide any legacy stacked icon container (older script versions) */
.bpl-two-row-cards .bpl-grid .meta-icons{ display:none !important; }



.bpl-two-row-cards .bpl-grid .time{ opacity:.9; font-size:.95rem; }

/* If some themes add extra spacing when a title has_desc */
.bpl-two-row-cards .bpl-grid .title.has_desc{
  margin-bottom:.25rem !important;
}

/* Hide the address line if present (we’ll add group chips instead) */
.bpl-two-row-cards .bpl-grid .location,
.bpl-two-row-cards .bpl-grid .venue { display:none !important; }

/* Audience chips row -- Pill button style with gray background
.bpl-two-row-cards .bpl-grid .aud-chips{ margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.bpl-two-row-cards .bpl-grid .aud-chip{
  font-size:.75rem; line-height:1; padding:.35rem .5rem; border-radius:999px;
  background:#f2f2f2; color:#333; border:1px solid #e6e6e6;
}  */

/* Plain audience line (comma-separated text) */
.bpl-two-row-cards .bpl-grid .aud-line{
  margin-top:0rem;
  font-size:.9rem;
  line-height:1.3;
  color:#333;
}

.bpl-two-row-cards .bpl-grid .reg-row{ margin-top:.35rem; }


/* === Exact LibraryMarket colors (from your list) for single-audience fallback */
.bpl-two-row-cards .bpl-grid li.event.aud-adults         { --aud-color:#E8001E; }
.bpl-two-row-cards .bpl-grid li.event.aud-youth-programs { --aud-color:#207F40; }
.bpl-two-row-cards .bpl-grid li.event.aud-babies         { --aud-color:#E7F949; }
.bpl-two-row-cards .bpl-grid li.event.aud-prek-kindergarten,
.bpl-two-row-cards .bpl-grid li.event.aud-prek-kindergarden { --aud-color:#E1A45A; }
.bpl-two-row-cards .bpl-grid li.event.aud-children       { --aud-color:#39B041; }
.bpl-two-row-cards .bpl-grid li.event.aud-tweens-teens   { --aud-color:#5CA9E5; }
.bpl-two-row-cards .bpl-grid li.event.aud-teens          { --aud-color:#4100D6; }
.bpl-two-row-cards .bpl-grid li.event.aud-parents-guardians { --aud-color:#DDDDDD; }
.bpl-two-row-cards .bpl-grid li.event.aud-college-bound  { --aud-color:#A000CA; }
.bpl-two-row-cards .bpl-grid li.event.aud-self-directed  { --aud-color:#DDDDDD; }

/* Make sure Adults wins if multiple classes exist and we fall back to --aud-color */
.bpl-two-row-cards .bpl-grid li.event.aud-adults        { --aud-color:#E8001E; }

/* Registration row */
.bpl-two-row-cards .bpl-grid .reg-row{
  margin-top:.5rem; display:flex; align-items:center; gap:.4rem;
  font-size:.85rem; line-height:1.2;
}
.bpl-two-row-cards .bpl-grid .reg-row .reg-icon{
  display:inline-flex; width:16px; height:16px;
}
/* Registration status colors */
.bpl-two-row-cards .bpl-grid .reg-row .reg-status{ font-weight:600; }
.bpl-two-row-cards .bpl-grid .reg-row .reg-status.is-open,
.bpl-two-row-cards .bpl-grid .reg-row .reg-status.is-upcoming{ color:#207F6B; }
.bpl-two-row-cards .bpl-grid .reg-row .reg-status.is-closed{ color:#BC303A; }

/* Kill the empty description/location wrapper inside our grid */
.bpl-two-row-cards .bpl-grid .descloc{
  display:none !important;   /* we don't use it in the card layout */
  margin:0 !important;
  padding:0 !important;
}