:root{
  --green:#315f3c;
  --deep:#183321;
  --paper:#f6f0e5;
  --cream:#fffaf0;
  --muted:#657066;
  --line:rgba(49,95,60,.18);
  --shadow:0 12px 40px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--deep);line-height:1.7;background:var(--paper);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
}
.fixed-site-bg{
  position:fixed;inset:0;z-index:-2;
  background:url("assets/optimized/bbcf27ce098ef51a8ebd.webp") center/cover no-repeat;
}
.fixed-site-tint{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(239,244,235,.68),rgba(246,242,232,.72));
  pointer-events:none;
}
a{color:inherit}
main{position:relative;z-index:1;padding-top:92px}
.site-header{
  position:fixed;z-index:50;inset:0 0 auto;min-height:82px;padding:12px 5vw;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
  background:rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:850;color:var(--green)}
.desktop-nav{display:flex;justify-content:center;gap:34px}
.desktop-nav a{text-decoration:none;text-align:center;font-weight:800;font-size:14px;line-height:1.25}
.desktop-nav small{display:block;font-weight:500;color:var(--muted)}
.menu-button{display:none;border:0;background:transparent;color:var(--green);font-size:28px}
.side-menu{position:fixed;z-index:100;top:0;right:0;width:min(360px,86vw);height:100vh;padding:72px 28px 28px;background:rgba(255,250,240,.98);transform:translateX(105%);transition:.25s;box-shadow:-20px 0 60px rgba(0,0,0,.12)}
.side-menu.open{transform:translateX(0)}
.side-menu a{display:block;padding:14px 4px;text-decoration:none;border-bottom:1px solid var(--line)}
.close-button{position:absolute;top:16px;right:20px;border:0;background:none;font-size:40px;color:var(--green)}
.glass-panel{position:relative;overflow:hidden;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);border-radius:30px;box-shadow:0 8px 24px rgba(0,0,0,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.25s}
.glass-panel::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.03) 45%,rgba(255,255,255,0));pointer-events:none}
.glass-panel>*{position:relative;z-index:1}
.glass-panel:hover{background:rgba(255,255,255,.20);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.08)}
.eyebrow{margin:0 0 8px;color:var(--green);font-weight:850;letter-spacing:.09em;text-transform:uppercase;font-size:13px}
h1{margin:10px 0 20px;color:var(--green);font-size:clamp(36px,5vw,72px);line-height:1.12}
h2{margin:0 0 14px;color:var(--green);font-size:clamp(27px,3vw,42px);line-height:1.2}
.hero-title-line{display:block;white-space:nowrap}
.hero-text{font-size:clamp(17px,1.35vw,21px);max-width:760px;line-height:1.95}
.panel-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.panel-heading h2{font-size:30px;margin:0}
.panel-heading>a,.text-link{text-decoration:none;color:var(--green);font-weight:850}
.page-hero{margin:34px 5vw 28px;padding:50px;max-width:920px;background:rgba(255,255,255,.18)}
.button{display:inline-block;margin-top:14px;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:850}
.primary{background:var(--green);color:white}
.secondary{border:1px solid var(--green);color:var(--green);background:rgba(255,255,255,.24)}
.room-list{padding:0 5vw 20px;display:grid;gap:24px}
.room-detail{padding:28px;display:grid;grid-template-columns:.65fr 1.35fr;gap:28px;align-items:center;background:rgba(255,255,255,.18)}
.room-detail p{font-size:18px}
.room-images{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.room-images img{width:100%;height:320px;object-fit:cover;border-radius:20px}
.note{font-size:14px;color:var(--muted)}
.application-block{margin:28px 5vw 44px;padding:36px;background:rgba(255,255,255,.18)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.steps article{padding:20px;border-radius:20px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.40);backdrop-filter:blur(8px)}
.steps span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;font-weight:900}
.steps h3{margin:12px 0 4px;color:var(--green)}
.albums-page{margin:0 5vw 44px;padding:28px;background:rgba(255,255,255,.18)}
.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Activity Review cards — restored after clean-up removed the shared album-card rules. */
body.activities-page .album-card{
  display:block;
  min-width:0;
  overflow:hidden;
  text-decoration:none;
  color:var(--deep);
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.40);
  border-radius:20px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

body.activities-page .album-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.32);
  box-shadow:0 12px 30px rgba(24,51,33,.08);
}

body.activities-page .album-card img{
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:4 / 3;
  height:auto;
  object-fit:cover;
}

body.activities-page .album-card-label{
  display:block;
  padding:11px 13px;
  font-weight:850;
  line-height:1.25;
}

body.activities-page .album-card-label small{
  display:block;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.volunteer-grid{padding:0 5vw 44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{padding:30px;background:rgba(255,255,255,.18)}
.service-card h2{font-size:28px}
.contact-page{padding:0 5vw 44px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.contact-card,.map-card,.qr-card{padding:34px;background:rgba(255,255,255,.18)}
.map-placeholder{min-height:360px;display:grid;place-items:center;border-radius:20px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.4);text-align:center;padding:20px}
.site-footer{position:relative;z-index:1;background:#143522;color:rgba(255,255,255,.9);padding:18px 5vw 10px}
.footer-grid{display:grid;grid-template-columns:1.05fr 1.35fr .65fr;gap:34px;align-items:start;max-width:1500px;margin:auto}
.site-footer strong{display:block;margin:0 0 5px;line-height:1.35;font-size:14px}
.site-footer strong span{font-weight:700}
.site-footer p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.8)}
.site-footer a{color:inherit;text-decoration:none}
.footer-map-button{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:5px 10px;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:11px;font-weight:800;transition:.2s}
.footer-map-button:hover{background:rgba(255,255,255,.12)}
.footer-map-button span{opacity:.78;font-weight:600}
.site-footer small{display:block;max-width:1500px;margin:9px auto 0;padding-top:7px;border-top:1px solid rgba(255,255,255,.13);font-size:10px;color:rgba(255,255,255,.55)}


.qr-card{display:grid;grid-template-columns:1fr minmax(160px,240px);gap:24px;align-items:center}
.qr-card img{width:100%;background:#fff;border-radius:18px;padding:10px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}


/* Volunteer page v2 */
.volunteer-hero{margin:34px 5vw 28px;padding:36px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:34px;align-items:stretch;background:rgba(255,255,255,.18)}
.volunteer-hero-copy{display:flex;flex-direction:column;justify-content:center}.volunteer-hero-copy h1{margin-bottom:18px}.volunteer-hero-copy p{max-width:760px;font-size:17px;line-height:1.9;margin:0 0 13px}.volunteer-lead{font-size:19px!important;color:var(--deep)}
/* Volunteer register button — centered text */
.volunteer-register-button{
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  min-width:270px;
  padding:16px 28px;
  text-align:center;
  line-height:1.3;
}

.volunteer-register-button span{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  opacity:.8;
  text-align:center;
}

.form-note{
  margin-top:9px!important;
  font-size:12px!important;
  color:var(--muted);
}
.volunteer-photo-collage{display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:1fr 1fr;gap:14px;min-height:510px}.volunteer-photo{margin:0;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.45);box-shadow:0 10px 30px rgba(0,0,0,.08)}.volunteer-photo-main{grid-row:1/3}.volunteer-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.volunteer-photo:hover img{transform:scale(1.035)}
.volunteer-service-section{padding:0 5vw 34px}.section-heading{margin:0 0 16px}.section-heading h2{margin:0}.volunteer-albums{margin:0 5vw 46px;padding:30px;background:rgba(255,255,255,.18)}.album-intro{margin:0;color:var(--muted);text-align:right}
.volunteer-album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.volunteer-album-card{display:block;overflow:hidden;border-radius:22px;text-decoration:none;color:var(--deep);background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.40);backdrop-filter:blur(8px);transition:.22s ease}.volunteer-album-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.30);box-shadow:0 14px 34px rgba(0,0,0,.08)}.volunteer-album-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.volunteer-album-copy{display:flex;flex-direction:column;padding:14px 16px 16px}.volunteer-album-copy small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.volunteer-album-copy strong{margin:3px 0 6px;font-size:18px;color:var(--green)}.volunteer-album-copy>span{font-size:13px;font-weight:800}
@media(max-width:1050px){.volunteer-hero{grid-template-columns:1fr}.volunteer-photo-collage{min-height:460px}}


