/* MAM Landing Styles */
:root{
  --brand:#1798C6;
  --brand-ink:#0b2b36;
  --ink:#112a33;
  --bg:#f8fbfd;
  --alt:#eef7fb;
  --white:#fff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html[lang="zh-Hans"] body { word-break: keep-all; }

body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:16px/1.6 'Inter','Noto Sans SC',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.5rem .75rem;border-radius:8px;box-shadow:var(--shadow)}

.announcement{background:var(--brand);color:#fff;text-align:center;padding:0.3rem}
.announcement .btn{margin-left:.75rem;background:#fff;color:var(--brand);}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:.75rem;align-items:center;color:inherit}
.brand img{width:58px;height:auto}
.brand-text{font-weight:800;line-height:1.05}
.brand-text small{font-weight:600;color:#4f6b77}

.nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:18px;
}
.nav ul > li{
  display:flex;
  align-items:center;
}

.nav a:not(.lang-btn){
  padding: 10px 8px;
  border-radius: 8px;
}
.nav a:not(.lang-btn):hover{
  background: var(--alt);
  text-decoration: none;
}

.nav-toggle{
  display:none;
  border:0;
  background:#fff;
  font-size:28px;
  line-height:1;
  padding:6px 10px;
  border-radius:10px;
}

/* Language button — identical look for <button> or <a> */
.lang-btn{
  border: 2px solid var(--brand);
  background: transparent;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow);
  cursor: pointer;

  /* make anchors behave like the old button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  transition: transform 120ms ease, background-color 160ms ease,
              color 160ms ease, box-shadow 120ms ease;
}
.lang-btn:hover{
  background: var(--brand);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none; /* keep underline off */
}
.lang-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.lang-btn:focus-visible{
  outline: 3px solid rgba(23,152,198,.3);
  outline-offset: 2px;
}



@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;
    right:16px;
    top:66px;
    background:#fff;
    border:1px solid #e6eef2;
    border-radius:12px;
    box-shadow:var(--shadow);
    padding:10px 6px;
    display:none;
  }
  .nav.open{display:block}
  .nav ul{flex-direction:column; gap:6px; min-width:210px}
  .nav .lang-btn{width:100%; text-align:center}
}


