/* Explore explore_gigs fragment — loaded in via critical_css.php */ .explore-item .portfolio-card{background:white!important;border-radius:15px!important;box-shadow:0 4px 15px rgba(0,0,0,.1)!important;overflow:hidden!important;transition:transform .3s ease,box-shadow .3s ease!important;display:flex!important;flex-direction:column!important;height:100%!important;width:100%!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important} .explore-item .portfolio-card:hover{transform:translateY(-5px)!important;box-shadow:0 8px 25px rgba(0,0,0,.15)!important} .explore-item .portfolio-image-container{position:relative!important;width:100%!important;aspect-ratio:16/9!important;overflow:hidden!important;border-radius:15px 15px 0 0!important;flex-shrink:0!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important} .explore-item .youtube-thumbnail,.explore-item .portfolio-image-placeholder{width:100%;height:100%;position:relative;overflow:visible} .explore-item .portfolio-image-placeholder{background:#f8f9fa;display:flex;align-items:center;justify-content:center} #explore-gigs .explore-item .portfolio-image{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transition:transform .3s ease!important;border-radius:15px 15px 0 0!important} #explore-gigs .explore-item .youtube-thumbnail{width:100%!important;height:100%!important;aspect-ratio:auto!important;display:block!important;overflow:hidden!important} #explore-gigs .explore-item .youtube-thumbnail .portfolio-image{z-index:1!important;display:block!important;position:absolute!important;top:0!important;left:0!important;transform:none!important;max-width:none!important;max-height:none!important;min-width:100%!important;min-height:100%!important} #explore-gigs .explore-item .youtube-thumbnail .yt-placeholder{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:0!important} #explore-gigs .explore-item .portfolio-image-container>img.portfolio-image{z-index:1!important;position:absolute!important} #explore-gigs .explore-item .portfolio-image-container .portfolio-image-placeholder{position:absolute!important;top:0!important;left:0!important;z-index:0!important} #explore-gigs .explore-item .portfolio-card:hover .portfolio-image{transform:scale(1.05)!important} .explore-item .play-button-overlay{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;color:white!important;font-size:3rem!important;text-shadow:2px 2px 4px rgba(0,0,0,.7)!important;opacity:.9!important;transition:opacity .3s ease!important;z-index:10!important;pointer-events:none!important;display:block!important} .explore-item .portfolio-card:hover .play-button-overlay{opacity:1!important} .explore-item .portfolio-image-container.is-playing .play-button-overlay{display:none!important} .explore-item .youtube-thumbnail{cursor:pointer} .explore-item .youtube-thumbnail img{cursor:pointer} .explore-item .category-badge{position:absolute;top:15px;left:15px;background:rgba(224,49,49,.9);color:white;padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:500;z-index:3} .explore-item .portfolio-content{padding:1.5rem!important;display:flex;flex-direction:column;flex:1 1 auto} .explore-item .portfolio-title,.explore-item .listing-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis} .explore-item .portfolio-title{font-size:1.2rem;font-weight:600;color:#333;margin-bottom:.75rem;line-height:1.4;min-height:1.4em;max-height:2.8em} .explore-item .listing-description{color:#666!important;font-size:.9rem!important;line-height:1.5!important;margin-bottom:1rem!important;min-height:1.5em;max-height:3em} .explore-item .creator-info{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #eee;flex-shrink:0} .explore-item .creator-avatar,.explore-item .creator-avatar-placeholder{width:32px;height:32px;border-radius:50%} .explore-item .creator-avatar-placeholder{background:#e9ecef;display:flex;align-items:center;justify-content:center;color:#6c757d;font-size:.8rem} .explore-item .creator-name{font-weight:500;font-size:.9rem;color:#333;margin-bottom:4px} .explore-item .creator-role{font-size:.8rem;color:#666;font-style:italic} .explore-item .portfolio-actions{margin-top:auto;display:flex;gap:.5rem;width:100%} .explore-item .portfolio-actions .btn{font-size:.8rem;padding:.375rem .75rem;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px} .explore-item .portfolio-actions .btn-primary{flex:1} .explore-item .portfolio-actions .contact-btn{width:44px!important;height:44px!important;padding:0!important;border:1px solid #e03131!important;color:#e03131!important;background:white!important;flex-shrink:0} .explore-item .portfolio-actions .contact-btn:hover{background:#e03131!important;color:white!important} @media (max-width:768px){ .explore-item .portfolio-actions{flex-direction:column} #explore-gigs .portfolio-actions{display:none!important} .explore-item .portfolio-actions .btn,.explore-item .contact-btn{width:100%!important;flex:1} .explore-item .contact-btn{height:auto;padding:.375rem .75rem;flex-shrink:1!important} .explore-item .play-button-overlay{font-size:2.5rem} .explore-item .portfolio-content{padding:1rem!important;min-height:0!important;overflow:visible!important} .explore-item .portfolio-title{font-size:1.1rem;min-height:1.35em;max-height:none;line-height:1.35} .explore-item .listing-description{font-size:.85rem!important;min-height:1.4em;max-height:none;line-height:1.4} .explore-item .category-badge{font-size:.7rem;padding:4px 8px} .explore-item .creator-info{margin-bottom:.75rem;padding-bottom:.75rem} .explore-item .creator-name{font-size:.85rem} } @media (max-width:576px){ .explore-item .play-button-overlay{font-size:2rem} .explore-item .portfolio-content{padding:.75rem!important;min-height:0!important;overflow:visible!important} .explore-item .portfolio-title{font-size:1rem;min-height:1.3em;max-height:none;line-height:1.35} .explore-item .listing-description{font-size:.8rem!important;min-height:1.35em;max-height:none;line-height:1.4} .explore-item .portfolio-actions .btn{font-size:.75rem;padding:.25rem .5rem} .explore-item .portfolio-actions .btn,.explore-item .contact-btn{width:100%!important;flex:1} .explore-item .contact-btn{flex-shrink:1!important} .explore-item .creator-avatar,.explore-item .creator-avatar-placeholder{width:28px;height:28px} }