/* Volunteer service cards: four-column revision */
.volunteer-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.volunteer-grid .service-card{
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px;
}
.volunteer-grid .service-card h2{
  margin-bottom:12px;
}
@media(max-width:1100px){
  .volunteer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* Center the Ways to Serve section heading */
.volunteer-service-section .section-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-bottom:28px;
}

.volunteer-service-section .section-heading .eyebrow,
.volunteer-service-section .section-heading h2{
  width:100%;
  text-align:center;
}

/* =========================================================
   HOMEPAGE — clean base
   Desktop: Mary + four fixed activity photos rotate as the main visual.
   Narrow/mobile: handled by the single responsive block at the end.
   ========================================================= */

body.home-page .fixed-site-bg,
body.home-page .fixed-site-tint{
  display:block !important;
}

body.home-page .home-v4-main{
  padding-top:88px !important;
  overflow:hidden;
}

body.home-page .home-v4-hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:560px !important;
  margin:30px 5vw 0 !important;
  padding:0 !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.115) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.055) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}

/* The main rotating visual supplies its own left-side wash. */
body.home-page .home-v4-hero::before,
body.home-page .home-v4-hero::after{
  content:none !important;
  display:none !important;
}

body.home-page .home-v4-copy{
  position:relative !important;
  z-index:3 !important;
  width:min(50vw,760px) !important;
  min-height:560px !important;
  padding:64px 0 54px 5.2vw !important;
  background:transparent !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

body.home-page .home-mobile-top{
  display:block;
}

body.home-page .home-title-block{
  width:100%;
  max-width:100%;
}

body.home-page .home-v4-copy h1{
  font-size:clamp(42px,4.25vw,68px) !important;
  line-height:1.18 !important;
  margin:14px 0 24px !important;
}

body.home-page .home-v4-copy .hero-text{
  max-width:690px !important;
  margin:0;
  font-size:18px !important;
  line-height:1.95 !important;
}

body.home-page .home-v4-actions{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  margin-top:30px !important;
  max-width:760px !important;
}

body.home-page .home-v4-actions a{
  min-height:88px !important;
  padding:15px 17px;
  border-radius:17px;
  text-decoration:none;
  background:rgba(255,255,255,.36) !important;
  border:1px solid rgba(255,255,255,.48) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.035) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:.22s ease;
}

body.home-page .home-v4-actions a:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.54) !important;
}

body.home-page .home-v4-actions strong,
body.home-page .home-v4-actions span{
  display:block;
}

body.home-page .home-v4-actions strong{
  color:var(--green);
  font-size:16px;
}

body.home-page .home-v4-actions span{
  margin-top:3px;
  color:var(--muted);
  font-size:12.5px;
}

body.home-page .home-v4-cards{
  position:relative;
  z-index:3;
  margin:28px 5vw 46px !important;
  padding:28px 0 0 !important;
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:22px !important;
  background:transparent !important;
}

body.home-page .home-v4-card{
  overflow:hidden !important;
  border-radius:22px !important;
  text-decoration:none;
  color:var(--deep);
  background:rgba(255,255,255,.26) !important;
  border:1px solid rgba(255,255,255,.44) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.055) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  transition:.23s ease;
}

body.home-page .home-v4-card:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 34px rgba(0,0,0,.09) !important;
}

body.home-page .home-v4-card img{
  display:block;
  width:100%;
  aspect-ratio:16/10.2 !important;
  height:auto !important;
  object-fit:cover !important;
  border-radius:22px 22px 0 0 !important;
}

body.home-page .home-v4-card>span{
  display:block;
  padding:14px 15px 18px;
}

body.home-page .home-v4-card span,
body.home-page .home-v4-card .card-copy{
  border-radius:0 0 22px 22px !important;
}

body.home-page .home-v4-card small,
body.home-page .home-v4-card strong,
body.home-page .home-v4-card em{
  display:block;
}

body.home-page .home-v4-card small{
  font-size:9px;
  color:var(--muted);
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.home-page .home-v4-card strong{
  margin:3px 0 5px;
  color:var(--green);
  font-size:18px;
  line-height:1.3;
}

body.home-page .home-v4-card em{
  font-size:12.5px;
  line-height:1.65;
  font-style:normal;
  color:var(--deep);
}

body.home-page .site-footer{
  margin-top:0 !important;
}

@media(max-width:1180px) and (min-width:1131px){
  body.home-page .home-v4-copy{
    width:56vw !important;
  }

  body.home-page .home-v4-cards{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:20px !important;
  }
}

/* CLEAN SHARED HERO GALLERY — Facilities / Activities / Contact */
.facilities-page,
.activities-page,
.contact-page-body{
  background:transparent;
}

.facilities-page .fixed-site-bg,
.activities-page .fixed-site-bg,
.contact-page-body .fixed-site-bg{
  display:block;
}

.facilities-page .fixed-site-tint,
.activities-page .fixed-site-tint,
.contact-page-body .fixed-site-tint{
  display:block;
}

.hero-gallery-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:36px;
  margin:34px 5vw 28px;
  align-items:stretch;
}

