/* ============================================================
   Pro Gallery – Frontend  v1.2.0
   Technical Master  |  thetechnicalmaster.com
   ============================================================ */

/* TM brand tokens */
:root {
    --tm-red:      #e8201a;   /* TM category red  */
    --tm-dark:     #1a1f2e;   /* TM nav dark       */
    --tm-blue:     #0073aa;   /* WP / link blue    */
    --tm-accent:   #e8201a;   /* active highlight  */
}

/* ── Wrapper ── */
.pgal-wrap {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    margin: 1.8em 0;
    font-family: inherit;
    border: 1px solid #e2e2e2;
    box-shadow: 0 2px 14px rgba(0,0,0,.08);
}

/* ── Hero ── */
.pgal-hero {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #111;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
}

.pgal-main {
    width: 100%;
    display: block;
    max-height: 600px;
    object-fit: contain;
    transition: opacity .3s ease;
}

/* ── Caption overlay ── */
.pgal-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(26,31,46,.75));
    color: #fff;
    pointer-events: none;
}

.pgal-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
    text-shadow: 0 1px 4px rgba(0,0,0,.45);
}

.pgal-sub {
    font-size: 13px;
    opacity: .88;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* Hide caption when empty */
.pgal-caption:empty { display: none; }

/* ── Prev / Next arrows ── */
.pgal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    background: rgba(255,255,255,.16);
    border: 1.5px solid rgba(255,255,255,.38);
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .18s;
    z-index: 3;
    line-height: 1; padding: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pgal-nav:hover {
    background: rgba(232,32,26,.75);         /* TM red on hover */
    border-color: rgba(255,255,255,.55);
    transform: translateY(-50%) scale(1.08);
}
.pgal-prev { left: 12px; }
.pgal-next { right: 12px; }

/* ── Counter badge ── */
.pgal-counter {
    position: absolute;
    top: 12px; right: 14px;
    background: rgba(26,31,46,.6);
    color: #fff;
    font-size: 12px; font-weight: 600;
    padding: 3px 11px;
    border-radius: 20px;
    letter-spacing: .4px;
}

/* ── Filmstrip ── */
.pgal-strip {
    display: flex;
    gap: 6px;
    padding: 9px 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    background: #f5f5f5;
    border-top: 1px solid #e2e2e2;
    align-items: center;
}
.pgal-strip::-webkit-scrollbar { display: none; }

.pgal-thumb {
    flex: 0 0 92px;
    height: 64px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: .48;
    transition: border-color .18s, opacity .18s, transform .18s;
}
.pgal-thumb:hover {
    opacity: .82;
    transform: scale(1.05);
}
.pgal-thumb.active {
    border-color: var(--tm-red);   /* TM red active indicator */
    opacity: 1;
    transform: scale(1.05);
}
.pgal-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Lightbox ── */
.pgal-lb {
    display: none;
    position: fixed; inset: 0;
    background: rgba(26,31,46,.93);   /* TM dark bg */
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.pgal-lb.open { display: flex; }

.pgal-lb img {
    max-width: 90vw; max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

.pgal-lb-close {
    position: absolute; top: 16px; right: 20px;
    color: #fff; font-size: 34px; cursor: pointer;
    background: none; border: none; line-height: 1; padding: 6px 10px;
    opacity: .75; transition: opacity .15s;
}
.pgal-lb-close:hover { opacity: 1; }

.pgal-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff; width: 50px; height: 50px; border-radius: 50%;
    font-size: 28px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    transition: background .15s;
}
.pgal-lb-nav:hover { background: rgba(232,32,26,.7); }   /* TM red */
.pgal-lb-prev { left: 16px; }
.pgal-lb-next { right: 16px; }

.pgal-lb-cap {
    color: rgba(255,255,255,.72);
    margin-top: 14px; font-size: 13px;
    text-align: center; max-width: 640px;
    padding: 0 20px; line-height: 1.5;
}