﻿/* OHELP PREMIUM ARTISAN CARDS V1 */

.landing-feed-card.landing-artisan-card {
    background: linear-gradient(
        145deg,
        #f5f0ff 0%,
        #ffffff 65%,
        #eee6ff 100%
    ) !important;

    border: 1.5px solid #c7a9f5 !important;
    box-shadow:
        0 8px 28px rgba(104, 55, 165, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;

    position: relative;
    overflow: hidden;
}

.landing-artisan-card .landing-card-label span {
    color: #7138b5 !important;
    font-weight: 800;
}

.landing-artisan-card h3 {
    color: #4d267c !important;
}

.landing-artisan-card .landing-media img,
.landing-artisan-card .landing-media video {
    border-radius: 14px;
}

/* BLINKING VIEW BUTTONS */

.landing-feed-card .landing-card-action {
    animation: ohelpViewButtonPulse 1.8s ease-in-out infinite !important;
    transform-origin: center;
    will-change: box-shadow, transform;
}

@keyframes ohelpViewButtonPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 rgba(42, 138, 95, 0);
    }

    50% {
        opacity: 0.78;
        transform: scale(1.025);
        box-shadow: 0 0 17px rgba(42, 138, 95, 0.38);
    }
}

.landing-feed-card .landing-card-action:hover {
    animation-play-state: paused !important;
    opacity: 1 !important;
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .landing-feed-card .landing-card-action {
        animation: none !important;
    }
}

/* OHELP DISTINCTIVE ARTISAN CARD V2 */

.landing-feed-card.landing-artisan-card {
    background: linear-gradient(
        145deg,
        #6535a5 0%,
        #8250c6 55%,
        #a575dc 100%
    ) !important;

    border: 2px solid #b88cff !important;

    box-shadow:
        0 10px 28px rgba(91, 46, 160, 0.25) !important;
}

.landing-feed-card.landing-artisan-card h3,
.landing-feed-card.landing-artisan-card .landing-description,
.landing-feed-card.landing-artisan-card .landing-meta,
.landing-feed-card.landing-artisan-card .landing-card-label,
.landing-feed-card.landing-artisan-card .landing-card-label span,
.landing-feed-card.landing-artisan-card .landing-card-label small {
    color: #ffffff !important;
}

.landing-feed-card.landing-artisan-card .landing-card-action {
    background: transparent !important;
    color: #62349d !important;
    font-weight: 800 !important;
}

.landing-feed-card.landing-artisan-card .landing-media img,
.landing-feed-card.landing-artisan-card .landing-media video {
    border: 2px solid rgba(255,255,255,0.7);
}


/* OHELP_COMPACT_LANDING_ACTIONS_V1 */

/* Compact action panel */
.landing-content .landing-main-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 10px 0 14px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
}

/* Standard-size action buttons */
.landing-content .landing-main-actions > button,
.landing-content .landing-main-actions > * > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 9px 7px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
}

/* Keep icons proportionate */
.landing-content .landing-main-actions button svg,
.landing-content .landing-main-actions button img {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
}

/* Compact panel on smaller phones */
@media (max-width: 480px) {
    .landing-content .landing-main-actions {
        gap: 5px !important;
        padding: 7px !important;
        border-radius: 15px !important;
    }

    .landing-content .landing-main-actions > button,
    .landing-content .landing-main-actions > * > button {
        min-height: 38px !important;
        padding: 7px 4px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
    }

    .landing-content .landing-main-actions button svg,
    .landing-content .landing-main-actions button img {
        width: 15px !important;
        height: 15px !important;
    }
}
