/* Blog-specific Tailwind utility classes not in the pre-compiled tailwind.css
   These are JIT-generated classes used by the blog template engine (api/_lib/template.js)
   that the CDN would normally generate on-the-fly. */

/* Font weights (Tailwind JIT arbitrary) */
.font-600{font-weight:600}
.font-700{font-weight:700}
.font-800{font-weight:800}

/* Min-height arbitrary values */
.min-h-\[50vh\]{min-height:50vh}
.min-h-\[55vh\]{min-height:55vh}

/* Text size arbitrary values */
.text-\[clamp\(2\.5rem\2c 6vw\2c 4\.5rem\)\]{font-size:clamp(2.5rem,6vw,4.5rem)}
.text-\[clamp\(2rem\2c 5vw\2c 3\.5rem\)\]{font-size:clamp(2rem,5vw,3.5rem)}
.text-\[0\.95rem\]{font-size:0.95rem}

/* Whitespace */
.whitespace-pre-line{white-space:pre-line}

/* Shadow with black opacity */
.shadow-black\/40{--tw-shadow-color:rgba(0,0,0,0.4);--tw-shadow:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

/* Border white/8 (not standard — tw uses /5 and /10) */
.border-white\/8{border-color:hsla(0,0%,100%,0.08)}

/* Missing padding utilities */
.pb-4{padding-bottom:1rem}
.py-12{padding-top:3rem;padding-bottom:3rem}

/* group-hover gap */
.group:hover .group-hover\:gap-3{gap:0.75rem}

/* Accent colors with custom opacity used in blog */
.text-accent-violet\/80{color:rgba(139,92,246,0.8)}
.bg-accent-cyan\/5{background-color:rgba(0,212,255,0.05)}
.bg-accent-violet\/5{background-color:rgba(139,92,246,0.05)}
.bg-accent-emerald\/5{background-color:rgba(0,223,162,0.05)}

/* Blog grid background and glass card (also in SHARED_CSS but good to have in CSS file for non-JS) */
.grid-bg{background:#05060f;min-height:100vh}
.glass-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .4s cubic-bezier(.16,1,.3,1)}
.glass-card:hover{border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.04)}

/* Orb animation */
.orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
@keyframes orbit-1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}
@keyframes orbit-2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,15px)}}

/* Filter buttons */
.filter-btn.active{background:rgba(139,92,246,0.15)!important;border-color:rgba(139,92,246,0.3)!important;color:#e4e8f1!important}

/* Accent line for related posts */
.accent-line{width:40px;border-radius:2px}