/* article-cards.css
   Shared styles for: all-articles.html, /categories/{slug}/ pages,
   and admin-articles.html. Keeps the card grid and header dropdown
   consistent across all three without duplicating CSS in each file. */

/* ---- header dropdown ("Ontario Guide") ---- */
.nav-dropdown { position: relative; }
.nav-dropdown > button {
  font: inherit; color: #333; background: none; border: none; cursor: pointer;
  padding: 0; display: flex; align-items: center; gap: 4px;
}
.nav-dropdown > button::after { content: "▾"; font-size: 10px; color: #999; }

/* This outer box is the actual hover target. It starts flush against the
   button (top: 100%, no gap) and the top padding is a transparent buffer
   that's still PART of this hoverable box — so moving the mouse straight
   down from the button, through that padding, never exits the hover area. */
.nav-dropdown-panel {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 14px;
  z-index: 20;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel { display: block; }

.nav-dropdown-panel-inner {
  background: #fff; border: 1px solid #e5e5e5; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 10px; width: 480px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.nav-dropdown-panel-inner a {
  display: block; padding: 9px 12px; border-radius: 6px;
  color: #333; text-decoration: none; font-size: 13.5px;
}
.nav-dropdown-panel-inner a:hover { background: #f0f4fa; color: #3D66AC; }
.nav-dropdown-panel-inner .see-all {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 10px;
  border-top: 1px solid #eee; text-align: center;
  font-weight: 700; color: #3D66AC;
}

/* ---- page header ---- */
.hub-header { max-width: 1080px; margin: 0 auto; padding: 32px 20px 4px; }
.hub-header h1 { margin-bottom: 6px; }

/* ---- toolbar: search + category filter ---- */
.hub-toolbar {
  max-width: 1080px; margin: 0 auto 20px; padding: 0 20px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.hub-toolbar input[type=text] {
  flex: 1; min-width: 220px; font-size: 15px; padding: 11px 14px;
  border: 1px solid #dcdfe4; border-radius: 8px; font-family: inherit;
}
.hub-toolbar select {
  font-size: 14px; padding: 10px 12px; border: 1px solid #dcdfe4;
  border-radius: 8px; font-family: inherit; background: #fff;
}
.hub-toolbar button {
  font: inherit; font-size: 13.5px; padding: 10px 16px; border-radius: 8px;
  border: 1px solid #dcdfe4; background: #fff; cursor: pointer; white-space: nowrap;
}
.hub-toolbar button.primary { background: #3D66AC; border-color: #3D66AC; color: #fff; }
.hub-toolbar button.primary:hover { background: #2c4d85; }

/* ---- card grid ---- */
.hub-grid {
  max-width: 1080px; margin: 0 auto; padding: 0 20px 60px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  position: relative; border: 1px solid #eaeaea; border-radius: 12px;
  overflow: hidden; background: #fff; display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none; color: inherit;
}
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.card-img { width: 100%; aspect-ratio: 5/3; object-fit: cover; background: #EAF1FC; display: block; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-tag {
  font-size: 11px; font-weight: 700; color: #3D66AC; text-transform: uppercase;
  letter-spacing: .03em;
}
.card-title { font-size: 14.5px; font-weight: 700; line-height: 1.4; color: #1c2430; }
.card-desc { font-size: 12.5px; color: #888; margin-top: auto; padding-top: 4px; }

.hub-empty { text-align: center; color: #999; padding: 40px 0; display: none; }