/* =========================================================
   Atulya Consultancy Services — Video gallery (/gallery/videos)
   Loads after gallery.css and reuses its hero (.ghero), filter
   bar (.bar, .albums) and status line. Same rules: mobile-first,
   square corners, navy/azure/gold.
   The Photos / Videos switch at the top is shared by both
   gallery pages, which is why this file loads on both.
   ========================================================= */

/* =========================================================
   PHOTOS / VIDEOS SWITCH (both gallery pages)
   ========================================================= */
.ghero__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;}
.gswitch{display:inline-flex;padding:4px;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);}
.gswitch a{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;
  color:#C4D1E0;font-size:13px;font-weight:700;line-height:1;
  transition:background-color .25s,color .25s;
}
.gswitch a i{color:var(--azure-300);font-size:12px;transition:color .25s;}
.gswitch a[aria-current="page"]{background:var(--gold);color:var(--navy-900);}
.gswitch a[aria-current="page"] i{color:var(--navy-900);}
@media (hover:hover){ .gswitch a:not([aria-current]):hover{color:#fff;background:rgba(255,255,255,.08);} }

/* =========================================================
   HERO — the featured video on a screen
   ========================================================= */
.screen{position:relative;width:100%;max-width:620px;margin-inline:auto;animation:rise .9s .35s var(--ease) both;}
.screen__frame{position:relative;display:block;margin:0 14px 14px 0;cursor:pointer;}
.screen__frame::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--gold);
  transition:inset .5s var(--ease);
}
.screen__frame img{
  position:relative;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;
  background:var(--navy-800);box-shadow:0 30px 60px rgba(0,0,0,.45);
}
.screen__play{
  position:absolute;left:50%;top:50%;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;
  background:var(--gold);color:var(--navy-900);font-size:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transition:scale .4s var(--ease),background-color .25s;
}
.screen__play::before{
  content:"";position:absolute;inset:0;border:2px solid var(--gold);
  animation:ping 2.2s var(--ease) infinite;
}
.screen__play i{margin-left:4px;}
.screen__play .fa-clock{margin-left:0;}
.screen__meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:22px;}
.screen__tag{
  display:inline-flex;align-items:center;gap:7px;padding:4px 10px;
  background:rgba(242,177,52,.12);color:var(--gold-300);
  font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;
}
.screen__title{color:#fff;font-size:clamp(1.1rem,.95rem + .6vw,1.4rem);font-weight:800;line-height:1.3;letter-spacing:-.015em;}
.screen__note{
  position:absolute;right:2%;top:-46px;display:flex;align-items:flex-end;gap:6px;
  color:var(--gold-300);font-size:1.55rem;rotate:-4deg;
  animation:pop .8s 1.1s var(--ease) both;
}
.screen__note svg{width:40px;height:auto;margin-bottom:10px;color:var(--azure-300);scale:1 -1;}
@media (max-width:959px){ .screen__note{display:none;} }
@media (hover:hover){
  .screen__frame:hover::before{inset:22px -22px -22px 22px;}
  .screen__frame:hover .screen__play{scale:1.1;background:var(--gold-300);}
}
.screen__frame:focus-visible{outline:3px solid var(--gold);outline-offset:4px;}
@media (min-width:600px){ .screen__play{width:92px;height:92px;margin:-46px 0 0 -46px;font-size:28px;} }
@media (min-width:960px){
  .vhero .ghero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .screen{margin-top:48px;}
}

/* duration badge, on the hero screen and the cards */
.vtime{
  position:absolute;z-index:1;right:10px;bottom:10px;padding:3px 7px;
  background:rgba(5,15,27,.86);color:#fff;
  font-size:12px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;
}

/* =========================================================
   THE VIDEOS
   ========================================================= */
.vids{display:grid;grid-template-columns:minmax(0,1fr);gap:32px 16px;margin-top:6px;}
@media (min-width:600px){ .vids{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px;} }
@media (min-width:1000px){ .vids{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px;} }

.vid{position:relative;min-width:0;scroll-margin-top:calc(var(--appbar-h) + 90px);}
.vid article{display:flex;flex-direction:column;height:100%;}
.vid__media{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--azure-50);}
.vid__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .4s;}
.vid__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,28,51,0) 55%,rgba(7,28,51,.55));
}
.vid__play{
  position:absolute;z-index:1;left:12px;bottom:12px;display:grid;place-items:center;width:46px;height:46px;
  background:var(--gold);color:var(--navy-900);font-size:15px;
  transition:scale .4s var(--ease),background-color .25s;
}
.vid__play .fa-play{margin-left:3px;}
.vid__soon{
  position:absolute;z-index:1;right:10px;bottom:10px;padding:4px 9px;
  background:var(--navy-900);color:var(--gold);
  font-size:10.5px;font-weight:800;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;
}
.vid--soon .vid__media img{filter:saturate(.55);}
.vid--soon .vid__play{background:var(--navy-900);color:var(--gold);}

.vid__body{display:flex;flex-direction:column;flex:1;padding:16px 2px 0;}
.vid__tag{color:var(--azure);font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;}
.vid__title{margin:8px 0 8px;font-size:1.08rem;line-height:1.32;letter-spacing:-.015em;transition:color .25s;}
.vid__desc{
  display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:14px;line-height:1.6;
}
.vid__meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:auto;padding-top:12px;color:var(--muted);font-size:12.5px;font-weight:600;}
.vid__meta i{margin-right:6px;font-size:11px;}

/* the whole card is the link */
.vid__open{position:absolute;z-index:2;inset:0;}
.vid__open:focus-visible{outline:3px solid var(--gold);outline-offset:6px;}
@media (hover:hover){
  .vid:hover .vid__media img{transform:scale(1.05);}
  .vid:hover .vid__play{scale:1.1;}
  .vid:not(.vid--soon):hover .vid__play{background:var(--gold-300);}
  .vid:hover .vid__title{color:var(--azure);}
}

