/* Explore explore_locations fragment — loaded in via critical_css.php */ /* Location card styles matching locations.php - Fixed 300px × 400px like gigs */ .explore-item.location-item, .location-item { width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 400px !important; min-height: 400px !important; max-height: 400px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; flex: 0 0 300px !important; } .location-item .location-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; max-width: 100% !important; min-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; flex: 1 1 100% !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; border: none !important; } .location-item .location-card:hover { transform: translateY(-5px) !important; box-shadow: 0 8px 25px rgba(0,0,0,.15) !important; } .location-item .location-image-container { position: relative !important; width: 300px !important; height: 150px !important; max-height: 150px !important; overflow: hidden !important; border-radius: 15px 15px 0 0 !important; flex-shrink: 0 !important; background: #000 !important; margin: 0 !important; padding: 0 !important; border: none !important; display: block !important; } .location-item .location-image-container .explore-thumb-placeholder { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 0 !important; } .location-item .location-image-container > img.location-image { position: absolute !important; top: 0 !important; left: 0 !important; z-index: 1 !important; font-size: 0 !important; color: transparent !important; } .location-item .location-image { position: relative !important; width: 300px !important; height: 150px !important; max-height: 150px !important; object-fit: cover !important; transition: transform .3s ease !important; margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; display: block !important; } .location-item .location-card:hover .location-image { transform: scale(1.05) !important; } .location-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; } .location-item .badge-360 { position: absolute; top: 15px; right: 15px; background: rgba(255, 255, 255, 0.9); color: #333; padding: 6px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; z-index: 4; display: flex; align-items: center; gap: 5px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; } .location-item .badge-360:hover { background: rgba(255, 255, 255, 0.95); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .location-item .badge-360 i { font-size: 0.7rem; color: #333; animation: rotate360 3s linear infinite; } @keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .location-item .badge-360 span { font-size: 0.75rem; letter-spacing: 0.5px; } .location-item .location-content { padding: 1.5rem !important; display: flex; flex-direction: column; flex: 1 1 auto; text-align: left !important; align-items: flex-start !important; } .location-item .location-title, .location-item .listing-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .location-item .location-title { font-size: 1.2rem; font-weight: 600; color: #333; margin-bottom: .75rem; line-height: 1.4; min-height: 1.2em; max-height: 1.2em; text-align: left !important; width: 100%; } .location-item .listing-description { color: #666 !important; font-size: .9rem !important; line-height: 1.5 !important; margin-bottom: 1rem !important; min-height: 1.2em; max-height: 2.7em; text-align: left !important; width: 100%; } /* AlocaSpace explore cards: three-line description + ellipsis */ .location-item .listing-description.listing-description--aloca-three-lines { -webkit-line-clamp: 3 !important; max-height: 4.05em !important; min-height: 1.2em !important; margin-bottom: 1rem !important; } .location-item .location-info { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; flex-shrink: 0; text-align: left !important; width: 100%; } .location-item .location-info .d-flex { justify-content: flex-start !important; } .location-item .location-info-row { min-width: 0; } .location-item .location-line-primary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .location-item .location-actions { margin-top: auto; display: flex; gap: .5rem; width: 100%; } .location-item .location-actions .btn { font-size: .8rem; padding: .375rem .75rem; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; } .location-item .location-actions .btn-primary { flex: 1; } @media (max-width: 768px) { .location-item .location-content { padding: 1rem !important; } .location-item .location-title { font-size: 1.1rem; min-height: 1.1em; max-height: 1.1em; line-height: 1.4; } .location-item .listing-description { font-size: .85rem !important; min-height: 1.2em; max-height: 2.55em; line-height: 1.5; } .location-item .listing-description.listing-description--aloca-three-lines { -webkit-line-clamp: 3 !important; max-height: 3.825em !important; min-height: 1.2em !important; } .location-item .category-badge { font-size: .7rem; padding: 4px 8px; } .location-item .badge-360 { top: 10px; right: 10px; padding: 5px 8px; font-size: 0.7rem; } .location-item .badge-360 i { font-size: 0.65rem; } .location-item .badge-360 span { font-size: 0.7rem; } .location-item .location-info { margin-bottom: .75rem; padding-bottom: .75rem; } } @media (max-width: 576px) { /* Override fixed 300px width for mobile - display 2 per row like other products */ .home-sections .explore-item.location-item, .home-sections .location-item, .explore-item.location-item, .location-item { width: calc((100% - 6px) / 2) !important; max-width: calc((100% - 6px) / 2) !important; min-width: 0 !important; aspect-ratio: 3 / 4 !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 calc((100% - 6px) / 2) !important; } /* Location card: fill container */ .home-sections .location-item .location-card, .home-sections .location-item .location-card.h-100, .location-item .location-card, .location-item .location-card.h-100 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; } /* Location image container: responsive */ .home-sections .location-item .location-image-container, .location-item .location-image-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; aspect-ratio: 2 / 1 !important; } /* Location image: responsive */ .home-sections .location-item .location-image, .location-item .location-image { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; object-fit: cover !important; } .location-item .location-content { padding: .75rem !important; } .location-item .location-title { font-size: 1rem; min-height: 1em; max-height: 1em; line-height: 1.4; } .location-item .listing-description { font-size: .8rem !important; min-height: 1.2em; max-height: 2.4em; line-height: 1.5; } .location-item .listing-description.listing-description--aloca-three-lines { -webkit-line-clamp: 3 !important; max-height: 3.6em !important; min-height: 1.2em !important; } .location-item .location-actions .btn { font-size: .75rem; padding: .25rem .5rem; } .location-item .badge-360 { top: 8px; right: 8px; padding: 4px 7px; font-size: 0.65rem; } .location-item .badge-360 i { font-size: 0.6rem; } .location-item .badge-360 span { font-size: 0.65rem; } } /* Location-specific styles */ .location-card { background: white; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; padding: 1.5rem; } .location-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } .location-header { text-align: center; margin-bottom: 1.5rem; } .location-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: white; font-size: 1.5rem; } .location-name { font-size: 1.2rem; font-weight: 600; color: #333; margin: 0; } .location-stats { display: flex; justify-content: space-between; margin-bottom: 1.5rem; gap: 0.5rem; } .stat-item { text-align: center; flex: 1; } .stat-number { font-size: 1.5rem; font-weight: 700; color: #007bff; line-height: 1; } .stat-label { font-size: 0.75rem; color: #666; margin-top: 0.25rem; } .location-actions { margin-top: auto; } @media (max-width: 768px) { .location-card { padding: 1.25rem; } .location-icon { width: 50px; height: 50px; font-size: 1.25rem; } .location-name { font-size: 1.1rem; } .stat-number { font-size: 1.25rem; } } @media (max-width: 576px) { .location-card { padding: 1rem; } .location-icon { width: 45px; height: 45px; font-size: 1.1rem; } .location-name { font-size: 1rem; } .stat-number { font-size: 1.1rem; } .stat-label { font-size: 0.7rem; } } .explore-item img[src*="uploads/"]:not(.profile-image):not(.avatar-image):not(.header-bg-image):not(.listing-avatar):not(.creator-avatar), .explore-item img[src*="youtube.com"]:not(.profile-image):not(.avatar-image):not(.header-bg-image):not(.listing-avatar):not(.creator-avatar), .explore-item img[src*="img.youtube.com"]:not(.profile-image):not(.avatar-image):not(.header-bg-image):not(.listing-avatar):not(.creator-avatar) { max-height: 150px !important; height: 150px !important; width: 300px !important; }