.hero-gallery-pair > .page-hero{
  width:auto;
  max-width:none;
  height:330px;
  min-height:330px;
  margin:0;
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-gallery-shell{
  position:relative;
  width:auto;
  min-width:0;
  max-width:none;
  height:330px;
  margin:0;
}

.hero-gallery-frame{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:30px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 14px 38px rgba(30,45,34,.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.hero-gallery-track{
  position:relative;
  width:100%;
  height:100%;
}

.hero-gallery-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transform:scale(1.02);
  transition:opacity .42s ease, transform .55s ease;
  pointer-events:none;
}

.hero-gallery-slide.is-active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.hero-gallery-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-gallery-arrow{
  position:absolute;
  top:50%;
  z-index:5;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.56);
  border-radius:50%;
  background:rgba(255,255,255,.66);
  color:var(--green);
  font-size:30px;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  box-shadow:0 5px 16px rgba(0,0,0,.10);
}

.hero-gallery-prev{left:16px}
.hero-gallery-next{right:16px}

.hero-gallery-dots{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:15px;
  display:flex;
  gap:9px;
  transform:translateX(-50%);
}

.hero-gallery-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  box-shadow:0 1px 5px rgba(0,0,0,.14);
  cursor:pointer;
}

.hero-gallery-dot.is-active{
  background:var(--green);
  transform:scale(1.28);
}

@media(max-width:1050px){
  .hero-gallery-pair{
    grid-template-columns:1fr;
    gap:20px;
  }

  .hero-gallery-pair > .page-hero{
    height:auto;
    min-height:0;
  }

  .hero-gallery-shell{
    height:320px;
  }
}


/* v2(11): repaired Facilities-only sections */
body.facilities-page .facility-equipment-final{
  margin:0 5vw 30px;
  padding:30px 34px;
  display:grid;
  grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);
  gap:30px;
  align-items:center;
  background:rgba(255,255,255,.18);
}

body.facilities-page .facility-equipment-final h2{
  margin:8px 0 0;
}

body.facilities-page .facility-equipment-tags-final{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

body.facilities-page .facility-equipment-tags-final span{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.42);
  color:var(--deep);
  font-weight:750;
  font-size:14px;
  white-space:nowrap;
}

body.facilities-page .room-detail p + p{
  margin-top:10px;
}

/* Keep the original GPC logo-wall depth visible on Facilities. */
body.facilities-page .fixed-site-bg{
  background:url("assets/optimized/bbcf27ce098ef51a8ebd.webp") center/cover no-repeat;
}

body.facilities-page .fixed-site-tint{
  background:linear-gradient(
    90deg,
    rgba(239,244,235,.58),
    rgba(246,242,232,.62)
  );
}

@media(max-width:980px){
  body.facilities-page .facility-equipment-final{
    grid-template-columns:1fr;
  }
}


/* EVENTS PHASE 1 — Activities page only */
body.activities-page .activity-data-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  margin-bottom:20px;
}

body.activities-page .activity-data-heading h2{
  margin:0;
}

body.activities-page .activity-data-heading > p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  text-align:right;
}

body.activities-page .event-data-card{
  cursor:default;
}

body.activities-page a.event-data-card{
  cursor:pointer;
}

body.activities-page .event-data-copy strong,
body.activities-page .event-data-copy em{
  display:block;
}

body.activities-page .event-data-copy strong{
  margin-top:4px;
  color:var(--deep);
  font-size:17px;
}

body.activities-page .event-data-copy em{
  margin-top:7px;
  color:var(--green);
  font-size:12px;
  font-style:normal;
  font-weight:800;
}

body.activities-page .event-data-card.is-placeholder{
  opacity:.88;
}

body.activities-page .event-data-card.is-completed .event-data-copy em,
body.activities-page .event-data-card.is-placeholder .event-data-copy em{
  color:var(--muted);
}


/* =========================================================
   ACTIVITIES v2 — compact poster rail + text activity list
   ========================================================= */

/* Latest Updates: keep posters visual, but much shorter than the old A4 wall. */
body.activities-page .latest-updates-section{
  margin:0 5vw 28px;
  padding:26px 28px 28px;
}

body.activities-page .notices-carousel{
  position:relative;
  width:100%;
  max-width:none;
  margin:16px auto 0;
}

body.activities-page .notices-viewport{
  width:calc(100% - 76px);
  margin:0 auto;
  overflow:hidden;
}

body.activities-page .notices-track{
  display:flex;
  align-items:stretch;
  gap:16px;
  width:max-content;
  min-width:100%;
  transition:transform .52s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

body.activities-page .notice-card{
  flex:0 0 220px;
  width:220px;
  min-width:0;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 8px 22px rgba(24,51,33,.07);
}

body.activities-page .notice-poster-button{
  display:block;
  width:100%;
  height:248px;
  padding:8px;
  border:0;
  background:rgba(255,255,255,.34);
  cursor:zoom-in;
}

body.activities-page .notice-poster-button img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

body.activities-page .notice-card-copy{
  min-height:48px;
  padding:8px 11px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid rgba(49,95,60,.10);
}

body.activities-page .notice-card-copy strong{
  min-width:0;
  overflow:hidden;
  color:var(--green);
  font-size:12.5px;
  font-weight:850;
  line-height:1.3;
  white-space:nowrap;
  text-overflow:ellipsis;
}

body.activities-page .notice-card-link,
body.activities-page .notice-card-hint{
  flex:0 0 auto;
  color:var(--muted);
  font-size:10.5px;
  font-weight:750;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}

body.activities-page .notice-card-link:hover{
  color:var(--green);
  text-decoration:underline;
}

body.activities-page .notices-carousel-arrow{
  position:absolute;
  top:124px;
  z-index:4;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.56);
  border-radius:50%;
  background:rgba(255,255,255,.76);
  color:var(--green);
  font-size:27px;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  box-shadow:0 5px 16px rgba(0,0,0,.10);
}

body.activities-page .notices-carousel-prev{left:0}
body.activities-page .notices-carousel-next{right:0}

body.activities-page .notices-carousel.is-static .notices-carousel-arrow{
  display:none;
}

body.activities-page .notices-carousel.is-static .notices-viewport{
  width:100%;
}

body.activities-page .notices-carousel.is-static .notices-track{
  justify-content:center;
}

body.activities-page .notices-empty-state{
  width:100%;
  padding:28px;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.42);
}

body.activities-page .notices-empty-state h3{
  margin:6px 0 8px;
  color:var(--green);
  font-size:22px;
}

/* Upcoming Activities: text-first rows for quick scanning. */
body.activities-page .upcoming-events-section{
  margin:0 5vw 28px;
  padding:28px;
}

body.activities-page .activity-list{
  margin-top:8px;
}

body.activities-page .activity-list-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  padding:20px 4px;
  border-top:1px solid rgba(49,95,60,.16);
}

body.activities-page .activity-list-row:first-child{
  border-top:0;
}

body.activities-page .activity-list-date{
  align-self:stretch;
  display:flex;
  align-items:center;
  padding-right:18px;
  border-right:1px solid rgba(49,95,60,.14);
}

