/* =========================================================
   馬公國小英文版 — RPage 專用樣式
   全部鎖在 .mes 容器內，不影響 RPage 自己的頁首、選單、頁尾。

   注意：RPage 的 html 根字級是 12px，所以本檔一律用 px，
        不使用 rem，避免字級被縮水。
   ========================================================= */

/* ---------- 色票（對齊中文站） ---------- */
.mes{
  --red-900:#7E0A10; --red-800:#9C0C13; --red-700:#B60F16;
  --red-600:#C40F15; --red-500:#CF0E15; --red-100:#F7DCDD; --red-050:#FCF1F1;
  --char-900:#262626; --char-800:#333333; --char-700:#4C4C4C; --char-600:#676767;
  --navy-700:#17568F; --navy-100:#DCEAF6;
  --ink:#333333; --body:#444444; --muted:#7F8C8D;
  --line:#E0E0E0; --line-2:#EAEAEA;
  --tint:#F4F4F4; --tint-2:#EFEFEF; --tint-3:#E7E7E7;
  --radius:8px; --radius-lg:14px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow:0 6px 18px rgba(0,0,0,.10);
  --wrap:1200px;
  --ease:cubic-bezier(.22,.68,0,1);
  --font:"Microsoft JhengHei","微軟正黑體","PingFang TC","Noto Sans TC",Tahoma,Arial,sans-serif;

  font-family:var(--font); font-size:17px; line-height:1.8;
  color:var(--body); background:#fff; text-align:left;
}
.mes *{box-sizing:border-box;}

/* ---------- 基本排版 ---------- */
.mes h1,.mes h2,.mes h3,.mes h4{
  color:var(--ink); line-height:1.35; margin:0 0 .6em;
  font-weight:700; padding:0; border:0; background:none;
}
.mes h1{font-size:clamp(28px,3.6vw,42px);}
.mes h2{font-size:clamp(23px,2.8vw,32px);}
.mes h3{font-size:clamp(18px,1.8vw,21px);}
.mes h4{font-size:16px;}
.mes p{margin:0 0 1.1em;}
.mes a{color:var(--red-700); text-decoration:none; transition:color .2s;}
.mes a:hover{color:var(--red-500);}
.mes img{max-width:100%; display:block; height:auto;}
.mes ul,.mes ol{margin:0 0 1.1em; padding-left:1.3em; list-style:disc;}
.mes ol{list-style:decimal;}
.mes li{margin-bottom:.45em;}
.mes em{font-style:italic;}
.mes strong{font-weight:700;}
.mes :focus-visible{outline:3px solid var(--red-500); outline-offset:2px;}

/* ---------- 版面 ---------- */
.mes .wrap{width:min(100% - 24px,var(--wrap)); margin-inline:auto;}
.mes .section{padding:clamp(40px,5vw,68px) 0;}
.mes .section--tint{background:var(--tint);}
.mes .section--dark{background:linear-gradient(180deg,var(--char-700),var(--char-900)); color:#DCDCDC;}
.mes .section--dark h2,.mes .section--dark h3,.mes .section--dark h4{color:#fff;}
.mes .section-head{max-width:800px; margin:0 auto clamp(26px,4vw,42px); text-align:center;}
.mes .section-head p{color:var(--muted); margin-bottom:0; font-size:17px;}
.mes .section--dark .section-head p{color:#D8D8D8;}

.mes .eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em;
  line-height:1.6; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,var(--red-500),var(--red-700));
  padding:7px 18px; border-radius:var(--radius); margin-bottom:14px;
}
.mes .section--dark .eyebrow{background:rgba(255,255,255,.16);}

.mes .grid{display:grid; gap:22px;}
.mes .grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.mes .grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.mes .grid-4{grid-template-columns:repeat(auto-fit,minmax(225px,1fr));}
.mes .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,54px); align-items:center;}
@media (max-width:880px){.mes .split{grid-template-columns:1fr;}}
.mes .text-center{text-align:center;}

