/* =============================================================================
   Pulse Block — Frontend Stylesheet
   1-1 conversion of Pulse.tsx (Tailwind → plain CSS)
   ============================================================================= */

/* --------------------------------------------------------------------------
   Section wrapper — py-20 md:py-32 bg-[#0a0a0a] text-white overflow-hidden
   -------------------------------------------------------------------------- */
.pulse-block {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #0a0a0a;
    color: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Container — max-w-7xl mx-auto px-6
   -------------------------------------------------------------------------- */
.pulse-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* --------------------------------------------------------------------------
   Header row — flex justify-between items-end mb-12 md:mb-16
   -------------------------------------------------------------------------- */
.pulse-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
}

/* Heading — font-display text-4xl md:text-5xl font-bold tracking-tight */
.pulse-heading {
    font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1rem 0;
}

/* Subheading — text-white/50 mt-4 text-sm md:text-base */
.pulse-subheading {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.50);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   "View All" button — items-center gap-2 text-sm font-bold uppercase tracking-widest
   hover:text-[#FF4E00] transition-colors
   -------------------------------------------------------------------------- */
.pulse-viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.pulse-viewall:hover {
    color: #FF4E00;
}

/* hidden md:flex — desktop only */
.pulse-viewall--desktop {
    display: none;
}

/* mt-12 md:hidden — mobile only */
.pulse-viewall--mobile {
    display: inline-flex;
    margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   Posts grid — grid grid-cols-1 md:grid-cols-3 gap-8
   -------------------------------------------------------------------------- */
.pulse-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* --------------------------------------------------------------------------
   Article card — group cursor-pointer
   whileInView initial: opacity:0, x:50
   -------------------------------------------------------------------------- */
.pulse-article {
    cursor: pointer;
    opacity: 0;
    transform: translateX(50px);
}

/* Added by IntersectionObserver JS — triggers CSS transition */
.pulse-article.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 0.6s ease var(--article-delay, 0s),
        transform 0.6s ease var(--article-delay, 0s);
}

/* --------------------------------------------------------------------------
   Image wrapper — relative aspect-[4/3] overflow-hidden rounded-xl mb-6
   -------------------------------------------------------------------------- */
.pulse-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Image — w-full h-full object-cover grayscale group-hover:grayscale-0 scale-105 duration-700 */
.pulse-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1);
    transform: scale(1);
    transition: filter 0.7s ease, transform 0.7s ease;
}

.pulse-article:hover .pulse-img {
    filter: grayscale(0);
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Category badge
   absolute top-4 left-4 bg-black/50 backdrop-blur-md px-3 py-1
   rounded-full text-xs font-mono uppercase tracking-wider
   -------------------------------------------------------------------------- */
.pulse-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Meta: date + divider — flex items-center gap-4 text-white/50 text-sm font-mono mb-3
   -------------------------------------------------------------------------- */
.pulse-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.pulse-date {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.50);
}

/* w-8 h-[1px] bg-white/20 */
.pulse-divider {
    display: inline-block;
    width: 2rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.20);
}

/* --------------------------------------------------------------------------
   Title — font-display text-2xl font-bold group-hover:text-[#FF4E00] duration-300
   -------------------------------------------------------------------------- */
.pulse-title {
    font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    transition: color 0.3s ease;
}

.pulse-article:hover .pulse-title {
    color: #FF4E00;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (min-width: 48rem) {
    .pulse-block {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .pulse-header {
        margin-bottom: 4rem;
    }

    .pulse-subheading {
        font-size: 1rem;
    }

    .pulse-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .pulse-viewall--desktop {
        display: inline-flex;
    }

    .pulse-viewall--mobile {
        display: none;
    }
}