/* Ebenezer Community Services — page-specific styles.
   Uses the main site's existing navy/gold design tokens from style.css. */

.ecs-page { padding-top: 0; }
.ecs-hero {
  min-height: 82vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  align-items: center;
  gap: 4rem;
  padding: 10rem 8vw 6rem;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.ecs-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 75% 32%, rgba(201,168,76,.12), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 45%);
  pointer-events: none;
}
.ecs-hero-copy, .ecs-hero-visual { position: relative; z-index: 1; }
.ecs-kicker {
  display: flex; align-items: center; gap: 1rem;
  color: var(--gold); text-transform: uppercase;
  letter-spacing: .35em; font-size: .72rem;
  margin-bottom: 1.25rem;
}
.ecs-kicker::before { content:''; width: 42px; height: 1px; background: var(--gold); opacity: .7; }
.ecs-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 4.5vw, 5.4rem);
  font-weight: 300; line-height: .95;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}
.ecs-hero h1 em { color: var(--gold); font-weight: 300; }
.ecs-hero p { max-width: 680px; color: var(--muted); line-height: 1.9; font-size: 1rem; }
.ecs-hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.ecs-hero-visual {
  min-height: 460px;
  display:flex; align-items:center; justify-content:center;
}
.ecs-logo-wrap {
  width: min(520px, 100%);
  padding: 2rem;
  border: 1px solid rgba(201,168,76,.22);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border-radius: 28px;
  box-shadow: 0 38px 100px rgba(0,0,0,.35);
  position: relative;
}
.ecs-logo-wrap::after {
  content:'Community • Service • Compassion';
  display:block; text-align:center;
  color:var(--muted); text-transform:uppercase;
  font-size:.64rem; letter-spacing:.28em; margin-top:1rem;
}
.ecs-logo-wrap img { width:100%; max-height:390px; object-fit:contain; }

.ecs-section { padding: 7rem 8vw; }
.ecs-section.alt { background: linear-gradient(180deg, var(--navy-mid), var(--navy)); }
.ecs-container { width:min(1200px,100%); margin:0 auto; }
.ecs-two-col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.ecs-copy h3 {
  font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3.4rem);
  font-weight:300; line-height:1.1; margin-bottom:1.3rem;
}
.ecs-copy h3 em { color:var(--gold); }
.ecs-copy p { color:var(--muted); line-height:1.9; margin-bottom:1rem; }
.ecs-mission-card {
  border:1px solid rgba(201,168,76,.2); background:rgba(255,255,255,.035);
  padding:2.5rem; border-radius:24px; position:relative;
}
.ecs-mission-card p { font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:var(--text); line-height:1.65; }

.ecs-impact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:3rem; }
.ecs-impact-card {
  min-height:230px; padding:2.3rem; background:var(--navy-mid);
  border:1px solid var(--border); transition:.35s ease; position:relative; overflow:hidden;
}
.ecs-impact-card:hover { transform:translateY(-5px); background:var(--navy-light); border-color:rgba(201,168,76,.28); }
.ecs-impact-icon { font-size:2rem; display:block; margin-bottom:1.2rem; }
.ecs-impact-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.55rem; font-weight:400; margin-bottom:.7rem; }
.ecs-impact-card p { color:var(--muted); line-height:1.75; font-size:.88rem; }

.ecs-event-grid { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr); gap:4rem; align-items:center; }
.ecs-flyer {
  width:min(480px,100%); margin:0 auto; border-radius:22px; overflow:hidden;
  border:1px solid rgba(201,168,76,.22); box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.ecs-flyer img { width:100%; height:auto; }
.ecs-event-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:2rem 0; }
.ecs-meta-card { padding:1.25rem; border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:16px; }
.ecs-meta-label { color:var(--gold); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; display:block; margin-bottom:.45rem; }
.ecs-meta-value { color:var(--text); line-height:1.45; }
.ecs-needs { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 2rem; margin-top:1.4rem; }
.ecs-needs div { color:var(--muted); line-height:1.6; padding-left:1.5rem; position:relative; }
.ecs-needs div::before { content:'✓'; position:absolute; left:0; color:var(--gold); }

