/* ============================================
   CCPL — certificate pages (ISO, approval letters,
   performance, third party). Loads after site.css + pages.css
   ============================================ */

/* switch between the four certificate pages */
.ctabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.ctabs a{border:2px solid var(--color-primary);color:var(--color-primary);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;padding:.6rem 1.2rem;transition:background .2s ease,color .2s ease}
.ctabs a:hover{background:var(--color-bg-alt)}
.ctabs a.on{background:var(--color-primary);color:#fff}

.cinfo{margin-bottom:1.75rem}
.cinfo h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.cinfo h2::after{content:"";display:block;width:56px;height:4px;background:var(--color-highlight);margin-top:.7rem}
.cinfo p{margin:.9rem 0 0;max-width:760px}

/* gallery */
.cgallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.cert{display:block;background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);padding:.6rem;aspect-ratio:3/4;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cert:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}
.cert img{width:100%;height:100%;object-fit:contain;background:var(--color-bg-alt)}

/* full-size viewer */
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,20,20,.94);display:none;align-items:center;justify-content:center;padding:3.5rem 4rem}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb button{position:absolute;border:0;background:var(--color-primary);color:#fff;font-size:1.6rem;line-height:1;width:46px;height:46px;transition:background .2s ease}
.lb button:hover{background:var(--color-accent-dark)}
.lb .x{top:1rem;right:1rem}
.lb .prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb .next{right:1rem;top:50%;transform:translateY(-50%)}
.lb .count{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#fff;font-weight:600;letter-spacing:.08em;font-size:.85rem}

@media(max-width:980px){
  .cgallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .cgallery{grid-template-columns:repeat(2,1fr);gap:1rem}
  .lb{padding:3.5rem .6rem}
  .lb .prev{left:.4rem}.lb .next{right:.4rem}
}
@media(max-width:420px){
  .cgallery{grid-template-columns:1fr}
}