@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter+Tight:wght@400;500;600;700&display=swap');
/* ===========================================================
   Parish Outreach — front-end
   Same design language as the other St. Leo plugins: Fraunces +
   Inter Tight, navy #161e34, cream #fbf7ee, gold #d4ab68, sharp.
   =========================================================== */
.pou{
  --pou-ink:#161e34;
  --pou-soft-ink:#4e5670;
  --pou-accent:#161e34;
  --pou-brand:#7a1f2b;
  --pou-gold:#b4893f;
  --pou-gold-soft:#d4ab68;
  --pou-bg:#ffffff;
  --pou-surface:#fbf7ee;
  --pou-line:#e1e1e1;
  --pou-cols:3;
  font-family:'Inter Tight',-apple-system,Helvetica,Arial,sans-serif;
  color:var(--pou-soft-ink);
  box-sizing:border-box;
}
.pou *,.pou *::before,.pou *::after{ box-sizing:border-box; }

/* Filter tabs ----------------------------------------------- */
.pou-tabs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:26px; }
.pou-tab{
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pou-soft-ink); background:var(--pou-bg);
  border:1px solid var(--pou-line); border-radius:0;
  padding:10px 18px; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.pou-tab:hover{ color:var(--pou-ink); border-color:var(--pou-accent); }
.pou-tab.is-active{ background:var(--pou-accent); color:#fff; border-color:var(--pou-accent); }

/* Grid + cards ----------------------------------------------- */
.pou-grid{ display:grid; gap:22px; grid-template-columns:repeat(var(--pou-cols),minmax(0,1fr)); }
.pou-card{
  display:flex; flex-direction:column;
  background:var(--pou-bg); border:1px solid var(--pou-line); overflow:hidden;
  box-shadow:0 1px 2px rgba(20,20,30,.04);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.pou-card:hover{ box-shadow:0 16px 40px rgba(30,20,25,.12); transform:translateY(-3px); border-color:#d8cfc0; }

.pou-card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--pou-surface); }
.pou-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.pou-card:hover .pou-card-media img{ transform:scale(1.05); }

.pou-card-body{ padding:22px; display:flex; flex-direction:column; gap:11px; flex:1; }
.pou-badge{
  align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--pou-gold); background:rgba(212,171,104,.16); border:1px solid rgba(212,171,104,.4); padding:3px 9px;
}
.pou-card-name{
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:22px; line-height:1.16; margin:0;
  color:var(--pou-ink); letter-spacing:.2px;
}
.pou-desc{ margin:0; font-size:14.5px; line-height:1.6; color:var(--pou-soft-ink); }
.pou-loc{ display:flex; gap:8px; align-items:flex-start; margin:0; font-size:13.5px; color:var(--pou-soft-ink); }
.pou-loc svg{ flex:none; margin-top:2px; color:var(--pou-gold); }
.pou-loc strong{ color:var(--pou-ink); font-weight:600; }

.pou-card-foot{ margin-top:auto; padding-top:6px; }
.pou-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--pou-brand); border:1px solid var(--pou-brand);
  padding:11px 22px; text-decoration:none; transition:.18s ease;
}
.pou-btn:hover{ background:transparent; color:var(--pou-brand); }

.pou-empty,.pou-noresults{ padding:34px; text-align:center; color:var(--pou-soft-ink); background:var(--pou-surface); border:1px solid var(--pou-line); }
.pou-noresults{ margin-top:18px; }

/* JS-hidden cards must actually hide (a display rule would otherwise
   override the [hidden] attribute's default display:none). */
.pou-card[hidden]{ display:none !important; }

/* Responsive -------------------------------------------------- */
@media (max-width:1000px){ .pou-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){
  .pou-grid{ grid-template-columns:1fr; }
  .pou-tabs{ justify-content:center; }
  .pou-tab{ padding:9px 13px; font-size:11px; }
}

/* Outreach: two CTAs per card ------------------------------- */
.pou-card-foot{ display:flex; flex-wrap:wrap; gap:8px; }
.pou-btn-ghost{
  color:var(--pou-accent); background:transparent; border-color:var(--pou-accent);
}
.pou-btn-ghost:hover{ background:var(--pou-accent); color:#fff; }