/* Category (group) pages — loaded on top of article.css.
   The article-card styles live inline in index.html; duplicated here rather than
   extracted so index.html is not touched and cannot regress. Keep the two in
   sync if the card design changes. */

.acard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s24, 24px);
}

.acard {
  background: var(--bg-secondary, #F5F5F5);
  border-radius: var(--r-card, 4px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .15s, background .15s;
}

.acard:hover { background: var(--white, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }

.acard-img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: var(--white, #fff);
  padding: var(--s20, 20px);
  display: block;
}

.acard-img-placeholder {
  width: 100%;
  height: 180px;
  background: var(--border-subtle, #DFDFDF);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border-medium, #CCC);
}

.acard-body { padding: var(--s16, 16px); }
.acard-cat { font-size: 12px; font-weight: 700; color: var(--dark-grey, #484848); margin-bottom: var(--s8, 8px); }
.acard-title { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: var(--s8, 8px); }
.acard-desc { font-size: 13px; color: var(--dark-grey, #484848); line-height: 1.5; margin-bottom: var(--s12, 12px); }
.acard-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--border-medium, #CCC); }
.acard-cta { font-size: 13px; font-weight: 700; color: var(--charcoal, #111); }

/* Sibling-group links at the foot of the page */

.grouplinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s16, 16px);
}

.grouplink {
  display: block;
  padding: var(--s16, 16px) var(--s20, 20px);
  border: 1px solid var(--border-subtle, #DFDFDF);
  border-radius: var(--r-card, 4px);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}

.grouplink:hover { border-color: var(--charcoal, #111); background: var(--bg-secondary, #F5F5F5); }
.grouplink-th { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.grouplink-en { font-size: 12px; color: var(--dark-grey, #484848); }
.grouplink-n { font-size: 12px; color: var(--border-medium, #CCC); margin-top: var(--s8, 8px); }

@media (max-width: 1024px) {
  .acard-grid { grid-template-columns: repeat(2, 1fr); }
  .grouplinks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .acard-grid,
  .grouplinks { grid-template-columns: 1fr; }
}