/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 29 Aug 2026, 8:17 pm
*/

/* ============================================================
   HADDAD FILLPACK
   PREMIUM FOO GALLERY SYSTEM
   Production CSS — Responsive / Lightweight / Touch Friendly
   ============================================================ */


/* ============================================================
   01 — DESIGN TOKENS
   ============================================================ */

.foogallery,
.fg-gallery {

    --hf-bg: #f4f7f3;
    --hf-card: #ffffff;

    --hf-sage-50: #f3f6f2;
    --hf-sage-100: #e8eee9;
    --hf-sage-200: #d7e1d9;
    --hf-sage-500: #66806d;
    --hf-sage-600: #536d5a;
    --hf-sage-700: #3f5747;

    --hf-text: #27372d;
    --hf-text-soft: #65736a;

    --hf-border: rgba(63, 87, 71, .13);
    --hf-border-hover: rgba(83, 109, 90, .32);

    --hf-radius: 16px;

    --hf-shadow:
        0 2px 7px rgba(28, 43, 33, .045),
        0 8px 24px rgba(28, 43, 33, .055);

    --hf-shadow-hover:
        0 5px 14px rgba(28, 43, 33, .07),
        0 18px 42px rgba(28, 43, 33, .105);

    --hf-transition:
        transform .42s cubic-bezier(.2,.65,.25,1),
        box-shadow .42s ease,
        border-color .35s ease,
        background-color .35s ease;
}


/* ============================================================
   02 — MAIN GALLERY
   ============================================================ */

.foogallery,
.fg-gallery {

    width: 100% !important;
    max-width: 1440px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 14px !important;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            rgba(243,246,242,.72),
            rgba(255,255,255,.30)
        );

    border-radius: 22px;

    overflow: visible;
}


/* Prevent accidental overflow */

.foogallery *,
.fg-gallery * {
    box-sizing: border-box;
}


/* ============================================================
   03 — GALLERY ITEMS / CARDS
   ============================================================ */

.foogallery .fg-item,
.fg-gallery .fg-item {

    position: relative;

    overflow: hidden;

    background: var(--hf-card);

    border: 1px solid var(--hf-border);

    border-radius: var(--hf-radius);

    box-shadow: var(--hf-shadow);

    isolation: isolate;

    transition: var(--hf-transition);

    transform: translateZ(0);

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* ============================================================
   04 — IMAGE AREA
   ============================================================ */

.foogallery .fg-thumb,
.fg-gallery .fg-thumb {

    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f1f4f1,
            #e8ede9
        );
}


/* Image itself */

.foogallery .fg-item img,
.fg-gallery .fg-item img,
.foogallery .fg-image,
.fg-gallery .fg-image {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    outline: 0 !important;

    object-fit: cover;

    transform: scale(1.001);

    transition:
        transform .65s cubic-bezier(.2,.65,.25,1),
        filter .45s ease;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* ============================================================
   05 — IMAGE TOP SHINE
   ============================================================ */

.foogallery .fg-thumb::before,
.fg-gallery .fg-thumb::before {

    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            transparent 35%,
            transparent 75%,
            rgba(63,87,71,.05)
        );

    opacity: .55;

    transition: opacity .4s ease;
}


/* ============================================================
   06 — BOTTOM IMAGE GRADIENT
   ============================================================ */

.foogallery .fg-thumb::after,
.fg-gallery .fg-thumb::after {

    content: "";

    position: absolute;

    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(24,39,29,.075)
        );

    opacity: 0;

    transition: opacity .4s ease;
}


/* ============================================================
   07 — HOVER
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    .foogallery .fg-item:hover,
    .fg-gallery .fg-item:hover {

        transform: translateY(-5px);

        border-color: var(--hf-border-hover);

        box-shadow: var(--hf-shadow-hover);

        z-index: 4;
    }


    .foogallery .fg-item:hover img,
    .fg-gallery .fg-item:hover img {

        transform: scale(1.045);

        filter:
            brightness(1.025)
            saturate(1.025);
    }


    .foogallery .fg-item:hover .fg-thumb::before,
    .fg-gallery .fg-item:hover .fg-thumb::before {

        opacity: .85;
    }


    .foogallery .fg-item:hover .fg-thumb::after,
    .fg-gallery .fg-item:hover .fg-thumb::after {

        opacity: 1;
    }
}


/* ============================================================
   08 — ACTIVE / TOUCH
   ============================================================ */

.foogallery .fg-item:active,
.fg-gallery .fg-item:active {

    transform: scale(.988);

    transition: transform .12s ease;
}


/* ============================================================
   09 — CAPTIONS
   ============================================================ */

.foogallery .fg-caption,
.fg-gallery .fg-caption {

    position: relative;

    z-index: 5;

    display: block;

    width: 100%;

    margin: 0 !important;

    padding: 11px 13px 12px !important;

    background:
        rgba(255,255,255,.97);

    border-top: 1px solid rgba(63,87,71,.08);

    color: var(--hf-text);

    font-size: 13px;

    line-height: 1.55;

    font-weight: 600;

    letter-spacing: -.01em;

    text-align: center;

    text-rendering: optimizeLegibility;
}


/* Caption links */

.foogallery .fg-caption a,
.fg-gallery .fg-caption a {

    color: var(--hf-sage-700);

    text-decoration: none;

    transition: color .25s ease;
}


.foogallery .fg-caption a:hover,
.fg-gallery .fg-caption a:hover {

    color: var(--hf-sage-500);

}


/* ============================================================
   10 — TITLE / DESCRIPTION
   ============================================================ */

.foogallery .fg-caption-title,
.fg-gallery .fg-caption-title {

    color: var(--hf-text);

    font-weight: 700;

    line-height: 1.45;
}