body.activities-page .activity-list-date span{
  color:var(--green);
  font-size:14px;
  font-weight:900;
  line-height:1.35;
}

body.activities-page .activity-list-body{
  min-width:0;
}

body.activities-page .activity-list-body h3{
  margin:0;
  color:var(--green);
  font-size:20px;
  line-height:1.35;
}

body.activities-page .activity-list-meta{
  margin:5px 0 0;
  color:var(--deep);
  font-size:13px;
  font-weight:800;
  line-height:1.5;
}

body.activities-page .activity-list-summary{
  margin:5px 0 0;
  max-width:780px;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

body.activities-page .activity-list-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

body.activities-page .activity-list-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border:1px solid rgba(49,95,60,.22);
  border-radius:999px;
  background:rgba(255,255,255,.32);
  color:var(--green);
  font:inherit;
  font-size:12px;
  font-weight:850;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}

body.activities-page .activity-list-link:hover{
  background:rgba(255,255,255,.58);
}

body.activities-page .activity-list-empty{
  padding:28px 8px 10px;
  text-align:center;
}

body.activities-page .activity-list-empty h3{
  margin:0 0 6px;
  color:var(--green);
}

body.activities-page .activity-list-empty p{
  margin:0;
  color:var(--muted);
}

@media(prefers-reduced-motion:reduce){
  body.activities-page .notices-track{
    transition:none;
  }
}

/* Contact page — embedded map and social links */
body.contact-page-body .contact-page{
  grid-template-columns:minmax(0,1.55fr) minmax(420px,1fr);
  align-items:stretch;
}

body.contact-page-body .contact-card-with-map{
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(380px,1.22fr);
  gap:30px;
  align-items:stretch;
}

body.contact-page-body .contact-info-block{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

body.contact-page-body .contact-map-embed{
  min-height:350px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.48);
  background:rgba(255,255,255,.20);
  box-shadow:0 10px 28px rgba(24,51,33,.08);
}

body.contact-page-body .contact-map-embed iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:350px;
  border:0;
}

body.contact-page-body .contact-social-card{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(230px,1.1fr);
  gap:28px;
  align-items:center;
}

body.contact-page-body .contact-social-copy{
  align-self:center;
}

body.contact-page-body .contact-qr-social{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

body.contact-page-body .contact-whatsapp-qr{
  width:min(100%,245px);
  margin:0;
  padding:10px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 26px rgba(24,51,33,.08);
}

body.contact-page-body .contact-social-links{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

body.contact-page-body .contact-social-link{
  min-height:84px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px 10px;
  border-radius:18px;
  text-decoration:none;
  color:var(--green);
  font-size:12px;
  font-weight:850;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 8px 20px rgba(24,51,33,.055);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}

body.contact-page-body .contact-social-link:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.38);
  box-shadow:0 13px 28px rgba(24,51,33,.10);
}

body.contact-page-body .contact-social-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
}

body.contact-page-body .contact-social-icon svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

@media(max-width:1180px){
  body.contact-page-body .contact-page{
    grid-template-columns:1fr;
  }

  body.contact-page-body .contact-social-card{
    grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);
  }
}


/* =========================================================
   SITE HEADER — consolidated
   ========================================================= */
.site-header{
  position:fixed;
  z-index:50;
  top:12px;
  left:16px;
  right:16px;
  width:auto;
  min-height:118px;
  padding:6px 5vw;
  display:grid;
  grid-template-columns:minmax(360px,1fr) auto;
  align-items:center;
  gap:24px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:30px;
  background:rgba(255,255,255,.14);
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.03) 45%,rgba(255,255,255,0));
  pointer-events:none;
}

.site-header > *{
  position:relative;
  z-index:1;
}

.site-brand-logo{
  grid-column:1;
  justify-self:start;
  align-self:center;
  display:flex;
  align-items:center;
  width:min(620px,48vw);
  max-width:620px;
  min-width:360px;
  text-decoration:none;
}

.site-brand-logo img{
  display:block;
  width:100%;
  height:auto;
  max-height:108px;
  object-fit:contain;
  object-position:left center;
}

.desktop-nav{
  grid-column:2;
  justify-self:end;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:38px;
}

.desktop-nav a{
  padding:15px 0 12px;
}

.menu-button{
  display:none;
  justify-self:end;
  border:0;
  background:transparent;
  color:var(--green);
  font-size:28px;
}

main{
  padding-top:128px;
}

body.home-page .home-v4-main{
  padding-top:128px !important;
}

@media(max-width:1180px){
  .site-header{
    min-height:92px;
    padding:6px 20px;
    grid-template-columns:minmax(0,1fr) auto;
  }

  .site-brand-logo{
    width:min(460px,72vw);
    min-width:0;
  }

  .site-brand-logo img{
    height:82px;
    max-height:82px;
  }

  .desktop-nav{
    display:none;
  }

  .menu-button{
    display:block;
    grid-column:2;
  }

  main,
  body.home-page .home-v4-main{
    padding-top:124px !important;
  }
}