.ecs-gallery-wrap { overflow:hidden; margin-top:3.5rem; }
.ecs-gallery-row { display:flex; gap:14px; width:max-content; animation:ecsGalleryLeft 48s linear infinite; }
.ecs-gallery-row + .ecs-gallery-row { margin-top:14px; animation:ecsGalleryRight 56s linear infinite; }
.ecs-gallery-row:hover { animation-play-state:paused; }
.ecs-gallery-card { flex:0 0 330px; height:220px; position:relative; overflow:hidden; border:1px solid var(--border); }
.ecs-gallery-card img { width:100%; height:100%; object-fit:cover; filter:brightness(.76) saturate(.85); transition:.5s ease; }
.ecs-gallery-card:hover img { transform:scale(1.05); filter:brightness(.95) saturate(1); }
.ecs-gallery-card span { position:absolute; left:1rem; bottom:1rem; color:var(--gold-light); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; text-shadow:0 2px 8px #000; }
@keyframes ecsGalleryLeft { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes ecsGalleryRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }

.ecs-lead-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:3.5rem; }
.ecs-lead-grid-single { grid-template-columns:minmax(300px,386px); justify-content:center; }
.ecs-lead-card { text-align:center; padding:2.5rem 1.7rem; background:var(--navy-mid); border:1px solid var(--border); border-radius:22px; transition:.35s ease; }
.ecs-lead-card:hover { transform:translateY(-6px); border-color:rgba(201,168,76,.32); }
.ecs-avatar { width:160px; height:160px; border-radius:50%; margin:0 auto 1.2rem; display:grid; place-items:center; background:var(--navy-light); border:1px solid var(--gold-dim); color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:2rem; overflow:hidden; }
.ecs-avatar-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.ecs-lead-role { color:var(--gold); text-transform:uppercase; letter-spacing:.26em; font-size:.62rem; margin-bottom:.45rem; }
.ecs-lead-name { font-family:'Cormorant Garamond',serif; font-size:1.5rem; }

