/* ═══════════════════════════════════════════════
   BENTO GRID — CATEGORY PAGES  (page-category.hbs)
   Depends on CSS custom properties defined in
   style.css (--color-*, --heading-font, etc.)
   ═══════════════════════════════════════════════ */

/* ── Hide status meta-tags from post tag lists ──
   Keeps wip/new/updated/stable visible in Publii
   (required for data-tags to populate) but
   suppresses them from appearing on post pages.  */
.content__tag li:has(a[href*="/wip/"]),
.content__tag li:has(a[href*="/new/"]),
.content__tag li:has(a[href*="/updated/"]),
.content__tag li:has(a[href*="/stable/"]) {
  display: none;
}

/* ── Grid container ───────────────────────────── */

.bento-section {
  margin-bottom: 2rem;
}

/* Serif italic label with trailing rule */
.bento-label {
  font-family: var(--heading-font);
  font-size: 1.35rem;
  font-weight: 600;
  font-style: normal;
  color: var(--headings-color);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 0 !important;
  margin-bottom: .85rem;
}
.bento-label::after {
  content: '';
  flex: 1;
  min-width: 0;
  height: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='5' viewBox='0 0 300 5'%3E%3Cpath d='M0 2.5 C18 1.7 34 3.5 62 2.6 C84 1.8 108 3.4 134 2.5 C152 1.6 178 3.2 202 2.8 C222 2.1 250 3.6 272 2.3 C284 1.8 294 3.1 300 2.5' stroke='%23ff4b7d' stroke-opacity='0.5' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 300px 5px;
  background-position: left center;
}

.bento-grid {
  /* Outer container — sections stack vertically as blocks */
  margin-top: 2.5rem;
}

.bento-grid__inner {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Pinned section — featured post layout ────── */

.bento-section--pinned .bento-grid__inner {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 600px) {
  .bento-section--pinned .bento-grid__inner {
    grid-template-columns: 1fr;
  }
}

/* Single pinned post — stretch full width */
.bento-section--pinned .bento-grid__inner .bcard:only-child {
  grid-column: 1 / -1;
}

/* First pinned card — slightly larger feel */
.bento-section--pinned .bento-grid__inner .bcard:first-child {
  padding: 1.4rem 1.5rem;
}
.bento-section--pinned .bento-grid__inner .bcard:first-child .bcard-title {
  font-size: 1.1rem;
}
.bento-section--pinned .bento-grid__inner .bcard:first-child .bcard-sub {
  font-size: .84rem;
}

.bento-empty {
  color: var(--color-muted);
  font-style: italic;
}

/* ── Card shell ───────────────────────────────── */

.bcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.bcard:hover {
  border-color: var(--color-border-acc);
  box-shadow: 0 6px 24px rgba(42, 24, 64, .18);
}

/* 3px accent strip — colour set per-card via --card-accent (JS hashes the slug) */
.bcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, var(--color-border));
  border-radius: 12px 12px 0 0;
}

/* ── Card image ───────────────────────────────── */

.bcard-img {
  margin: -2.1rem -2.25rem .6rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.bcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Card text ────────────────────────────────── */

.bcard-title {
  font-family: var(--heading-font);
  font-size: .98rem;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.3;
  margin-top: .5rem;
}

/* No featured image + status pills present — push title clear of the pill group */
.bcard-status-group + .bcard-title {
  margin-top: 1.8rem;
}
.bcard-title a {
  color: inherit;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-decoration: none;
  background: none !important;
}

/* Stretch the title link across the entire card */
.bcard-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.bcard:hover .bcard-title { color: var(--color); }

.bcard-sub {
  font-size: .78rem;
  color: var(--color-faint);
  line-height: 1.5;
  flex: 1;
}
.bcard-sub p { margin: 0; font-size: inherit; color: inherit; }

/* ── Card footer ──────────────────────────────── */

.bcard-foot {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .4rem;
  flex-wrap: wrap;
}

.bcard-tag {
  font-size: .62rem;
  color: var(--color-muted);
  background: var(--color-raised);
  border-radius: 20px;
  padding: .1em .5em;
  white-space: nowrap;
}

.bcard-arr {
  margin-left: auto;
  font-size: .8rem;
  color: var(--color-faint);
  transition: transform .15s, color .15s;
}
.bcard:hover .bcard-arr {
  transform: translateX(3px);
  color: var(--color);
}

/* ── Corner status pills (WIP / New / Updated / Stable) ── */

.bcard-status-group {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: flex;
  gap: .25rem;
}

.bcard-status {
  font-family: var(--heading-font);
  font-size: .62rem;
  padding: .2em .6em;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}

/* Default / dark — bright accent bg, dark text */
.bcard-status--wip     { background: #e8c97a; border-color: #e8c97a; color: #2d2000; }
.bcard-status--new     { background: #f97bb8; border-color: #f97bb8; color: #2d0020; }
.bcard-status--updated { background: #8ee8d8; border-color: #8ee8d8; color: #002d28; }
.bcard-status--stable  { background: #c8a0e8; border-color: #c8a0e8; color: #1a0030; }