/* ABOUT PAGE */
.about-main{padding-bottom:46px}
.about-hero{margin:34px 5vw 28px;padding:0;display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);min-height:410px;background:rgba(255,255,255,.18)}
.about-hero-copy{padding:48px;display:flex;flex-direction:column;justify-content:center}
.about-hero-copy h1{margin-bottom:20px}
.about-lead{margin:0;font-size:19px;line-height:1.95}
.about-hero-image{margin:0;min-height:410px;overflow:hidden}
.about-hero-image img{display:block;width:100%;height:100%;object-fit:cover;opacity:.9}
.about-identity{margin:0 5vw 28px;padding:34px;display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:32px;align-items:start;background:rgba(255,255,255,.18)}
.about-copy-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.about-copy-columns p{margin:0;font-size:17px;line-height:1.9}
.about-values-section{padding:0 5vw 28px}
.about-values-section .section-heading{text-align:center;margin-bottom:22px}
.about-values-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.about-value-card{padding:28px;min-height:245px;background:rgba(255,255,255,.18)}
.about-value-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font-weight:900}
.about-value-card h3{margin:16px 0 8px;color:var(--green);font-size:23px}
.about-value-card p{margin:0;line-height:1.8}
.about-audience{margin:0 5vw;padding:30px;display:grid;grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);gap:34px;align-items:center;background:rgba(255,255,255,.18)}
.about-audience-image{height:390px;overflow:hidden;border-radius:22px}
.about-audience-image img{display:block;width:100%;height:100%;object-fit:cover}
.about-audience-copy p{font-size:17px;line-height:1.9}
.about-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
@media(max-width:1050px){
  .about-hero,.about-identity,.about-audience{grid-template-columns:1fr}
  .about-hero-image{min-height:320px}
  .about-values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


body.activities-page .review-more-link:hover{
  text-decoration:underline;
}

/* =========================
   Activity Review Lightbox
   ========================= */

.review-lightbox-trigger{
  cursor:zoom-in;
}


/* 整個視窗 */
.review-lightbox{
  position:fixed;
  inset:0;

  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.review-lightbox.is-open{
  opacity:1;
  visibility:visible;
}


/* 深色背景 */
.review-lightbox-backdrop{
  position:absolute;
  inset:0;

  background:rgba(15,25,18,.78);

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}


/* 圖片外框 */
.review-lightbox-box{
  position:relative;
  z-index:1;

  display:flex;
  align-items:center;
  justify-content:center;

  max-width:92vw;
  max-height:92vh;

  padding:14px;

  border-radius:22px;

  background:rgba(255,255,255,.94);

  box-shadow:
    0 30px 90px rgba(0,0,0,.38);
}


/* 完整圖片 */
.review-lightbox-full-image{
  display:block;

  width:auto;
  height:auto;

  max-width:calc(92vw - 28px);
  max-height:calc(92vh - 28px);

  object-fit:contain;

  border-radius:12px;
}


/* Close */
.review-lightbox-close{
  position:absolute;

  top:-15px;
  right:-15px;

  z-index:2;

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:50%;

  background:#fff;
  color:var(--green);

  font-size:28px;
  line-height:1;

  cursor:pointer;

  box-shadow:
    0 8px 22px rgba(0,0,0,.22);
}


/* Lightbox 開啟時禁止背景滾動 */
body.review-lightbox-open{
  overflow:hidden;
}


/* 手機 */


/* =========================
   Volunteer Opportunity Poster Wall
   ========================= */
.volunteer-opportunities{
  margin:0 5vw 34px;
  padding:30px;
  background:rgba(255,255,255,.18);
}

.volunteer-opportunities[hidden]{
  display:none !important;
}

.volunteer-opportunities-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:24px;
}

.volunteer-opportunities-heading h2{
  margin:0;
}

.volunteer-opportunities-heading>p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  line-height:1.75;
  text-align:right;
}

.volunteer-opportunity-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,330px));
  justify-content:center;
  gap:24px;
}

.volunteer-opportunity-grid.is-single{
  grid-template-columns:minmax(280px,410px);
}

.volunteer-opportunity-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.45);
  border-radius:22px;
  background:rgba(255,255,255,.24);
  box-shadow:0 12px 34px rgba(0,0,0,.07);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.volunteer-poster-button{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:rgba(247,243,232,.72);
  cursor:zoom-in;
}

.volunteer-poster-button img{
  display:block;
  width:100%;
  aspect-ratio:210 / 297;
  object-fit:contain;
  object-position:center;
  background:#f7f2e8;
}

