/* ══════════════════════════════════════════════════════════════════════════
   BLOCK OPS SECTION STYLES
   ══════════════════════════════════════════════════════════════════════════ */

.masthead { border-bottom: 3px double var(--bo-ink); padding: 0 48px; background: var(--bo-paper); }

.bo-meta { 
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; 
  padding: 12px 0 10px; 
  border-bottom: 1px solid var(--bo-rule); 
  font-family: var(--f-ui); 
  font-size: 10px; 
  color: var(--bo-muted); 
  letter-spacing: 0.08em; 
}
.bo-meta > span:first-child {
  justify-self: start;
}
.bo-meta > span:last-child {
  justify-self: end;
}
.bo-tag-group {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bo-tag { 
  background: var(--bo-accent); 
  color: white; 
  padding: 3px 10px; 
  font-size: 9px; 
  letter-spacing: 0.18em; 
  text-transform: uppercase; 
  font-weight: 600; 
}
.bo-vol {
  font-size: 10px;
  color: var(--bo-muted);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .bo-meta {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }
  
  .bo-meta > span:first-child,
  .bo-meta > span:last-child {
    justify-self: center;
  }
  
  .bo-tag-group {
    justify-self: center;
  }
}