/**
 * ============================================================================
 * NAME:
 * mma-hand-picked-galleries.css
 *
 * PATH:
 * /wp-content/mu-plugins/hand-picked-products-for-galleries/mma-hand-picked-galleries.css
 *
 * DATE:
 * 2026-06-27
 *
 * TIME:
 * 16:55 EDT
 *
 * VERSION:
 * 1.3.0
 *
 * AUTHOR:
 * Senior Dev Engineer (Grok)
 *
 * PURPOSE:
 * ----------------------------------------------------------------------------
 * Base stylesheet for all hand-picked galleries.
 *
 * This file contains the shared "neighbourhood rules" that apply to every
 * hand-picked gallery:
 * - Responsive grid (max 4 columns on desktop, 3 on large tablets, 2 on mobile)
 * - Thin white border and rounded corners using design tokens
 * - Clean hover states and image display
 * - Transparent background
 *
 * Individual galleries can extend this styling by using their own class
 * (e.g. mma-gallery--promotions) to add unique visual elements such as
 * corner icons.
 * ============================================================================
 */

/* Base gallery container */
.mma-hand-picked-gallery {
    display: grid;
    gap: 2px;                    /* Reduced from 12px to 2px between images */
    background: transparent;
    position: relative;          /* Required for ::before positioning */
    margin-left: 2px;            /* Added: 2px margin on left */
    margin-right: 2px;           /* Added: 2px margin on right */
}

/* Gallery item styling */
.mma-gallery-item {
    overflow: hidden;
    border: var(--mma-border-width-thin, 1px) solid #ffffff;
    border-radius: var(--mma-radius-sm, 4px);
    background: transparent;
}

.mma-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   RESPONSIVE BEHAVIOR
   Uses values aligned with mma-custom-breakpoints-for-all-devices.php
   ============================================ */

/* Mobile + Small Tablet: 2 columns */
.mma-hand-picked-gallery {
    grid-template-columns: repeat(2, 1fr);
}

/* Large Tablet: 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .mma-hand-picked-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop and larger: maximum 4 columns */
@media (min-width: 1024px) {
    .mma-hand-picked-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   PROMOTIONS GALLERY - Loudspeaker icon
   Top-left corner decoration on each product
   ============================================ */
.mma-hand-picked-gallery.mma-gallery--promotions .mma-gallery-item {
    position: relative; /* Required for absolute positioning */
}

.mma-hand-picked-gallery.mma-gallery--promotions .mma-gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;

    /* Responsive sizing:
       - Small on mobile (~32-40px)
       - Grows on larger screens
       - Maximum 80px on desktop
    */
    width: clamp(32px, 14vw, 80px);
    height: clamp(32px, 14vw, 80px);

    background-image: url('https://MMA-images.b-cdn.net/website/gallery-icons/gallery-icon-promotions-64px.webp');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    pointer-events: none; /* Allows clicks to pass through to the image */
}

/* ============================================
   CATEGORY OVERLAY (appears on hover)
   - Centered text
   - White font with dark gradient underlay
   - Only visible on hover
   ============================================ */
.mma-category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    color: #ffffff;
    font-size: 1rem;     /* Increased from 0.85rem */
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 5;
}

/* Show overlay only on hover */
.mma-gallery-item:hover .mma-category-overlay {
    opacity: 1;
}

/* ============================================================================
   CUSTOM PRODUCT SLIDER - HEADING & ARROWS
   ============================================================================ */
.mma-slider-heading {
    font-family: var(--mma-font-primary);
    font-size: var(--mma-font-size-heading);
    font-weight: var(--mma-font-weight-bold);
    color: var(--mma-color-specialty-dark-font, #1A223D);
    text-align: center;
    margin-bottom: 16px;
}

/* Style Swiper arrows to match brand */
.mma-custom-slider .swiper-button-prev,
.mma-custom-slider .swiper-button-next {
    color: var(--mma-color-specialty-dark-font, #1A223D) !important;
}

/* Ensure 2px gap and margins on custom sliders */
.mma-custom-slider {
    margin-left: 2px;
    margin-right: 2px;
}

.mma-custom-slider .swiper-slide {
    margin-right: 2px;
}

/* ============================================================================
   HOMEPAGE GALLERY HEADINGS
   ============================================================================
   This class is used for all custom-coded gallery headings (grids + sliders).
   It uses the single token --mma-font-size-heading so you only need to change
   one place to adjust all gallery heading sizes.
   ============================================================================ */
.homepage-h3-headings {
    font-family: var(--mma-font-primary);
    font-size: var(--mma-font-size-heading);
    font-weight: var(--mma-font-weight-bold);
    color: var(--mma-color-specialty-dark-font, #1A223D);
    text-align: center;
    margin-bottom: 20px;
}