/* Homepage Explore section — loaded in to prevent FOUC */ .explore-options { display: flex; gap: 1.5rem; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 2rem; margin-top: 2rem; align-items: stretch; } .explore-option-btn { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex: 1; min-width: 0; max-width: none; height: 80px; background: #fff; border: 2px solid #eee; border-radius: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 1rem 1.5rem; transition: border 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s; cursor: pointer; position: relative; overflow: hidden; outline: none; } .explore-option-btn:focus { outline: none; } .explore-option-btn:focus-visible { outline: 2px solid rgba(255, 60, 60, 0.45); outline-offset: 2px; } .explore-option-btn:hover:not(.active) { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(255,60,60,0.1); } .explore-option-btn.active { background: rgba(255,60,60,0.08); border-color: rgba(255,60,60,0.25); box-shadow: 0 4px 16px rgba(255,60,60,0.12); } .explore-option-btn.active .explore-icon { color: #ff3c3c; } .explore-option-btn.active .explore-title { color: #222; } .explore-option-btn.active .explore-desc { color: #666; } .explore-option-btn .explore-icon { font-size: 1.8rem; color: #ff3c3c; margin-right: 1rem; transition: color 0.2s; flex-shrink: 0; background: rgba(255,60,60,0.12); border-radius: 12px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; } .explore-option-btn .explore-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; flex: 1; overflow: hidden; } .explore-option-btn .explore-title { font-weight: 600; font-size: 1.1rem; color: #222; transition: color 0.2s; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.1; word-break: keep-all; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .explore-option-btn .explore-desc { font-size: 0.9rem; color: #888; transition: color 0.2s; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.1; word-break: keep-all; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } @media (max-width: 767.98px) { .explore-options { flex-direction: column; gap: 1rem; } .explore-option-btn { width: 100%; min-width: 0; max-width: none; height: 70px; border-radius: 14px; padding: 0.75rem 1rem; } /* Ensure hero content fits within header on mobile */ .cinegrid-hero-content { padding: 0 1rem; } .cinegrid-hero-content h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 2rem; /* increased gap to search bar on mobile */ } .cinegrid-hero-content .lead { font-size: 1rem; line-height: 1.4; margin-bottom: 1.5rem; } .cinegrid-hero-content .btn { font-size: 0.9rem; padding: 0.5rem 1rem; margin-bottom: 0.5rem; } } /* Tablet view - responsive font sizing */ @media (min-width: 768px) and (max-width: 991px) { .explore-options { flex-wrap: nowrap; gap: 0.75rem; justify-content: space-between; } .explore-option-btn { flex: 1; min-width: 0; max-width: none; height: 80px; border-radius: 14px; padding: 0.7rem 0.8rem; overflow: hidden; } /* Dynamic font sizing based on screen width */ .explore-option-btn .explore-title { font-size: clamp(0.7rem, 2.5vw, 0.9rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; margin-bottom: 0.15rem; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .explore-option-btn .explore-desc { font-size: clamp(0.6rem, 2.2vw, 0.8rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; margin: 0; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .explore-option-btn .explore-icon { font-size: clamp(1.2rem, 3.5vw, 1.4rem); margin-right: 0.6rem; width: clamp(32px, 8vw, 36px); height: clamp(32px, 8vw, 36px); } .explore-option-btn .explore-content { min-width: 0; flex: 1; overflow: hidden; justify-content: center; } } /* Medium tablet view - more aggressive sizing */ @media (min-width: 768px) and (max-width: 850px) { .explore-options { gap: 0.5rem; } .explore-option-btn { height: 75px; padding: 0.6rem 0.6rem; } .explore-option-btn .explore-title { font-size: clamp(0.65rem, 2.2vw, 0.8rem); line-height: 1.2; margin-bottom: 0.1rem; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .explore-option-btn .explore-desc { font-size: clamp(0.55rem, 2vw, 0.7rem); line-height: 1.2; margin: 0; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .explore-option-btn .explore-icon { font-size: clamp(1.1rem, 3.2vw, 1.3rem); width: clamp(30px, 7.5vw, 34px); height: clamp(30px, 7.5vw, 34px); } } /* Small tablet view - most aggressive sizing */ @media (min-width: 768px) and (max-width: 800px) { .explore-options { gap: 0.4rem; } .explore-option-btn { height: 70px; padding: 0.5rem 0.5rem; } .explore-option-btn .explore-title { font-size: clamp(0.6rem, 2vw, 0.75rem); line-height: 1.2; margin-bottom: 0.1rem; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .explore-option-btn .explore-desc { font-size: clamp(0.5rem, 1.8vw, 0.65rem); line-height: 1.2; margin: 0; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .explore-option-btn .explore-icon { font-size: clamp(1rem, 3vw, 1.2rem); width: clamp(28px, 7vw, 32px); height: clamp(28px, 7vw, 32px); } } @media (min-width: 992px) { .explore-section-center { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 45vh; } .explore-options { justify-content: center; gap: 1.5rem; margin-left: 0; margin-right: 0; max-width: none; width: 100%; flex-wrap: nowrap; } .explore-option-btn { align-items: center; text-align: left; } } /* Global styles for explore sections */ .explore-section-container { position: relative; margin: 0 -15px; padding: 0 60px; /* Add padding to make room for arrows */ } .explore-scroll-container { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ scroll-behavior: auto; -webkit-overflow-scrolling: touch; padding: 0 15px; } .explore-scroll-container.explore-auto-scrolling { scroll-behavior: auto; } .explore-scroll-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .explore-scroll-content { display: flex; gap: 1rem; min-width: max-content; } .explore-item { flex: 0 0 280px; max-width: 280px; } /* Make explore items smaller on tablet to show 2 cards */ @media (max-width: 768px) { .explore-item { flex: 0 0 180px; max-width: 180px; } } @media (max-width: 576px) { .explore-item { flex: 0 0 150px; max-width: 150px; } } /* Extra small mobile devices */ @media (max-width: 480px) { .explore-item { flex: 0 0 140px; max-width: 140px; } } #explore-tabs .explore-option-btn, #explore-tabs .explore-card { outline: none !important; } #explore-tabs .explore-option-btn:focus, #explore-tabs .explore-card:focus { outline: none !important; } .explore-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.95); border: 1px solid #dee2e6; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .explore-nav-btn:hover { background: rgba(255, 255, 255, 1); box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-50%) scale(1.05); } .explore-nav-left { left: 5px; } .explore-nav-right { right: 5px; } .explore-nav-btn i { color: #6c757d; font-size: 16px; } .explore-nav-btn:hover i { color: #495057; } #explore-content .listing-card > .explore-thumb-placeholder, .explore-items .listing-card > .explore-thumb-placeholder, .explore-item .listing-card > .explore-thumb-placeholder{ position:absolute; top:0; left:0; right:0; width:100%; height:140px; z-index:0; margin:0; border-radius:8px 8px 0 0; overflow:hidden; pointer-events:none; } #explore-content .listing-card:has(.listing-image) > .explore-thumb-placeholder, #explore-content .listing-card:has(> picture) > .explore-thumb-placeholder, .explore-items .listing-card:has(.listing-image) > .explore-thumb-placeholder, .explore-items .listing-card:has(> picture) > .explore-thumb-placeholder, .explore-item .listing-card:has(.listing-image) > .explore-thumb-placeholder, .explore-item .listing-card:has(> picture) > .explore-thumb-placeholder{ display:none !important; } .explore-item .listing-card, .explore-items .listing-card{ position:relative; } /* Desktop only: hide mobile tap overlay */ @media (min-width: 769px) { .explore-mobile-card-hitarea { display: none !important; pointer-events: none !important; } } #explore-content .listing-card > img.listing-image,#explore-content .listing-card > picture{z-index:1;position:relative;font-size:0!important;color:transparent!important} #explore-content .listing-card > picture .listing-image{font-size:0!important;color:transparent!important} #explore-content .explore-item .listing-card .btn, #explore-content .explore-item .listing-card .btn-primary, #explore-content .explore-item .listing-card .cart-btn, #explore-content .explore-item .listing-card .btn-outline-primary, #explore-content .explore-item .listing-card .btn-outline-danger, #explore-content .explore-item .listing-card .btn-outline-secondary, #explore-content .explore-rentals .btn, #explore-content .explore-buysell .btn { border-radius: 8px !important; min-height: 44px !important; height: 44px !important; max-height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; font-size: 0.8rem !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-sizing: border-box !important; } #explore-content .explore-rentals .explore-item .cart-btn, #explore-content .explore-buysell .explore-item .cart-btn, #explore-content .explore-item .listing-card .cart-btn { width: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; padding: 0 !important; } #explore-content .explore-rentals .listing-title, #explore-content .explore-rentals .explore-item .listing-card .listing-title, #explore-content .explore-buysell .listing-title, #explore-content .explore-buysell .explore-item .listing-card .listing-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; -webkit-box-orient: unset !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; max-height: none !important; } #explore-content .explore-item .listing-card .listing-image, #explore-content .explore-item img.listing-image[src*="uploads/"] { width: 100% !important; max-width: 100% !important; height: 140px !important; max-height: 140px !important; min-height: 140px !important; aspect-ratio: unset !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0 !important; border-radius: 8px 8px 0 0; background: #fff !important; } @media (max-width: 768px) { /* Hide navigation arrows on Explore sections */ .explore-section-container .explore-nav-btn, .explore-section-container .arrow, .explore-section-container .nav-arrow, .explore-section-container .carousel-arrow, .explore-section-container .slick-arrow, .explore-section-container .swiper-button-prev, .explore-section-container .swiper-button-next { display: none !important; } /* Center-align Explore section containers on mobile */ .explore-section-container { display: flex; justify-content: center; padding-left: 8px; padding-right: 8px; margin: 0; } /* Center and constrain Explore Rentals container */ .explore-rentals, .explore-section-container.explore-rentals { position: relative; width: 100%; max-width: 360px; margin: 0 auto; } /* Reduce side margins on rental cards */ .explore-rentals .listing-card, .explore-rentals .card, .explore-rentals .rental-card { margin-left: auto; margin-right: auto; } .explore-item { flex: 0 0 180px; max-width: 180px; } /* Mobile-only collapsible behavior for Explore sections */ /* Break grid/flex constraints - reset layout inheritance */ .explore-items { display: none; width: 100% !important; max-width: 100% !important; clear: both !important; position: relative !important; margin: 12px 0 !important; margin-top: 12px !important; margin-bottom: 0 !important; flex: unset !important; flex-basis: unset !important; grid-column: unset !important; order: unset !important; inset: auto !important; } /* Class-based state: show items when they have .is-open class */ .explore-items.is-open { display: block !important; width: calc(100% + 32px) !important; max-width: calc(100% + 32px) !important; margin-left: -16px !important; margin-right: -16px !important; } /* Break grid/flex constraints on all children except carousel tiles */ .explore-items *:not(.explore-item):not(.explore-scroll-content):not(.explore-scroll-container):not(.explore-section-container) { max-width: 100% !important; } .explore-items .explore-scroll-content .explore-item { flex: 0 0 180px !important; max-width: 180px !important; width: 180px !important; min-width: 180px !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* Scale down Explore item cards by 20% on mobile */ .explore-items.is-open .explore-section-container, .explore-items.is-open .explore-rentals, .explore-items.is-open .explore-buysell, .explore-items.is-open .explore-section-container .card, .explore-items.is-open .explore-section-container .rental-card, .explore-items.is-open .explore-section-container .listing-card, .explore-items.is-open .explore-section-container .portfolio-card, .explore-items.is-open .explore-section-container .location-card { transform: scale(1); transform-origin: top center; } /* Reduce gaps between Explore items on mobile */ .explore-items.is-open .explore-scroll-content { gap: 2px !important; } .explore-option-btn, .explore-card { cursor: pointer; outline: none !important; } .explore-option-btn:focus, .explore-card:focus { outline: none !important; box-shadow: none !important; } /* Active state styling for selected card */ .explore-card.active, .explore-option-btn.active { border-color: #ff4d4f !important; background: #fff1f0 !important; } /* Mobile explore rentals/buysell: hide action buttons, tap card to open */ #explore-content .explore-rentals .listing-card > .px-3.pb-3, #explore-content .explore-buysell .listing-card > .px-3.pb-3, .explore-items .explore-rentals .listing-card > .px-3.pb-3, .explore-items .explore-buysell .listing-card > .px-3.pb-3 { display: none !important; pointer-events: none !important; } #explore-content .explore-rentals .listing-card, #explore-content .explore-buysell .listing-card, .explore-items .explore-rentals .listing-card, .explore-items .explore-buysell .listing-card, #explore-gigs .explore-item .portfolio-card, .explore-gigs .explore-item .portfolio-card, #explore-content .explore-gigs .explore-item .portfolio-card { cursor: pointer !important; position: relative !important; } /* Full-card tap target — native link, works with auto-scroll clones */ .explore-mobile-card-hitarea { display: block !important; position: absolute !important; inset: 0 !important; z-index: 6 !important; background: transparent !important; color: transparent !important; text-decoration: none !important; border: 0 !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08) !important; touch-action: manipulation !important; } #explore-content .explore-rentals .explore-item, #explore-content .explore-buysell .explore-item, .explore-items .explore-rentals .explore-item, .explore-items .explore-buysell .explore-item, #explore-gigs .explore-item, .explore-gigs .explore-item, #explore-content .explore-gigs .explore-item { cursor: pointer !important; pointer-events: auto !important; touch-action: manipulation !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08) !important; } /* Description: 2 lines max with ellipsis on mobile explore cards */ #explore-content .explore-rentals .listing-card .listing-description, #explore-content .explore-buysell .listing-card .listing-description, .explore-items .explore-rentals .listing-card .listing-description, .explore-items .explore-buysell .listing-card .listing-description { display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; line-height: 1.4 !important; max-height: none !important; flex-shrink: 0 !important; word-wrap: break-word !important; word-break: break-word !important; overflow-wrap: break-word !important; } #explore-content .explore-rentals .listing-card .listing-title, #explore-content .explore-buysell .listing-card .listing-title, .explore-items .explore-rentals .listing-card .listing-title, .explore-items .explore-buysell .listing-card .listing-title { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.35 !important; max-height: none !important; flex-shrink: 0 !important; } #explore-content .explore-rentals .listing-card .listing-price, #explore-content .explore-buysell .listing-card .listing-price, .explore-items .explore-rentals .listing-card .listing-price, .explore-items .explore-buysell .listing-card .listing-price { flex-shrink: 0 !important; } }