/* __ATHAR_HOME_CARDS_LAYOUT_V1__
   __ATHAR_HOME_CARDS_LAYOUT_V2_NO_MOBILE_HIDE__
   Live homepage programs grid: CoverFrame (gu) uses aspect-square + beige
   #FBF7EE (same as the page) and img alt=title. Missing
   /images/athar-logo-header.png then paints orphan titles at the TOP of
   empty columns, with the real white card (title + body + button) far below.
   Keep title+body+button together. Do not hide whole cards on mobile.
   Do not touch SPA pin JS. */

#programs article {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  overflow: hidden !important;
  min-height: 0 !important;
  position: relative !important;
}

#programs article > .p-5,
#programs article > div.flex-col {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  gap: 0.5rem;
  background: #fff;
  position: relative !important;
}

#programs article h3 {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  margin-top: 0;
}

/* Fallback / missing cover: hide the giant beige square (orphan alt titles). */
#programs article:has(img[src*="athar-logo-header"]) > .aspect-square,
#programs article:has(img[src*="athar-logo.svg"]) > .aspect-square,
#programs article:has(img[src*="athar-mark"]) > .aspect-square {
  display: none !important;
}

/* Real photos: a modest banner inside the white card, not a full-column square. */
#programs article > .aspect-square {
  aspect-ratio: 16 / 10 !important;
  width: 100%;
  height: 10.5rem !important;
  max-height: 10.5rem !important;
  flex: 0 0 10.5rem;
  background: #efe8d8;
  position: relative !important;
  overflow: hidden;
}

#programs article > .aspect-square > img,
.aspect-square > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
}

#events article {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  background: #fff;
}

#events article > .aspect-square {
  aspect-ratio: 16 / 10 !important;
  max-height: 11rem;
}

.news-slider-in article {
  overflow: hidden;
}

.news-slider-in .aspect-square {
  aspect-ratio: 16 / 10 !important;
  max-height: 14rem;
}