/* Masar University — reusable components (mu-*) */

.mu-container {
  width: min(calc(100% - 2 * var(--mu-gutter)), var(--mu-container));
  margin-inline: auto;
}

/* ---------- Buttons ---------- */
.mu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  padding: .7rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--mu-radius-md);
  font: inherit;
  font-size: 1rem;
  font-weight: var(--mu-fw-bold);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--mu-dur) ease,
    border-color var(--mu-dur) ease,
    color var(--mu-dur) ease,
    transform var(--mu-dur) var(--mu-ease),
    box-shadow var(--mu-dur) ease;
}
.mu-btn .ti { font-size: 1.15em; }
.mu-btn:hover { transform: translateY(-2px); }

/* Primary on light backgrounds */
.mu-btn--primary { background: var(--mu-teal-700); border-color: var(--mu-teal-700); color: #fff; }
.mu-btn--primary:hover,
.mu-btn--primary:focus-visible { background: var(--mu-navy); border-color: var(--mu-navy); color: #fff; }

/* Primary on dark backgrounds only — navy text on gold (7.2:1). One per screen. */
.mu-btn--gold { background: var(--mu-gold); border-color: var(--mu-gold); color: var(--mu-navy-950); }
.mu-btn--gold:hover,
.mu-btn--gold:focus-visible { background: #FFC933; border-color: #FFC933; box-shadow: 0 10px 28px rgba(245, 184, 0, .28); }

/* Secondary on light */
.mu-btn--secondary { background: transparent; border-color: var(--mu-navy); color: var(--mu-navy); }
.mu-btn--secondary:hover,
.mu-btn--secondary:focus-visible { background: var(--mu-navy); color: #fff; }

/* Secondary on dark */
.mu-btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.mu-btn--ghost-light:hover,
.mu-btn--ghost-light:focus-visible { background: #fff; border-color: #fff; color: var(--mu-navy); }

/* ---------- Eyebrow (small label above a heading) ---------- */
.mu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  color: var(--mu-bronze-700);   /* warm label on light (5.85:1); gold rules carry the accent */
  font-size: 1rem;
  font-weight: var(--mu-fw-bold);
}
.mu-eyebrow::after {
  content: "";
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--mu-gold);
}
.mu-eyebrow--gold { color: var(--mu-gold); }   /* on dark backgrounds only */

/* ---------- Badge ---------- */
.mu-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .7rem;
  border-radius: var(--mu-radius-pill);
  background: var(--mu-teal-100);
  color: var(--mu-navy);
  font-size: var(--mu-fs-small);
  font-weight: var(--mu-fw-semibold);
}
.mu-badge--gold { background: #FFF4D1; color: var(--mu-bronze-700); }
.mu-badge--upcoming { background: var(--mu-teal-100); color: var(--mu-teal-700); }
.mu-badge--urgent { background: #B42318; color: var(--mu-white); }

/* ---------- Glass chip (dark backgrounds, used sparingly) ---------- */
.mu-chip {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .95rem .65rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--mu-radius-lg);
  background: rgba(8, 36, 78, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 10, 30, .28);
}
.mu-chip__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(95, 208, 227, .16);
  color: var(--mu-teal-300);
  font-size: 1.25rem;
}
.mu-chip__title { display: block; font-size: .95rem; font-weight: var(--mu-fw-bold); line-height: 1.35; }
.mu-chip__meta { display: block; color: var(--mu-on-dark-muted); font-size: .8rem; line-height: 1.4; }

/* ---------- Sections & headings ---------- */
.mu-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.mu-section--surface { background: var(--mu-surface); }
.mu-section--tint { background: var(--mu-surface-2); }
.mu-section--dark {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(circle at 12% 12%, rgba(4, 138, 164, .26), transparent 36%),
    linear-gradient(135deg, var(--mu-navy-950) 0%, var(--mu-navy) 55%, var(--mu-navy-800) 100%);
}
/* Circuit texture layer for dark areas (uses the #mu-circuit pattern defined once in the page) */
.mu-texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: #fff;
  opacity: .05;
  pointer-events: none;
}

.mu-heading { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mu-heading--center { margin-inline: auto; text-align: center; }
.mu-heading--center .mu-eyebrow::before {
  content: "";
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--mu-gold);
}
/* Heading on a dark band */
.mu-heading--on-dark .mu-heading__title { color: #fff; }
.mu-heading--on-dark .mu-heading__text { color: var(--mu-on-dark); }
.mu-heading__title {
  margin: .5rem 0 .75rem;
  color: var(--mu-navy);
  font-size: var(--mu-fs-h2);
  font-weight: var(--mu-fw-bold);
  line-height: 1.35;
  text-wrap: balance;
}
.mu-heading__text {
  margin: 0;
  color: var(--mu-text-muted);
  font-size: var(--mu-fs-body-lg);
}
.mu-heading--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
}

/* ---------- Arrow link ---------- */
.mu-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--mu-teal-700);
  font-weight: var(--mu-fw-bold);
  text-decoration: none;
}
.mu-link .ti { transition: transform var(--mu-dur) var(--mu-ease); }
.mu-link:hover { color: var(--mu-navy); }
.mu-link:hover .ti { transform: translateX(-4px); }
/* LTR pages get the mirrored icon in their markup (build.py flips ti-arrow-left/right), so only the nudge turns */
html[dir="ltr"] .mu-link:hover .ti { transform: translateX(4px); }

/* ---------- Card ---------- */
.mu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mu-border);
  border-radius: var(--mu-radius-lg);
  background: #fff;
  box-shadow: var(--mu-shadow-sm);
  transition: transform var(--mu-dur) var(--mu-ease), box-shadow var(--mu-dur) ease, border-color var(--mu-dur) ease;
}
/* Cards are display-only (only their explicit link navigates); the lift is decorative */
.mu-card:hover {
  transform: translateY(-4px);
  border-color: rgba(4, 138, 164, .45);
  box-shadow: var(--mu-shadow-md);
}

/* Soft icon tile */
.mu-icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--mu-teal-100);
  color: var(--mu-teal-700);
  font-size: 1.75rem;
}
.mu-icon-tile--teal { background: var(--mu-teal-700); color: #fff; }
.mu-icon-tile--navy { background: var(--mu-navy); color: var(--mu-gold); }

/* ---------- Media frame (16:9) ----------
   Portrait posters are shown whole (contain) over a blurred copy of themselves,
   so nothing is cropped or stretched. Set --mu-img on the frame. */
.mu-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--mu-navy);
}
.mu-media::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: var(--mu-img) center / cover no-repeat;
  filter: blur(18px) saturate(1.1) brightness(.85);
}
.mu-media img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s var(--mu-ease);
}
.mu-media--cover img { object-fit: cover; }