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

/* ── 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; }

/* ── 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; }

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

/* ── 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 ────────────
 *
 * 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>
 *
 * The previous rule only covered elements INSIDE the <a> tag.
 * These sibling selectors hide figcaption/p that sit NEXT TO igl-trigger.
 * ──
 *
 * Many themes (Kadence, Astra, OceanWP) and page builders overlay text
 * (titles, captions, category labels) directly on top of gallery thumbnail
 * images inside .wp-block-image, .wp-block-gallery figure, or custom figure
 * wrappers. This text makes clicking the image inaccurate on mobile.
 *
 * Strategy:
 *  - Hide figcaption, overlay divs, and text spans that sit INSIDE an
 *    igl-trigger link when rendered as a thumbnail.
 *  - Keep them hidden on small screens where tap targets are tightest.
 *  - GLightbox renders its own caption panel inside the modal overlay
 *    (from data-igl-caption), so no information is lost.
 *
 * Scope: only affects elements inside .igl-content-area so global page
 * text (menus, headings, sidebars) is never touched.
 * ── */

/* figcaption directly inside a trigger link */
.igl-content-area a.igl-trigger figcaption,

/* wp-block-image caption overlay */
.igl-content-area a.igl-trigger .wp-element-caption,
.igl-content-area a.igl-trigger .wp-block-image__caption,

/* Gutenberg gallery figure caption */
.igl-content-area .wp-block-gallery figure.wp-block-image a.igl-trigger figcaption,

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

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

/* figcaption / p that are SIBLINGS of igl-trigger (Gutenberg Gallery block) ──
 *
 * Targets:
 *   <a class="igl-trigger">...</a>
 *   + figcaption                        ← direct next sibling
 *
 *   <a class="igl-trigger">...</a>
 *   ~ figcaption / p / div              ← any following sibling
 *
 * Using ~ (general sibling combinator) covers cases where theme injects
 * extra elements between the <a> and the caption.
 */

/* wp-block-image: figcaption sibling */
.igl-content-area .wp-block-image a.igl-trigger ~ figcaption,
.igl-content-area .wp-block-image a.igl-trigger + figcaption,

/* wp-block-gallery nested figure: figcaption sibling */
.igl-content-area .wp-block-gallery figure a.igl-trigger ~ figcaption,
.igl-content-area .wp-block-gallery figure a.igl-trigger + figcaption,

/* Generic figure: any figcaption sibling of igl-trigger */
.igl-content-area figure a.igl-trigger ~ figcaption,
.igl-content-area figure a.igl-trigger + figcaption,

/* Theme-injected <p> or <div> text sibling of igl-trigger */
.igl-content-area figure a.igl-trigger ~ p,
.igl-content-area figure a.igl-trigger ~ .wp-element-caption,
.igl-content-area figure a.igl-trigger ~ .wp-block-image__caption {
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    transition: opacity .2s ease;
}

/* Classic Editor — TinyMCE wraps images differently.
 *
 * Structure (Classic Editor with caption):
 *   <div class="wp-caption aligncenter">
 *     <a class="igl-trigger"><img /></a>
 *     <p class="wp-caption-text">ข้อความ</p>   ← sibling inside .wp-caption
 *   </div>
 *
 * Structure (Classic Editor, no caption shortcode):
 *   <a class="igl-trigger"><img /></a>
 *   <em>ข้อความใต้รูป</em>                     ← sibling at content level
 */
.igl-content-area .wp-caption a.igl-trigger ~ .wp-caption-text,
.igl-content-area .wp-caption a.igl-trigger + .wp-caption-text,
.igl-content-area .wp-caption a.igl-trigger ~ p,

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

/* 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 */
.igl-content-area a.igl-trigger img {
    cursor: zoom-in;
    display: block;
    width: 100%;
}