/* ==========================================================================
   Signature Grids — shared base (loaded with any of the 7 demo grids)
   ========================================================================== */
.epg { padding: 44px 0; }
.epg a { text-decoration: none; }
.epg .ep-row-layout > .ep-sidebar { height: auto; overflow: visible; }
.epg .epj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12.5px; font-weight: 500; color: color-mix(in srgb, var(--text-main) 60%, transparent); }
.epg .epj-dot { width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.epg .epj-meta__by { color: var(--text-main); font-weight: 600; }
.epg .epj-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, var(--bg-section-alt)), var(--bg-section-alt)); }
.epg img { display: block; }
.epg-chip { display: inline-block; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent) !important; font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 1; text-transform: uppercase; }
.epg-chip--sm { padding: 4px 8px; font-size: 10px; }
@media (max-width: 768px) { .epg { padding: 30px 0; } }
@media (prefers-reduced-motion: reduce) { .epg *, .epg *::before, .epg *::after { animation: none !important; transition: none !important; } }