:root{
  --ppvgd-blue:#2f86b7;
  --ppvgd-text:#26333d;
}

.ppvgd-wrap{
  width:100%;
  margin:0 auto;
  padding:10px 20px 70px;
  box-sizing:border-box;
  font-family:inherit;
}

.ppvgd-heading{
  text-align:center;
  margin-bottom:30px;
}

.ppvgd-heading h2{
  margin:0;
  color:var(--ppvgd-text);
  font-size:clamp(28px,3vw,40px);
  line-height:1.25;
  font-weight:700;
}

.ppvgd-heading span{
  display:block;
  width:52px;
  height:3px;
  background:var(--ppvgd-blue);
  margin:14px auto 0;
  border-radius:10px;
}

/* ===== MASONRY — Style เดิมของหน้า "ผลงานของเรา" ===== */

.ppvgd-masonry{
  column-count:4;
  column-gap:var(--ppvgd-gap);
}

.ppvgd-style-masonry .ppvgd-photo{
  display:inline-block;
  width:100%;
  margin:0 0 var(--ppvgd-gap);
  break-inside:avoid;
  overflow:hidden;
  border-radius:12px;
  background:#f3f6f8;
}

.ppvgd-style-masonry .ppvgd-photo a{
  display:block;
  overflow:hidden;
}

.ppvgd-style-masonry .ppvgd-photo img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .32s ease;
}

/* ===== GRID — แบบ Category ===== */

.ppvgd-grid-front{
  display:grid;
  grid-template-columns:repeat(var(--ppvgd-cols),minmax(0,1fr));
  gap:var(--ppvgd-gap);
}

.ppvgd-style-grid .ppvgd-photo{
  margin:0;
  aspect-ratio:var(--ppvgd-ratio, 4 / 3);
  overflow:hidden;
  border-radius:12px;
  background:#f3f6f8;
}

.ppvgd-style-grid .ppvgd-photo a{
  display:block;
  width:100%;
  height:100%;
}

.ppvgd-style-grid .ppvgd-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:var(--ppvgd-fit, contain);
  transition:transform .32s ease;
}

/* Hover */
.ppvgd-photo:hover img{
  transform:scale(1.04);
}

.ppvgd-empty{
  padding:40px;
  text-align:center;
  background:#eef7fc;
  border-radius:12px;
}

/* Lightbox */
.ppvgd-lightbox{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(5,20,30,.92);
  padding:50px;
  box-sizing:border-box;
}

.ppvgd-lightbox.is-open{display:flex}

.ppvgd-lightbox img{
  max-width:90vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
}

.ppvgd-close,
.ppvgd-prev,
.ppvgd-next{
  position:absolute;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
}

.ppvgd-close{
  right:22px;
  top:20px;
  width:44px;
  height:44px;
  font-size:30px;
}

.ppvgd-prev,
.ppvgd-next{
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  font-size:38px;
}

.ppvgd-prev{left:20px}
.ppvgd-next{right:20px}

/* Tablet */
@media(max-width:1024px){
  .ppvgd-masonry{
    column-count:3;
  }

  .ppvgd-grid-front{
    grid-template-columns:repeat(var(--ppvgd-tablet),minmax(0,1fr));
  }
}

/* Mobile */
@media(max-width:767px){
  .ppvgd-wrap{
    padding:8px 14px 45px;
  }

  .ppvgd-heading{
    margin-bottom:24px;
  }

  .ppvgd-masonry{
    column-count:2;
    column-gap:9px;
  }

  .ppvgd-style-masonry .ppvgd-photo{
    margin-bottom:9px;
    border-radius:8px;
  }

  .ppvgd-grid-front{
    grid-template-columns:repeat(var(--ppvgd-mobile),minmax(0,1fr));
    gap:9px;
  }

  .ppvgd-style-grid .ppvgd-photo{
    border-radius:8px;
  }

  .ppvgd-lightbox{
    padding:45px 10px;
  }

  .ppvgd-prev{left:8px}
  .ppvgd-next{right:8px}
}


/* ===== v2.3 hard overrides ===== */
.ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front{
    display:grid !important;
    grid-template-columns:repeat(var(--ppvgd-cols), minmax(0,1fr)) !important;
    column-count:unset !important;
    columns:unset !important;
    gap:var(--ppvgd-gap) !important;
}

.ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front > .ppvgd-photo{
    display:block !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    aspect-ratio:var(--ppvgd-ratio, 4 / 3) !important;
    break-inside:auto !important;
}

.ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front > .ppvgd-photo a{
    display:block !important;
    width:100% !important;
    height:100% !important;
}

.ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front > .ppvgd-photo img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:var(--ppvgd-fit, contain) !important;
}

@media(max-width:1024px){
    .ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front{
        grid-template-columns:repeat(var(--ppvgd-tablet), minmax(0,1fr)) !important;
    }
}

@media(max-width:767px){
    .ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front{
        grid-template-columns:repeat(var(--ppvgd-mobile), minmax(0,1fr)) !important;
    }
}

/* Plugin no longer outputs its own heading/title */
.ppvgd-heading{display:none !important;}

.ppvgd-style-grid .ppvgd-photo,
.ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front > .ppvgd-photo{
    background:#f7f8f9;
}


/* ===== v2.6: force the GRID CARD itself to keep requested ratio ===== */
.ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front > figure.ppvgd-photo{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    aspect-ratio:var(--ppvgd-ratio, 4 / 3) !important;
    overflow:hidden !important;
}

.ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front > figure.ppvgd-photo > a.ppvgd-photo-link{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    margin:0 !important;
}

.ppvgd-wrap.ppvgd-style-grid .ppvgd-grid-front > figure.ppvgd-photo > a.ppvgd-photo-link > img{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:var(--ppvgd-fit, contain) !important;
    object-position:center center !important;
}