/* ===== Blogs listing (blogs.php) — builds on events.css (.ev-intro, .ev-card, .ev-meta), site theme --rr-* ===== */

.bl-intro { padding-top: 150px; }   /* clears the fixed navbar (~82px), there is no banner on this page */
.bl { padding-top: 16px; }
.bl a { text-decoration: none; }

/* category pill */
.bl-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ev-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bl-cat-float { position: absolute; left: 16px; top: 16px; box-shadow: 0 8px 18px rgba(21, 23, 28, .2); }

/* ---- Featured (newest) post ---- */
.bl-feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  margin: 0 0 48px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: 28px;
  box-shadow: 0 24px 56px rgba(27, 42, 91, .08);
}
.bl-feature[hidden] { display: none; }
.bl-feature-media { position: relative; display: block; min-height: 400px; overflow: hidden; background: #e9ebf1; }
.bl-feature-media img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s ease; }
.bl-feature:hover .bl-feature-media img { transform: scale(1.05); }
.bl-badge {
  position: absolute;
  left: 22px;
  top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ev-ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(21, 23, 28, .18);
}
.bl-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ev-ink); }
.bl-feature-body { display: flex; flex-direction: column; justify-content: center; padding: 2.8rem 2.6rem; }
.bl-feature-body h2 { margin: 0 0 .9rem; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 700; line-height: 1.3; }
.bl-feature-body h2 a { color: var(--ev-ink); }
.bl-feature-body > p { margin: 0 0 1.8rem; font-size: 1rem; line-height: 1.8; color: var(--ev-gray); }
.bl-feature-body .rr-btn { align-self: flex-start; min-height: 50px; }

/* ---- Search / category / year toolbar ---- */
.bl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 32px; }
.bl-search {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--ev-border);
  border-radius: 999px;
  transition: border-color .2s, box-shadow .2s;
}
.bl-search:focus-within { border-color: var(--ev-ink); box-shadow: 0 0 0 4px rgba(21, 23, 28, .06); }
.bl-search i { color: var(--ev-gray); }
.bl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: .98rem; color: var(--ev-ink); }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-chips button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ev-border);
  border-radius: 999px;
  background: #fff;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ev-gray);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.bl-chips button span { padding: 1px 8px; border-radius: 999px; background: var(--ev-circle); font-size: .75rem; color: var(--ev-navy); }
.bl-chips button:hover { border-color: var(--ev-ink); color: var(--ev-ink); }
.bl-chips button.is-active { background: var(--ev-ink); border-color: var(--ev-ink); color: #fff; }
.bl-chips button.is-active span { background: rgba(255, 255, 255, .2); color: #fff; }
.bl-year {
  min-height: 48px;
  padding: 0 40px 0 18px;
  border: 1px solid var(--ev-border);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e6470' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ev-gray);
  cursor: pointer;
  appearance: none;
}
.bl-year:focus { outline: 0; border-color: var(--ev-ink); }

/* ---- Blog cards (on top of .ev-card) ---- */
.bl-grid .ev-card-media { cursor: pointer; }
.bl-grid.ev-grid-2 .ev-card-body h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.35; }   /* wider two-per-row cards on the listings */
.bl-grid .ev-card-body h2 a { color: var(--ev-ink); transition: color .2s; }
.bl-grid .ev-card-body h2 a:hover { color: var(--ev-navy); }
.bl-grid .ev-meta { margin-bottom: .6rem; font-size: .82rem; }
.bl .ev-more { color: var(--ev-ink); }

@media (max-width: 991.98px) {
  .bl-feature { grid-template-columns: 1fr; }
  .bl-feature-media { min-height: 0; aspect-ratio: 16 / 9; }
  .bl-feature-body { padding: 2.2rem 2rem; }
}
@media (max-width: 575.98px) {
  .bl-intro { padding-top: 124px; }
  .bl-feature { margin-bottom: 32px; border-radius: 22px; }
  .bl-badge { left: 14px; top: 14px; }
  .bl-feature-body { padding: 1.6rem 1.4rem; }
  .bl-feature-body .rr-btn { align-self: stretch; justify-content: space-between; }
  .bl-toolbar { gap: 10px; margin-bottom: 24px; }
  .bl-search { flex-basis: 100%; }
  .bl-chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .bl-chips button { flex: 0 0 auto; }
  .bl-year { width: 100%; }
  .bl-grid.ev-grid-2 .ev-card-body h2 { font-size: 1.2rem; }
}