/* Image Gallery Lightbox – Custom Skin v1.3.0 */

/* ── Thumbnail strip ── */
#igl-thumb-strip {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999999;
    display: flex; gap: 6px; padding: 10px 16px 14px;
    overflow-x: auto; justify-content: center;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
}
#igl-thumb-strip::-webkit-scrollbar       { height: 4px; }
#igl-thumb-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 2px; }
.igl-thumb-btn {
    flex-shrink: 0; width: 68px; height: 52px;
    border: 2px solid transparent; border-radius: 4px;
    overflow: hidden; cursor: pointer; background: none; padding: 0;
    opacity: .6; transition: border-color .2s, opacity .2s, transform .15s;
}
.igl-thumb-btn img        { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.igl-thumb-btn:hover      { opacity: .88; }
.igl-thumb-btn.igl-active { border-color: #fff; opacity: 1; transform: scale(1.07); }
.igl-thumb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Buttons outside the "Max thumbnails" window around the active slide. */
.igl-thumb-btn.igl-thumb-hidden { display: none; }

/* ── Trigger icon ── */
a.igl-trigger {
    display: inline-block; cursor: zoom-in;
    position: relative; overflow: hidden;
    text-decoration: none; vertical-align: middle;
}
a.igl-trigger::after {
    content: "⤢"; position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,.55); color: #fff; font-size: 14px;
    line-height: 1; padding: 4px 6px; border-radius: 3px;
    opacity: 0; transition: opacity .2s; pointer-events: none;
}
a.igl-trigger:hover::after { opacity: 1; }

/* ── Shortcode gallery grid — [igl_gallery] ── */
.igl-shortcode-gallery {
    display: grid;
    grid-template-columns: repeat(var(--igl-columns, 3), minmax(0, 1fr));
    gap: var(--igl-gap, 10px);
}
.igl-shortcode-gallery .igl-trigger { display: block; user-select: none; }
.igl-shortcode-gallery .igl-trigger img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--igl-ratio, 4/3);
    object-fit: cover;
    display: block;
}
/* ratio="auto" keeps each image's natural proportions. */
.igl-shortcode-gallery[style*="--igl-ratio:auto"] .igl-trigger img {
    aspect-ratio: auto;
    object-fit: contain;
}
@media (max-width: 782px) {
    .igl-shortcode-gallery {
        grid-template-columns: repeat(min(var(--igl-columns, 3), 2), minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .igl-shortcode-gallery { grid-template-columns: 1fr; }
}

/* ── Elementor gallery grid ── */
.igl-elementor-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.igl-elementor-gallery .igl-trigger { display: block; user-select: none; }

/* ── Mobile ── */
@media (max-width:600px) {
    .igl-thumb-btn { width: 54px; height: 42px; }
    #igl-thumb-strip { gap: 4px; padding: 8px 10px 12px; }
}

/* ── Hide overlay text on thumbnails — show only inside lightbox ────────────
 *
 * Gated behind .igl-hide-thumb-text, which PHP adds to .igl-content-area only
 * when the "Hide caption text on page thumbnails" setting is on (the default,
 * matching v1.2.7 behaviour). Turning the setting off leaves theme captions
 * exactly as the theme rendered them.
 *
 * Gutenberg Gallery block structure:
 *
 *   <figure class="wp-block-image">
 *     <a class="igl-trigger"><img /></a>
 *     <figcaption>ข้อความ</figcaption>   ← SIBLING of <a>, not inside it
 *   </figure>
 *
 *   <figure class="wp-block-gallery">
 *     <figure>
 *       <a class="igl-trigger"><img /></a>
 *       <figcaption>ข้อความ</figcaption> ← SIBLING
 *     </figure>
 *   </figure>
 *
 * Many themes (Kadence, Astra, OceanWP) and page builders overlay text
 * (titles, captions, category labels) directly on top of gallery thumbnail
 * images. That text makes tapping the image inaccurate on mobile.
 *
 * Strategy:
 *  - Hide figcaption, overlay divs, and text spans that sit inside or next to
 *    an igl-trigger link.
 *  - GLightbox renders its own caption panel inside the modal overlay
 *    (from data-igl-caption), so no information is lost.
 *
 * Scope: only inside .igl-content-area.igl-hide-thumb-text, so global page
 * text (menus, headings, sidebars) is never touched.
 * ── */

/* Text INSIDE a trigger link ───────────────────────────────────────────── */

/* figcaption directly inside a trigger link */
.igl-hide-thumb-text a.igl-trigger figcaption,

/* wp-block-image caption overlay */
.igl-hide-thumb-text a.igl-trigger .wp-element-caption,
.igl-hide-thumb-text a.igl-trigger .wp-block-image__caption,

/* Gutenberg gallery figure caption */
.igl-hide-thumb-text .wp-block-gallery figure.wp-block-image a.igl-trigger figcaption,

/* WooCommerce product image overlay text */
.igl-hide-thumb-text a.igl-trigger .woocommerce-product-gallery__image--placeholder,
.igl-hide-thumb-text a.igl-trigger .overlay-text,
.igl-hide-thumb-text a.igl-trigger .image-overlay,
.igl-hide-thumb-text a.igl-trigger .caption-overlay,

/* Kadence / theme-generic overlay text spans inside trigger */
.igl-hide-thumb-text a.igl-trigger span:not(.screen-reader-text),
.igl-hide-thumb-text a.igl-trigger p,
.igl-hide-thumb-text a.igl-trigger .kb-gallery-text-inner,
.igl-hide-thumb-text a.igl-trigger .kt-gallery-item__caption {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease;
}

/* Text that is a SIBLING of the trigger (Gutenberg Gallery block) ──────────
 *
 *   <a class="igl-trigger">...</a>
 *   + figcaption          ← direct next sibling
 *   ~ figcaption / p      ← any following sibling, for themes that inject
 *                           extra elements between the <a> and the caption
 */

/* wp-block-image: figcaption sibling */
.igl-hide-thumb-text .wp-block-image a.igl-trigger ~ figcaption,

/* wp-block-gallery nested figure: figcaption sibling */
.igl-hide-thumb-text .wp-block-gallery figure a.igl-trigger ~ figcaption,

/* Generic figure: any figcaption sibling of igl-trigger */
.igl-hide-thumb-text figure a.igl-trigger ~ figcaption,

/* Theme-injected <p> or caption element sibling of igl-trigger */
.igl-hide-thumb-text figure a.igl-trigger ~ p,
.igl-hide-thumb-text figure a.igl-trigger ~ .wp-element-caption,
.igl-hide-thumb-text figure a.igl-trigger ~ .wp-block-image__caption,

/* Classic Editor — TinyMCE wraps images differently.
 *
 *   <div class="wp-caption aligncenter">
 *     <a class="igl-trigger"><img /></a>
 *     <p class="wp-caption-text">ข้อความ</p>   ← sibling inside .wp-caption
 *   </div>
 */
.igl-hide-thumb-text .wp-caption a.igl-trigger ~ .wp-caption-text,
.igl-hide-thumb-text .wp-caption a.igl-trigger ~ p,

/* [caption] shortcode rendered by WordPress */
.igl-hide-thumb-text .wp-caption-text {
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    transition: opacity .2s ease;
}

/* ── Trigger tap target ─────────────────────────────────────────────────── */

/* Make the whole trigger a reliable click/tap target */
.igl-content-area a.igl-trigger {
    display: block;     /* full block prevents text from intercepting clicks */
    user-select: none;  /* prevent accidental text selection on long-press */
}

/* Restore cursor so it's obvious the image is clickable.
 *
 * max-width/height:auto rather than width:100%: forcing every content image to
 * fill its container upscaled small images (a 300px logo stretched across an
 * 800px column) and overrode theme alignment classes. */
.igl-content-area a.igl-trigger img {
    cursor: zoom-in;
    display: block;
    max-width: 100%;
    height: auto;
}

/* A gallery of one has nowhere to go, so GLightbox's arrows are hidden.
 * Only reachable when "Open the lightbox on single images too" is on. */
.glightbox-container.igl-single-slide .gnext,
.glightbox-container.igl-single-slide .gprev { display: none !important; }