/* Additional selectable card styles (scoped to .posts-grid and .post-card)
   Uses CSS variables for easy theming:
     --card-accent
     --card-radius
     --card-image-brightness
     --card-overlay-opacity
     --card-title-size
     --card-text-shadow
*/
/* Cinematic full-image card (adapted from user's cinema demo) */
.posts-grid.cards-style--cinema .post-card.card-preset--cinema,
.posts-grid .post-card.cinema{
  position:relative;
  width:100%;
  height:550px;
  border-radius:var(--card-radius,20px);
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,0.5);
  transition:transform .5s ease, box-shadow .5s ease;
}
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .post-media,
.posts-grid .post-card.cinema .post-media,
.posts-grid .post-card.cinema .card-media{ display:block; width:100%; height:42%; overflow:hidden; }
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .post-media .post-media-bg,
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .post-media .post-media-img,
.posts-grid .post-card.cinema .post-media .post-media-bg,
.posts-grid .post-card.cinema .post-media .post-media-img,
.posts-grid .post-card.cinema .card-media img{
  width:100%; height:100%; object-fit:cover; display:block; transform-origin:center; transition:transform .8s ease; filter:brightness(var(--card-image-brightness,0.95)) saturate(1.05);
}
.posts-grid.cards-style--cinema .post-card.card-preset--cinema:hover,
.posts-grid .post-card.cinema:hover{ transform:translateY(-15px) scale(1.02); box-shadow:0 40px 80px rgba(0,0,0,0.7); }
.posts-grid.cards-style--cinema .post-card.card-preset--cinema:hover .post-media-img,
.posts-grid .post-card.cinema:hover .post-media-img{ transform:scale(1.15); filter:brightness(calc(var(--card-image-brightness,0.95) * 1.07)) saturate(1.15); }
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .post-content,
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .card-body,
.posts-grid .post-card.cinema .post-content,
.posts-grid .post-card.cinema .card-body{
  position:relative;
  background: #fff;
  color: #0f172a;
  padding: 26px 28px 22px;
  z-index:2;
  border-bottom-left-radius: var(--card-radius,20px);
  border-bottom-right-radius: var(--card-radius,20px);
  margin-top: -6px; /* slight overlap */
  box-shadow: 0 10px 30px rgba(8,10,20,0.06);
  text-align: right;
}
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .card-body .card-title,
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .post-content .card-title,
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .post-content .cinema-title,
.posts-grid .post-card.cinema .card-body .card-title,
.posts-grid .post-card.cinema .post-content .card-title,
.posts-grid .post-card.cinema .post-content .cinema-title{
  font-size: calc(var(--card-title-size,20px) + 4px);
  font-weight:700;
  margin:6px 0 8px;
  text-align:center;
}
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .card-body .card-excerpt,
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .post-content .card-excerpt,
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .post-content .cinema-subtitle,
.posts-grid .post-card.cinema .card-body .card-excerpt,
.posts-grid .post-card.cinema .post-content .card-excerpt,
.posts-grid .post-card.cinema .post-content .cinema-subtitle{
  color: #6b7280;
  font-size: 14px;
  line-height:1.6;
  text-align:center;
  max-width:85%;
  margin:0 auto;
}
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .cinema-info,
.posts-grid .post-card.cinema .cinema-info{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  border-top:1px solid rgba(15,23,42,0.08);
  padding-top:14px;
  margin-top:14px;
  font-size:13px;
  color:#64748b;
}
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .cinema-info .info-item,
.posts-grid .post-card.cinema .cinema-info .info-item{
  display:flex;
  align-items:center;
  gap:8px;
}
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .cinema-info .info-icon,
.posts-grid .post-card.cinema .cinema-info .info-icon{ opacity:0.75; }

