/* ============================================================
   Amir Institute — css/events.css
   Page stylesheet for events.html. Loaded after css/site.css.
   ============================================================ */

/* ── a slot waiting for content we have not been sent yet ── */
.calendar-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;min-height:clamp(280px,34vw,420px);max-width:1000px;margin:0 auto;
  border:2px dashed var(--sage,#8DAA93);border-radius:var(--r-xl);background:var(--cream);
  padding:clamp(24px,4vw,48px)}
.calendar-slot svg{width:46px;height:46px;color:var(--sage,#8DAA93)}
.calendar-slot b{font-size:1.1rem;color:var(--ink)}
.calendar-slot span{font-size:.94rem;color:var(--muted);max-width:44ch}

/* ── flyers ── */
.flyergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:clamp(18px,2.2vw,28px);max-width:1180px;margin:0 auto}
.flyer{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.flyer-img{aspect-ratio:3/4;background:var(--sand);display:grid;place-items:center}
.flyer-img svg{width:54px;height:54px;color:var(--green-700);opacity:.5}
.flyer-img img{width:100%;height:100%;object-fit:cover}
.flyer-body{padding:clamp(18px,2vw,24px)}
.flyer-body h3{font-size:1.08rem;margin-bottom:8px}
.flyer-body p{font-size:.93rem;margin-bottom:14px}
.flyer.todo{border-style:dashed;border-color:var(--sage,#8DAA93);box-shadow:none;
  grid-column:1/-1;max-width:520px;margin:0 auto}

/* ── the monthly five ── */
.evgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2.2vw,28px);max-width:1280px;margin:0 auto}
.evcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease}
.evcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.evcard-when{background:var(--green-800);padding:14px clamp(20px,2.2vw,28px)}
.ev-cadence{color:var(--gold-light);font-size:.78rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}
.evcard-body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.evcard-body h3{font-size:1.2rem;margin-bottom:9px}
.evcard-body p{font-size:.95rem;line-height:1.62;flex:1;margin-bottom:18px}
.ev-meta{margin:0;display:grid;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.ev-meta>div{display:flex;gap:10px;align-items:baseline}
.ev-meta dt{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);min-width:68px}
.ev-meta dd{margin:0;font-size:.94rem;color:var(--ink);font-weight:600}
.ev-meta dd.todo{color:var(--gold-dark);font-weight:700}

/* ── email sign-up ── */
.signup{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:520px;
  margin:26px auto 0}
.signup input{flex:1;min-width:220px;min-height:50px;padding:12px 18px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;
  font:inherit;font-size:1rem}
.signup input::placeholder{color:rgba(255,255,255,.62)}
.signup input:focus{outline:3px solid var(--gold);outline-offset:2px;background:rgba(255,255,255,.16)}
.signup .btn{min-height:50px}
.cta-sub{margin-top:18px;font-size:.92rem;color:rgba(255,255,255,.82)}
.cta-sub a{color:var(--gold-light);text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:620px){
  .ev-meta>div{flex-direction:column;gap:2px}
}
/* a card whose time and location are not known yet shows neither, and
   must not be left drawing the rule that separates them from the copy */
.ev-meta.is-empty{border-top:0;padding-top:0;margin:0}