/* ─── Theme Variables ────────────────────────────────── */
:root {
  --mle-gold:       #c1a14a;
  --mle-gold-dark:  #a8893a;
  --mle-teal:       #1a8a92;
  --mle-ink:        #16323a;
  --mle-ink-soft:   #4a6a70;
}

/* ─── Root wrapper (full-bleed, no inner gaps) ───────── */
.mle-root {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  display: block;
  box-sizing: border-box;
  padding: 0;
}
.mle-root > * { margin: 0 !important; }

/* ─── Announcement Bar ──────────────────────────────── */
.mle-announcement-bar {
  position: relative;
  z-index: 3;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
}
.mle-announcement-bar a { color: #fff; text-decoration: none; }
.mle-announcement-bar a:hover { text-decoration: underline; }
.mle-marquee-track {
  display: flex;
  width: max-content;
  animation: mle-marquee-scroll 12s linear infinite;
  white-space: nowrap;
}
.mle-marquee-content { display: inline-block; }
.mle-marquee-track:hover { animation-play-state: paused; }
@keyframes mle-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Hero Section ──────────────────────────────────── */
.mle-hero {
  position: relative;
  background: var(--mle-ink);
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
}
.mle-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay — dark (white text) vs light (dark text, left gradient) */
.mle-hero-overlay { position: absolute; inset: 0; }
.mle-theme-dark .mle-hero-overlay {
  background: rgba(18, 40, 47, 0.48);
}
.mle-theme-light .mle-hero-overlay {
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.70),
    rgba(255, 255, 255, 0.22));
}

/* Content */
.mle-hero-content {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 112px 16px 56px;
  box-sizing: border-box;
}
.mle-hero-text { max-width: 760px; }

.mle-align-center .mle-hero-content { justify-content: center; }
.mle-align-center .mle-hero-text { text-align: center; margin: 0 auto; }
.mle-align-center .mle-hero-cta-group { justify-content: center; }
.mle-align-center .mle-hero-logo { margin-left: auto; margin-right: auto; }

/* Logo above title */
.mle-hero-logo {
  display: block;
  max-width: 220px;
  height: auto;
  margin: 0 0 20px;
}

/* Text colors per theme */
.mle-theme-dark .mle-hero-title,
.mle-theme-dark .mle-hero-title-en,
.mle-theme-dark .mle-hero-subtitle,
.mle-theme-dark .mle-hero-desc { color: #ffffff; }
.mle-theme-light .mle-hero-title,
.mle-theme-light .mle-hero-title-en { color: var(--mle-ink); }
.mle-theme-light .mle-hero-subtitle { color: var(--mle-ink); }
.mle-theme-light .mle-hero-desc { color: #1b1b1b; }

.mle-hero-title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 8px;
  animation: mle-slide 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mle-hero-title-en {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
  animation: mle-slide 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}
.mle-hero-subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 20px;
  animation: mle-slide-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.2s;
}
.mle-hero-desc {
  font-size: 1rem;
  margin: 0 0 32px;
  line-height: 1.85;
  animation: mle-slide-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.35s;
}
.mle-align-center .mle-hero-desc { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ─── CTA Buttons ───────────────────────────────────── */
.mle-hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.mle-hero-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.15s !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}
.mle-hero-cta:active { transform: scale(0.97); }

/* Solid — gold accent */
.mle-cta-solid {
  background: var(--mle-gold) !important;
  color: #ffffff !important;
  border: 2px solid var(--mle-gold) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}
.mle-cta-solid:hover {
  background: var(--mle-gold-dark) !important;
  border-color: var(--mle-gold-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24) !important;
}

/* Outline — adapts to theme */
.mle-cta-outline {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
}
.mle-cta-outline:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
.mle-theme-light .mle-cta-outline {
  background: transparent !important;
  border-color: var(--mle-gold) !important;
  color: var(--mle-gold-dark) !important;
}
.mle-theme-light .mle-cta-outline:hover {
  background: rgba(193, 161, 74, 0.12) !important;
  color: var(--mle-gold-dark) !important;
}

/* ─── Info Strip ────────────────────────────────────── */
.mle-statsbar {
  position: relative;
  z-index: 2;
}
.mle-statsbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.mle-statsbar-grid { display: grid; }

.mle-stat { padding: 18px 16px; }
.mle-stat-icon { width: 32px; height: 32px; flex-shrink: 0; }
.mle-stat-text { display: flex; flex-direction: column; gap: 2px; }
.mle-stat-label { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.mle-stat-note { font-size: 0.8125rem; line-height: 1.55; }

/* Layout — stacked (icon on top) */
.mle-layout-stacked .mle-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

/* Layout — horizontal (icon left, text right) */
.mle-layout-horizontal .mle-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}
.mle-layout-horizontal .mle-stat-icon { width: 30px; height: 30px; }

/* Bar style — gold */
.mle-bar-gold { background: rgba(193, 161, 74, 0.88); }
.mle-bar-gold .mle-stat-icon,
.mle-bar-gold .mle-stat-label,
.mle-bar-gold .mle-stat-note { color: #ffffff; }
.mle-bar-gold .mle-stat-note { color: rgba(255, 255, 255, 0.92); }
.mle-bar-gold .mle-stat { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }

/* Bar style — white */
.mle-bar-white {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(22, 50, 58, 0.12);
}
.mle-bar-white .mle-stat-icon { color: var(--mle-teal); }
.mle-bar-white .mle-stat-label { color: var(--mle-ink); }
.mle-bar-white .mle-stat-note { color: var(--mle-ink-soft); }
.mle-bar-white .mle-stat { border-bottom: 1px solid rgba(22, 50, 58, 0.12); }

/* Bar style — dark */
.mle-bar-dark {
  background: rgba(18, 40, 47, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mle-bar-dark .mle-stat-icon,
.mle-bar-dark .mle-stat-label { color: #ffffff; }
.mle-bar-dark .mle-stat-note { color: rgba(255, 255, 255, 0.82); }
.mle-bar-dark .mle-stat { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

/* ─── Animations ────────────────────────────────────── */
@keyframes mle-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes mle-slide {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Mobile (default grid) ─────────────────────────── */
.mle-layout-stacked .mle-statsbar-grid { grid-template-columns: 1fr 1fr; }
.mle-layout-horizontal .mle-statsbar-grid { grid-template-columns: 1fr; }

/* ─── Tablet & Desktop ──────────────────────────────── */
@media (min-width: 768px) {
  .mle-hero { min-height: 100vh; }
  .mle-hero-content { padding: 96px 24px 64px; }
  .mle-hero-title { font-size: 3rem; }
  .mle-hero-title-en { font-size: 2.1rem; }
  .mle-hero-subtitle { font-size: 1.25rem; }

  .mle-layout-stacked .mle-statsbar-grid,
  .mle-layout-horizontal .mle-statsbar-grid { grid-template-columns: repeat(var(--mle-cols, 4), 1fr); }
  .mle-stat { border-bottom: none !important; }
  .mle-bar-gold .mle-stat:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.22); }
  .mle-bar-white .mle-stat:not(:last-child) { border-right: 1px solid rgba(22, 50, 58, 0.12); }
  .mle-bar-dark .mle-stat:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.18); }

  .mle-stat { padding: 22px 16px; }
  .mle-stat-label { font-size: 1.05rem; }
  .mle-stat-note { font-size: 0.85rem; }
}

@media (min-width: 1024px) {
  .mle-hero-content { padding: 100px 32px 72px; }
  .mle-hero-title { font-size: 3.4rem; }
}