/* info-row.css — cleaned 2025-08-11T10:58:18.775257Z */
/* NEUROBLASTER — single-row Info grid (1–4 columns, elastic) */
:root { --info-gap: 24px; }

#info .info-row{
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--info-gap);
  align-items: stretch;
}

/* Single-row grid is already set with --cols. This styles each card. */
.post-card{
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius, 16px);
  overflow: hidden; cursor: pointer;
  backdrop-filter: none;
  transform: translateZ(0);
}

/* Top 50%: full image */
.post-card .img-wrap{
  height: 50%;
  background: var(--img, none) center/cover no-repeat;
}

/* Bottom 50%: text on subtle image (20% opacity) + dark gradient for contrast */
.post-card .body{
  position: relative;
  height: 50%;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  color: #fff;
}
.post-card .body::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--img, none) center/cover no-repeat;
  opacity: .20;
  filter: saturate(.9) contrast(.9) brightness(.8);
}
.post-card .body::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.45));
}
.post-card .body > *{ position: relative; z-index: 1; }

/* Title: smaller, tight leading, always readable */
.post-card h3{
  font-weight: 800;
  font-size: clamp(15px, 1vw + .6rem, 18px);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  margin: 0;
}
.post-card .meta{ color: rgba(255,255,255,.85); font-size: 12px; }
.post-card .body p{
  color: rgba(255,255,255,.92);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Hover: reveal MORE, blur content slightly */
.more-cta{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.98);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 3;
}
.post-card:hover .more-cta,
.post-card:focus .more-cta,
.post-card:focus-within .more-cta{
  opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
}
.post-card:hover .img-wrap,
.post-card:hover .body{ filter: blur(1px); }

/* Touch devices: show the button by default (no hover) */
@media (hover: none){
  .more-cta{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(.99); }
}

/* Skeleton card matches size visually */
.skel-card{ border-radius: var(--radius, 16px); border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  background-size: 200% 100%; animation: skel 1.2s linear infinite; overflow:hidden;
}
.skel-card .img{ aspect-ratio: 3/2; }
.skel-card .body{ padding:14px 16px; }
.skel-card .line{ height:12px; margin:8px 0; border-radius:8px; background: rgba(255,255,255,.14); opacity:.85 }

 100%{ background-position: -200% 0 } }

#info .post-card .img-wrap{height:50%; background: var(--img, none) center/cover no-repeat;}

#info .post-card .body{display:grid; grid-template-rows:auto auto 1fr; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.62)); padding:14px 16px;}

/* consolidated Info text rules */

#info .post-card h3{
  margin:0 0 2px; font-weight:800;
  font-size:clamp(15px, 1vw + .6rem, 18px); line-height:1.2;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7);
}
#info .post-card .meta{ color:rgba(255,255,255,.88); font-size:12px; margin-bottom:2px; }
#info .post-card .body p{
  margin:0; font-size:14px; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
  color:#fff; position:relative; z-index:2; text-shadow:0 1px 2px rgba(0,0,0,.6);
}

#info .skel-card{
  border-radius: var(--radius, 18px);
  border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  background-size: 200% 100%;
  animation: info-skel 1.2s linear infinite;
  overflow:hidden;
}
#info .skel-card .img{ aspect-ratio: 3/2; }
#info .skel-card .body{ padding: 14px 16px; }
#info .skel-card .line{ height:12px; margin:8px 0; border-radius:8px; background: rgba(255,255,255,.14); }
@keyframes info-skel { 0%{background-position:0% 0} 100%{background-position:-200% 0} }