/* ==========================================================================
   Blog Index
   ========================================================================== */

.blog-index { --bi-gap: clamp(1.35rem, 2.5vw, 2rem); }

.blog-index .bi-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--ink-50);
}

/* ---- shared meta row ---------------------------------------------------- */

.blog-index .bi-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: .85rem;
  font-size: .85rem;
  color: var(--ink-50);
}

.blog-index .bi-cat {
  display: inline-flex;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  background: var(--violet-050);
  border: 1px solid var(--violet-100);
  color: var(--violet-700);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.blog-index .bi-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-30); }

/* ---- lead article ------------------------------------------------------- */

.blog-index .bi-lead {
  display: grid;
  gap: 0;
  margin-bottom: var(--bi-gap);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.blog-index .bi-lead:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

@media (min-width: 860px) {
  .blog-index .bi-lead { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
}

.blog-index .bi-lead-img { position: relative; overflow: hidden; background: var(--soft); }

.blog-index .bi-lead-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.blog-index .bi-lead:hover .bi-lead-img img { transform: scale(1.03); }

.blog-index .bi-lead-in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-index .bi-lead-in h2 {
  margin: 0 0 .7rem;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -.018em;
  color: var(--ink);
}

.blog-index .bi-lead-in p {
  margin: 0 0 1.25rem;
  font-size: .99rem;
  line-height: 1.62;
  color: var(--ink-70);
}

.blog-index .bi-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--violet-700);
}

.blog-index .bi-more .ic { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.blog-index .bi-lead:hover .bi-more .ic { transform: translateX(3px); }

/* ---- card grid ---------------------------------------------------------- */

.blog-index .bi-grid {
  display: grid;
  gap: var(--bi-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .blog-index .bi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .blog-index .bi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.blog-index .bi-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.blog-index .bi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.blog-index .bi-card-img { overflow: hidden; background: var(--soft); }

.blog-index .bi-card-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.blog-index .bi-card:hover .bi-card-img img { transform: scale(1.04); }

.blog-index .bi-card-in {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.3rem 1.4rem;
}

.blog-index .bi-card-in h3 {
  margin: 0 0 .55rem;
  font-size: 1.06rem;
  line-height: 1.34;
  color: var(--ink);
}

.blog-index .bi-card-in p {
  margin: 0 0 1rem;
  font-size: .91rem;
  line-height: 1.58;
  color: var(--ink-50);
}

.blog-index .bi-read {
  margin-top: auto;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-30);
}

/* ---- pagination --------------------------------------------------------- */

.blog-index .bi-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.blog-index .bi-nums {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  order: 2;
}

.blog-index .bi-num {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-70);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.blog-index a.bi-num:hover { border-color: var(--violet-100); color: var(--violet-700); background: var(--violet-050); }

.blog-index .bi-num.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.blog-index .bi-pg {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-70);
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.blog-index a.bi-pg:hover { border-color: var(--violet-100); color: var(--violet-700); }

/* Kept in the layout rather than removed, so the number strip stays centred
   on the first and last pages instead of shifting sideways. */
.blog-index .bi-pg.is-off { opacity: .35; }

.blog-index .bi-prev { order: 1; }
.blog-index .bi-next { order: 3; }

.blog-index .bi-count {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--ink-30);
}

@media (max-width: 560px) {
  .blog-index .bi-pager { gap: .75rem; }
  .blog-index .bi-nums { order: 1; width: 100%; justify-content: center; flex-wrap: wrap; }
  .blog-index .bi-prev { order: 2; }
  .blog-index .bi-next { order: 3; }
}