.posts-grid .post-card.cinema .post-header{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .author-box,
.posts-grid .post-card.cinema .author-box{
  display:flex; align-items:center; gap:10px; background:#fff; border-radius:10px; padding:8px 10px; box-shadow:0 6px 18px rgba(16,24,40,0.06); margin-top:14px; width:220px; margin-left:auto; margin-right:12px;
}
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .author-box img,
.posts-grid .post-card.cinema .author-box img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .author-box .by,
.posts-grid .post-card.cinema .author-box .by{ font-weight:600; font-size:14px; }
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .author-box .reading,
.posts-grid .post-card.cinema .author-box .reading{ color:#9ca3af; font-size:13px; }
.posts-grid.cards-style--cinema .post-card.card-preset--cinema .read-more-btn,
.posts-grid .post-card.cinema .read-more-btn{ margin-top:14px; display:inline-flex; }
.posts-grid .post-card.cinema .post-header{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.posts-grid .post-card.cinema .author-avatar{ width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,0.6); }

/* Minimal image-first style (adapted from user's minimal demo) */
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal,
.posts-grid .post-card.image-minimal{ position:relative; border-radius:var(--card-radius,30px); overflow:hidden; cursor:pointer; height:auto; }
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal .post-media,
.posts-grid .post-card.image-minimal .post-media{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal .post-media img,
.posts-grid .post-card.image-minimal .post-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.25,.46,.45,.94); filter:brightness(var(--card-image-brightness,1)); }
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal:hover .post-media img,
.posts-grid .post-card.image-minimal:hover .post-media img{ transform:scale(1.08); }
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal::after,
.posts-grid .post-card.image-minimal::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:70%; background:linear-gradient(to top, rgba(0,0,0,var(--card-overlay-opacity,0.9)) 0%, rgba(0,0,0,0.4) 40%, transparent 100%); z-index:1; pointer-events:none; }
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal .post-content,
.posts-grid .post-card.image-minimal .post-content{ position:absolute; bottom:0; left:0; right:0; padding:24px; z-index:2; color:#fff; }
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal .post-content .post-time,
.posts-grid .post-card.image-minimal .post-content .post-time,
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal .post-content p,
.posts-grid .post-card.image-minimal .post-content p{ opacity:0.95; }
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal .post-content p,
.posts-grid .post-card.image-minimal .post-content p{ max-height:0; overflow:hidden; transition:all .4s ease; opacity:0; }
.posts-grid.cards-style--image-minimal .post-card.card-preset--image-minimal:hover .post-content p,
.posts-grid .post-card.image-minimal:hover .post-content p{ opacity:1; max-height:6em; margin-top:8px; }

/* Overlay compact variant (small card with overlay chip) */
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact,
.posts-grid .post-card.overlay-compact{ border-radius:var(--card-radius,12px); overflow:hidden; position:relative; }
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact .post-media,
.posts-grid .post-card.overlay-compact .post-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact .post-media img,
.posts-grid .post-card.overlay-compact .post-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(var(--card-image-brightness,1)); }
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact::after,
.posts-grid .post-card.overlay-compact::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,var(--card-overlay-opacity,0.85)) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%); z-index:1; pointer-events:none; }
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact .post-content,
.posts-grid .post-card.overlay-compact .post-content{ position:absolute; bottom:10px; left:12px; right:12px; z-index:2; color:#fff; text-shadow:var(--card-text-shadow,0 4px 15px rgba(0,0,0,0.6)); }
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact .overlay-title,
.posts-grid .post-card.overlay-compact .overlay-title{ font-size:calc(var(--card-title-size,18px) + 2px); font-weight:800; margin:0 0 8px; line-height:1.35; }
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact .overlay-meta,
.posts-grid .post-card.overlay-compact .overlay-meta{ display:flex; gap:10px; align-items:center; opacity:0.92; font-size:13px; }
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact .overlay-read-more,
.posts-grid .post-card.overlay-compact .overlay-read-more{ margin-top:10px; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.posts-grid.cards-style--overlay-compact .post-card.card-preset--overlay-compact .post-pill,
.posts-grid .post-card.overlay-compact .post-pill{ position:absolute; right:12px; top:12px; z-index:3; background:linear-gradient(90deg,var(--card-accent,#6f7cff),#8ec5ff); color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; }

/* Ensure these rules only affect posts-grid items (avoid global breakage) */