.volunteer-poster-zoom{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  padding:7px 13px;
  border-radius:999px;
  background:rgba(24,62,41,.84);
  color:#fff;
  font-size:12px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  transition:opacity .2s ease;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.volunteer-poster-button:hover .volunteer-poster-zoom,
.volunteer-poster-button:focus-visible .volunteer-poster-zoom{
  opacity:1;
}

.volunteer-opportunity-copy{
  padding:17px 18px 19px;
}

.volunteer-opportunity-copy small{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.volunteer-opportunity-copy h3{
  margin:0 0 7px;
  color:var(--green);
  font-size:19px;
  line-height:1.4;
}

.volunteer-opportunity-copy p{
  margin:0;
  color:var(--deep);
  font-size:14px;
  line-height:1.7;
}

.volunteer-opportunity-link{
  display:inline-flex;
  align-items:center;
  margin-top:13px;
  color:var(--green);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.volunteer-opportunity-link:hover{
  text-decoration:underline;
}


.whatsapp-float{
  display:none;
}

/* =========================================================
   UNIFIED NARROW / MOBILE LAYOUT
   <= 1130px uses one responsive layout; no separate tablet mode.
   ========================================================= */
@media(max-width:1130px){
  .site-header{
    top:8px;
    left:10px;
    right:10px;
    min-height:88px;
    padding:6px 12px;
    border-radius:22px;
  }

  .site-brand-logo{
    width:min(330px,76vw);
    min-width:0;
  }

  .site-brand-logo img{
    width:100%;
    height:72px;
    max-height:72px;
    object-fit:contain;
    object-position:left center;
  }

  main,
  body.home-page .home-v4-main{
    padding-top:116px !important;
  }

  h1{
    font-size:clamp(28px,8.6vw,42px);
  }

  .hero-title-line{
    white-space:nowrap;
  }

  .page-hero{
    margin:20px 16px;
    padding:28px;
  }

  .room-list{
    padding:0 16px;
  }

  .room-detail{
    grid-template-columns:1fr;
    padding:22px;
  }

  .room-images{
    grid-template-columns:1fr;
  }

  .room-images img{
    height:230px;
  }

  .application-block{
    margin:22px 16px;
  }

  .steps{
    grid-template-columns:1fr;
  }

  .albums-page{
    margin:0 16px 30px;
  }

  .album-grid{
    grid-template-columns:1fr 1fr;
  }

  .volunteer-grid{
    padding:0 16px;
    grid-template-columns:1fr;
  }

  .contact-page{
    padding:0 16px 30px;
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .qr-card{
    grid-template-columns:1fr;
  }

  .qr-card img{
    max-width:230px;
  }

  .fixed-site-tint{
    background:rgba(246,240,229,.18);
  }

  .volunteer-hero{
    margin:20px 16px 24px;
    padding:24px;
  }

  .volunteer-photo-collage{
    grid-template-columns:1fr 1fr;
    grid-template-rows:230px 170px;
    min-height:0;
  }

  .volunteer-photo-main{
    grid-column:1/3;
    grid-row:auto;
  }

  .volunteer-service-section{
    padding:0 16px 28px;
  }

  .volunteer-albums{
    margin:0 16px 30px;
    padding:22px;
  }

  .volunteer-album-grid{
    grid-template-columns:1fr;
  }

  .volunteer-albums .panel-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .album-intro{
    text-align:left;
  }

  .hero-gallery-pair{
    margin:20px 16px 24px;
    gap:16px;
  }

  .hero-gallery-pair > .page-hero{
    padding:28px;
  }

  .hero-gallery-shell{
    height:240px;
  }

  .hero-gallery-arrow{
    width:36px;
    height:36px;
    font-size:25px;
  }

  body.facilities-page .facility-equipment-final{
    margin:0 16px 24px;
    padding:24px;
  }

  body.facilities-page .facility-equipment-tags-final{
    gap:9px;
  }

  body.facilities-page .facility-equipment-tags-final span{
    min-height:38px;
    padding:7px 12px;
    font-size:13px;
    white-space:normal;
  }

  body.activities-page .activity-data-heading{
    display:block;
  }

  body.activities-page .activity-data-heading > p{
    margin-top:10px;
    text-align:left;
  }

  body.activities-page .upcoming-events-section,
  body.activities-page .latest-updates-section{
    margin:0 16px 24px;
    padding:22px;
  }

  body.activities-page .notices-carousel{
    width:100%;
  }

  body.activities-page .notices-viewport{
    width:calc(100% - 56px);
  }

  body.activities-page .notice-card{
    flex-basis:158px;
    width:158px;
  }

  body.activities-page .notice-poster-button{
    height:220px;
    padding:6px;
  }

  body.activities-page .notices-carousel-arrow{
    top:110px;
    width:34px;
    height:34px;
    font-size:24px;
  }

  body.activities-page .activity-list-row{
    grid-template-columns:1fr;
    gap:9px;
    padding:18px 2px;
  }

  body.activities-page .activity-list-date{
    align-self:auto;
    display:block;
    padding:0;
    border-right:0;
  }

  body.activities-page .activity-list-date span{
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(49,95,60,.08);
    font-size:12px;
  }

  body.activities-page .activity-list-actions{
    justify-content:flex-start;
    margin-top:2px;
  }

  body.contact-page-body .contact-card-with-map,
  body.contact-page-body .contact-social-card{
    grid-template-columns:1fr;
  }

  body.contact-page-body .contact-map-embed,
  body.contact-page-body .contact-map-embed iframe{
    min-height:300px;
  }

  body.contact-page-body .contact-social-copy{
    text-align:center;
  }

  body.contact-page-body .contact-social-links{
    grid-template-columns:1fr 1fr;
  }

  body.contact-page-body .contact-social-link{
    min-height:76px;
  }

  .about-hero{
    margin:24px 16px 24px !important;
  }

  .about-hero-copy{
    padding:28px;
  }

  .about-hero-image{
    min-height:240px;
  }

  .about-identity{
    margin:0 16px 24px;
    padding:24px;
  }

  .about-copy-columns{
    grid-template-columns:1fr;
    gap:14px;
  }

  .about-values-section{
    padding:0 16px 24px;
  }

  .about-values-grid{
    grid-template-columns:1fr;
  }

  .about-audience{
    margin:0 16px;
    padding:22px;
  }

  .about-audience-image{
    height:250px;
  }

  .review-lightbox{
    padding:12px;
  }

  .review-lightbox-box{
    max-width:96vw;
    max-height:94vh;
    padding:8px;
    border-radius:16px;
  }

  .review-lightbox-full-image{
    max-width:calc(96vw - 16px);
    max-height:calc(94vh - 16px);
    border-radius:9px;
  }

  .review-lightbox-close{
    top:-9px;
    right:-7px;
    width:40px;
    height:40px;
    font-size:25px;
  }

  .volunteer-opportunities{
    margin:0 16px 28px;
    padding:22px;
  }

  .volunteer-opportunities-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .volunteer-opportunities-heading > p{
    max-width:none;
    text-align:left;
  }

  .volunteer-opportunity-grid,
  .volunteer-opportunity-grid.is-single{
    grid-template-columns:minmax(0,1fr);
  }

  .volunteer-opportunity-card{
    width:min(100%,410px);
    margin:0 auto;
  }

  .volunteer-poster-zoom{
    opacity:1;
  }

  .whatsapp-float{
    position:fixed;
    right:16px;
    bottom:calc(20px + env(safe-area-inset-bottom));
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 17px;
    border-radius:999px;
    background:rgba(255,255,255,.88);
    color:#1e5632;
    border:1px solid rgba(30,86,50,.22);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    text-decoration:none;
    font-size:14px;
    font-weight:700;
  }
}

/* =========================================================
   HOMEPAGE — Main function cards depth
   Desktop only
   ========================================================= */

@media (min-width:1131px){

  body.home-page .home-v4-actions{
    grid-template-columns:1.25fr 1fr 1fr !important;
    gap:16px !important;
    perspective:1000px;
    align-items:center;
  }

  body.home-page .home-v4-actions a{
    position:relative;
    overflow:hidden;

    transition:
      transform .22s ease,
      box-shadow .22s ease,
      background .22s ease,
      border-color .22s ease;
  }

  /* -----------------------------------------
     主入口：場地與使用安排
     稍闊、稍高、向前浮
     ----------------------------------------- */

  body.home-page .home-v4-actions a:nth-child(1){
    min-height:96px !important;

    transform:
      translateY(-6px)
      translateZ(20px);

    background:
      rgba(255,255,255,.52) !important;

    border:
      1px solid rgba(255,255,255,.76) !important;

    box-shadow:
      0 18px 34px rgba(24,51,33,.11),
      0 4px 10px rgba(24,51,33,.05) !important;
  }

  /* 主卡片表面高光 */

  body.home-page .home-v4-actions a:nth-child(1)::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;

    border-radius:inherit;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.52) 0%,
        rgba(255,255,255,.16) 42%,
        rgba(255,255,255,0) 68%
      );

    pointer-events:none;
  }

  body.home-page .home-v4-actions a:nth-child(1) > *{
    position:relative;
    z-index:1;
  }

  /* -----------------------------------------
     義工 / 最新活動
     稍微退後
     ----------------------------------------- */

  body.home-page .home-v4-actions a:nth-child(2),
  body.home-page .home-v4-actions a:nth-child(3){
    transform:
      translateY(2px)
      translateZ(0);

    background:
      rgba(255,255,255,.30) !important;

    border:
      1px solid rgba(255,255,255,.48) !important;

    box-shadow:
      0 7px 18px rgba(24,51,33,.045) !important;
  }

  /* -----------------------------------------
     Hover
     ----------------------------------------- */

  body.home-page .home-v4-actions a:nth-child(1):hover{
    transform:
      translateY(-10px)
      translateZ(26px);

    background:
      rgba(255,255,255,.62) !important;

    box-shadow:
      0 23px 40px rgba(24,51,33,.14),
      0 5px 12px rgba(24,51,33,.06) !important;
  }

  body.home-page .home-v4-actions a:nth-child(2):hover,
  body.home-page .home-v4-actions a:nth-child(3):hover{
    transform:
      translateY(-4px)
      translateZ(10px);

    background:
      rgba(255,255,255,.42) !important;

    box-shadow:
      0 14px 28px rgba(24,51,33,.09) !important;
  }

}

/* =========================================================
   HOMEPAGE DESKTOP — fixed thumbnails + rotating main visual
   The four thumbnails never change. The large visual rotates:
   Mary -> photo 1 -> photo 2 -> photo 3 -> photo 4 -> Mary.
   ========================================================= */

.home-photo-rail{
  position:absolute;
  z-index:5;
  top:28px;
  right:22px;
  bottom:28px;
  width:140px;
  display:grid;
  grid-template-rows:repeat(4,1fr);
  gap:14px;
  pointer-events:none;
}

.home-photo-slot{
  overflow:hidden;
  border-radius:14px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 7px 20px rgba(0,0,0,.07);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.home-photo-slot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.9;
}

/* Main visual covers the whole Hero so there is no vertical seam. */
body.home-page .home-hero-visual{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}

body.home-page .home-hero-visual-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  opacity:1;
  transition:opacity .8s ease, transform 1.1s ease;
  pointer-events:none;
}

