/* AJYAL — page-hero meta chips (search, media, listings) */

.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}

.page-hero-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.86);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  backdrop-filter: blur(6px);
}

.page-hero-meta-chip time,
.page-hero-meta time.page-hero-meta-chip {
  font-variant-numeric: tabular-nums;
}

/* Arabic dates (e.g. «13 فبراير 2026») must isolate from LTR meta rows */
.article-date-text,
.article-detail-meta__date .article-date-text {
  unicode-bidi: isolate;
}

/*
 * Programs index cards column — lg:col-span-8 is missing from the compiled
 * theme CSS (PHP heredoc not scanned by Tailwind), which collapsed the
 * cards into a single 1/12 track on desktop.
 */
@media (min-width: 1024px) {
  .programs-index-cards {
    grid-column: span 8 / span 8;
  }
}

/*
 * Homepage / listing cards — crop images to a fixed ratio (never stretch).
 * Arbitrary Tailwind aspect-[…] utilities from PHP heredocs are not in the
 * compiled theme CSS, so natural image heights were making cards uneven.
 */
.page-card-media img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.page-card-media--4x3 {
  aspect-ratio: 4 / 3;
}

.page-card-media--video {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--color-navy-800, #0f172a);
}

.page-card-media--video img {
  position: absolute;
  inset: 0;
}

.home-project-card {
  height: 100%;
}

.home-project-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-muted, #e5e5e5);
}

.home-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s var(--ease-out-expo, ease);
}

.home-project-card:hover .home-project-card__media img {
  transform: scale(1.03);
}

/*
 * Fallbacks for arbitrary Tailwind aspect utilities used in PHP/static HTML
 * that are not present in the compiled theme CSS.
 */
.aspect-\[16\/10\] {
  aspect-ratio: 16 / 10;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4 / 3;
}

.aspect-\[4\/5\] {
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .md\:aspect-\[5\/6\] {
    aspect-ratio: 5 / 6;
  }
}