/* Gallery Hover Effects */
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1 !important;
}

/* Lightbox Animation */
#lightbox-modal {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#lightbox-modal img {
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Mobile Gallery */
@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .gallery-item img {
        height: 150px !important;
    }
    
    #lightbox-modal {
        padding: 10px !important;
    }
    
    #lightbox-modal button {
        top: 10px !important;
        right: 10px !important;
        font-size: 2rem !important;
    }
}

/* Additional styles from single-plants.php */
/* ======================================
   Responsive CSS for Mobile Devices
   ====================================== */

/* Tablet and below (768px) */
@media (max-width: 768px) {
    /* Plant Header - Stack image and info vertically */
    .plant-header .container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .plant-header h1 {
        font-size: 2rem !important;
    }
    
    .plant-header .plant-main-image {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* ⭐ Quick Info - 2 columns on mobile (768px and below) ⭐ */
    .plant-quick-info .quick-info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Main Content - Single column */
    section[style*="padding: 60px 0"] > .container > div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Reduce padding on sections */
    section[style*="padding: 60px"] {
        padding: 40px 0 !important;
    }
    
    section[style*="padding: 80px"] {
        padding: 50px 0 !important;
    }
    
    /* Content boxes padding */
    section div[style*="padding: 40px"] {
        padding: 25px !important;
    }
    
    /* Action buttons - stack vertically on very small screens */
    .action-buttons {
        flex-direction: column !important;
    }
    
    .action-buttons a,
    .action-buttons button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {
    /* Plant Header */
    .plant-header {
        padding: 30px 0 !important;
    }
    
    .plant-header h1 {
        font-size: 1.5rem !important;
    }
    
    .plant-header p[style*="font-size: 1.3rem"] {
        font-size: 1rem !important;
    }
    
    .plant-header p[style*="font-size: 1.1rem"],
    .plant-header p[style*="font-size: 1rem"] {
        font-size: 0.9rem !important;
    }
    
    /* ⭐ Quick Info - Keep 2 columns even on small mobile! ⭐ */
    .plant-quick-info .quick-info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Reduce icon sizes */
    .plant-quick-info div[style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
    }
    
    /* Tags and badges - better wrapping */
    div[style*="display: flex; gap: 20px; flex-wrap: wrap"] {
        gap: 10px !important;
    }
    
    div[style*="display: flex; gap: 20px; flex-wrap: wrap"] span {
        font-size: 0.85rem !important;
        padding: 8px 15px !important;
    }
    
    /* Content padding */
    section div[style*="padding: 25px"],
    section div[style*="padding: 40px"] {
        padding: 20px !important;
    }
    
    /* Font sizes */
    h2 {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    h4 {
        font-size: 1rem !important;
    }
    
    /* Related plants grid */
    section div[style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Reduce container padding on mobile */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Extra small devices (360px and below) */
@media (max-width: 360px) {
    .plant-header h1 {
        font-size: 1.3rem !important;
    }
    
    .plant-header p {
        font-size: 0.85rem !important;
    }
    
    section[style*="padding"] {
        padding: 30px 0 !important;
    }
    
    h2 {
        font-size: 1.2rem !important;
    }
}

/* ======================================
   Additional Mobile Improvements
   ====================================== */

/* Ensure images don't overflow */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto !important;
    }
    
    /* Better touch targets for buttons */
    button,
    a[style*="padding"] {
        min-height: 44px;
        padding: 12px 20px !important;
    }
    
    /* Improve readability */
    p,
    li,
    div[style*="line-height"] {
        line-height: 1.6 !important;
    }
    
    /* Sidebar on mobile */
    aside,
    .sidebar,
    div[style*="position: sticky"] {
        position: static !important;
    }
}

/* Landscape mobile (small height) */
@media (max-width: 768px) and (max-height: 500px) {
    .plant-header {
        padding: 20px 0 !important;
    }
    
    section[style*="padding"] {
        padding: 30px 0 !important;
    }
}