/* DCE photo gallery — shared by the homepage and the All Photos page */

/* ---------- Tile grid ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.photo-grid.roomy{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.ph{position:relative;display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#0f2340;text-decoration:none;color:#fff;
    box-shadow:0 2px 8px rgba(6,15,29,.08);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s;background:#16325a}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,29,0) 45%,rgba(6,15,29,.78));opacity:0;transition:opacity .3s;z-index:1}
.ph-cap{position:absolute;left:10px;right:10px;bottom:9px;z-index:2;font-size:12.5px;font-weight:600;line-height:1.3;
    opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph-zoom{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);color:#0a1628;
    display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.ph-zoom svg{width:15px;height:15px}
.ph:hover img,.ph:focus-visible img{transform:scale(1.07)}
.ph:hover::after,.ph:focus-visible::after,.ph:hover .ph-cap,.ph:focus-visible .ph-cap{opacity:1;transform:none}
.ph:hover .ph-zoom,.ph:focus-visible .ph-zoom{opacity:1;transform:none}
.ph:focus-visible{outline:3px solid #d4a537;outline-offset:2px}

/* "+24 more" tile */
.ph-more{display:grid;place-items:center;text-align:center;background:#0a1628}
.ph-more img{position:absolute;inset:0;filter:blur(3px) brightness(.45);transform:scale(1.1)}
.ph-more .ph-more-label{position:relative;z-index:2;display:grid;gap:2px}
.ph-more strong{font-family:'Playfair Display',Georgia,serif;font-size:30px;line-height:1;color:#f2d27a}
.ph-more span{font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.ph-more::after{display:none}
.ph-more:hover img{transform:scale(1.15);filter:blur(2px) brightness(.55)}

/* ---------- Gallery headers and buttons ---------- */
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.gallery-head .section-sub{margin:0}
.gallery-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.gallery-stat{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#f3efe3;color:#16325a;font-size:13.5px;font-weight:600}
.gallery-stat b{color:#0a1628}
.btn-viewall{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;
    background:#0a1628;color:#fff;border:2px solid #0a1628;transition:transform .25s,box-shadow .25s,background .25s}
.btn-viewall:hover{background:#16325a;transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,22,40,.25)}
.btn-viewall .arrow{transition:transform .25s}
.btn-viewall:hover .arrow{transform:translateX(4px)}
.gallery-foot{display:flex;justify-content:center;margin-top:30px}
.gallery-empty{padding:40px;text-align:center;border:2px dashed #e3dfd4;border-radius:16px;color:#5b6b7f}

/* ---------- Photo viewer (lightbox) ---------- */
.pv{position:fixed;inset:0;z-index:5000;display:none;background:rgba(4,9,18,.96);color:#fff;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none}
.pv.open{display:grid;grid-template-rows:auto 1fr auto}
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px}
.pv-count{font-size:14px;letter-spacing:1px;color:#c7d3e3;font-variant-numeric:tabular-nums}
.pv-tools{display:flex;gap:8px}
.pv-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
    cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .2s;text-decoration:none}
.pv-btn:hover,.pv-btn:focus-visible{background:#d4a537;color:#060f1d;border-color:#d4a537;outline:none}
.pv-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pv-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 72px;touch-action:pan-y}
.pv-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);transition:opacity .25s,transform .25s}
.pv-img.loading{opacity:.25}
.pv-spin{position:absolute;width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#d4a537;animation:pvspin .8s linear infinite;display:none}
.pv-stage.is-loading .pv-spin{display:block}
@keyframes pvspin{to{transform:rotate(360deg)}}
.pv-prev,.pv-next{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px}
.pv-prev{left:14px}
.pv-next{right:14px}
.pv-bottom{padding:14px 20px 22px;text-align:center;min-height:64px}
.pv-caption{font-size:16px;font-weight:600;max-width:800px;margin:0 auto}
.pv-date{font-size:13px;color:#9fb0c6;margin-top:4px}
.pv-strip{display:flex;gap:6px;justify-content:center;margin-top:12px;overflow:hidden}
.pv-strip button{width:46px;height:34px;border-radius:5px;overflow:hidden;border:2px solid transparent;padding:0;background:#16325a;cursor:pointer;opacity:.55;flex-shrink:0}
.pv-strip button.on{border-color:#d4a537;opacity:1}
.pv-strip img{width:100%;height:100%;object-fit:cover;display:block}
body.pv-lock{overflow:hidden}

/* ---------- Responsive ---------- */
@media (max-width:1100px){ .photo-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:860px){ .photo-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:600px){
  .photo-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .photo-grid.roomy{grid-template-columns:repeat(3,1fr);gap:6px}
  .ph{border-radius:8px}
  .ph-cap,.ph-zoom{display:none}
  .ph-more strong{font-size:22px}
  .ph-more span{font-size:10.5px}
  .pv-stage{padding:0 6px}
  .pv-prev,.pv-next{width:44px;height:44px;top:auto;bottom:-56px;transform:none}
  .pv-prev{left:12px}.pv-next{right:12px}
  .pv-bottom{padding:12px 64px 18px}
  .pv-caption{font-size:14px}
  .pv-strip{display:none}
}
@media (prefers-reduced-motion: reduce){
  .ph img,.ph::after,.ph-cap,.ph-zoom,.pv-img{transition:none}
}
