/* 澳門少年飛鷹會 靜態站樣式 —— 由 tools/css_build.py 產生，勿手改。
   來源：macau-flying-eagle-static/client/src/index.css（原 AI 設計）＋ build/css/additions.css */

/* 飛鷹航線：深海軍藍承載紀律與可靠，飛鷹綠標記前進；留白和細線讓 245 項內容可被清楚閱讀。 */



:root {
  --navy: #092b53;
  --navy-deep: #061e3a;
  --navy-soft: #153e70;
  --eagle-green: #76bb23;
  --eagle-green-dark: #4e8d10;
  --sand: #f4f0e7;
  --mist: #f7f8f5;
  --ink: #172536;
  --body: #425366;
  --line: #d9e0e1;
  --background: #fff;
  --foreground: var(--ink);
  --primary: var(--navy);
  --primary-foreground: #fff;
  --muted: var(--mist);
  --muted-foreground: #657386;
  --border: var(--line);
  --ring: var(--eagle-green);
  --font-body: "Noto Sans TC", sans-serif;
  --font-display: "Noto Serif TC", serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-body); font-size: 16px; line-height: 1.75; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button:not(:disabled), a[href], input { cursor: pointer; }
:focus-visible { outline: 3px solid var(--eagle-green); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.utility-bar { align-items: center; background: var(--navy-deep); color: #cfdae7; display: flex; font-size: 0.72rem; justify-content: space-between; letter-spacing: 0.05em; min-height: 2.2rem; padding: 0 5vw; }
.utility-bar p { margin: 0; }
.utility-links { display: flex; gap: 1.1rem; }
.utility-links a { transition: color 160ms var(--ease-out); }
.utility-links a:hover { color: #fff; }
.header-main { align-items: center; background: #fff; display: grid; grid-template-columns: minmax(220px, 1fr) auto; min-height: 5.9rem; padding: 0.7rem 5vw; position: relative; z-index: 20; }
.brand-lockup { display: inline-block; width: min(24rem, 100%); }
.brand-lockup img { height: auto; max-height: 4rem; object-fit: contain; object-position: left center; width: 100%; }
.desktop-search { display: block; }
.site-search { align-items: stretch; border: 1px solid var(--line); display: flex; height: 2.55rem; width: min(20rem, 29vw); }
.site-search input { border: 0; color: var(--ink); flex: 1; font-size: 0.82rem; min-width: 0; outline: none; padding: 0 0.8rem; }
.site-search input::placeholder { color: #8994a0; }
.site-search button { align-items: center; background: var(--navy); border: 0; color: #fff; display: flex; justify-content: center; transition: background 160ms var(--ease-out), transform 160ms var(--ease-out); width: 2.65rem; }
.site-search button:hover { background: var(--eagle-green-dark); }
.site-search button:active, .button:active { transform: scale(0.97); }
.menu-toggle { background: transparent; border: 0; color: var(--navy); display: none; padding: 0.5rem; }
.desktop-nav { background: var(--navy); border-bottom: 3px solid var(--eagle-green); min-height: 3.2rem; position: relative; z-index: 19; }
.nav-inner { display: flex; margin: auto; max-width: 76rem; padding: 0 5vw; }
.nav-inner > a, .nav-dropdown > summary { align-items: center; color: #fff; display: flex; font-size: 0.88rem; font-weight: 600; min-height: 3rem; padding: 0 1.15rem; position: relative; }
.nav-inner > a:hover, .nav-dropdown > summary:hover { background: rgba(255, 255, 255, 0.1); }
.nav-inner > a::after, .nav-dropdown > summary::after { background: var(--eagle-green); bottom: 0; content: ""; height: 3px; left: 50%; position: absolute; transform: translateX(-50%) scaleX(0); transition: transform 180ms var(--ease-out); width: calc(100% - 2rem); }
.nav-inner > a:hover::after, .nav-dropdown > summary:hover::after { transform: translateX(-50%) scaleX(1); }
.nav-dropdown { position: relative; }
.nav-dropdown > summary { cursor: pointer; list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::before { border: solid currentColor; border-width: 0 1.5px 1.5px 0; content: ""; height: 5px; margin-right: 0.45rem; transform: rotate(45deg) translateY(-2px); width: 5px; }
.dropdown-panel { background: #fff; box-shadow: 0 14px 24px rgba(6, 30, 58, 0.2); display: grid; left: 0; min-width: 14rem; padding: 0.45rem; position: absolute; top: 3rem; }
.dropdown-panel a { color: var(--ink); font-size: 0.84rem; padding: 0.55rem 0.75rem; }
.dropdown-panel a:hover { background: #eaf2de; color: var(--navy); }
.nav-subdropdown { position: relative; }
.nav-subdropdown > summary { align-items: center; color: var(--ink); cursor: pointer; display: flex; font-size: 0.84rem; font-weight: 700; justify-content: space-between; list-style: none; padding: 0.55rem 0.75rem; }
.nav-subdropdown > summary::-webkit-details-marker { display: none; }
.nav-subdropdown > summary::after { content: "›"; font-size: 1rem; }
.nav-subdropdown > summary:hover { background: #eaf2de; color: var(--navy); }
.nav-subdropdown > .dropdown-panel { left: calc(100% - 0.25rem); top: -0.45rem; }
.mobile-nav { background: #fff; border-bottom: 1px solid var(--line); display: none; padding: 1rem 5vw 1.3rem; position: absolute; width: 100%; z-index: 18; }
.mobile-nav > a, .mobile-nav summary, .mobile-subnav a { display: block; font-weight: 600; padding: 0.72rem 0; }
.mobile-nav > a, .mobile-nav summary { border-bottom: 1px solid var(--line); }
.mobile-nav summary { cursor: pointer; }
.mobile-subnav { border-left: 2px solid var(--eagle-green); margin: 0.4rem 0 0.3rem 0.7rem; padding-left: 0.8rem; }
.mobile-subnav a { color: var(--body); font-size: 0.9rem; }
.mobile-subnav details > summary { border-bottom: 0; color: var(--navy); font-size: 0.9rem; padding: 0.62rem 0; }
.mobile-nav .site-search { margin-bottom: 1rem; width: 100%; }

.eyebrow { color: var(--eagle-green-dark); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; margin: 0 0 0.7rem; text-transform: uppercase; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-size: 0.9rem; font-weight: 700; gap: 0.65rem; justify-content: center; min-height: 3rem; padding: 0.7rem 1.1rem; transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 160ms var(--ease-out); }
.button--lime { background: var(--eagle-green); color: var(--navy-deep); }
.button--lime:hover { background: #9fd443; }
.button--ghost { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.button--ghost:hover { background: #fff; color: var(--navy); }
.button--navy { background: var(--navy); color: #fff; }
.button--navy:hover { background: var(--eagle-green-dark); }
.text-link, .card-link { align-items: center; color: var(--navy); display: inline-flex; font-size: 0.9rem; font-weight: 800; gap: 0.4rem; }
.text-link:hover, .card-link:hover { color: var(--eagle-green-dark); }
.text-link svg, .card-link svg { transition: transform 180ms var(--ease-out); }
.text-link:hover svg, .card-link:hover svg { transform: translateX(3px); }

.home-hero { color: #fff; isolation: isolate; min-height: min(45rem, 72vh); overflow: hidden; position: relative; }
.home-hero > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; z-index: -2; }
.home-hero-shade { background: linear-gradient(90deg, rgba(4, 24, 47, 0.94) 0%, rgba(4, 24, 47, 0.68) 42%, rgba(4, 24, 47, 0.12) 74%); inset: 0; position: absolute; z-index: -1; }
.home-hero::after { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; content: ""; height: 27rem; position: absolute; right: -11rem; top: -8rem; width: 27rem; }
.home-hero-content { display: flex; flex-direction: column; justify-content: center; margin-left: 8vw; max-width: 42rem; min-height: min(45rem, 72vh); padding: 5rem 0 8rem; }
.home-hero .eyebrow { color: #b6e176; }
.home-hero h1 { font-family: var(--font-display); font-size: clamp(2.7rem, 5.5vw, 5.2rem); font-weight: 900; letter-spacing: 0.01em; line-height: 1.25; margin: 0; }
.home-hero-content > p:not(.eyebrow) { color: #e4ebf3; font-size: 1.05rem; max-width: 35rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }
.hero-route { align-items: center; bottom: 2.2rem; display: flex; font-size: 0.75rem; gap: 0.8rem; left: 8vw; letter-spacing: 0.12em; position: absolute; text-transform: uppercase; }
.hero-route i { background: var(--eagle-green); display: block; height: 2px; width: 4rem; }
.intro-band { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 2rem; grid-template-columns: auto minmax(0, 1fr) auto; margin: 0 auto; max-width: 76rem; padding: 3.4rem 5vw; }
.intro-mark { align-items: center; background: #eaf2de; color: var(--eagle-green-dark); display: flex; height: 4rem; justify-content: center; transform: rotate(-6deg); width: 4rem; }
.intro-band p { color: var(--navy); font-family: var(--font-display); font-size: clamp(1.2rem, 2.1vw, 1.7rem); font-weight: 700; line-height: 1.65; margin: 0; }
.content-section { margin: 0 auto; max-width: 76rem; padding: 5.3rem 5vw; }
.section-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 2.5rem; }
.section-heading h2, .overview-copy h2, .search-callout h2, .place-copy h2 { color: var(--navy); font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.35; margin: 0; }
.news-section { max-width: 83rem; }
.news-layout { display: grid; gap: 1px; grid-template-columns: 1.35fr 1fr 1fr; }
.content-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.content-card:hover { border-color: #aac579; }
.content-card-media { background: #e5e9e9; display: block; height: 11rem; overflow: hidden; }
.content-card-media img { height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); width: 100%; }
.content-card:hover .content-card-media img { transform: scale(1.04); }
.content-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.35rem; }
.content-card-meta { align-items: center; color: #728194; display: flex; font-size: 0.7rem; font-weight: 700; gap: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.content-card-meta time { align-items: center; display: flex; gap: 0.28rem; }
.content-card h3 { color: var(--navy); font-family: var(--font-display); font-size: 1.27rem; line-height: 1.45; margin: 0.7rem 0; }
.content-card h3 a:hover { color: var(--eagle-green-dark); }
.content-card p { color: var(--body); display: -webkit-box; font-size: 0.88rem; line-height: 1.65; margin: 0 0 1.2rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-link { margin-top: auto; }
.content-card--featured { grid-row: span 2; }
.content-card--featured .content-card-media { height: 19rem; }
.content-card--featured h3 { font-size: 1.7rem; }
.place-band { background: var(--sand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); margin-top: 2rem; }
.place-copy { align-self: center; max-width: 37rem; padding: 6.5rem max(5vw, calc((100vw - 76rem) / 2)); padding-right: 7vw; }
.place-copy > p:not(.eyebrow) { color: var(--body); max-width: 30rem; }
.place-links { display: grid; gap: 0.3rem; margin-top: 1.8rem; }
.place-links a { align-items: center; border-bottom: 1px solid #c8c6b9; color: var(--navy); display: flex; font-size: 0.93rem; font-weight: 800; justify-content: space-between; padding: 0.75rem 0; }
.place-links a:hover { color: var(--eagle-green-dark); }
.place-images { min-height: 33rem; position: relative; }
.place-images img { object-fit: cover; position: absolute; }
.place-images img:first-child { height: 72%; right: 0; top: 0; width: 74%; }
.place-images img:last-child { border: 0.75rem solid var(--sand); bottom: 0; height: 52%; left: 0; width: 58%; }
.announcements-section { padding-bottom: 6.5rem; }
.announcement-list { border-top: 1px solid var(--line); }
.announcement-list a { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: 3rem minmax(0, 1fr) auto; padding: 1.1rem 0; transition: background 170ms var(--ease-out), padding 170ms var(--ease-out); }
.announcement-list a:hover { background: #f2f6ea; padding-left: 0.7rem; padding-right: 0.7rem; }
.announcement-list span { color: var(--eagle-green-dark); font-size: 0.75rem; font-weight: 800; }
.announcement-list strong { color: var(--navy); font-size: 1rem; }
.search-callout { align-items: center; background: #eaf2de; display: grid; gap: 1.4rem; grid-template-columns: auto minmax(0, 1fr) auto; max-width: none; padding: 3.2rem max(5vw, calc((100vw - 76rem) / 2)); }
.search-callout > svg { color: var(--eagle-green-dark); }
.search-callout h2 { font-size: clamp(1.5rem, 3vw, 2.35rem); }

.page-hero { background: var(--navy); color: #fff; isolation: isolate; min-height: 21rem; overflow: hidden; position: relative; }
.page-hero::before { border: 1px solid rgba(149, 196, 77, 0.4); border-radius: 50%; content: ""; height: 23rem; position: absolute; right: -7rem; top: -10rem; width: 23rem; }
.page-hero--image > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; z-index: -2; }
.page-hero-shade { background: linear-gradient(90deg, rgba(6, 30, 58, 0.97), rgba(6, 30, 58, 0.73)); inset: 0; position: absolute; z-index: -1; }
.page-hero-inner { display: flex; flex-direction: column; justify-content: center; margin: auto; max-width: 76rem; min-height: 21rem; padding: 3.6rem 5vw; position: relative; }
.breadcrumbs { align-items: center; color: #bfd1e2; display: flex; font-size: 0.78rem; gap: 0.35rem; margin-bottom: 2.3rem; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.page-hero .eyebrow { color: #b5df79; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.3; margin: 0; max-width: 55rem; }
.page-hero-intro { color: #dbe6ed; font-size: 1rem; margin: 1rem 0 0; max-width: 43rem; }
.hero-waypoints { align-items: center; bottom: 1.8rem; color: #a9c7d8; display: flex; font-size: 0.68rem; gap: 0.55rem; letter-spacing: 0.11em; position: absolute; text-transform: uppercase; }
.hero-waypoints span:first-child { color: #b7e076; font-weight: 800; }
.hero-waypoints i { background: var(--eagle-green); display: block; height: 1px; width: 2.6rem; }
.listing-section { padding-top: 4.4rem; }
.listing-count { color: var(--body); font-size: 0.86rem; margin: 0 0 1.4rem; }
.archive-intro { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 2.6rem; padding-bottom: 1.2rem; }
.archive-intro p:last-child { color: var(--body); font-size: 0.85rem; margin: 0; max-width: 34rem; text-align: right; }
.archive-featured { margin-bottom: 4.5rem; max-width: 66rem; }
.archive-featured-label { align-items: center; color: var(--navy); display: flex; font-size: 0.72rem; font-weight: 800; gap: 0.55rem; letter-spacing: 0.12em; margin-bottom: 0.7rem; text-transform: uppercase; }
.archive-featured-label span { color: var(--eagle-green-dark); }
.archive-featured-label i { background: var(--eagle-green); height: 2px; width: 3rem; }
.archive-timeline { border-left: 1px solid #c8d6bb; margin-left: 1.05rem; padding-left: 3rem; }
.archive-year { margin-bottom: 4.6rem; position: relative; }
.archive-year:last-child { margin-bottom: 0; }
.archive-year header { align-items: center; display: flex; gap: 1rem; margin-bottom: 1.3rem; }
.year-waypoint { align-items: center; color: var(--navy); display: flex; font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.7rem); font-weight: 900; gap: 0.75rem; line-height: 1; margin-left: -4.1rem; }
.year-waypoint::before { background: var(--eagle-green); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #a9cb79; content: ""; height: 1rem; width: 1rem; }
.year-waypoint i { background: var(--navy); display: block; height: 1px; width: 3rem; }
.archive-year header p { color: var(--body); font-size: 0.76rem; margin: 0; }
.timeline-list { border-top: 1px solid var(--line); }
.timeline-list .content-card--archive { border: 0; border-bottom: 1px solid var(--line); flex-direction: row; min-height: 9.8rem; padding: 0.7rem 0; }
.timeline-list .content-card--archive:hover { background: #f5f8f0; }
.content-card--archive .content-card-media { flex: 0 0 9.5rem; height: 8rem; margin-right: 1.3rem; }
.content-card--archive .content-card-body { justify-content: center; padding: 0.15rem 1rem 0.15rem 0; }
.content-card--archive h3 { font-size: 1.15rem; margin: 0.35rem 0; }
.content-card--archive p { -webkit-line-clamp: 2; margin-bottom: 0.45rem; }
.content-card--archive .card-link { font-size: 0.76rem; }
.listing-grid, .search-results { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.listing-grid .content-card-media, .search-results .content-card-media { height: 10rem; }
.overview-copy { max-width: 58rem; }
.overview-copy > p:not(.eyebrow) { color: var(--body); font-size: 1.08rem; }
.pillar-section { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 83rem; padding-top: 1rem; }
.pillar { background: var(--mist); min-height: 18rem; padding: 1.7rem; position: relative; transition: background 200ms var(--ease-out), color 200ms var(--ease-out); }
.pillar:hover { background: var(--navy); color: #fff; }
.pillar > span { color: var(--eagle-green-dark); font-size: 0.78rem; font-weight: 800; }
.pillar svg:first-of-type { color: var(--eagle-green-dark); display: block; margin: 2.6rem 0 0.8rem; }
.pillar h2 { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.4; margin: 0; }
.pillar p { color: var(--body); font-size: 0.86rem; line-height: 1.65; }
.pillar:hover p { color: #d7e1e9; }
.pillar > svg:last-child { bottom: 1.5rem; position: absolute; right: 1.5rem; }
.service-grid { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 65rem; }
.service-card { border: 1px solid var(--line); min-height: 17rem; padding: 2rem; position: relative; transition: background 180ms var(--ease-out), color 180ms var(--ease-out); }
.service-card:hover { background: #eef5e5; border-color: var(--eagle-green); }
.service-card > span { color: var(--eagle-green-dark); font-size: 0.75rem; font-weight: 800; }
.service-card h2 { color: var(--navy); font-family: var(--font-display); font-size: 1.75rem; margin: 2rem 0 0.55rem; }
.service-card p { color: var(--body); font-size: 0.9rem; margin: 0; max-width: 28rem; }
.service-card > svg { bottom: 1.5rem; color: var(--navy); position: absolute; right: 1.5rem; }

.article-shell { align-items: start; display: grid; gap: 4rem; grid-template-columns: 12rem minmax(0, 1fr); max-width: 68rem; }
.article-aside { border-left: 2px solid var(--eagle-green); color: var(--body); display: grid; font-size: 0.8rem; gap: 0.65rem; padding-left: 0.9rem; position: sticky; top: 2rem; }
.article-aside p { color: var(--navy); font-size: 0.71rem; font-weight: 800; letter-spacing: 0.12em; margin: 0; text-transform: uppercase; }
.article-aside time, .article-aside a { align-items: center; display: flex; gap: 0.35rem; }
.article-aside a { color: var(--navy); font-weight: 700; margin-top: 0.55rem; }
.article-content { color: var(--body); font-size: 1rem; line-height: 1.9; min-width: 0; overflow-wrap: anywhere; }
.article-featured { margin: 0 0 2rem; max-height: 35rem; object-fit: cover; width: 100%; }
.article-content h1, .article-content h2, .article-content h3, .article-content h4 { color: var(--navy); font-family: var(--font-display); line-height: 1.45; margin: 2.5rem 0 1rem; }
.article-content h1 { font-size: 2.2rem; }
.article-content h2 { font-size: 1.75rem; }
.article-content h3 { font-size: 1.4rem; }
.article-content p { margin: 0 0 1.2rem; }
.article-content ul, .article-content ol { margin: 0 0 1.5rem; padding-left: 1.55rem; }
.article-content a { color: var(--eagle-green-dark); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.article-content a:hover { color: var(--navy); }
.article-content img { height: auto; margin: 1.5rem auto; max-height: 42rem; object-fit: contain; width: auto; }
.article-content figure { margin: 1.7rem 0; max-width: 100%; }
.article-content figcaption { color: #748193; font-size: 0.78rem; margin-top: 0.4rem; text-align: center; }
.article-content table { border-collapse: collapse; display: block; margin: 1.5rem 0; max-width: 100%; overflow-x: auto; }
.article-content td, .article-content th { border: 1px solid var(--line); padding: 0.55rem 0.7rem; text-align: left; }
.article-content th { background: var(--mist); color: var(--navy); }
.article-content .elementor-column, .article-content .elementor-container, .article-content .elementor-widget-wrap { max-width: 100%; }
.article-content .elementor-widget-container { margin-bottom: 1.2rem; }
.article-content .elementor-image-gallery, .article-content .gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.article-content .elementor-gallery-item, .article-content .gallery-item { min-width: 0; }
.article-content .elementor-gallery-item__image { aspect-ratio: 4 / 3; background-position: center; background-size: cover; }
.article-content .elementor-icon-list-items { list-style: none; padding-left: 0; }
.article-content .elementor-icon-list-item { margin: 0.6rem 0; }
.article-content .swiper-container { overflow: hidden; position: relative; }
.article-content .swiper-wrapper { display: block; }.article-content .swiper-slide { min-width: 0; }.article-content .swiper-slide[hidden] { display: none; }
.article-content .elementor-swiper-button { align-items: center; background: rgba(3, 30, 58, .72); color: #fff; cursor: pointer; display: flex; height: 2.25rem; justify-content: center; position: absolute; top: calc(50% - 1.125rem); width: 2.25rem; z-index: 1; }.article-content .elementor-swiper-button-prev { left: .45rem; }.article-content .elementor-swiper-button-next { right: .45rem; }
.article-content .swiper-pagination { bottom: .65rem; display: flex; gap: .35rem; justify-content: center; left: 0; position: absolute; right: 0; z-index: 2; }.article-content .legacy-content-dot { background: rgba(255,255,255,.72); border: 0; border-radius: 50%; height: .5rem; padding: 0; width: .5rem; }.article-content .legacy-content-dot.is-active { background: var(--eagle-green); transform: scale(1.2); }
.legacy-archive-page { background: #fffdf9; min-height: 48rem; padding: 3.5rem 5vw 5rem; }
.legacy-archive-wrap { margin: 0 auto; max-width: 76rem; }
.legacy-breadcrumb { color: #647184; display: flex; flex-wrap: wrap; font-size: 0.83rem; gap: 0.5rem; margin-bottom: 3rem; }
.legacy-breadcrumb a { color: var(--eagle-green-dark); font-weight: 700; }
.legacy-archive-heading { border-bottom: 1px solid var(--line); margin-bottom: 2rem; padding-bottom: 1.4rem; }
.legacy-archive-heading p { color: var(--eagle-green-dark); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.15em; margin: 0 0 0.55rem; }
.legacy-archive-heading h1 { color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.15; margin: 0; }
.legacy-post-grid { display: grid; gap: 2.15rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.legacy-post-card a { display: block; height: 100%; }
.legacy-post-card img, .legacy-post-card-empty { aspect-ratio: 4 / 3; background: #eef2e8; display: block; object-fit: cover; transition: transform 180ms var(--ease-out); width: 100%; }
.legacy-post-card-empty { align-items: center; color: #647184; display: flex; font-size: 0.85rem; justify-content: center; }
.legacy-post-card h2 { color: var(--ink); font-family: var(--font-sans); font-size: 1rem; font-weight: 700; line-height: 1.55; margin: 0.8rem 0 0; }
.legacy-post-card a:hover img { transform: translateY(-3px); }
.legacy-post-card a:hover h2 { color: var(--eagle-green-dark); }
.legacy-pagination { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 3.2rem; padding-top: 1.5rem; }
.legacy-pagination a, .legacy-pagination span { color: var(--navy); font-size: 0.86rem; padding: 0.5rem 0.72rem; }
.legacy-pagination a:hover, .legacy-pagination .is-current { background: var(--navy); color: #fff; }
.legacy-pagination [aria-disabled="true"] { color: #a1abb7; }
.legacy-directory-page { background: #fffdf9; min-height: 40rem; padding: 3.5rem 5vw 5rem; }
.legacy-directory-wrap { margin: 0 auto; max-width: 72rem; }
.legacy-directory-heading { border-bottom: 1px solid var(--line); margin-bottom: 2rem; padding-bottom: 1.4rem; }.legacy-directory-heading p { color: var(--eagle-green-dark); font-size: .76rem; font-weight: 800; letter-spacing: .15em; margin: 0 0 .7rem; }.legacy-directory-heading h1 { color: var(--ink); font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.6rem); margin: 0 0 .8rem; }.legacy-directory-heading span { color: var(--body); }
.legacy-year-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }.legacy-year-grid a { align-items: end; background: var(--navy); color: #fff; display: grid; min-height: 10rem; padding: 1.1rem; transition: background 180ms var(--ease-out), transform 180ms var(--ease-out); }.legacy-year-grid a:hover { background: var(--eagle-green-dark); transform: translateY(-3px); }.legacy-year-grid span { color: var(--eagle-green); font-size: .8rem; font-weight: 800; }.legacy-year-grid strong { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; }.legacy-year-grid i { font-style: normal; justify-self: end; }
.legacy-directory-list { border-top: 1px solid var(--line); display: grid; }.legacy-directory-list a { align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); display: grid; gap: 1rem; grid-template-columns: 4rem 1fr auto; padding: 1.15rem .4rem; }.legacy-directory-list a:hover { color: var(--eagle-green-dark); }.legacy-directory-list span { color: var(--eagle-green-dark); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.legacy-directory-list i { font-style: normal; }
.legacy-home { background: #fffdf9; }
.legacy-home-hero { min-height: min(43rem, 72vw); overflow: hidden; position: relative; }
.legacy-home-hero > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.legacy-home-hero::after { background: linear-gradient(90deg, rgba(3, 30, 58, 0.84), rgba(3, 30, 58, 0.08)); content: ""; inset: 0; position: absolute; }
.legacy-home-hero-copy { color: #fff; left: max(5vw, calc((100vw - 76rem) / 2)); max-width: 40rem; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.legacy-home-hero-copy p { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.16em; margin: 0 0 0.9rem; }
.legacy-home-hero-copy h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 1.16; margin: 0 0 1.65rem; }
.legacy-home-hero-copy a, .legacy-home-link { background: var(--eagle-green); color: var(--navy-deep); display: inline-block; font-size: 0.92rem; font-weight: 800; padding: 0.78rem 1.1rem; }
.legacy-home-section { align-items: center; display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; max-width: 82rem; padding: clamp(3.5rem, 7vw, 6rem) 5vw; }
.legacy-home-section--association { grid-template-columns: 1fr 1fr; max-width: 72rem; }
.legacy-home-section--association > img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.legacy-home-section--base { background: #f4f7ed; max-width: none; padding-left: max(5vw, calc((100vw - 72rem) / 2)); padding-right: max(5vw, calc((100vw - 72rem) / 2)); }
.legacy-home-copy h2, .legacy-home-announcements h2 { color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.18; margin: 0 0 1.15rem; }
.legacy-home-copy p:not(.legacy-kicker) { color: var(--body); line-height: 1.9; margin: 0 0 1.55rem; }
.legacy-kicker { color: var(--eagle-green-dark); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.15em; margin: 0 0 0.7rem; }
.legacy-home-illustration img { display: block; margin: 0 auto; max-height: 18rem; max-width: 100%; object-fit: contain; }
.legacy-carousel { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.legacy-carousel > img { height: 100%; object-fit: cover; width: 100%; }
.legacy-carousel-control { align-items: center; background: rgba(2, 30, 58, 0.76); border: 0; color: #fff; display: flex; height: 2.4rem; justify-content: center; position: absolute; top: calc(50% - 1.2rem); width: 2.4rem; }
.legacy-carousel-control--previous { left: 0; }.legacy-carousel-control--next { right: 0; }
.legacy-carousel-dots { bottom: 0.75rem; display: flex; gap: 0.35rem; justify-content: center; left: 0; position: absolute; right: 0; }
.legacy-carousel-dots button { background: rgba(255,255,255,.7); border: 0; border-radius: 50%; height: 0.5rem; padding: 0; width: 0.5rem; }.legacy-carousel-dots button.is-active { background: var(--eagle-green); transform: scale(1.25); }
.legacy-home-announcements { margin: 0 auto; max-width: 72rem; padding: clamp(3.5rem, 7vw, 6rem) 5vw; }
.legacy-home-announcements-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.8rem; }.legacy-home-announcements-heading h2 { margin-bottom: 0; }.legacy-home-announcements-heading a { color: var(--eagle-green-dark); font-weight: 800; }
.legacy-home-announcement-list { border-top: 1px solid var(--line); display: grid; }.legacy-home-announcement-list a { border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; padding: 1rem 0; }.legacy-home-announcement-list a:hover { color: var(--eagle-green-dark); }
.not-found { align-items: center; display: flex; flex-direction: column; gap: 1rem; justify-content: center; min-height: 50vh; padding: 4rem 5vw; text-align: center; }
.not-found h1 { color: var(--navy); font-family: var(--font-display); }

.search-page { max-width: 66rem; }
.large-search { margin-bottom: 1.4rem; }
.large-search label { color: var(--navy); display: block; font-weight: 800; margin-bottom: 0.5rem; }
.large-search > div { align-items: center; border-bottom: 2px solid var(--navy); display: flex; gap: 0.8rem; padding: 0.45rem 0; }
.large-search input { border: 0; color: var(--ink); flex: 1; font-size: 1.1rem; outline: none; padding: 0.55rem 0; }
.search-status { color: var(--body); font-size: 0.88rem; margin: 1.7rem 0; }
.empty-search { border: 1px dashed #b9c8ac; color: var(--body); padding: 3rem 1.5rem; text-align: center; }
.empty-search svg { color: var(--eagle-green-dark); }
.empty-search h2 { color: var(--navy); font-family: var(--font-display); margin: 0.7rem 0 0; }
.contact-layout { display: grid; gap: 1px; grid-template-columns: 0.9fr 1.1fr 1.1fr; max-width: 75rem; }
.contact-qr, .contact-details { background: var(--mist); padding: 2.2rem; }
.contact-qr { align-items: flex-start; display: flex; flex-direction: column; }
.contact-qr > svg { color: var(--eagle-green-dark); }
.contact-qr img { background: #fff; margin: 1.25rem 0; max-width: 10rem; padding: 0.7rem; }
.contact-qr p { color: var(--body); font-size: 0.85rem; }
.contact-details { background: #fff; border: 1px solid var(--line); }
.contact-details--secondary { background: var(--navy); border: 0; color: #dae5ec; }
.contact-details h2 { color: var(--navy); font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 1.3rem; }
.contact-details--secondary h2 { color: #fff; }
.contact-details a, .contact-details p { align-items: flex-start; display: flex; font-size: 0.9rem; gap: 0.6rem; margin: 0 0 0.85rem; }
.contact-details a:hover { color: var(--eagle-green-dark); }
.contact-details a svg, .contact-details p svg { color: var(--eagle-green-dark); flex: 0 0 auto; margin-top: 0.3rem; }
.contact-note { border-top: 1px solid var(--line); color: var(--body); font-size: 0.8rem !important; padding-top: 1rem; }
.contact-details--secondary .contact-note { border-color: rgba(255, 255, 255, 0.2); color: #d4e1e9; }

.site-footer { background: var(--navy-deep); color: #dce7ef; }
.footer-main { display: grid; gap: 3rem; grid-template-columns: 1.1fr 1fr 1fr; margin: auto; max-width: 76rem; padding: 4.7rem 5vw; }
.footer-brand img { max-width: 19rem; }
.footer-socials { display: flex; gap: 0.55rem; margin-top: 1.5rem; }
.footer-socials a { align-items: center; border: 1px solid rgba(255,255,255,0.27); display: flex; height: 2.25rem; justify-content: center; transition: background 160ms var(--ease-out); width: 2.25rem; }
.footer-socials a:hover { background: var(--eagle-green); color: var(--navy-deep); }
.footer-contact h2 { color: #fff; font-size: 0.95rem; margin: 0 0 0.8rem; }
.footer-contact p, .footer-contact a { align-items: flex-start; color: #bfccd8; display: flex; font-size: 0.75rem; gap: 0.35rem; line-height: 1.7; margin: 0.4rem 0; }
.footer-contact a:hover { color: #fff; }
.footer-contact svg { color: var(--eagle-green); flex: 0 0 auto; margin-top: 0.2rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); color: #9eafbd; display: flex; font-size: 0.72rem; justify-content: space-between; padding: 1.25rem 5vw; }
.footer-bottom p { margin: 0; }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 900px) {
  .desktop-search, .desktop-nav { display: none; }
  .header-main { grid-template-columns: minmax(0, 1fr) auto; min-height: 5.1rem; }
  .menu-toggle, .mobile-nav { display: block; }
  .home-hero-content { margin-left: 5vw; }
  .intro-band { gap: 1.3rem; grid-template-columns: auto 1fr; }
  .intro-band .text-link { grid-column: 2; }
  .news-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-card--featured { grid-column: span 2; grid-row: span 1; }
  .content-card--featured .content-card-media { height: 16rem; }
  .place-band { grid-template-columns: 1fr; }
  .place-copy { max-width: none; padding: 4.5rem 5vw; }
  .place-images { min-height: 29rem; }
  .listing-grid, .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-shell { gap: 2.5rem; grid-template-columns: 1fr; }
  .article-aside { border-bottom: 1px solid var(--line); border-left: 0; display: flex; flex-wrap: wrap; padding: 0 0 1rem; position: static; }
  .article-aside p { flex-basis: 100%; }
  .archive-timeline { margin-left: 0.55rem; padding-left: 2.2rem; }
  .year-waypoint { margin-left: -3.15rem; }
  .contact-layout { grid-template-columns: 1fr 1fr; }
  .contact-qr { grid-column: span 2; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .utility-bar { display: none; }
  .header-main { min-height: 4.6rem; padding: 0.55rem 5vw; }
  .brand-lockup { width: 14.2rem; }
  .brand-lockup img { max-height: 3.4rem; }
  .home-hero { min-height: 39rem; }
  .home-hero-content { min-height: 39rem; padding: 4rem 0 6rem; }
  .home-hero h1 { font-size: clamp(2.35rem, 11vw, 3.3rem); }
  .home-hero-content > p:not(.eyebrow) { font-size: 0.94rem; }
  .hero-route { bottom: 1.5rem; left: 5vw; }
  .intro-band { grid-template-columns: 1fr; padding-bottom: 2.8rem; padding-top: 2.8rem; }
  .intro-band .text-link { grid-column: auto; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .news-layout, .listing-grid, .search-results { grid-template-columns: 1fr; }
  .content-card--featured { grid-column: auto; }
  .content-card--featured .content-card-media { height: 13rem; }
  .place-images { min-height: 22rem; }
  .place-images img:last-child { border-width: 0.5rem; }
  .announcement-list a { grid-template-columns: 2.3rem minmax(0, 1fr) auto; }
  .announcement-list strong { font-size: 0.9rem; }
  .search-callout { align-items: flex-start; grid-template-columns: 1fr; padding-bottom: 2.5rem; padding-top: 2.5rem; }
  .page-hero, .page-hero-inner { min-height: 18rem; }
  .page-hero-inner { padding-bottom: 3rem; padding-top: 2.5rem; }
  .breadcrumbs { margin-bottom: 1.5rem; }
  .page-hero h1 { font-size: 2.25rem; }
  .hero-waypoints { bottom: 1.2rem; }
  .archive-intro { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
  .archive-intro p:last-child { text-align: left; }
  .archive-featured { margin-bottom: 3.3rem; }
  .archive-timeline { margin-left: 0.35rem; padding-left: 1.6rem; }
  .year-waypoint { font-size: 1.75rem; margin-left: -2.55rem; }
  .year-waypoint i { width: 1.4rem; }
  .timeline-list .content-card--archive { min-height: 0; }
  .content-card--archive .content-card-media { flex-basis: 5.7rem; height: 5.7rem; margin-right: 0.8rem; }
  .content-card--archive .content-card-body { padding-right: 0.25rem; }
  .content-card--archive h3 { font-size: 1rem; }
  .content-card--archive p, .content-card--archive .card-link { display: none; }
  .pillar-section, .service-grid { grid-template-columns: 1fr; }
  .pillar, .service-card { min-height: 14.5rem; }
  .article-content { font-size: 0.96rem; }
  .article-content h1 { font-size: 1.9rem; }
  .article-content h2 { font-size: 1.55rem; }
  .legacy-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legacy-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legacy-home-section, .legacy-home-section--association { grid-template-columns: 1fr; }
  .legacy-home-section--centre .legacy-home-illustration, .legacy-home-section--base .legacy-home-illustration { display: none; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-qr { grid-column: auto; }
  .footer-main { gap: 2.4rem; grid-template-columns: 1fr; padding-bottom: 3rem; padding-top: 3.4rem; }
  .footer-bottom { flex-direction: column; gap: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* ===================================================================
   飛鷹靜態站 增強層
   由 tools/css_build.py 接在 index.css（原 AI 設計）之後輸出。
   只補「純 HTML 需要、React 版沒需要」的部分，不改原有視覺語言。
   =================================================================== */

/* ---------- 1. 字體堆疊：v1 不自託管（與原站一致，零外部請求、零 CLS） ---------- */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei",
               "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Heiti TC", sans-serif;
  --font-display: "Noto Serif TC", "Songti TC", "PMingLiU", "Microsoft JhengHei", serif;
  --gallery-gap: 0.75rem;
  --rhythm-1: 2.5rem;
  --rhythm-2: 4rem;
  --rhythm-3: 5.5rem;
  --rhythm-4: 7rem;
}

/* ---------- 2. 可及性基礎 ---------- */
.skip-link { background: var(--navy); color: #fff; left: -9999px; padding: 0.75rem 1.1rem; position: absolute; top: 0; z-index: 200; }
.skip-link:focus { left: 1rem; top: 1rem; }
:where(a, button, summary, input):focus-visible { outline: 3px solid var(--eagle-green); outline-offset: 3px; }
main { display: block; }

/* ---------- 3. Elementor 內文兼容層 ---------- */
/* <picture> 預設是 inline，寬度會退化成圖片原始寬度 → 卡片／網格一定爆版。
   靜態站的圖片全部用 <picture>（WebP + fallback），所以先把它變成 block。
   注意：一旦設了 display:block，就會壓過 UA 的 [hidden]{display:none}，
   所以 [hidden] 必須 !important，否則首頁輪播每張都會同時顯示。 */
picture { display: block; max-width: 100%; }
picture > img { display: block; height: auto; }
[hidden] { display: none !important; }

/* HTML 的 width/height 屬性只是給瀏覽器預留空間（防 CLS），
   不應該鎖死高度——否則 width:100% 的響應式規則會把圖拉長。
   需要固定高度的元件（hero 背景、輪播）在下面用更高特異性覆蓋。 */
img[width], img[height] { height: auto; }

/* 首頁三段的 3 欄比例（只在桌面套用；手機沿用設計的單欄，
   注意 media query 不會提高特異性，這裡必須自己包 min-width，否則會壓過 900px 斷點） */
@media (min-width: 901px) {
  .legacy-home-section--centre { grid-template-columns: 0.62fr 1.1fr 1.25fr; }
  .legacy-home-section--centre > .legacy-home-illustration { order: 1; }
  .legacy-home-section--centre > .legacy-home-copy { order: 2; }
  .legacy-home-section--centre > .legacy-carousel { order: 3; }
  .legacy-home-section--base { grid-template-columns: 1.25fr 1.1fr 0.62fr; }
}
.legacy-home-section--centre .legacy-home-illustration img,
.legacy-home-section--base .legacy-home-illustration img { max-height: 15rem; width: auto; }

/* 原設計靠 React 條件渲染手機選單，靜態站要改成 class 控制（否則手機一開就展開） */
@media (max-width: 900px) {
  .mobile-nav { display: none; }
  .mobile-nav.is-open { display: block; }

  /* 手機首頁標題改用「圖在上、字在下」的流式版面，
     原本的絕對定位會把按鈕擠出 overflow:hidden 之外被切掉 */
  .legacy-home-hero { display: flex; align-items: flex-end; min-height: 0; }
  .legacy-home-hero-copy {
    left: auto; max-width: none; padding: 12rem 5vw 2.4rem;
    position: relative; top: auto; transform: none;
  }
  .legacy-home-hero-copy h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); margin-bottom: 1rem; }
  .legacy-home-hero-copy p { font-size: 0.88rem; line-height: 1.8; }
  .legacy-home-hero::after {
    background: linear-gradient(180deg, rgba(3, 30, 58, 0.10) 0%, rgba(3, 30, 58, 0.72) 28%,
                rgba(3, 30, 58, 0.94) 55%);
  }
}

/* 原設計用「> img」直選子元素，包了 <picture> 之後要補回同樣的定位 */
.legacy-home-hero > picture { inset: 0; position: absolute; }
.legacy-home-hero > picture > img { height: 100%; object-fit: cover; width: 100%; }
.legacy-carousel > picture { inset: 0; position: absolute; }
.legacy-carousel > picture > img { height: 100%; object-fit: cover; width: 100%; }

.article-content .e-con,
.article-content .elementor-element,
.article-content .elementor-container,
.article-content .elementor-column,
.article-content .elementor-widget-wrap { max-width: 100%; }
.article-content .e-con-inner { display: block; }
.article-content .elementor-widget-container { margin-bottom: 1.2rem; }
.article-content .elementor-widget-container > :last-child { margin-bottom: 0; }
.article-content .elementor-widget-spacer,
.article-content .elementor-spacer { display: none; }
.article-content .elementor-widget-image { margin-bottom: 1.5rem; }
.article-content .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.article-content .elementor-size-default { font-size: inherit; }

/* 按鈕（原站 111 個 elementor-button） */
.article-content .elementor-button-wrapper { margin: 1.4rem 0; }
.article-content .elementor-button {
  align-items: center; background: var(--navy); border: 1px solid var(--navy);
  color: #fff !important; display: inline-flex; font-size: 0.92rem; font-weight: 700;
  gap: 0.5rem; justify-content: center; min-height: 44px; padding: 0.72rem 1.15rem;
  text-decoration: none !important; transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.article-content .elementor-button:hover { background: var(--eagle-green-dark); border-color: var(--eagle-green-dark); color: #fff !important; }
.article-content .elementor-button-text { text-decoration: none; }

/* 圖示清單 */
.article-content .elementor-icon-list-items { list-style: none; padding-left: 0; }
.article-content .elementor-icon-list-item { margin: 0.6rem 0; }
.article-content .elementor-icon-list-text { display: inline; }

/* FontAwesome 沒有自託管（保持零外部請求）。舊做法用 Unicode 符號補位
   （☎ ⎙ ✉ ⌖ 🌐），但每個符號來自不同字型：☎ 是實心圓圈、⎙ 是細線打印機、
   ✉ 是實心信封、⌖ 是一個點、🌐 更是彩色 emoji——粗細、大小、顏色都不一致。
   現在改為同一套線性圖示：24×24 網格、2px 描邊、圓角端點，
   以 mask 上色（顏色一律跟隨 currentColor），所以六個圖示完全同風格。
   只換 CSS，不動 HTML，原有 <i class="fas fa-…"> 全部照舊生效。 */
.elementor-icon-list-icon i, .elementor-icon-box-icon i, .elementor-icon i {
  background-color: currentColor;
  display: inline-block;
  font-style: normal;
  height: 1em;
  line-height: 1;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.14em;
  width: 1em;
}
.fa-phone-alt {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.fa-fax {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='6' y='14' width='12' height='7' rx='1'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='6' y='14' width='12' height='7' rx='1'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3C/svg%3E");
}
.fa-envelope {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}
.fa-map-marked-alt {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.fa-chrome {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}
.fa-download {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
}
.elementor-icon-list-icon {
  color: var(--eagle-green-dark); display: inline-block;
  font-size: 1rem; margin-right: 0.55rem; text-align: center; width: 1.1em;
}
.elementor-icon-box-icon .elementor-icon {
  align-items: center; background: var(--sand); border-radius: 50%;
  color: var(--navy); display: inline-flex; height: 3rem; justify-content: center;
  margin-bottom: 0.6rem; width: 3rem;
}

/* 表格、內嵌框架、超長字 */
.article-content iframe { aspect-ratio: 16 / 9; border: 0; margin: 1.5rem 0; width: 100%; }
.article-content table { display: block; max-width: 100%; overflow-x: auto; }
.article-content img { height: auto; max-width: 100%; }

/* 圖庫遮罩在純靜態下無用 */
.article-content .elementor-gallery-item__overlay,
.article-content .e-gallery-item .elementor-gallery-item__overlay { display: none; }
.article-content .elementor-gallery__container { display: block; }

/* ---------- 4. 圖庫：data-thumbnail 轉出後的網格 ---------- */
.gallery-grid {
  display: grid;
  gap: var(--gallery-gap);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  list-style: none;
  margin: 1.8rem 0;
  padding: 0;
}
.gallery-grid .gallery-item,
.gallery-grid figure { margin: 0; min-width: 0; }
.gallery-grid a { display: block; height: 100%; position: relative; }
.gallery-grid picture { display: block; height: 100%; }
.gallery-grid img,
.article-content .gallery-grid img {
  aspect-ratio: 4 / 3;
  background: #eef2e8;
  display: block;
  height: auto;
  margin: 0 !important;
  max-height: none;
  object-fit: cover;
  transition: transform 220ms var(--ease-out);
  width: 100%;
}
.gallery-grid a:hover img { transform: scale(1.03); }
.gallery-grid figcaption { color: #748193; font-size: 0.78rem; margin-top: 0.4rem; }

/* ---------- 5. 燈箱（原生 dialog）—— 照 Elementor 燈箱的版面語言重做 ---------- */
/* 2026-10-25 第二版。第一版是「四角圓形按鈕」，視覺很重、也不像原站插件；
   用戶指定要 Elementor 那種效果，於是改成：
     半透明黑底 + 圖片居中留白 + 張數在左上 + 工具鈕（放大／全螢幕／下載）在右上
     + 說明文字在底部居中 + 左右各一支細白箭咀（點擊區大、視覺很輕）+ 開啟 zoomIn。 */
dialog.lightbox {
  background: transparent;
  border: 0;
  color: #fff;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;   /* 頂欄 / 圖片 / 底欄 */
  height: 100vh;
  inset: 0;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  position: fixed;
  width: 100vw;
}
dialog.lightbox:not([open]) { display: none; }
/* 底色比 Elementor 預設的 0.8 深：本站頁首是深藍底白字，0.8 之下 Logo 與
   漢堡選單仍隱約可見，偏偏就落在燈箱工具鈕那一行，看起來像多了一粒按鈕。
   實測 0.95 時頁首殘影的最高亮度只有 13/255，肉眼幾乎看不出。 */
dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.95); }

/* 頂欄與底欄：透明，圖示浮在暗底上 */
.lightbox-bar {
  align-items: center;
  display: flex;
  padding: 0 1rem;
  position: relative;
  z-index: 3;
}
/* 頂底各一道漸變：本站頁首是深藍底白字，即使在 0.92 黑底之下，Logo 與
   漢堡選單仍會與燈箱自己的圖示重疊。這層在頂部夠深、往下淡出，
   既遮住頁首圖示，又不會變成一條硬邊黑帶。 */
.lightbox-bar--top { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0) 100%); height: 56px; justify-content: space-between; }
.lightbox-bar--bottom { background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0) 100%); height: 56px; justify-content: center; }
.lightbox-counter {
  color: #fff;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  margin: 0;
  opacity: 0.95;
}
.lightbox-caption { color: #e8eef5; font-size: 0.92rem; margin: 0; text-align: center; }
.lightbox-tools { align-items: center; display: flex; gap: 0.3rem; }

/* 線性圖示按鈕：無底無框，只靠 hover 淡底，跟 Elementor 一致 */
.lightbox-btn,
.lightbox-close {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  opacity: 0.85;
  padding: 0;
  transition: background 140ms, opacity 140ms;
  width: 34px;
}
.lightbox-btn svg,
.lightbox-close svg { height: 20px; width: 20px; }
.lightbox-btn:hover,
.lightbox-close:hover { background: rgba(255, 255, 255, 0.14); opacity: 1; }
.lightbox-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.2); opacity: 1; }
.lightbox-btn[hidden],
.lightbox-prev[hidden],
.lightbox-next[hidden] { display: none !important; }
.lightbox-btn:focus-visible,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 圖片區：中央留白，箭咀不會壓住圖 */
.lightbox-stage {
  align-content: center;
  align-items: center;
  display: grid;
  justify-items: center;
  min-height: 0;
  overflow: auto;
  padding: 0 5rem;
  position: relative;
}
dialog.lightbox img {
  cursor: zoom-in;
  display: block;
  height: auto;
  max-height: calc(100vh - 9rem);
  max-width: 100%;
  object-fit: contain;
  width: auto;
}
/* 開場動畫只在「剛打開」那一下播；圖片本身由頁面載入就存在，
   若把 animation 寫在 img 上，會在隱藏狀態跑完，打開時完全看不到。 */
dialog.lightbox.is-opening .lightbox-img { animation: lb-zoom-in 220ms ease-out; }
/* 放大＝顯示原尺寸，可拖曳／捲軸平移 */
dialog.lightbox img.is-zoomed {
  animation: none;
  cursor: grab;
  max-height: none;
  max-width: none;
}
.lightbox-stage.is-dragging img { cursor: grabbing; }
@keyframes lb-zoom-in {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}

/* 載入指示（大圖在慢網絡下要等，沒有這個會像「按了沒反應」） */
.lightbox-spinner {
  animation: lb-spin 0.8s linear infinite;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  border-top-color: #fff;
  display: none;
  height: 34px;
  left: 50%;
  margin: -17px 0 0 -17px;
  position: absolute;
  top: 50%;
  width: 34px;
  z-index: 2;
}
.lightbox.is-loading .lightbox-spinner { display: block; }
dialog.lightbox.is-loading .lightbox-img { opacity: 0; }
@keyframes lb-spin { to { transform: rotate(360deg); } }

/* 左右箭咀：整條邊都是點擊區，視覺上只有一支細箭咀 */
.lightbox-prev,
.lightbox-next {
  align-items: center;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0;
  position: fixed;
  top: 0;
  width: 5rem;
  z-index: 2;
}
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
.lightbox-prev svg,
.lightbox-next svg {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
  height: 30px;
  transition: transform 150ms var(--ease-out);
  width: 30px;
}
.lightbox-prev:hover svg { transform: translateX(-3px); }
.lightbox-next:hover svg { transform: translateX(3px); }

/* ---------- 6. 麵包屑（獨立於 page-hero 的版本） ---------- */
.breadcrumbs--plain { color: var(--body); font-size: 0.82rem; margin: 0 0 1.4rem; }
.breadcrumbs--plain a { color: var(--eagle-green-dark); font-weight: 700; }
.breadcrumbs--plain a:hover { text-decoration: underline; }
.breadcrumbs--plain span[aria-hidden] { color: #a1abb7; }

/* ---------- 7. 年份頁 ---------- */
.year-meta { color: var(--body); font-size: 0.92rem; margin: 0 0 2.2rem; }
.year-meta strong { color: var(--navy); font-size: 1.05rem; }
.year-empty { background: var(--sand); border: 1px dashed #c8c6b9; color: var(--body); margin: 1.5rem 0 2rem; padding: 2.4rem 1.6rem; }
.year-empty h2 { color: var(--navy); font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 0.7rem; }
.year-nav { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; margin-top: 3.2rem; padding-top: 1.5rem; }
.year-nav a, .year-nav span { align-items: center; display: inline-flex; font-size: 0.9rem; font-weight: 700; min-height: 44px; padding: 0.6rem 1rem; }
.year-nav a { border: 1px solid var(--line); color: var(--navy); }
.year-nav a:hover { background: var(--navy); color: #fff; }
.year-nav span { color: #a1abb7; }

/* ---------- 8. 往年活動：年份手風琴（零 JS） ---------- */
.year-accordion { border-top: 1px solid var(--line); }
.year-accordion details { border-bottom: 1px solid var(--line); }
.year-accordion summary {
  align-items: center;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
  padding: 1.15rem 0.3rem;
}
.year-accordion summary::-webkit-details-marker { display: none; }
.year-accordion summary::after { color: var(--eagle-green-dark); content: "＋"; font-size: 1.1rem; }
.year-accordion details[open] summary::after { content: "－"; }
.year-accordion summary:hover { color: var(--eagle-green-dark); }
.year-accordion summary .count { color: var(--body); font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; margin-left: auto; margin-right: 1rem; }
.year-accordion .year-links { display: grid; gap: 0 1.6rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); padding: 0.2rem 0 1.6rem; }
.year-accordion .year-links a { border-bottom: 1px solid #eef1ec; color: var(--body); font-size: 0.9rem; min-height: 40px; padding: 0.6rem 0.2rem; }
.year-accordion .year-links a:hover { color: var(--eagle-green-dark); }

/* ---------- 9. 年份頁圖卡 ---------- */
/* 原本這裡有 .entry-month（卡片的「N月」小標）。2026-10-25 移除：
   那個月是 post_date（匯入日 2023-01-27），不是活動月份，
   結果 45 張卡全部寫「1月」，連「12月20至24日東北吉林交流」下面都寫 1月。 */
.legacy-post-card h2 { font-family: var(--font-body); }
/* 卡片圖要跟 aspect-ratio 走，所以高度必須 auto（HTML 的 height 屬性會被當成 height:1024px） */
.legacy-post-card img { height: auto; }
.legacy-post-card picture { display: block; width: 100%; }

/* ---------- 10. 上下篇 ---------- */
.post-nav { border-top: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: 1fr 1fr; margin-top: 3.2rem; padding-top: 1.6rem; }
.post-nav a, .post-nav .post-nav-empty { border: 1px solid var(--line); display: block; min-height: 44px; padding: 0.95rem 1.1rem; }
.post-nav a:hover { background: #f2f6ea; border-color: #aac579; }
.post-nav span { color: var(--body); display: block; font-size: 0.72rem; letter-spacing: 0.12em; margin-bottom: 0.3rem; }
.post-nav strong { color: var(--navy); display: block; font-size: 0.94rem; font-weight: 700; line-height: 1.5; }
.post-nav .is-next { text-align: right; }
.post-nav .post-nav-empty { border-color: transparent; }

/* ---------- 11. 聯絡頁 ---------- */
.contact-intro { color: var(--body); font-size: 1.05rem; margin: 0; max-width: 42rem; }
.contact-form-card { background: var(--mist); padding: 2.2rem; }
.contact-form-card h2 { color: var(--navy); font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.7rem; }
.contact-form-card p { color: var(--body); font-size: 0.88rem; }
.contact-form { display: grid; gap: 0.9rem; margin-top: 1.4rem; }
.contact-form label { color: var(--navy); display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.3rem; }
.contact-form input, .contact-form textarea {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-size: 0.94rem; min-height: 44px; padding: 0.65rem 0.8rem; width: 100%;
}
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form button { background: var(--navy); border: 0; color: #fff; font-weight: 800; min-height: 44px; padding: 0.8rem 1.3rem; }
.contact-form button:hover { background: var(--eagle-green-dark); }
.contact-form button[disabled] { cursor: progress; opacity: 0.72; }
.contact-tip { color: var(--body); font-size: 0.78rem; margin-top: 0.8rem; }

/* 表單送出後的結果提示（send.php 回傳的 level → is-ok / is-warn / is-error） */
.contact-form .is-optional { color: var(--body); font-size: 0.76rem; font-weight: 400; }
.contact-form .form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; }
.form-status {
  border-left: 3px solid currentColor; flex: 1 1 16rem; font-size: 0.86rem;
  line-height: 1.6; margin: 0; padding: 0.55rem 0.85rem;
}
.form-status[hidden] { display: none; }
.form-status.is-ok { background: #eaf4e4; color: #2f6b10; }
.form-status.is-warn { background: #fdf3e2; color: #8a5a00; }
.form-status.is-error { background: #fdeaea; color: #a01b1b; }

/* 蜜罐欄位：真人看不到，機器人會照填；不可用 display:none（部分機器人會跳過） */
.hp-field {
  height: 1px; left: -9999px; overflow: hidden;
  position: absolute; width: 1px;
}

/* Google reCAPTCHA v2 的 iframe 固定 304px 寬，窄機一定撐爆卡片。
   這裡用 zoom 而不是 transform：transform:scale 不改變版面尺寸，
   表單 grid 仍然當它是 304px，會把整張卡片撐出螢幕（320px 實測溢出 24px）；
   zoom 會連版面尺寸一齊縮，所以 grid 的 min-content 也跟著變小。
   實測 320px：304 × 0.78 = 237px，剛好放進卡片內寬 240px。 */
.form-captcha { margin-top: 0.2rem; min-height: 78px; }
.form-captcha iframe { border: 0; }
@media (max-width: 419px) {
  .form-captcha { zoom: 0.88; }
}
@media (max-width: 339px) {
  .form-captcha { zoom: 0.78; }
}

/* 靜態聯絡卡（取代原站 Elementor 表單外掛）
   注意：這裡的清單 class 用 contact-facts，不可叫 contact-details——
   基礎樣式表（React 版）已經用 .contact-details 做「頁腳深色聯絡卡」，
   同名會令清單無故多出白底 + 1px 邊框（2026-10-26 修正）。 */
.contact-venues { display: grid; gap: 1.2rem;
  /* min(100%, 16rem)：只用 16rem 的話，320px 手機上卡片內寬不足 16rem，
     整張卡會被撐到 304px 而超出螢幕 24px（2026-10-26 實測） */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 1.6rem 0 0.4rem; }
.contact-venue { background: #fff; border: 1px solid var(--line); padding: 1.3rem 1.4rem; }
.contact-venue h3 { color: var(--navy); font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.7rem; }
.contact-venue .contact-facts { list-style: none; margin: 0; padding: 0; }
.contact-venue .contact-facts li { color: var(--body); font-size: 0.88rem; line-height: 1.75; }
.contact-venue .contact-facts a { color: var(--eagle-green-dark); display: inline; font-weight: 700; min-height: 0; padding: 0; }
.contact-venue p { margin: 0.7rem 0 0; }
.contact-venue p a { font-size: 0.82rem; font-weight: 700; }

/* ---------- 12. 公告列表 / 搜尋 ---------- */
.legacy-directory-list a { min-height: 44px; }
.search-index-list { border-top: 1px solid var(--line); list-style: none; margin: 1.4rem 0 0; padding-left: 0; }
.search-index-list h2 { color: var(--navy); font-family: var(--font-display); font-size: 1.3rem; margin: 2.4rem 0 0.8rem; }
.search-index-list ul { list-style: none; margin: 0; padding: 0; }
.search-index-list li { border-bottom: 1px solid var(--line); }
.search-index-list a { color: var(--navy); display: block; font-size: 0.9rem; min-height: 44px; padding: 0.75rem 0.2rem; }
.search-index-list a:hover { color: var(--eagle-green-dark); }
.search-index-list time { color: var(--body); font-size: 0.76rem; margin-right: 0.7rem; }

/* ---------- 12b. 首頁活動剪影（沿用 legacy-post-grid，3 欄） ---------- */
.legacy-home-strip .legacy-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legacy-home-strip .legacy-post-card h2 { font-size: 0.98rem; }
@media (max-width: 900px) {
  .legacy-home-strip .legacy-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .legacy-home-strip .legacy-post-grid { grid-template-columns: 1fr; }
}

/* ---------- 13. 404 ---------- */
.not-found { min-height: 46vh; }
.not-found .button { margin-top: 0.6rem; }

/* ---------- 14. 手機微調（保持 4 級節奏） ---------- */
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .is-next { text-align: left; }
  .year-accordion .year-links { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .gallery-grid { gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .year-nav { flex-direction: column; }
  .year-nav a, .year-nav span { justify-content: center; width: 100%; }
  .contact-form-card { padding: 1.5rem; }
}

/* 觸控目標下限（Apple HIG / Material 44px） */
.nav-inner > a, .nav-dropdown > summary, .mobile-nav > a, .mobile-nav summary,
.legacy-year-grid a, .legacy-directory-list a, .footer-socials a, .footer-contact a,
.announcement-list a, .legacy-home-announcement-list a, .place-links a { min-height: 44px; }
.footer-contact a, .contact-details a { white-space: nowrap; }

/* ---------- 15. 2026-10-25 版面修正 ---------- */
/* 內文頁不再有「內容資料」左側欄（原本 215 頁都掛同一組字，白食 12rem）。
   改單欄，並限制行寬，避免大螢幕一行過長。 */
.article-shell { display: block; max-width: 52rem; }

/* 日期搬到 H1 下一行 */
.page-hero-meta { color: #c3d3e3; font-size: 0.82rem; letter-spacing: 0.04em; margin: 0.85rem 0 0; }

/* 空白內容：原站寫法「內容籌建中,將會陸續更新,敬請期待!」＋吉祥物 */
.content-empty { background: var(--sand); margin: 1.5rem 0; padding: 3rem 1.5rem; text-align: center; }
.content-empty-title { color: var(--navy); font-family: var(--font-display); font-size: 1.45rem; margin: 0 0 1.5rem; }
.content-empty picture { display: block; }
.content-empty img { display: block; height: auto; margin: 0 auto; max-width: 11rem; width: auto; }

/* 有特色圖但冇內文的文章：直接顯示該圖，唔留一片空白 */
.post-cover { margin: 0; }
.post-cover picture { display: block; }
.post-cover img { display: block; height: auto; width: 100%; }

/* 活動花絮年份卡：原站有 18 張封面相，之前全部漏掉 */
.legacy-year-grid .year-card {
  align-items: stretch; background: #fff; border: 1px solid var(--line);
  color: var(--navy); display: flex; flex-direction: column; min-height: 0;
  overflow: hidden; padding: 0;
}
.legacy-year-grid .year-card:hover { background: #fff; transform: translateY(-3px); }
.year-card-media { aspect-ratio: 4 / 3; background: var(--navy); overflow: hidden; }
.year-card-media--empty { background: #1b3a5c; }
.year-card-media picture { display: block; height: 100%; width: 100%; }
.year-card-media img {
  display: block; height: 100%; object-fit: cover; width: 100%;
  transition: transform 240ms var(--ease-out);
}
.legacy-year-grid .year-card:hover .year-card-media img { transform: scale(1.04); }
.year-card-body {
  align-items: center; background: var(--navy); color: #fff;
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem;
  justify-content: flex-start; padding: 0.85rem 1rem; width: 100%;
}
.legacy-year-grid .year-card-body span { color: var(--eagle-green); font-size: 0.76rem; font-weight: 800; flex-basis: 100%; }
.legacy-year-grid .year-card-body strong { font-family: var(--font-display); font-size: 1.12rem; text-align: left; }
.legacy-year-grid .year-card-body i { color: #b9c6d4; font-size: 0.76rem; font-style: normal; margin-left: auto; }
.legacy-year-grid .year-card:hover .year-card-body { background: var(--eagle-green-dark); }

/* 會歌曲譜：預覽圖 + 清楚的下載按鈕（原本只有一個孤立的 ⤓ 圓圈） */
.score-card {
  align-items: center; background: var(--sand); border: 1px solid var(--line);
  display: grid; gap: 1rem; justify-items: center; margin: 2rem 0 0; padding: 1.6rem;
}
.score-card-label { color: var(--navy); font-family: var(--font-display); font-size: 1.15rem; }
.score-card picture { display: block; }
.score-card img {
  border: 1px solid var(--line); display: block; height: auto;
  max-height: 22rem; max-width: 100%; width: auto;
}
.score-card .button {
  align-items: center; background: var(--navy); color: #fff; display: inline-flex;
  font-weight: 800; min-height: 44px; padding: 0.72rem 1.35rem;
  text-decoration: none !important;
}
.score-card .button:hover { background: var(--eagle-green-dark); }

/* 表格下載：文件連結 */
.article-content .doc-link { color: var(--eagle-green-dark); font-weight: 700; }
.article-content .doc-link:hover { text-decoration: underline; }
.article-content .elementor-icon-list-text a { color: inherit; }

/* 其他頁若再出現 icon-box，至少置中，不會再有孤立圖示 */
.article-content .elementor-icon-box-wrapper { text-align: center; }
.article-content .elementor-icon-box-icon { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .legacy-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .legacy-year-grid { grid-template-columns: 1fr; }
  /* 燈箱：手機把頂底欄與箭咀縮小，圖片留白同步收窄 */
  .lightbox-bar--top, .lightbox-bar--bottom { height: 48px; }
  .lightbox-bar { padding: 0 0.5rem; }
  .lightbox-counter { font-size: 0.8rem; }
  .lightbox-tools { gap: 0.1rem; }
  .lightbox-btn, .lightbox-close { height: 30px; width: 30px; }
  .lightbox-btn svg, .lightbox-close svg { height: 17px; width: 17px; }
  .lightbox-caption { font-size: 0.82rem; }
  .lightbox-stage { padding: 0 2.2rem; }
  .lightbox-prev, .lightbox-next { width: 2.2rem; }
  .lightbox-prev svg, .lightbox-next svg { height: 22px; width: 22px; }
  dialog.lightbox img { max-height: calc(100vh - 7rem); }
}

/* ---------- 16. 內文圖片燈箱 + Elementor 版面還原（2026-10-25） ---------- */
/* 所有內文圖片都包在 <a class="img-zoom" data-lightbox>（原站只有圖庫那批可以點）。
   href 指全尺寸圖，點下去才真的睇得清。 */
.article-content .img-zoom,
.article-content .post-cover .img-zoom {
  cursor: zoom-in; display: inline-block; max-width: 100%;
}
.article-content .img-zoom picture { display: block; }
.article-content .img-zoom:focus-visible {
  outline: 3px solid var(--eagle-green); outline-offset: 3px;
}
/* 唔加「點擊放大」文字標籤：一頁 8 張圖就會出現 8 行小字，好吵。
   用 cursor:zoom-in + hover 微亮來示意已經足夠。 */
.article-content .img-zoom img { transition: filter 180ms var(--ease-out); }
.article-content .img-zoom:hover img { filter: brightness(1.04); }

/* 原站四粒並排按鈕（組織及架構／會訓宗旨／制服表／飛鷹之歌）在 Elementor 是 flex row，
   靜態層把 .e-con-inner 設成 block 之後變直排 → 這一類容器標成 button-row 走回橫排。 */
.article-content .e-con-inner.button-row {
  align-items: center; display: flex; flex-wrap: wrap; gap: 0.65rem;
}
.article-content .e-con-inner.button-row > * {
  flex: 0 0 auto; margin-bottom: 0; min-width: 0; width: auto;
}
.article-content .e-con-inner.button-row .elementor-button-wrapper { margin: 0; }

/* 多圖版面（例如制服表 5 張）：auto-fit 網格，桌面 2–3 欄、手機自動 1 欄。
   只對「全部子項都是圖片元件」的容器生效，有文字的容器一律不動。 */
.article-content .e-con-inner.media-grid {
  align-items: start; display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.article-content .e-con-inner.media-grid > * { margin-bottom: 0; min-width: 0; }
.article-content .e-con-inner.media-grid > .grid-span { grid-column: 1 / -1; }
.article-content .e-con-inner.media-grid .elementor-widget-image { margin-bottom: 0; }
.article-content .e-con-inner.media-grid img { height: auto; width: 100%; }

@media (max-width: 560px) {
  .article-content .e-con-inner.media-grid { grid-template-columns: 1fr; }
}