/* ============================================================================
   Post Item Effects Component
   Reusable visual effects for post list items across the site

   Effects included:
   - .post-item-aurora-hover: Eth-aurora gradient border on hover/active

   Usage:
   - Add .post-item-aurora-hover to any post item element
   - Background color controlled by context-specific selectors (CSP compliant)
   - Works with .active class for persistent effect

   Technical details:
   - Uses pseudo-element gradient border technique
   - Requires parent to have background-color set
   - --aurora-bg-color CSS variable set by context selectors
   ============================================================================ */

/* Aurora Hover Effect Base */
.post-item-aurora-hover {
    /* CSS Variable - default to white, overridden by context selectors */
    --aurora-bg-color: var(--color-white);
    --aurora-border-width: 1px;
    --aurora-border-radius: var(--radius-base);
    --aurora-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);

    /* Create stacking context for proper z-index layering */
    isolation: isolate;
}

/* White Background Layer (Always Present) */
.post-item-aurora-hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--aurora-bg-color);
    border-radius: var(--aurora-border-radius);
    z-index: 1;
}

/* Hover and Active States: Apply shadow */
.post-item-aurora-hover:hover,
.post-item-aurora-hover.active {
    box-shadow: var(--aurora-shadow);
}

/* Eth-Aurora Gradient Border (Hover and Active States) */
.post-item-aurora-hover:hover::before,
.post-item-aurora-hover.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Eth-aurora gradient at 70° */
    background: var(--eth-aurora-gradient-70deg);

    border-radius: var(--aurora-border-radius);
    z-index: 0;
    margin: calc(-1 * var(--aurora-border-width));  /* Creates 1px border effect */
}

/* Ensure content stays above the background and gradient layers */
.post-item-aurora-hover > * {
    position: relative;
    z-index: 2;
}

/* ============================================================================
   Context-Specific Background Color Overrides (CSP Compliant)
   Define background colors based on parent container context
   ============================================================================ */

/* Sidebar: White background cards */
.sidebar-recent-posts .post-item-aurora-hover {
    --aurora-bg-color: var(--color-white);
}

/* Profile Pages: Grey-100 background cards */
.profile-heralded-posts .post-item-aurora-hover,
.profile-authored-posts .post-item-aurora-hover {
    --aurora-bg-color: var(--color-gray-100);
}

/* ============================================================================
   Heralded Posts: Always-Visible Aurora Border Variant
   Profile page showcase - emphasizes current ownership status (active economic stake)
   Baseline 1px border, grows to 2px on hover for interactive feedback
   ============================================================================ */

/* Heralded Posts: Always show 1px aurora border */
.profile-heralded-posts .post-item-aurora-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Always visible aurora gradient */
    background: var(--eth-aurora-gradient-70deg);

    border-radius: var(--aurora-border-radius);
    z-index: 0;
    margin: -1px;  /* 1px baseline border */
}

/* Heralded Posts: Grow border to 2px on hover */
.profile-heralded-posts .post-item-aurora-hover:hover::before {
    margin: -2px;  /* 2px hover border */
}

/* Heralded Posts: Always show shadow (reinforces "always special" status) */
.profile-heralded-posts .post-item-aurora-hover {
    box-shadow: var(--aurora-shadow);
}

/* Future contexts can be added here:
   - Herald leaderboards
   - Top posts lists
   - Search results
   etc. */