.foogallery .fg-caption-desc,
.fg-gallery .fg-caption-desc {

    margin-top: 3px;

    color: var(--hf-text-soft);

    font-size: 11.5px;

    font-weight: 400;

    line-height: 1.5;
}


/* ============================================================
   11 — REMOVE UNWANTED DEFAULT ELEMENTS
   ============================================================ */

.foogallery .fg-loading,
.fg-gallery .fg-loading {

    background: transparent !important;
}


.foogallery .fg-item a,
.fg-gallery .fg-item a {

    text-decoration: none !important;

    outline: none !important;
}


/* ============================================================
   12 — FOCUS ACCESSIBILITY
   ============================================================ */

.foogallery .fg-item a:focus-visible,
.fg-gallery .fg-item a:focus-visible {

    outline: 3px solid rgba(83,109,90,.38);

    outline-offset: 3px;

    border-radius: var(--hf-radius);
}


/* ============================================================
   13 — MASONRY / GRID SPACING
   ============================================================ */

.foogallery .fg-item,
.fg-gallery .fg-item {

    margin-bottom: 18px;
}


/* ============================================================
   14 — MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .foogallery,
    .fg-gallery {

        width: 100% !important;

        padding: 7px !important;

        border-radius: 14px;
    }


    .foogallery .fg-item,
    .fg-gallery .fg-item {

        border-radius: 11px;

        margin-bottom: 10px;

        box-shadow:
            0 2px 8px rgba(28,43,33,.055);
    }


    .foogallery .fg-item img,
    .fg-gallery .fg-item img {

        transform: none;

        transition:
            transform .35s ease;
    }


    .foogallery .fg-caption,
    .fg-gallery .fg-caption {

        padding: 8px 7px 9px !important;

        font-size: 10.5px;

        line-height: 1.4;
    }


    .foogallery .fg-caption-desc,
    .fg-gallery .fg-caption-desc {

        font-size: 10px;
    }
}


/* ============================================================
   15 — SMALL PHONES
   ============================================================ */

@media (max-width: 420px) {

    .foogallery,
    .fg-gallery {

        padding: 5px !important;
    }


    .foogallery .fg-item,
    .fg-gallery .fg-item {

        border-radius: 9px;

        margin-bottom: 8px;
    }


    .foogallery .fg-caption,
    .fg-gallery .fg-caption {

        padding: 7px 5px 8px !important;

        font-size: 10px;
    }
}


/* ============================================================
   16 — TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

    .foogallery,
    .fg-gallery {

        padding: 10px !important;

        border-radius: 18px;
    }


    .foogallery .fg-item,
    .fg-gallery .fg-item {

        border-radius: 13px;

        margin-bottom: 14px;
    }


    .foogallery .fg-caption,
    .fg-gallery .fg-caption {

        padding: 9px 10px 10px !important;

        font-size: 12px;
    }
}


/* ============================================================
   17 — LARGE DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .foogallery,
    .fg-gallery {

        padding: 18px !important;

        border-radius: 24px;
    }


    .foogallery .fg-item,
    .fg-gallery .fg-item {

        border-radius: 16px;

        margin-bottom: 20px;
    }
}


/* ============================================================
   18 — VERY LARGE SCREENS
   ============================================================ */

@media (min-width: 1600px) {

    .foogallery,
    .fg-gallery {

        max-width: 1500px !important;

        padding: 22px !important;
    }


    .foogallery .fg-item,
    .fg-gallery .fg-item {

        border-radius: 18px;
    }
}


/* ============================================================
   19 — LIGHTBOX FRIENDLY
   ============================================================ */

.fg-lightbox,
.fg-lightbox-container {

    -webkit-tap-highlight-color: transparent;
}


/* Don't interfere with lightbox image */

.fg-lightbox img,
.fg-lightbox-container img {

    max-width: 100%;

    height: auto;
}


/* ============================================================
   20 — PREVENT THEME INTERFERENCE
   ============================================================ */

.foogallery img,
.fg-gallery img {

    vertical-align: middle;

    box-shadow: none;

    border-radius: 0;
}


/* ============================================================
   21 — WP / ELEMENTOR COMPATIBILITY
   ============================================================ */

.elementor .foogallery,
.elementor .fg-gallery {

    margin-left: auto !important;

    margin-right: auto !important;
}


.elementor .foogallery img,
.elementor .fg-gallery img {

    margin-bottom: 0 !important;
}


/* ============================================================
   22 — RTL SUPPORT
   ============================================================ */

html[dir="rtl"] .foogallery .fg-caption,
html[dir="rtl"] .fg-gallery .fg-caption {

    direction: rtl;

    text-align: center;
}


/* ============================================================
   23 — DARK MODE SAFETY
   ============================================================ */

@media (prefers-color-scheme: dark) {

    /*
       Intentionally subtle.
       The Haddad website remains primarily light.
    */

    .foogallery,
    .fg-gallery {

        --hf-card: #ffffff;

        --hf-text: #27372d;

        --hf-text-soft: #65736a;
    }
}


/* ============================================================
   24 — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .foogallery *,
    .fg-gallery * {

        transition: none !important;

        animation: none !important;

        scroll-behavior: auto !important;
    }
}


/* ============================================================
   25 — PERFORMANCE
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    .foogallery .fg-item,
    .fg-gallery .fg-item {

        will-change: transform;
    }
}


/* ============================================================
   26 — FINAL CLEANUP
   ============================================================ */

.foogallery,
.fg-gallery {

    font-synthesis: none;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   END — HADDAD PREMIUM GALLERY
   ============================================================ */