/* ============================================================
   MEDIA GROUP ASIA — Harmonised Button System
   Every button: border only (no fill), navy + white only,
   single border radius (var(--radius-md) = 8px) everywhere.
   ============================================================ */

/* ─── Base .button class (ad-hoc / standalone use) ─── */
.button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--navy-900, #0a2342);
  background: transparent;
  padding: 14px 25px;
  border-radius: 100px;
  font-size: 1.25em;
  font-weight: 600;
  font-family: var(--font-display, 'DM Sans', sans-serif);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1.5px solid var(--navy-900, #0a2342);
  transition: all var(--duration-base, 250ms) var(--ease-out, ease);
}

.button span {
  position: relative;
  z-index: 1;
}

.button:hover {
  background: var(--navy-900, #0a2342);
  color: #fff;
}

/* ─── .btn--primary — primary CTA ─── */
.btn--primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-decoration: none;
  color: var(--navy-900, #0a2342) !important;
  background: transparent !important;
  padding: 14px 25px;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-display, 'DM Sans', sans-serif);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1.5px solid var(--navy-900, #0a2342);
  overflow: visible;
  isolation: isolate;
  transition: all var(--duration-base, 250ms) var(--ease-out, ease);
}

.btn--primary > * {
  position: relative;
  z-index: 1;
}

.btn--primary:hover {
  background: var(--navy-900, #0a2342) !important;
  color: #fff !important;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .button,
  .btn--primary {
    transition: none !important;
  }
}