/* Hero section (use a var so the art can sit flush with the bottom edge) */
.hero{
  --hero-pad-y: 48px;
  background: linear-gradient(135deg, var(--alt), #dff1f8);
  padding-block: var(--hero-pad-y) 0;  /* top only; bottom = 0 */
  position: relative;
  overflow: hidden;                    /* keep if you like the clipped look */
}

.hero-inner{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 30px;
  align-items: center;
}

.hero-copy{
  position: relative;
  z-index: 1;
  padding-bottom: var(--hero-pad-y);   /* gives left column breathing room */
}

.hero h1{
  font-size: clamp(28px, 4vw, 48px);
  margin: 0 0 .4rem;
  line-height: 1.4;
}

.hero .cn{
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 800;
  color: var(--brand);
}

.hero-title .subhead{
  display: block;
  font-size: 0.7em;
}

.hero p {
  margin: .4rem 0;
}

/* Keep the image in the right grid column and pin it to the bottom */
.hero-art{
  align-self: end;     /* bottom of its grid cell */
  justify-self: end;   /* right align inside the cell */
  min-height: 0;       /* don’t force extra height */
}

.hero-art img{
  position: static;
  top: auto; right: auto; bottom: auto; left: auto; /* clear any legacy offsets */
  display: block;
  width: clamp(240px, 38vw, 480px);
  max-width: 100%;
  height: auto;

  /* clarity + depth + subtle permanent halo */
  filter:
    saturate(1.04)
    contrast(1.08)
    drop-shadow(0 18px 50px rgba(9,30,45,.24))   /* ambient */
    drop-shadow(0 6px 16px rgba(9,30,45,.12))    /* contact */
    drop-shadow(0 0 18px color-mix(in srgb, var(--brand) 16%, transparent)); /* halo */
  will-change: filter;
  pointer-events: none;

}
@supports not (color: color-mix(in srgb, white 50%, black 50%)){
  .hero-art img{
    filter:
      saturate(1.04)
      contrast(1.08)
      drop-shadow(0 18px 50px rgba(9,30,45,.24))
      drop-shadow(0 6px 16px rgba(9,30,45,.12))
      drop-shadow(0 0 18px rgba(23,152,198,.16)); /* fallback halo */
  }
}


/* Tablet tweak if needed */
@media (max-width: 1200px){
  .hero-art img{ width: clamp(220px, 34vw, 440px); }
}

@media (max-width: 960px){
  .hero-inner{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-copy{
    padding-bottom: 0;
  }
  .hero-copy > *:last-child{ margin-bottom: 0 !important; }
  .hero-art{
    margin-top: 5px;
    justify-self: center;
  }
  .hero-art img{
    width: clamp(240px, 76vw, 560px);
  }
}



/* shared CTA container styles */
.cta-group{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* section-specific alignment */
.cta-group--hero{ justify-content:flex-start; }
.cta-group--apply{ justify-content:center; }

.quick-contact{ opacity: .8; }

.section{padding:56px 0}
.section--alt{background:#fff}
.section h2{font-size:clamp(24px,3vw,34px);margin:0 0 20px}
.lead{font-weight:600}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #e6eef2;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .5rem}
.card--doc{text-align:center}

.table-wrap{overflow:auto;background:#fff;border:1px solid #e6eef2;border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:separate;border-spacing:0}
caption{text-align:left;padding:14px 16px;font-weight:700}
thead th{background:#f5fbff}
th,td{padding:12px 16px;text-align:left;border-top:1px solid #eef4f7}
thead th:first-child{border-top-left-radius:12px}
thead th:last-child{border-top-right-radius:12px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.well{background:var(--alt);border:1px dashed #cfe6f2;border-radius:var(--radius);padding:18px}

.checklist{margin:0;padding:0;list-style:none}
.checklist li{padding-left:28px;position:relative;margin:8px 0}
.checklist li::before{content:'✓';position:absolute;left:0;top:0;color:var(--brand);font-weight:800}

.map-wrap iframe{width:100%;height:260px;border:0;border-radius:12px;box-shadow:var(--shadow)}

.cta{background:linear-gradient(135deg,#e8f7fc,#d6eef8);text-align:center;border-block:1px solid #e6eef2}
.site-footer{background:#0e303a;color:#d8edf5;padding:22px 0;margin-top:10px}
.site-footer a{color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;border-radius:12px;padding:10px 16px;font-weight:700;box-shadow:var(--shadow)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn--small{padding:8px 12px;border-radius:10px}

.note{opacity:.75;margin-top:10px}

@media (max-width: 960px){
  .cards{grid-template-columns:1fr 1fr}
  .hero-inner{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .announcement p{padding:0 .5rem}
}

/* PVSA: keep the logo a reasonable size on all screens */
.pvsa { align-items: center; }              /* vertical center from earlier */
.pvsa-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pvsa-logo img{
  width: clamp(160px, 22vw, 260px);  /* min 160px, fluid, max 260px */
  height: auto;
  max-width: 100%;
}
@media (max-width: 640px){
  .pvsa-logo img{ width: 200px; }    /* a touch bigger on small screens */
}

@media (max-width: 960px){ .pvsa{grid-template-columns:1fr} .pvsa-logo{margin-bottom:12px} }


/* Full-width resource callout for docs/registration */
.resource-callout{
  background: linear-gradient(135deg, var(--alt), #dff1f8);
  border: 2px solid #cfe6f2;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-top: 18px;
}
.resource-callout h3{ margin: 0 0 .5rem; }
.resource-callout .btn{ margin-top: .5rem; }



/* Responsive video embed */
.media{ margin-top:18px }
.media h3{ margin:0 0 .5rem }

.splide__slide img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;   /* consistent height */
  object-fit: cover;      /* crop gracefully */
}

/* Pagination: below the slider, larger, higher contrast */
.splide__pagination{
  position: static;          /* no overlay */
  transform: none;
  margin-top: 4px;
  padding: 4px 0;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.splide__pagination__page{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;       /* light gray */
  opacity: 1;                 /* override theme */
  border: 0;
}

.splide__pagination__page.is-active{
  background: var(--brand);
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--brand); /* visible focus ring */
}
.splide__pagination li{ margin: 0; }

/* Make Splide arrows bigger, high-contrast, and centered on the sides */
.splide{ position: relative; }                 /* anchor for absolute arrows */

/* let the wrapper span the slider without blocking clicks inside */
.splide__arrows{ pointer-events: none; }

.splide__arrow{
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fff;                 /* strong contrast against photos */
  color: var(--brand);              /* icon color */
  border: 2px solid var(--brand);
  box-shadow: var(--shadow);
  opacity: 1;                       /* override theme fades */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;             /* re-enable inside wrapper */
  transition: box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.splide__arrow--prev{ left: clamp(8px, 1.5vw, 14px); }
.splide__arrow--next{ right: clamp(8px, 1.5vw, 14px); }

.splide__arrow:hover{ box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.splide__arrow:focus-visible{ outline: 3px solid rgba(23,152,198,.35); outline-offset: 2px; }

/* slightly larger chevrons */
.splide__arrow svg{ width: 18px; height: 18px; }

.splide__arrow:disabled{
  opacity: .38;
  background: #f1f5f9;
  border-color: #cbd5e1;
  cursor: auto;
}

@media (max-width: 640px){
  .splide__arrow{ width: 40px; height: 40px; }
}


.muted{ opacity:.75; }
.carousel-note{ text-align:center; margin:.5rem 0 0; }



/* Curriculum & Registration layout */
.well--resource{
  display:grid;
  grid-template-columns: 1fr minmax(180px, 220px);
  gap:16px;
  align-items:stretch;
  margin-top:24px;
}


/* left text tweaks */
.resource__info h3{ margin-top:0; }

/* the clickable card (smaller + top aligned) */
.doc-stack{
  align-self:stretch;          /* fill the grid row height */
  height:100%;                 /* fill, but… */
  min-height:0;                /* …never push the row taller */
  box-sizing:border-box;       /* padding counts toward that height */
  display:grid;
  place-items:center;
  text-align:center;
  text-decoration:none;
  color:var(--brand-ink);
  background:var(--white);
  border:1px solid #cfe6f2;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.doc-stack:hover,
.doc-stack:focus-visible{
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  text-decoration:none;
  outline: none;
}

/* smaller icon + label spacing */
.doc-stack__svg{
  width:60%;                 /* was 70% */
  max-width:110px;           /* was 150px */
  height:auto;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.06));
}
.doc-stack__label{
  display:block;
  font-weight:700;
  margin-top:6px;            /* was 10px */
}
.doc-stack__arrow{
  display:inline-block;
  transition: transform .18s ease;
}
.doc-stack:hover .doc-stack__arrow,
.doc-stack:focus-visible .doc-stack__arrow{
  transform: translateX(4px);
}

/* responsive: stack under text on narrow screens */
@media (max-width: 800px){
  .well--resource{ grid-template-columns:1fr; }
  .doc-stack{ height:auto; }   /* natural height when stacked */
}


/* Robotics FAQ styling */
#fll-faq{ margin-top:18px; margin-bottom:16px; }

#fll-faq details{
  background: var(--white);
  border: 1px solid #e6eef2;
  border-left: 4px solid #cfe6f2;      /* subtle accent */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}
#fll-faq details + details{ margin-top:10px; }

#fll-faq summary{
  list-style: none;
  cursor: pointer;
  font-weight:700;
  display:flex; align-items:center; gap:8px;
}
#fll-faq summary::-webkit-details-marker{ display:none; }

/* chevron */
#fll-faq summary::after{
  content:'▸';
  margin-left:auto;
  transition: transform .2s ease;
}
#fll-faq details[open] summary::after{ transform: rotate(90deg); }

/* content spacing */
#fll-faq p{ margin:10px 0 0; }

/* focus/active states */
#fll-faq summary:focus-visible{
  outline:3px solid rgba(23,152,198,.3);
  outline-offset:2px;
  border-radius:8px;
}
#fll-faq details[open]{
  border-color: var(--brand);
  border-left-color: var(--brand);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Back to top — solid color, thicker chevron */
.back-to-top{
  position: fixed;
  right: clamp(12px, 2vw, 18px);
  bottom: clamp(12px, 2vw, 18px);
  z-index: 999;

  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;

  background: var(--brand);
  color: #fff;      /* chevron color */
  border: none;
  border-radius: 999px;
  box-shadow: var(--shadow);

  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;

  transition:
    opacity .2s ease,
    transform .2s ease,
    box-shadow .18s ease;
  will-change: transform;
}

.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* slightly stronger hover: more lift + deeper shadow */
.back-to-top:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow), 0 8px 24px rgba(0,0,0,.12);
}

.back-to-top:active{
  transform: translateY(0) scale(0.99);
  box-shadow: var(--shadow);
}

.back-to-top:focus-visible{
  outline: 3px solid rgba(255,255,255,.5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}

.back-to-top svg{ display:block; }