body.home-page .home-hero-visual-image.is-changing{
  opacity:0;
  transform:scale(1.015);
}

body.home-page .home-hero-visual-image.is-mary{
  object-fit:contain;
  object-position:right bottom;
}

body.home-page .home-hero-visual-image.is-activity{
  position:absolute;
  top:0;
  right:var(--hero-right,145px);
  bottom:0;
  left:auto;
  width:64%;
  height:100%;
  object-fit:cover;
  object-position:var(--hero-position, center center);

  /* Soft fade on both sides; the central activity stays readable. */
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.22) 4%,
    rgba(0,0,0,.72) 9%,
    #000 15%,
    #000 84%,
    rgba(0,0,0,.72) 91%,
    rgba(0,0,0,.22) 97%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.22) 4%,
    rgba(0,0,0,.72) 9%,
    #000 15%,
    #000 84%,
    rgba(0,0,0,.72) 91%,
    rgba(0,0,0,.22) 97%,
    transparent 100%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
/* Continuous wash across the full visual: no hard 58% boundary. */
body.home-page .home-hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background:linear-gradient(
    90deg,
    rgba(248,244,235,.99) 0%,
    rgba(248,244,235,.96) 26%,
    rgba(248,244,235,.80) 35%,
    rgba(248,244,235,.48) 43%,
    rgba(248,244,235,.18) 50%,
    rgba(248,244,235,.04) 57%,
    rgba(248,244,235,0) 63%
  );
}
/* =========================================================
   HOMEPAGE NARROW / MOBILE
   No Mary and no four thumbnails. Let the GPC logo-wall show through.
   ========================================================= */
@media(max-width:1130px){
  body.home-page .home-hero-visual,
  body.home-page .home-photo-rail{
    display:none !important;
  }

  body.home-page .home-v4-main{
    padding-top:116px !important;
  }

  body.home-page .home-v4-hero{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    margin:20px 16px 0 !important;
    padding:0 !important;
    min-height:0 !important;
    height:auto !important;
    background:rgba(248,244,235,.38) !important;
    border:1px solid rgba(255,255,255,.48) !important;
    border-radius:26px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.045) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
  }

  body.home-page .home-v4-hero::after{
    content:none !important;
    display:none !important;
  }

  body.home-page .home-v4-hero::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.20) 0%,
      rgba(248,244,235,.14) 48%,
      rgba(248,244,235,.24) 100%
    ) !important;
  }

  body.home-page .home-v4-copy{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    padding:30px 20px 28px !important;
    background:transparent !important;
  }

  body.home-page .home-mobile-top{
    display:block !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.home-page .home-title-block{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
  }

  body.home-page .home-title-block .eyebrow{
    margin:0 0 16px !important;
    font-size:8.5px !important;
    line-height:1.4 !important;
    letter-spacing:.06em !important;
  }

  body.home-page .home-title-block h1{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 22px !important;
    font-size:clamp(27px,7.5vw,34px) !important;
    line-height:1.2 !important;
  }

  body.home-page .hero-title-line{
    display:block !important;
    white-space:nowrap !important;
  }

  body.home-page .home-v4-copy .hero-text{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.9 !important;
  }

  body.home-page .home-v4-actions{
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    max-width:none !important;
    margin-top:24px !important;
  }

  body.home-page .home-v4-actions a{
    min-height:74px !important;
    padding:14px 16px !important;
    background:rgba(255,255,255,.48) !important;
    border:1px solid rgba(255,255,255,.62) !important;
    border-radius:17px !important;
    box-shadow:0 6px 18px rgba(0,0,0,.035) !important;
    backdrop-filter:blur(4px) !important;
    -webkit-backdrop-filter:blur(4px) !important;
  }

  body.home-page .home-v4-cards{
    margin:24px 16px 34px !important;
    padding-top:22px !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  body.home-page .home-v4-card{
    display:grid;
    grid-template-columns:40% 60%;
    border-radius:20px !important;
  }

  body.home-page .home-v4-card img{
    height:100% !important;
    aspect-ratio:auto !important;
    border-radius:20px 0 0 20px !important;
  }
}

/* =========================================================
   FACILITIES — smart WhatsApp enquiry button
   Floats at viewport bottom-right until its natural position
   reaches the viewport, then docks at the enquiry panel's right side.
   ========================================================= */

/* Facilities uses its own enquiry button, not the global mobile shortcut. */
body.facilities-page .whatsapp-float{
  display:none !important;
}

/* Natural docking position inside the Facility Enquiry panel. */
body.facilities-page .facility-whatsapp-home{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  min-height:52px;
  margin-top:16px;
}

body.facilities-page .facility-whatsapp-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  margin:0;
  padding:13px 20px;
  border:1px solid rgba(49,95,60,.18);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--green);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

body.facilities-page .facility-whatsapp-button:hover{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

/* While its natural position is still below the viewport,
   float the SAME button at the browser's bottom-right corner. */
body.facilities-page .facility-whatsapp-button.is-floating{
  position:fixed !important;

  right:var(--facility-wa-right,20px) !important;
  left:auto !important;

  top:auto !important;
  bottom:calc(20px + env(safe-area-inset-bottom)) !important;

  z-index:9999 !important;

  margin:0 !important;
  transform:none;
}

@media(max-width:760px){

  body.facilities-page .facility-whatsapp-home{
    min-height:48px;
    margin-top:14px;
  }

  body.facilities-page .facility-whatsapp-button{
    min-height:46px;
    padding:12px 17px;
    font-size:13px;
  }

  body.facilities-page .facility-whatsapp-button.is-floating{
    right:var(--facility-wa-right,14px) !important;
    left:auto !important;
    bottom:calc(14px + env(safe-area-inset-bottom)) !important;
  }

}
/* =========================================================
   2026-09-12 REVISION
   What's On merge + Review photo carousel + About roots
   ========================================================= */

/* ---------- Activities: one unified What's On panel ---------- */
body.activities-page .whats-on-section{
  margin:0 5vw 28px;
  padding:28px;
  background:rgba(255,255,255,.18);
}

body.activities-page .whats-on-heading{
  margin-bottom:24px;
}

body.activities-page .whats-on-block{
  min-width:0;
}

body.activities-page .whats-on-subheading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:26px;
}

body.activities-page .whats-on-subheading h3{
  margin:0;
  color:var(--green);
  font-size:22px;
  line-height:1.3;
}

body.activities-page .whats-on-subheading > p{
  max-width:560px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
  text-align:right;
}