/* ---------- 按鈕 ---------- */
.mes .btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 28px;
  border-radius:var(--radius); font-weight:700; font-size:16px; line-height:1.4;
  border:1px solid transparent; cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .22s var(--ease);
}
.mes .btn:hover{transform:translateY(-2px);}
.mes .btn--primary{background:linear-gradient(180deg,var(--red-500),var(--red-700)); color:#fff;}
.mes .btn--primary:hover{background:var(--red-800); color:#fff;}
.mes .btn--sun{background:#fff; color:var(--red-700); border-color:#fff;}
.mes .btn--sun:hover{background:var(--red-050); color:var(--red-800);}
.mes .btn--ghost{border-color:var(--line); color:var(--ink); background:#fff;}
.mes .btn--ghost:hover{border-color:var(--red-600); color:var(--red-700);}
.mes .btn--white{background:#fff; color:var(--char-900); border-color:#fff;}
.mes .btn--white:hover{background:var(--tint); color:var(--char-900);}
.mes .btn--outline-light{border-color:rgba(255,255,255,.6); color:#fff; background:transparent;}
.mes .btn--outline-light:hover{background:rgba(255,255,255,.14); color:#fff;}
.mes .btn-row{display:flex; flex-wrap:wrap; gap:12px;}

/* ---------- 首頁橫幅 ---------- */
.mes .banner{position:relative; background:var(--char-900); overflow:hidden; border-radius:var(--radius);}
.mes .banner__img{width:100%; aspect-ratio:2000/620; object-fit:cover;}
@media (max-width:760px){.mes .banner__img{aspect-ratio:16/11;}}
.mes .banner__overlay{
  position:absolute; inset:auto 0 0 0; padding:clamp(20px,4vw,44px) 0;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.68) 65%,rgba(0,0,0,.82));
  color:#fff;
}
.mes .banner__overlay h1{color:#fff; margin-bottom:.3em; text-shadow:0 2px 12px rgba(0,0,0,.5);}
.mes .banner__lead{max-width:640px; color:#EDEDED; font-size:18px; text-shadow:0 1px 8px rgba(0,0,0,.5); margin-bottom:18px;}
@media (max-width:620px){
  .mes .banner__overlay{position:static; background:var(--char-900);}
  .mes .banner__overlay h1,.mes .banner__lead{text-shadow:none;}
}
.mes .banner-strip{
  background:linear-gradient(180deg,var(--red-500),var(--red-700));
  color:#fff; padding:14px 0; font-weight:700; text-align:center; font-size:17px;
}

/* ---------- 內頁標題帶 ---------- */
.mes .page-hero{
  background:linear-gradient(180deg,var(--char-700),var(--char-900));
  color:#DCDCDC; padding:clamp(30px,4vw,52px) 0; text-align:center;
  border-bottom:5px solid var(--red-600); border-radius:var(--radius) var(--radius) 0 0;
}
.mes .page-hero h1{color:#fff; margin-bottom:.3em;}
.mes .page-hero p{color:#D2D2D2; max-width:680px; margin:0 auto; font-size:17px;}
.mes .crumb{display:none;}

/* ---------- 卡片 ---------- */
.mes .card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-sm); height:100%;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;
}
.mes .card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--red-100);}
.mes a.card{display:block; color:inherit;}
.mes a.card:hover{color:inherit;}
.mes .card h3{margin-bottom:.45em;}
.mes .card p{font-size:16px;}
.mes .card p:last-child{margin-bottom:0;}
.mes .card__icon{
  width:54px; height:54px; border-radius:var(--radius); display:grid; place-items:center;
  font-size:26px; margin-bottom:16px; background:var(--red-050);
}
.mes .card__icon.is-sun{background:var(--tint-2);}
.mes .card__icon.is-coral{background:var(--red-100);}
.mes .card__icon.is-teal{background:var(--navy-100);}
.mes .card__icon.is-leaf{background:var(--tint-3);}

.mes .photo-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); height:100%;
  display:flex; flex-direction:column;
  transition:transform .28s var(--ease),box-shadow .28s;
}
.mes .photo-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.mes .photo-card__img{aspect-ratio:4/3; overflow:hidden; background:var(--tint-2);}
.mes .photo-card__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.mes .photo-card:hover .photo-card__img img{transform:scale(1.05);}
.mes .photo-card__body{padding:20px 22px 24px; flex:1;}
.mes .photo-card__body h3{font-size:19px;}
.mes .photo-card__body p{font-size:16px; margin-bottom:0;}

.mes .tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em;
  line-height:1.6; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,var(--red-500),var(--red-700));
  padding:4px 12px; border-radius:4px; margin-bottom:10px;
}
.mes .tag.is-sun{background:var(--char-700);}
.mes .tag.is-coral{background:var(--red-800);}
.mes .tag.is-teal{background:var(--navy-700);}

/* ---------- 數字 ---------- */
.mes .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px;}
.mes .stat{
  background:#fff; border:1px solid var(--line); border-top:4px solid var(--red-600);
  border-radius:var(--radius); padding:24px 18px; text-align:center; box-shadow:var(--shadow-sm);
}
.mes .stat__num{font-size:clamp(30px,3vw,40px); font-weight:700; color:var(--red-700); line-height:1;}
.mes .stat__label{font-size:14px; color:var(--muted); margin-top:8px; font-weight:700;}
.mes .section--dark .stat{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); border-top-color:#fff;}
.mes .section--dark .stat__num{color:#fff;}
.mes .section--dark .stat__label{color:#DADADA;}

/* ---------- 年表 ---------- */
.mes .timeline{position:relative; padding-left:32px; margin:0; list-style:none;}
.mes .timeline::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--line);}
.mes .timeline li{position:relative; margin-bottom:20px; padding-left:4px;}
.mes .timeline li::before{
  content:""; position:absolute; left:-31px; top:10px; width:13px; height:13px;
  border-radius:50%; background:#fff; border:3px solid var(--char-600);
}
.mes .timeline li.is-key::before{background:var(--red-600); border-color:var(--red-600);}
.mes .timeline .yr{font-weight:700; color:var(--red-700); margin-right:10px;}

