/* page-layout.css — 🧩 共用版面配置樣式（2026-09-09 第二波：平台首頁 index.html／主辦首頁 organizer.html 共用）
   原本寫在 index.html <style> 裡的 .mi-home-grid／.mi-home-free／.mi-custom／.mi-banner…整段搬到這裡。 */
/* 格線：12 欄、相鄰 span 相加 ≤12 就並排；手機直排 */
.mi-home-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; row-gap:0; align-items:start; position:relative; z-index:2; }
.mi-home-grid > .mi-block{ min-width:0; }
.mi-home-grid .top-marquee-bar{ margin-top:0 !important; }
.mi-home-grid > .mi-block-narrow{ padding:18px 20px 6px; }
.mi-home-grid > .mi-block-narrow > .review-feature-wrap,
.mi-home-grid > .mi-block-narrow > .world-portal-wrap,
.mi-home-grid > .mi-block-narrow > .upcoming-section,
.mi-home-grid > .mi-block-narrow .upcoming-section{ padding-left:0; padding-right:0; }
.mi-home-grid > .mi-block-narrow > .info-col{ margin:0; }
.mi-home-grid > .mi-block-about:not(.mi-block-narrow) > .info-col,
.mi-home-grid > .mi-block-news:not(.mi-block-narrow) > .info-col{ max-width:1060px; margin:26px auto 10px; }
.mi-home-grid > .mi-block-narrow > .info-col{ margin-top:8px; }
/* 自由模式（桌機）：基準版面、區塊絕對定位、整張等比縮放；區塊內部去掉原本的左右留白 */
.mi-home-free{ position:relative; width:min(1100px, calc(100% - 40px)); margin:0 auto; z-index:2; min-height:40px; }
.mi-home-free > .mi-free-block{ position:absolute; box-sizing:border-box; padding:12px 0 0; }
.mi-home-free > .mi-free-block > .review-feature-wrap,
.mi-home-free > .mi-free-block > .world-portal-wrap,
.mi-home-free > .mi-free-block .upcoming-section{ padding-left:0; padding-right:0; margin-top:0; }
.mi-home-free > .mi-free-block > .info-col{ margin:0; }
.mi-home-free > .mi-free-block > .mi-banner{ margin:0 0 12px; }
.mi-home-free > .mi-free-block .sand-band{ border-radius:18px; }
.mi-home-free .review-feature-wrap, .mi-home-free .world-portal-wrap, .mi-home-free .upcoming-section, .mi-home-free .mi-custom, .mi-home-free .info-col, .mi-home-free .mi-banner{ max-width:none; }
/* 自訂區塊：文章／圖片／相簿／按鈕列，卡片感與「關於」一致 */
.mi-custom{ max-width:1060px; margin:20px auto 10px; background:#fff; border-radius:18px; padding:26px 28px; box-shadow:0 2px 12px rgba(51,96,125,.10); border:1px solid #F0E9DB; }
.mi-block-narrow > .mi-custom, .mi-free-block > .mi-custom{ margin:8px 0 0; }
.mi-custom h2{ font-size:1.2rem; color:#33607D; margin:0 0 12px; }
.mi-custom-body p{ margin:0 0 10px; line-height:1.9; color:#3B4C58; }
.mi-custom-image{ padding:0; overflow:hidden; background:transparent; border:none; box-shadow:none; }
.mi-custom-image img{ display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 2px 12px rgba(51,96,125,.12); }
.mi-custom-image.plain img{ border-radius:0; box-shadow:none; }
/* 🎨 自由畫布：固定比例、元素百分比定位、--cs＝實際寬度/1100 讓字級等比縮放 */
.mi-custom-canvas{ padding:0; overflow:visible; background:transparent; border:none; box-shadow:none; }
.mi-canvas{ position:relative; width:100%; overflow:hidden; border-radius:18px; background-size:cover; background-position:center; }
.mi-canvas .mi-cv-el{ position:absolute; box-sizing:border-box; text-decoration:none; }
.mi-canvas .mi-cv-el.t{ overflow:hidden; white-space:pre-line; line-height:1.35; padding:.2em .3em; word-break:break-word; }
.mi-canvas .mi-cv-el.i img{ width:100%; height:100%; display:block; }
.mi-canvas .mi-cv-el.b{ display:flex; align-items:center; justify-content:center; font-weight:800; padding:.2em .6em; white-space:nowrap; overflow:hidden; }
.mi-canvas a.mi-cv-el:hover{ filter:brightness(1.06); }
/* 🎬 影片：16:9 嵌入 */
.mi-video-frame{ position:relative; width:100%; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:#000; }
.mi-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* ⏳ 活動倒數 CTA */
.mi-custom-countdown{ text-align:center; }
.mi-cd-title{ font-size:1.25rem; font-weight:900; color:#33607D; margin-bottom:4px; }
.mi-cd-label{ color:#8A6A14; font-weight:800; font-size:.9rem; margin-bottom:10px; }
.mi-cd-box{ display:flex; gap:10px; justify-content:center; margin-bottom:14px; }
.mi-cd-unit{ background:#FAF7F0; border:1px solid #F0E9DB; border-radius:14px; padding:10px 14px; min-width:66px; }
.mi-cd-unit b{ display:block; font-size:1.7rem; color:#E8955A; font-variant-numeric:tabular-nums; line-height:1.1; }
.mi-cd-unit span{ font-size:.78rem; color:#8A8577; font-weight:800; }
.mi-cd-btn{ display:inline-block; }
/* 📸 IG 貼文 */
.mi-custom-instagram{ display:flex; flex-direction:column; align-items:center; }
/* 區塊樣式外框（底色／圓角／外框／內距） */
.mi-block.mi-styled{ box-sizing:border-box; }
.mi-block.mi-styled > .mi-custom{ background:transparent; border:none; box-shadow:none; margin-top:0; margin-bottom:0; }
.mi-custom-image .mi-custom-cap{ text-align:center; color:#6B5B3E; font-weight:800; margin-top:10px; }
/* 相簿：橫滑（預設）／方格（主辦首頁舊相簿） */
.mi-gal{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.mi-gal img{ height:var(--gh,200px); width:auto; max-width:80vw; border-radius:14px; flex:none; scroll-snap-align:start; box-shadow:0 2px 10px rgba(51,96,125,.12); }
.mi-gal.mi-gal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; overflow:visible; padding-bottom:0; }
.mi-gal.mi-gal-grid a{ display:block; aspect-ratio:1; overflow:hidden; border-radius:12px; border:1px solid #F0E9DB; }
.mi-gal.mi-gal-grid img{ width:100%; height:100%; max-width:none; object-fit:cover; display:block; border-radius:0; box-shadow:none; transition:.25s; }
.mi-gal.mi-gal-grid a:hover img{ transform:scale(1.05); }
.mi-custom-gallery.plain img{ border-radius:0; box-shadow:none; }
/* 按鈕列／倒數按鈕：膠囊按鈕（index.html 自己也有 .intro-cta，同款） */
.mi-custom-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.mi-custom .intro-cta, .mi-cd-btn{ display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px; font-size:.9rem; font-weight:800; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; background:rgba(51,96,125,.12); color:#33607D; }
.mi-custom .intro-cta:hover, .mi-cd-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(51,96,125,.16); filter:brightness(.98); }
.mi-custom .intro-cta:nth-child(1){ background:rgba(140,184,78,.16); color:#5E8324; }
.mi-custom .intro-cta:nth-child(2){ background:rgba(234,196,99,.26); color:#8A6A14; }
.mi-custom .intro-cta:nth-child(3){ background:rgba(51,96,125,.12); color:#33607D; }
@media (max-width:720px){ .mi-custom{ margin:14px 14px 6px; padding:20px 18px; } .mi-gal img{ height:calc(var(--gh,200px) * .75); } .mi-gal.mi-gal-grid img{ height:100%; } }
/* 大圖橫幅版型：區塊上方一張滿版圖＋標題 */
.mi-banner{ position:relative; min-height:240px; background:#33607D center/cover no-repeat; border-radius:18px; margin:18px 20px 0; overflow:hidden; display:flex; align-items:flex-end; }
.mi-banner.has-img{ background-color:transparent; }
.mi-banner.fit-contain{ background-size:contain; }
.mi-banner.fit-natural{ min-height:0; display:block; }
.mi-banner.fit-natural .mi-banner-img{ display:block; width:100%; height:auto; }
.mi-banner.fit-natural .mi-banner-text{ position:absolute; left:0; right:0; bottom:0; }
.mi-banner.has-img:not(.has-text){ border-radius:0; }
.mi-block:not(.mi-block-narrow) > .mi-banner{ max-width:1060px; margin-left:auto; margin-right:auto; }
.mi-banner.no-img{ background:linear-gradient(135deg,#33607D,#5D82A0); }
.mi-banner.has-text::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(20,30,40,.62)); pointer-events:none; }
.mi-banner-text{ position:relative; z-index:1; color:#fff; padding:22px 26px; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.mi-banner-text h2{ margin:0 0 6px; font-size:1.6rem; letter-spacing:1px; }
.mi-banner-text p{ margin:0; font-size:.98rem; line-height:1.6; opacity:.95; }
@media (max-width:720px){
  .mi-home-grid > .mi-block{ grid-column:1 / -1 !important; }
  .mi-home-grid > .mi-block-narrow{ padding:12px 14px 4px; }
  .mi-banner{ min-height:180px; margin:14px 14px 0; }
  .mi-banner-text h2{ font-size:1.25rem; }
}