/* =========================================================
   OUR VIDEOS PAGE  (new file - only used by videos.html)
   ========================================================= */
.pv-page { position: relative; overflow: hidden; padding: 50px 0 70px;
  background: linear-gradient(135deg,#f7f8f5 0%,#fff 55%,#eef3ef 100%); }
.pv-page::before { content:""; position:absolute; width:500px; height:500px; right:-180px; top:-180px; border-radius:50%;
  border:1px solid rgba(0,98,56,.08);
  box-shadow:0 0 0 50px rgba(0,98,56,.025),0 0 0 100px rgba(0,98,56,.02),0 0 0 150px rgba(0,98,56,.015); pointer-events:none; }
.pv-page .container { position: relative; z-index: 2; }

.pv-card { background:#fff; border:1px solid #e3e6e0; height:100%; transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.pv-card:hover { box-shadow:0 14px 36px rgba(10,46,29,.10); transform:translateY(-3px); }

/* 16:9 video frame: paste a YouTube <iframe> inside .pv-frame */
.pv-frame { position:relative; width:100%; aspect-ratio:16/9; background:#0d3c26; overflow:hidden; }
.pv-frame iframe, .pv-frame video { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* placeholder shown until a video is pasted */
.pv-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:rgba(255,255,255,.85); font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  background:
    radial-gradient(circle at 20% 20%, rgba(200,152,62,.18) 0, transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px), #0d3c26; }
.pv-empty i { font-size:46px; color:var(--brass-500); }

.pv-body { padding:16px 20px 20px; border-top:3px solid #006238; }
.pv-num { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--brass-600); letter-spacing:2px; }
.pv-title { font-size:20px; font-weight:800; margin:4px 0 0; color:#17231d; }

@media (max-width:767px){
  .pv-page { padding:30px 0 50px; }
  .pv-title { font-size:17px; }
}

/* safety fallback so the 2-column grid works even if Bootstrap fails to load */
.pv-page .row { display:flex; flex-wrap:wrap; margin:-12px; }
.pv-page .row > * { box-sizing:border-box; width:100%; padding:12px; }
@media (min-width:768px){ .pv-page .row > .col-md-6 { width:50%; } }