/* Reuses .team-pills, .team-section, .team-head, .thali-divider, .reveal from team.css / style.css */

/* ---------------- Category tag ---------------- */
.cat-tag{
  display:inline-block; font-family: var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.07em; padding: 5px 12px; border-radius:999px; margin-bottom:12px;
}
.cat-tag.quiz{ background: rgba(231,163,62,0.18); color: var(--gold-deep); }
.cat-tag.debate{ background: rgba(193,68,60,0.14); color: var(--vermilion-deep); }
.cat-tag.painting{ background: rgba(75,107,79,0.14); color: var(--green); }
.cat-tag.essay{ background: rgba(22,33,62,0.10); color: var(--navy); }
.cat-tag.poem{ background: rgba(231,163,62,0.18); color: var(--gold-deep); }
.cat-tag.quote{ background: rgba(193,68,60,0.14); color: var(--vermilion-deep); }
.cat-tag.article{ background: rgba(75,107,79,0.14); color: var(--green); }

/* ---------------- Event cards (competitions) ---------------- */
.event-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px){ .event-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .event-grid{ grid-template-columns: 1fr; } }

.event-card{
  background: var(--white); border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-card); border: 1px solid rgba(43,36,28,0.06);
  transition: transform .3s ease;
}
.event-card:hover{ transform: translateY(-6px); }
.event-photo{ aspect-ratio: 4/3; background-size:cover; background-position:center; }
.event-photo.placeholder{
  background: var(--ivory-2);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); font-family: var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
}
.event-body{ padding: 20px 22px 24px; }
.event-body h3{ font-size:17.5px; color: var(--navy); margin-bottom:8px; }
.event-body p{ font-size:14px; color: var(--ink-soft); }

/* ---------------- Excerpt / quote cards ---------------- */
.excerpt-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 780px){ .excerpt-grid{ grid-template-columns: 1fr; } }

.excerpt-card{
  background: var(--white); border-radius: var(--radius-md);
  padding: 26px 26px 22px; box-shadow: var(--shadow-card); border: 1px solid rgba(43,36,28,0.06);
}
.excerpt-card p.excerpt-text{
  font-family: var(--display); font-size:17px; color: var(--navy); line-height:1.5; margin-bottom:14px;
}
.excerpt-by{ font-family: var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); }

/* ---------------- Small photo grid (Bhubaneswar) ---------------- */
.photo-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 780px){ .photo-grid{ grid-template-columns: repeat(2,1fr); } }
.photo-grid .ph-item{
  aspect-ratio: 1/1; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card);
}
.photo-grid .ph-item img{ width:100%; height:100%; object-fit:cover; }
.photo-grid .ph-item.placeholder{
  background: var(--ivory-2); display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); font-family: var(--mono); font-size:10.5px; text-align:center; padding: 10px;
  border: 2px dashed rgba(43,36,28,0.2);
}

/* ---------------- Poems / quotations / articles ---------------- */
.mixed-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px){ .mixed-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .mixed-grid{ grid-template-columns: 1fr; } }

.mixed-card{
  background: var(--white); border-radius: var(--radius-md);
  padding: 24px 24px 22px; box-shadow: var(--shadow-card); border: 1px solid rgba(43,36,28,0.06);
}
.mixed-card h3{ font-size:16.5px; color: var(--navy); margin-bottom:8px; }
.mixed-card p{ font-size:13.8px; color: var(--ink-soft); }
.mixed-card .by{ display:block; margin-top:12px; font-family: var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: var(--vermilion-deep); }

/* ghost / placeholder card shared look */
.ghost-card{
  border: 2px dashed rgba(43,36,28,0.22) !important; box-shadow:none !important; background: rgba(255,255,255,0.5) !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;
  padding: 32px 20px !important; min-height: 160px;
}
.ghost-card .ghost-plus{
  width:44px; height:44px; border-radius:50%; background: var(--ivory-2); color: var(--gold-deep);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-family: var(--display);
}
.ghost-card h4{ font-family: var(--display); font-weight:400; font-size:15.5px; color: var(--navy); }
.ghost-card p{ font-size:13px; color: var(--ink-soft); max-width:220px; }