/* ---------- 條列 ---------- */
.mes .checklist{list-style:none; padding:0; margin:0;}
.mes .checklist li{position:relative; padding-left:30px; margin-bottom:12px;}
.mes .checklist li::before{content:"▸"; position:absolute; left:4px; top:0; color:var(--red-600); font-weight:700; font-size:17px;}
.mes .section--dark .checklist li::before{color:#fff;}

/* ---------- 表格 ---------- */
.mes .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);}
.mes table{width:100%; border-collapse:collapse; background:#fff; min-width:560px;}
.mes thead th{
  background:linear-gradient(180deg,var(--red-500),var(--red-700)); color:#fff;
  text-align:left; padding:14px 18px; font-size:15px; font-weight:700;
}
.mes tbody td{padding:14px 18px; border-top:1px solid var(--line-2); font-size:16px;}
.mes tbody tr:nth-child(even){background:var(--tint);}

/* ---------- FAQ 手風琴 ---------- */
.mes .acc{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;}
.mes .acc+.acc{margin-top:10px;}
.mes .acc__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:18px 56px 18px 22px; font-family:inherit; font-size:17px;
  font-weight:700; color:var(--ink); line-height:1.5;
  position:relative; transition:background .2s;
}
.mes .acc__q:hover{background:var(--tint);}
.mes .acc__q::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:24px; color:var(--red-600); font-weight:700; transition:transform .3s var(--ease);
}
.mes .acc.is-open .acc__q{background:var(--red-050); color:var(--red-800);}
.mes .acc.is-open .acc__q::after{transform:translateY(-50%) rotate(45deg);}
.mes .acc__a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.mes .acc__a>div{padding:4px 22px 20px; font-size:16px;}

/* ---------- 照片藝廊與燈箱 ---------- */
.mes .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); gap:12px;}
.mes .gallery button{
  padding:0; border:1px solid var(--line); background:var(--tint-2); cursor:pointer;
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; display:block;
}
.mes .gallery img{width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease);}
.mes .gallery button:hover img{transform:scale(1.06);}

.mes-lightbox{
  position:fixed; inset:0; z-index:9999; display:none;
  background:rgba(0,0,0,.9); padding:30px; align-items:center; justify-content:center;
}
.mes-lightbox.is-open{display:flex;}
.mes-lightbox img{max-width:min(1000px,92vw); max-height:84vh; border-radius:8px; display:block;}
.mes-lightbox .cap{
  position:absolute; bottom:24px; left:0; right:0; text-align:center;
  color:#E4E4E4; font-size:15px; padding:0 20px;
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
}
.mes-lightbox .cls{
  position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%;
  border:0; background:#B60F16; color:#fff; font-size:24px; cursor:pointer; line-height:1;
}

/* ---------- 聯絡頁 ---------- */
.mes .info-list{list-style:none; padding:0; margin:0;}
.mes .info-list li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line-2);}
.mes .info-list li:last-child{border-bottom:0;}
.mes .info-list .ico{
  width:42px; height:42px; flex:none; border-radius:var(--radius);
  background:var(--red-050); display:grid; place-items:center; font-size:19px;
}
.mes .info-list b{display:block; color:var(--ink); font-size:15px;}
.mes .info-list span{font-size:16px;}
.mes .map-frame{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--tint-2);}
.mes .map-frame iframe{width:100%; height:100%; border:0; display:block;}

/* ---------- CTA ---------- */
.mes .cta{
  background:linear-gradient(180deg,var(--char-700),var(--char-900));
  color:#DCDCDC; border-radius:var(--radius-lg); padding:clamp(28px,4vw,48px);
  text-align:center; border-top:5px solid var(--red-600);
}
.mes .cta h2{color:#fff;}
.mes .cta p{color:#D2D2D2; max-width:660px; margin-inline:auto; font-size:17px;}

/* ---------- 圖說 ---------- */
.mes figure{margin:0;}
.mes figcaption{font-size:14px; color:var(--muted);}

/* ---------- 圖片載入失敗時的佔位 ---------- */
.mes .ph{
  background:repeating-linear-gradient(135deg,var(--tint-2) 0 14px,var(--tint) 14px 28px);
  display:grid; place-items:center; color:var(--muted);
  font-size:13px; font-weight:700; text-align:center; padding:20px;
}

/* ---------- 捲動浮現 ---------- */
.mes .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease),transform .6s var(--ease);}
.mes .reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .mes *{animation:none !important; transition:none !important;}
  .mes .reveal{opacity:1; transform:none;}
}

/* ---------- 隱藏用不到的東西 ---------- */
.mes .skip-link,.mes .site-header,.mes .site-footer,.mes .to-top{display:none !important;}