/* Community homepage. Preserve redesign: variance 7, motion 4, density 3.
   Native PHP/CSS; real association photos. Hero photos: square prints, 2px paper corners; controls full-pill.
   Layers: content 0, hero copy 1, navigation 20, dialogs use the top layer. */
.community-home {
  --paper: #fcfbfd; --purple: #47265e; --deep: #301a40; --gold: #8b6426;
  --ink: #302638; --muted: #716379; --line: #e6dfeb; --pale: #f2edf6;
  --surface: #fff; --nav-surface: #fcfbfdef;
  background: var(--paper); color: var(--ink); font-weight: 400;
  color-scheme: light;
}
.community-home [hidden] { display: none !important; }
.community-home .shell { max-width: 1320px; }
.community-home .header { height: 80px; border: 0; background: transparent; z-index: 20; }
.community-home .nav-row { height: 64px; margin-top: 8px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--nav-surface); backdrop-filter: blur(16px); }
.community-home .brand img { width: 190px; height: auto; }
.community-home .nav { gap: 22px; }
.community-home .nav a, .community-home .nav summary { font-size: 14px; }
.community-home .nav a, .community-home .nav summary, .community-home .button.small { color: var(--purple); }
.community-home .theme-toggle { font-size: 12px; min-height: 38px; padding: 6px 12px; color: var(--purple); background: transparent; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.community-home .button { border-radius: 999px; min-height: 50px; gap: 22px; white-space: nowrap; font-weight: 500; }
.community-home .button.small { min-height: 40px; padding: 8px 18px; font-size: 13px; }
.community-home .button.primary { background: var(--purple); color: #fff; border-color: var(--purple); box-shadow: none; }
.community-home .button.primary:hover { background: var(--deep); transform: translateY(-2px); }
.community-home .quiet-link { font-weight: 500; }
.community-home .section { padding-top: 100px; padding-bottom: 100px; }

.collage-hero { position: relative; isolation: isolate; max-width: 1760px; margin: auto; height: auto; min-height: max(690px, calc(100svh - 80px)); }
.collage-copy { position: relative; z-index: 1; max-width: 740px; width: 58%; margin: auto; text-align: center; padding-top: clamp(70px, 9vh, 100px); }
.collage-copy .eyebrow { color: var(--gold); font-size: 12px; letter-spacing: .14em; margin-bottom: 18px; }
.collage-copy h1 { font-size: clamp(48px, 4.8vw, 76px); line-height: 1.32; font-weight: 550; letter-spacing: -.025em; color: var(--deep); }
.collage-copy h1 > span { display: inline-block; white-space: nowrap; color: var(--purple); }
.collage-description { color: var(--muted); font-size: 18px; line-height: 1.8; margin-top: 22px; }
.collage-actions { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 30px; }
.collage-actions .quiet-link { font-size: 15px; }
.collage-pictures { position: absolute; inset: 0; pointer-events: none; }
.collage-photo { --tilt: 0deg; position: absolute; display: block; padding: 10px 10px 0; background: #fff; border: 1px solid #e3ded8; border-radius: 2px; width: clamp(175px, 18vw, 265px); box-shadow: 0 3px 6px #301a400d, 0 14px 30px #301a4012; transform: rotate(var(--tilt)); transition: transform .3s ease, box-shadow .3s ease; pointer-events: auto; }
.collage-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1px; }
.collage-photo > span { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px 4px 14px; font-size: 12px; color: #67586c; }
.collage-photo > span > span { color: #47265e; }
.collage-photo:hover, .collage-photo:focus-visible { transform: translateY(-6px) rotate(0deg); box-shadow: 0 16px 30px #3b214020; }
.photo-one { --tilt: -8deg; left: 2.5%; top: 35px; }
.photo-one img { object-position: center 64%; }
.photo-two { --tilt: 7deg; right: 2.5%; top: 22px; width: clamp(165px, 16vw, 236px); }
.photo-two img { object-position: center 65%; }
.photo-three { --tilt: 7deg; left: 6%; bottom: 30px; }
.photo-three img { object-position: center 68%; }
.photo-four { --tilt: -6deg; right: 4.5%; bottom: 20px; width: clamp(185px, 21vw, 305px); }
.photo-four img { object-position: center 73%; }
.community-home .announcement { padding-block: 20px; border-color: var(--line); font-size: 14px; }
.community-home .announcement-label { font-size: 12px; color: var(--gold); }

.community-bulletin { text-align: left; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 80px; padding-top: 64px; }
.bulletin-copy h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.45; font-weight: 500; color: var(--deep); }
.bulletin-copy p { font-size: 16px; line-height: 1.9; color: var(--muted); margin: 18px 0 24px; }
.community-bulletin .hero-photo { width: 100%; min-width: 0; }
.community-bulletin .hero-photo .image-open { border: 1px solid var(--line); border-radius: 12px; background: var(--pale); }
/* A shared banner canvas keeps slide changes from moving the sections below.
   Recommended upload: 1600 x 600px (8:3); contain keeps poster text and QR intact. */
.community-home .community-bulletin .hero-slide-link { aspect-ratio: 8 / 3; }
.community-home .community-bulletin .hero-carousel #hero-slide-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.community-home .community-bulletin .hero-slide-caption { display: flex; align-items: center; gap: 20px; min-height: 44px; margin: 12px 0 0; padding: 0; }
.community-home .community-bulletin #hero-slide-title { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.community-home .community-bulletin .hero-slide-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: 0 0 auto; }
.community-home .community-bulletin .hero-slide-counter { font-size: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--muted); }
.community-home .community-bulletin .hero-slide-controls { position: static; display: flex; align-items: center; gap: 6px; }
.community-home .community-bulletin .hero-slide-controls button { min-width: 40px; min-height: 40px; padding: 6px 11px; font-size: 12px; line-height: 1.5; }
.community-home .community-bulletin [hidden] { display: none !important; }
.community-bulletin .hero-slide-controls button { background: var(--surface); color: var(--purple); border-radius: 999px; min-width: 36px; min-height: 36px; }
.bulletin-fallback img { width: 100%; height: 360px; object-fit: cover; border-radius: 16px; }
.bulletin-fallback figcaption { font-size: 12px; color: var(--muted); margin-top: 12px; }

.community-home .updates { border-top: 1px solid var(--line); padding-top: 64px; }
.community-home .section-heading h2, .giving-heading h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.4; font-weight: 500; color: var(--deep); }
.community-home .section-heading h2 span, .giving-heading h2 span { color: #9671a5; }
.community-home .lead-news { background: var(--pale); border-radius: 16px; }
.community-home .lead-news h3 { font-size: 23px; line-height: 1.65; font-weight: 500; }
.community-home .news-row h3 { font-size: 19px; line-height: 1.6; font-weight: 500; }
.community-home .search { background: var(--surface); border-color: var(--line); border-radius: 999px; }
.community-home .search input { color: var(--ink); background: transparent; }
.community-home .search input::placeholder { color: var(--muted); opacity: 1; }
.community-home .tabs button { color: var(--muted); }
.community-home .tabs button.active { color: var(--purple); }

.community-giving { border-top: 1px solid var(--line); }
.giving-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.giving-tabs { display: flex; gap: 6px; background: var(--pale); border: 1px solid var(--line); padding: 5px; border-radius: 999px; flex-shrink: 0; }
.giving-tabs button { min-height: 44px; padding: 8px 21px; color: var(--muted); border: 0; border-radius: 999px; background: transparent; font-size: 15px; }
.giving-tabs button[aria-selected=true] { background: var(--purple); color: #fff; }
.giving-panel { display: grid; grid-template-columns: .85fr 1.4fr; align-items: center; gap: 72px; padding-bottom: 52px; }
.giving-panel-copy { padding-left: 20px; }
.giving-panel h3 { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.42; font-weight: 500; color: var(--deep); }
.giving-panel-copy p { color: var(--muted); font-size: 17px; line-height: 1.9; margin-top: 24px; margin-bottom: 28px; }
.giving-detail { display: block; margin-top: 22px; font-size: 12px; color: var(--muted); }
.giving-panel-image { display: block; border-radius: 20px; overflow: hidden; }
.giving-panel-image img { width: 100%; height: 440px; object-fit: cover; transition: transform .5s ease; }
.giving-panel-image:hover img { transform: scale(1.025); }
.giving-panel#phapa .giving-panel-image img { object-position: center 65%; }
.community-home .memories-section { background: var(--pale); }
.community-home .polaroids { gap: 38px; padding-top: 40px; }
.community-home .polaroid { padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 5px 18px #34203d0a; }
.community-home .polaroid .album-cover { border-radius: 8px; overflow: hidden; }
.community-home .polaroid .album-title { font-size: 14px; }
.community-home .about { padding-top: 100px; padding-bottom: 100px; }
.community-home .motto h2 { font-size: 48px; font-weight: 500; }
.community-home .about-copy h3 { font-size: 27px; font-weight: 500; }
.community-home .footer { background: var(--pale); border-color: var(--line); }
.community-home .footer h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 500; line-height: 1.5; }
.community-home .footer-bottom { color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .collage-photo { animation: community-photo-enter .8s cubic-bezier(.2,.7,.2,1) backwards; }
  .photo-two { animation-delay: .10s; } .photo-three { animation-delay: .18s; } .photo-four { animation-delay: .25s; }
  .collage-copy { animation: community-copy-enter .65s ease backwards; }
  [data-community-reveal].community-reveal-ready { opacity: 0; transform: translateY(18px); transition: transform .65s cubic-bezier(.2,.7,.2,1), opacity .65s ease; }
  [data-community-reveal].community-reveal-ready.is-visible { opacity: 1; transform: none; }
  .giving-panel.community-panel-enter { animation: community-copy-enter .35s ease backwards; }
  @keyframes community-photo-enter { from { opacity: 0; transform: translateY(18px) rotate(var(--tilt)) scale(.98); } to { opacity: 1; transform: rotate(var(--tilt)); } }
  @keyframes community-copy-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1199px) {
  .community-home .nav { display: none; }
  .community-home .nav.open { display: flex; position: absolute; top: 70px; left: 22px; right: 22px; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
  .community-home .nav.open > a, .community-home .nav.open summary { padding: 11px 0; }
  .community-home .menu-toggle { display: inline-block; color: var(--purple); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; }
  .community-home .nav .more > div { position: static; box-shadow: none; background: var(--pale); }
  .collage-copy { width: 62%; padding-top: 80px; }
  .collage-copy h1 { font-size: 52px; }
  .collage-photo { width: 170px; }
  .photo-four { width: 200px; }
  .photo-three { left: 3%; } .photo-four { right: 3%; }
  .community-bulletin { gap: 40px; }
  .giving-panel { gap: 36px; }
  .giving-panel-image img { height: 380px; }
}
@media (max-width: 900px) {
  .collage-copy { width: calc(100% - 40px); max-width: 620px; padding-top: 36px; }
  .collage-hero { min-height: max(660px, calc(100svh - 80px)); }
  .photo-one { left: 8%; top: auto; bottom: 26px; }
  .photo-four { right: 7%; bottom: 22px; }
  .photo-two, .photo-three { display: none; }
  .community-home .section { padding-block: 72px; }
  .community-bulletin { grid-template-columns: 1fr; gap: 26px; padding-top: 44px; }
  .bulletin-copy { text-align: center; }
  .bulletin-copy h2 br, .bulletin-copy p br { display: none; }
  .giving-panel { grid-template-columns: 1fr; gap: 28px; }
  .giving-panel-copy { padding: 0; }
  .giving-panel h3 br { display: none; }
  .giving-panel-image { grid-row: 1; }
  .giving-heading { align-items: flex-start; flex-direction: column; gap: 24px; }
}
@media (max-width: 700px) {
  .community-home .shell { width: calc(100% - 36px); }
  .community-home .header { height: 72px; }
  .community-home .nav-row { height: 56px; padding: 0 14px; width: calc(100% - 24px); }
  .community-home .brand img { width: 145px; }
  .community-home .nav-actions { gap: 8px; }
  .community-home .nav-actions > .button.small { display: none; }
  .community-home .menu-toggle { padding: 7px 14px; font-size: 13px; }
  .collage-hero { height: auto; min-height: max(635px, calc(100svh - 72px)); padding-bottom: 250px; }
  .collage-copy { width: calc(100% - 30px); padding-top: 36px; }
  .collage-copy .eyebrow { font-size: 10px; margin-bottom: 14px; }
  .collage-copy h1 { font-size: clamp(25px, 6.7vw, 46px); line-height: 1.5; letter-spacing: -.025em; }
  .collage-description { font-size: 15px; line-height: 1.85; margin-top: 16px; }
  .collage-actions { gap: 18px; margin-top: 22px; }
  .collage-actions .button { min-height: 46px; padding: 10px 20px; font-size: 14px; }
  .collage-actions .quiet-link { font-size: 13px; }
  .collage-photo { width: 41%; max-width: 210px; padding: 8px 8px 0; border-radius: 2px; }
  .collage-photo > span { min-height: 42px; padding: 8px 2px 12px; font-size: 10px; }
  .photo-one { left: 6%; bottom: 21px; } .photo-four { right: 6%; bottom: 21px; }
  .community-home .announcement { align-items: flex-start; gap: 8px; padding-block: 17px; }
  .community-home .announcement > a { font-size: 13px; }
  .community-home .section { padding-block: 56px; }
  .community-home .community-bulletin .hero-slide-caption { flex-wrap: wrap; gap: 8px 16px; }
  .community-home .community-bulletin #hero-slide-title { flex-basis: 100%; }
  .community-home .community-bulletin .hero-slide-controls button { min-height: 42px; min-width: 42px; }
  .community-bulletin .hero-slide-controls button { min-height: 42px; }
  .community-home .section-heading h2, .giving-heading h2 { font-size: 36px; }
  .community-home .lead-news h3 { font-size: 21px; }
  .community-home .news-row h3 { font-size: 17px; }
  .giving-tabs { width: 100%; }
  .giving-tabs button { flex: 1; padding-inline: 10px; font-size: 14px; }
  .giving-panel h3 { font-size: 34px; }
  .giving-panel h3 br { display: initial; }
  .giving-panel-copy p { font-size: 15px; margin-block: 16px 22px; }
  .giving-panel-image img { height: 270px; }
  .giving-panel { padding-bottom: 0; }
  .giving-panel + .giving-panel { margin-top: 48px; }
  [data-giving-enhanced] .giving-panel + .giving-panel { margin-top: 0; }
  .community-home .polaroids { padding-top: 20px; gap: 32px; }
  .community-home .motto h2 { font-size: 40px; }
  .community-home .about-copy h3 { font-size: 24px; }
}
/* Keep the association's existing light presentation by default; offer dark explicitly. */
@media (max-width: 360px) {
  .community-home .brand img { width: 120px; }
  .community-home .nav-row { gap: 10px; }
  .community-home .theme-toggle { padding-inline: 9px; font-size: 11px; }
}
.community-home[data-color-theme=dark] { --paper:#19151d; --surface:#241d2b; --nav-surface:#211b28ed; --purple:#d9b7ef; --deep:#f1e7f8; --ink:#e8e0ee; --muted:#bcb0c5; --line:#413447; --pale:#2a2032; --gold:#d7b878; color-scheme:dark; }
.community-home[data-color-theme=dark] .button.primary, .community-home[data-color-theme=dark] .giving-tabs button[aria-selected=true] { color:#25152f; }
.community-home[data-color-theme=dark] .button.primary:hover { color:#25152f; }
.community-home[data-color-theme=dark] .footer-bottom > img { background:#fff; padding:4px 8px; border-radius:8px; }
.community-home[data-color-theme=dark] .news-grid .poster, .community-home[data-color-theme=dark] .album-cover { background:var(--surface); }
.community-home[data-color-theme=dark] .article-dialog, .community-home[data-color-theme=dark] .photo-dialog { background:var(--surface); color:var(--ink); }
.community-home[data-color-theme=dark] .more > div { background:var(--surface); }
.community-home[data-color-theme=dark] .close-button { background:var(--pale); color:var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .community-home { scroll-behavior:auto; }
  .community-home *, .community-home *::before, .community-home *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-community-reveal] { opacity:1 !important; transform:none !important; }
}
@media (prefers-reduced-transparency: reduce) { .community-home .nav-row { background:var(--paper); backdrop-filter:none; } }

.community-home .community-announcements { padding-top:72px; padding-bottom:48px; }
.community-home .community-bulletin { padding-top:0; }
.community-home .motto h2 .motto-phrase { display:inline-block; white-space:nowrap; color:inherit; }
.community-home .motto h2 .motto-phrase:last-child { color:#9671a5; }
@media(max-width:700px) { .community-home .community-announcements { padding-top:48px; padding-bottom:32px; } }

.collage-photo > span { gap:8px; }
.collage-photo .collage-photo-caption { display:block; min-width:0; color:#67586c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.giving-panel#cycling .giving-panel-image img { object-position:center 68%; }

@media(max-width:700px) { .community-home .updates { padding-top:48px; } }