/* ============================================
   UNIFIED PROMPT CARD (used site-wide via render_prompt_card())
   ============================================ */
.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #fff);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 6px 24px -8px rgba(0, 168, 120, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -12px rgba(0, 168, 120, 0.25);
}

/* The actual clickable "open this prompt" link - previously had zero
   CSS rules at all, meaning it defaulted to display:inline (the
   standard browser default for <a> tags) while wrapping a
   position:relative block-level div. That mismatch between the link's
   own inline box and its block-level content is very likely why clicks
   weren't landing correctly. Made explicitly block-level and positioned
   so the link's actual clickable area reliably matches what's visually
   shown, instead of leaving that to inconsistent browser default
   behavior for block content inside an inline element. */
.pcard__media-link {
    display: block;
    position: relative;
    z-index: 0;
    cursor: pointer;
    text-decoration: none;
}

.pcard__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--bg-surface, #F1F5F2);
}
.pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pcard__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: #fff;
    color: var(--text-dark, #0F172A);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pcard__like {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 0.7rem 0.55rem;
    color: var(--text-dark, #0F172A);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}
.pcard__like:hover { transform: scale(1.08); }
.pcard__like.liked { color: #EF4444; }
.pcard__like svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
/* This is what actually makes the heart fill red on like - a stylesheet
   rule always overrides an SVG's inline fill attribute (which is what
   the JS in handleLike() sets), no matter what JS does or when. Without
   this explicit override, the base "fill: none" rule above wins every
   time and the heart never visually fills. */
.pcard__like.liked svg {
    fill: currentColor;
}
.pcard__like .like-count {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.pcard__fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 58%;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 40%,
        var(--bg-card, #fff) 92%);
    pointer-events: none;
    z-index: 1;
}

.pcard__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1rem 1.15rem 0.85rem;
}
.pcard__title {
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--text-dark, #0F172A);
    margin: 0 0 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pcard__desc {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--text-muted, #64748B);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard__footer {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 1.1rem 1.1rem;
    background: var(--bg-card, #fff);
}

.pcard__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gradient-primary, linear-gradient(135deg, #00A878 0%, #34D399 100%));
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 168, 120, 0.4);
    transition: transform 0.15s ease;
}
.pcard__copy:hover { transform: translateY(-1px); }
.pcard__copy.copied { background: #059669; }

.pcard__share {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface, #F1F5F2);
    border: none;
    color: var(--text-dark, #0F172A);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.pcard__share:hover {
    background: var(--primary-light, #D1FAE5);
    color: var(--primary-dark, #065F46);
}

.pcard__author {
    margin-left: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .pcard { border-radius: 22px; }
    .pcard__title { font-size: 0.95rem; }
}