/* Wrapper */
.pung-ou-wrap{
  margin:0 auto;
}

/* Date header (archive only) */
.pung-ou-card{ margin:20px 0 28px; }
.pung-ou-date{
  display:flex;
  align-items:left;
  justify-content:flex-start;
  font-weight:400;
  font-size:1.05rem;
  line-height:1.4;
  background-color: #BF0003;
  color:#fff;
  padding:10px 14px;
  letter-spacing:.2px;
  margin: 0 0 12px;
  gap: 8px;
}
.pung-ou-date time{ opacity:.95; }

/* Grid: mobile = 1 col, PC = 50/50 (equal height) */
.pung-ou-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  align-items:stretch;      /* equal height */
  overflow:hidden;
}
@media (min-width: 768px){
  .pung-ou-grid{ grid-template-columns:1fr 1fr; }
}
.pung-ou-col{ display:grid; }

/* Images fill column; change to contain if you don't want crop */
.pung-ou-col img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Placeholder */
.pung-ou-empty{
  display:grid;
  place-items:center;
  height:100%;
  border:1px dashed #bbb;
  color:#777;
  background:#fafafa;
}

/* Pagination — สไตล์เดียวกับ step */
.pung-ou-pagination{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin:24px 0 8px;
}
.pung-ou-pagination a,
.pung-ou-pagination span{
  padding:8px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.pung-ou-pagination a:hover{
  transform: translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.pung-ou-pagination .current{
  background:#111;
  color:#fff;
  border-color:#111;
}