body.activities-page .whats-on-divider{
  height:1px;
  margin:28px 0 24px;
  background:linear-gradient(90deg, transparent, rgba(49,95,60,.22) 12%, rgba(49,95,60,.22) 88%, transparent);
}

body.activities-page .whats-on-posters .notices-carousel{
  margin-top:16px;
}

body.activities-page .whats-on-list .activity-list{
  margin-top:8px;
}

/* ---------- Activity Review: up to 3 real photos, fading ---------- */
body.activities-page .album-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}

body.activities-page .album-card{
  position:relative;
}

body.activities-page .review-media-carousel{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:rgba(247,243,232,.72);
  isolation:isolate;
}

body.activities-page .review-media-slide,
body.activities-page .album-card .review-media-slide{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  object-fit:cover;
  opacity:0;
  transform:scale(1.01);
  transition:opacity .75s ease, transform 4.6s ease;
}

body.activities-page .review-media-slide.is-active{
  opacity:1;
  transform:scale(1.035);
  z-index:1;
}

body.activities-page .review-media-carousel.is-static .review-media-slide.is-active{
  transform:scale(1);
}

body.activities-page .review-media-carousel.is-neutral .review-media-slide{
  object-fit:cover;
  opacity:.62;
  filter:saturate(.82);
}

body.activities-page .review-media-dots{
  position:absolute;
  right:12px;
  bottom:11px;
  z-index:3;
  display:flex;
  gap:5px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(20,53,34,.54);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

body.activities-page .review-media-dots i{
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.48);
  transition:transform .25s ease, background .25s ease;
}

body.activities-page .review-media-dots i.is-active{
  transform:scale(1.35);
  background:#fff;
}

body.activities-page .review-empty-state{
  grid-column:1 / -1;
  min-height:190px;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:24px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.42);
  border-radius:20px;
  background:rgba(255,255,255,.20);
}

body.activities-page .review-empty-state img{
  width:100%;
  height:100%;
  min-height:190px;
  object-fit:cover;
  opacity:.62;
}

body.activities-page .review-empty-state > div{
  padding:24px 28px 24px 0;
}

body.activities-page .review-empty-state h3{
  margin:5px 0 8px;
  color:var(--green);
  font-size:22px;
}

body.activities-page .review-empty-state p:last-child{
  margin:0;
  color:var(--muted);
}

@media (prefers-reduced-motion:reduce){
  body.activities-page .review-media-slide{
    transition:none !important;
    transform:none !important;
  }
}

/* ---------- About: roots, congregation link, mission bridge ---------- */
.about-hero-copy > p:not(.eyebrow):not(.about-lead){
  margin:14px 0 0;
  font-size:17px;
  line-height:1.9;
}

.about-roots{
  margin:0 5vw 28px;
  padding:34px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);
  gap:42px;
  align-items:start;
  background:rgba(255,255,255,.18);
}

.about-roots-intro > p:not(.eyebrow){
  margin:12px 0 0;
  font-size:17px;
  line-height:1.9;
}

.about-congregation-link{
  margin-top:24px;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:17px 20px;
  border:1px solid rgba(49,95,60,.18);
  border-radius:18px;
  background:rgba(255,255,255,.30);
  color:var(--deep);
  text-decoration:none;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.about-congregation-link:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.46);
  box-shadow:0 10px 24px rgba(24,51,33,.08);
}

.about-congregation-link span{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.about-congregation-link small{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.about-congregation-link strong{
  margin-top:4px;
  color:var(--green);
  font-size:18px;
  line-height:1.35;
}

.about-congregation-link em{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  font-style:normal;
}

.about-congregation-link b{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(49,95,60,.10);
  color:var(--green);
  font-size:20px;
}

.about-roots-timeline{
  display:grid;
  gap:12px;
}

.about-roots-timeline article{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:18px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:18px;
  background:rgba(255,255,255,.23);
}

.about-roots-timeline article > span{
  color:var(--green);
  font-size:20px;
  font-weight:900;
  letter-spacing:-.02em;
}

.about-roots-timeline strong{
  color:var(--deep);
  font-size:15px;
}

.about-roots-timeline p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

.about-mission-bridge{
  margin:0 5vw 28px;
  padding:34px;
  display:grid;
  grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);
  gap:36px;
  align-items:start;
  background:rgba(255,255,255,.18);
}

.about-mission-bridge h2{
  margin-top:4px;
}

.about-mission-bridge-copy > p{
  margin:0;
  font-size:17px;
  line-height:1.9;
}

.about-mission-bridge blockquote{
  margin:18px 0 0;
  padding:16px 18px;
  border-left:3px solid rgba(49,95,60,.58);
  border-radius:0 14px 14px 0;
  background:rgba(255,255,255,.22);
  color:var(--green);
  font-size:18px;
  font-weight:800;
  line-height:1.6;
}

.about-today-section{
  padding-top:0;
}

/* ---------- Volunteer: activities with no poster ---------- */
.volunteer-opportunity-card.has-no-poster .volunteer-poster-button{
  position:relative;
  cursor:default;
  overflow:hidden;
}

.volunteer-opportunity-card.has-no-poster .volunteer-poster-button img{
  aspect-ratio:16 / 10;
  object-fit:cover;
  background:rgba(247,243,232,.72);
}

.volunteer-opportunity-card.has-no-poster .volunteer-static-visual.is-neutral img{
  opacity:.62;
  filter:saturate(.82);
}

.volunteer-static-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(20,53,34,.72);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}

.volunteer-opportunity-meta{
  margin:0 0 8px !important;
  color:var(--green) !important;
  font-size:12px !important;
  font-weight:800;
}

@media(max-width:1050px){
  body.activities-page .album-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .about-roots,
  .about-mission-bridge{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  body.activities-page .whats-on-section{
    margin:0 16px 24px;
    padding:22px;
  }

  body.activities-page .whats-on-heading,
  body.activities-page .whats-on-subheading{
    display:block;
  }

  body.activities-page .whats-on-subheading > p{
    margin-top:8px;
    text-align:left;
  }

  body.activities-page .whats-on-divider{
    margin:24px 0 20px;
  }

  body.activities-page .album-grid{
    grid-template-columns:1fr;
  }

  body.activities-page .review-empty-state{
    grid-template-columns:1fr;
  }

  body.activities-page .review-empty-state img{
    height:180px;
    min-height:0;
  }

  body.activities-page .review-empty-state > div{
    padding:0 20px 22px;
  }

  .about-roots,
  .about-mission-bridge{
    margin:0 16px 24px;
    padding:24px;
    gap:24px;
  }

  .about-roots-timeline article{
    grid-template-columns:66px minmax(0,1fr);
    padding:16px;
  }

  .about-congregation-link{
    align-items:flex-start;
    padding:16px;
  }

  .about-congregation-link em{
    line-height:1.55;
  }
}