.vids.is-shuffling .vid:not([hidden]){animation:rise .5s calc(var(--i,0) * 45ms) var(--ease) both;}

.vids__empty{
  display:flex;align-items:center;gap:14px;padding:28px 24px;
  background:var(--ivory);border:1px solid var(--line-warm);color:var(--ink);font-weight:600;
}
.vids__empty i{color:var(--azure);font-size:1.4rem;}

/* =========================================================
   PLAYER
   ========================================================= */
.vp{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;overflow:hidden;background:#050F1B;color:#fff;
}
.vp::backdrop{background:#050F1B;}
.vp[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:fade-in .25s ease;}
.vp.is-closing{animation:fade-out .2s ease forwards;}

.vp__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px 16px;
}
.vp__count{display:flex;align-items:baseline;gap:6px;color:rgba(255,255,255,.55);font-size:13px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.vp__count b{color:#fff;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;}
.vp__tools{display:flex;gap:4px;}
.vp__btn{
  display:grid;place-items:center;flex:none;width:44px;height:44px;
  border:0;background:rgba(255,255,255,.09);color:#fff;cursor:pointer;font-size:16px;
  transition:background-color .2s,color .2s;
}
.vp__btn:hover{background:rgba(255,255,255,.2);}
.vp__btn .fa-youtube{font-size:18px;}
.vp__btn--close{margin-left:6px;background:#fff;color:var(--navy-900);font-size:18px;}
.vp__btn--close:hover{background:var(--gold);}

/* the screen keeps 16:9 and fits whichever of width or height runs out first */
.vp__stage{position:relative;display:grid;place-items:center;min-height:0;padding:6px 12px;container-type:size;}
.vp__screen{position:relative;width:100%;max-width:1280px;aspect-ratio:16 / 9;overflow:hidden;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.55);}
@supports (width:1cqh){ .vp__screen{width:min(100%,1280px,100cqh * 16 / 9);} }
.vp__screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.vp__soon{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;}
.vp__soon > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px) saturate(.6);opacity:.4;scale:1.08;}
.vp__soon-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:460px;}
.vp__soon-ico{display:grid;place-items:center;width:52px;height:52px;background:var(--gold);color:var(--navy-900);font-size:20px;}
.vp__soon strong{color:#fff;font-size:clamp(1.15rem,.9rem + 1vw,1.6rem);font-weight:800;letter-spacing:-.02em;}
.vp__soon p{color:#C4D1E0;font-size:14px;line-height:1.55;}
.vp__soon-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;}
.vp__soon .btn{min-height:44px;padding:0 18px;font-size:13.5px;}
@media (max-width:599px){
  .vp__soon-ico{width:40px;height:40px;font-size:16px;}
  .vp__soon p{display:none;}
}

.vp__nav{
  position:absolute;z-index:2;top:50%;display:none;place-items:center;width:58px;height:58px;margin-top:-29px;
  border:1px solid rgba(255,255,255,.22);background:rgba(5,15,27,.55);color:#fff;cursor:pointer;font-size:17px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .2s,border-color .2s,color .2s;
}
.vp__nav--prev{left:28px;}
.vp__nav--next{right:28px;}
.vp__nav:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-900);}
@media (min-width:900px){
  .vp__nav{display:grid;}
  .vp__stage{padding:10px 110px;}
}

.vp__foot{
  display:grid;gap:16px;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));
}
.vp__info{min-width:0;}
.vp__tag{display:inline-block;padding:3px 9px;background:var(--gold);color:var(--navy-900);font-size:10.5px;font-weight:800;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;}
.vp__info h2{margin:8px 0 4px;color:#fff;font-size:clamp(1.15rem,.95rem + .8vw,1.7rem);letter-spacing:-.02em;}
.vp__info p{
  display:-webkit-box;max-width:720px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  color:var(--on-dark);font-size:14px;line-height:1.55;
}
.vp__next-label{margin-bottom:8px;color:rgba(255,255,255,.55);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.vp__upnext{
  display:flex;align-items:center;gap:12px;width:100%;max-width:380px;padding:6px 14px 6px 6px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;text-align:left;
  transition:border-color .25s,background-color .25s;
}
.vp__upnext img{flex:none;width:96px;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:var(--navy-800);}
.vp__upnext span{min-width:0;}
.vp__upnext strong{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13.5px;line-height:1.35;}
.vp__upnext small{display:block;margin-top:3px;color:var(--on-dark);font-size:12px;font-weight:600;}
.vp__upnext:hover{border-color:var(--gold);background:rgba(255,255,255,.09);}
.vp__upnext:focus-visible{outline:3px solid var(--azure-300);outline-offset:2px;}
@media (min-width:900px){
  .vp__foot{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;padding:20px 32px 26px;}
}

.vp__toast{
  position:absolute;z-index:3;left:50%;top:calc(76px + env(safe-area-inset-top,0px));
  padding:11px 18px;background:#fff;border-left:3px solid var(--gold);box-shadow:var(--sh-2);
  color:var(--ink);font-size:14px;font-weight:700;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  transition:opacity .25s,transform .3s var(--ease),visibility .25s;
}
.vp__toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* landscape phones: give the video the height, trim the chrome */
@media (max-height:560px){
  .vp__top{padding:6px 8px 6px 12px;}
  .vp__btn{width:38px;height:38px;font-size:14px;}
  .vp__stage{padding:2px 8px;}
  .vp__foot{padding:6px 14px calc(8px + env(safe-area-inset-bottom,0px));}
  .vp__info h2{margin:4px 0 0;font-size:1.05rem;}
  .vp__info p,.vp__next{display:none;}
}