/* =====================================================================
   ILAHIA TRUST — DESIGN SYSTEM  ·  media.css
   "Designed image slots": premium gradient tiles carrying the geometric
   motif + representative iconography. These stand in for real campus
   photography and are structured so a real <img> can replace them 1:1.
   ===================================================================== */

.media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  min-height: 9rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(140deg, var(--m1, #178a6c), var(--m2, #0a3d31));
  isolation: isolate;
}
/* geometric overlay */
.media::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.4'%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='48' cy='0' r='24'/%3E%3Ccircle cx='0' cy='48' r='24'/%3E%3Ccircle cx='48' cy='48' r='24'/%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px 46px;
  opacity: 0.16;
  mix-blend-mode: screen;
}
/* soft directional light + vignette to feel photographic */
.media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,0.22), transparent 46%),
    radial-gradient(120% 120% at 100% 100%, rgba(0,0,0,0.34), transparent 55%);
}
.media > * { position: relative; z-index: 2; }

/* Real photograph filling a media tile (vignette/label stay on top for legibility) */
.media-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(1.14) saturate(1.06); }
.media:has(.media-photo)::before { opacity: 0; }   /* drop the geometry over real photos */
.media:has(.media-photo)::after { background: linear-gradient(transparent 58%, rgba(4,18,14,0.45)); } /* lighter scrim, just for the label */

.media-glyph { opacity: 0.9; }
.media-glyph svg { width: clamp(2.4rem, 6vw, 3.6rem); height: auto; color: rgba(255,255,255,0.92); }

.media-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.2rem 1.1rem 0.95rem;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); color: #fff;
  background: linear-gradient(transparent, rgba(6,26,20,0.55));
  display: flex; align-items: center; gap: 0.45rem;
}
.media-label svg { width: 1rem; height: 1rem; opacity: 0.85; }

/* Colour ways (institution + section identities) */
.media--emerald { --m1:#178a6c; --m2:#0a3d31; }
.media--pine    { --m1:#0e7458; --m2:#052620; }
.media--blue    { --m1:#2f66d6; --m2:#14357c; }   /* ICET */
.media--violet  { --m1:#7a3ea8; --m2:#3f1f5e; }   /* ICAS */
.media--amber   { --m1:#c2571f; --m2:#7a3410; }   /* Polytechnic */
.media--teal    { --m1:#1f8f7a; --m2:#0c4d41; }   /* Pharmacy */
.media--sky     { --m1:#2f6fb0; --m2:#173f66; }   /* Public School */
.media--rose    { --m1:#c0453b; --m2:#7a221c; }   /* KMLPS */
.media--gold    { --m1:#d69e3c; --m2:#8f621d; }
.media--slate   { --m1:#46564f; --m2:#1d302a; }

/* Aspect helpers */
.ar-16-9 { aspect-ratio: 16/9; }
.ar-16-10{ aspect-ratio: 16/10; }
.ar-4-3  { aspect-ratio: 4/3; }
.ar-4-5  { aspect-ratio: 4/5; }
.ar-1-1  { aspect-ratio: 1/1; }

/* Avatar monogram (for testimonials / faculty stand-ins) */
.monogram {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  color: #fff; font-size: 1.05rem; letter-spacing: 0.02em;
  background: linear-gradient(140deg, var(--m1, #178a6c), var(--m2, #0a3d31));
}
.monogram.lg { font-size: 2.2rem; }