/* css/rentals.css - Styles specific to the rental showcase page */

/* Ensure Comfortaa font is applied if not already inherited */
body.page-rentals-visuals { /* Applied to rentals page specifically */
    font-family: 'Comfortaa', sans-serif;
}

.category-icon {
    margin-right: 0.75rem; /* Tailwind's mr-3 */
    color: #e0e7ff; /* Light violet, adjust as needed */
    font-size: 1.25em; /* Slightly larger icon */
}

.rental-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Default for larger screens */
    gap: 1.5rem; /* Tailwind's gap-6 */
}

@media (min-width: 768px) { /* md breakpoint - for desktop grid adjustments if needed */
    .rental-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .rental-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}


.rental-item {
    background-color: #4B5563; /* bg-gray-600 */
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.rental-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.rental-item-image {
    width: 100%;
    height: 340px; /* Default height for desktop */
    object-fit: cover; 
    border-bottom: 3px solid #6D28D9; /* purple-700 border */
}

.rental-item-name {
    font-weight: 600; /* font-semibold */
    color: #F3F4F6; /* text-gray-100 */
    padding: 0.75rem 1rem; 
    text-align: center;
    font-size: 1rem; /* Default font size for desktop */
    margin-top: auto; 
}

.fluid-container { 
    width: 95%;
    margin: 0 auto;
    padding-left: 1rem;  
    padding-right: 1rem; 
}

@media (min-width: 640px) { /* sm */
    .fluid-container {
        width: 90%;
        padding-left: 1.5rem; 
        padding-right: 1.5rem; 
    }
}

@media (min-width: 1024px) { /* lg */
    .fluid-container {
        width: 85%;
        max-width: 1280px; 
        padding-left: 2rem; 
        padding-right: 2rem; 
    }
}

/* --- Mobile Specific Compact Styles --- */
@media (max-width: 767px) {
    /* Reduce accordion header padding and font size on mobile for the rentals page */
    .page-rentals-visuals .card-header {
        padding-top: 0.75rem;    /* py-3 */
        padding-bottom: 0.75rem; /* py-3 */
        padding-left: 1rem;     /* px-4 */
        padding-right: 1rem;    /* px-4 */
    }
    .page-rentals-visuals .card-header h3 {
        font-size: 1.125rem; /* text-lg, was text-xl md:text-2xl */
    }
    .page-rentals-visuals .category-icon {
        font-size: 1.1em; /* Slightly smaller icon on mobile */
        margin-right: 0.5rem; /* mr-2 */
    }
    .page-rentals-visuals .accordion-icon {
        margin-left: 0.5rem; /* ml-2 */
    }

    /* Adjust grid for mobile to be more compact */
    .rental-items-grid {
        /* Allows for two columns if items are narrow enough, or a less wide single column */
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
        gap: 0.75rem; /* Reduced gap for mobile */
    }

    .rental-item-image {
        height: 180px; /* Significantly reduced image height for mobile */
    }

    .rental-item-name {
        font-size: 0.875rem; /* text-sm, smaller font for item names on mobile */
        padding: 0.5rem 0.75rem; /* Reduced padding */
    }

    /* Make main page heading smaller on mobile */
    /* This would ideally be done with responsive Tailwind classes in HTML, 
       but can be overridden here if necessary for .page-rentals-visuals */
    .page-rentals-visuals .fluid-container h2 { /* Targets the "Our Rental Collection" heading */
        font-size: 1.75rem !important; /* text-2xl equivalent, !important to override Tailwind if needed */
        /* Consider adjusting md:text-4xl lg:text-5xl in HTML directly for better practice */
    }
     .page-rentals-visuals .fluid-container .text-md { /* Targets the description paragraph */
        font-size: 0.875rem !important; /* text-sm */
    }

    /* Adjust top "View Detailed Pricing" button on mobile */
    .page-rentals-visuals .text-center > a.bg-purple-600 { /* Targets the top pricing button */
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 0.9rem;
    }
    .page-rentals-visuals .text-center > a.bg-purple-600 > .fa-dollar-sign {
        margin-right: 0.4rem;
    }

}