.ecs-member-marquee { margin-top:4rem; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ecs-member-track { width:max-content; display:flex; gap:1rem; animation:ecsMembers 38s linear infinite; padding:.6rem 0; }
.ecs-member-track:hover { animation-play-state:paused; }
.ecs-member-pill { flex:0 0 auto; padding:1rem 1.45rem; border:1px solid rgba(201,168,76,.2); border-radius:999px; background:rgba(255,255,255,.035); color:var(--text); white-space:nowrap; }
.ecs-member-pill span { color:var(--gold); margin-right:.55rem; }
@keyframes ecsMembers { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.ecs-contact-card { max-width:1000px; margin:0 auto; padding:3rem; border:1px solid rgba(201,168,76,.22); border-radius:26px; background:linear-gradient(145deg,var(--navy-light),var(--navy-mid)); text-align:center; }
.ecs-contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0 2.2rem; }
.ecs-contact-item { padding:1.25rem; background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:16px; }
.ecs-contact-item small { display:block; color:var(--gold); text-transform:uppercase; letter-spacing:.2em; margin-bottom:.5rem; }
.ecs-contact-item a, .ecs-contact-item span { color:var(--text); text-decoration:none; }
.ecs-contact-item a:hover { color:var(--gold-light); }

.ecs-back-home { margin-top:1.25rem; display:inline-block; color:var(--muted); text-decoration:none; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
.ecs-back-home:hover { color:var(--gold); }


/* ECS hero typewriter */
.ecs-type-heading em { display:inline-flex; align-items:baseline; white-space:nowrap; }
#ecsTypeWord { display:inline-block; min-width:1ch; }
.ecs-type-caret {
  display:inline-block; width:2px; height:.82em; margin-left:.09em;
  background:var(--gold); transform:translateY(.08em);
  animation:ecsCaretBlink .8s steps(1,end) infinite;
}
@keyframes ecsCaretBlink { 0%,48%{opacity:1} 49%,100%{opacity:0} }
.ecs-event-title { white-space:nowrap; }
.ecs-location-card { display:block; text-decoration:none; color:inherit; transition:.3s ease; }
.ecs-location-card:hover { border-color:rgba(201,168,76,.42); background:rgba(201,168,76,.06); transform:translateY(-2px); }
.ecs-map-arrow { color:var(--gold); margin-left:.25rem; }

@media(max-width:1250px){
  .ecs-hero { grid-template-columns:1fr; padding-top:9rem; }
  .ecs-hero-visual { min-height:auto; }
}
@media(max-width:1000px){
  .ecs-hero { grid-template-columns:1fr; padding-top:9rem; }
  .ecs-hero-visual { min-height:auto; }
  .ecs-two-col,.ecs-event-grid { grid-template-columns:1fr; }
  .ecs-impact-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:760px){
  .ecs-hero h1 { font-size:clamp(2.25rem,8.5vw,4rem); white-space:nowrap; }
  .ecs-event-title { white-space:normal; }
  .ecs-hero,.ecs-section { padding-left:1.5rem; padding-right:1.5rem; }
  .ecs-hero { min-height:auto; gap:2.5rem; padding-bottom:4rem; }
  .ecs-logo-wrap { padding:1rem; border-radius:20px; }
  .ecs-impact-grid,.ecs-lead-grid,.ecs-contact-grid,.ecs-event-meta,.ecs-needs { grid-template-columns:1fr; }
  .ecs-gallery-card { flex-basis:270px; height:180px; }
  .ecs-contact-card { padding:2rem 1.2rem; }
}


/* GRAND GATHERING FLYER LIGHTBOX */
.ecs-flyer { cursor:pointer; position:relative; }
.ecs-flyer::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:rgba(201,168,76,0); transition:background .3s ease; pointer-events:none;
}
.ecs-flyer:hover::after, .ecs-flyer:focus-visible::after { background:rgba(201,168,76,.055); }
.ecs-flyer:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.ecs-flyer-hint {
  position:absolute; left:50%; bottom:18px; transform:translate(-50%,8px);
  z-index:2; padding:.55rem .9rem; border:1px solid rgba(255,255,255,.16);
  border-radius:999px; background:rgba(11,22,35,.78); color:var(--text);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transition:opacity .3s ease, transform .3s ease; white-space:nowrap; pointer-events:none;
}
.ecs-flyer:hover .ecs-flyer-hint, .ecs-flyer:focus-visible .ecs-flyer-hint { opacity:1; transform:translate(-50%,0); }

.ecs-flyer-modal {
  position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center;
  padding:clamp(18px,3vw,42px); background:rgba(4,12,20,.26);
  backdrop-filter:blur(14px) saturate(.9); -webkit-backdrop-filter:blur(14px) saturate(.9);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease, visibility .28s ease;
}
.ecs-flyer-modal.open { opacity:1; visibility:visible; pointer-events:auto; }
.ecs-flyer-modal-content {
  position:relative; max-width:min(760px,92vw); max-height:92vh;
  transform:scale(.94) translateY(12px); transition:transform .32s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55));
}
.ecs-flyer-modal.open .ecs-flyer-modal-content { transform:scale(1) translateY(0); }
.ecs-flyer-modal-content img {
  display:block; width:auto; max-width:100%; max-height:88vh; object-fit:contain;
  border-radius:18px; border:1px solid rgba(201,168,76,.3); background:#fff;
}
.ecs-flyer-modal-close {
  position:absolute; top:-17px; right:-17px; z-index:2; width:44px; height:44px;
  border-radius:50%; border:1px solid rgba(201,168,76,.55); background:var(--navy);
  color:var(--text); font:300 2rem/1 Arial,sans-serif; display:grid; place-items:center;
  transition:background .2s ease,color .2s ease,transform .2s ease; cursor:pointer;
}
.ecs-flyer-modal-close:hover, .ecs-flyer-modal-close:focus-visible {
  background:var(--gold); color:var(--navy); transform:scale(1.06); outline:none;
}
body.ecs-modal-open { overflow:hidden; }
@media(max-width:600px){
  .ecs-flyer-modal { padding:16px; }
  .ecs-flyer-modal-content { max-width:94vw; }
  .ecs-flyer-modal-content img { max-height:84vh; border-radius:13px; }
  .ecs-flyer-modal-close { top:-12px; right:-8px; width:40px; height:40px; }
  .ecs-flyer-hint { opacity:1; transform:translate(-50%,0); }
}