/* Sector page photo gallery: built like the Global Summit gallery. A centred
   carousel of tall photo cards (the middle one enlarged), previous/next
   buttons, and a full-screen viewer. See inc/sector-gallery.php. */

.sg{
  --sg-ink:#061034;
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  padding-block:clamp(2.5rem,5vw,4rem);
  background:linear-gradient(155deg,var(--sg-ink) 0%,#06246E 46%,#003C9B 100%);
}
.sg::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 55% at 88% 8%,rgba(0,96,224,.42),transparent 62%),
    radial-gradient(44% 50% at 6% 94%,rgba(64,176,96,.28),transparent 64%);
}
.sg::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
}
.sg__stage{
  position:relative;z-index:1;
  padding:clamp(1.25rem,2.8vw,2.25rem) 0 clamp(2rem,4vw,3rem);
  overflow:hidden;
}
.sg__swiper{position:relative;z-index:1;overflow:visible;padding-block:0}
.sg__swiper .swiper-wrapper{
  align-items:center;padding-block:clamp(3.75rem,5.5vw,5.25rem);
  transition-timing-function:cubic-bezier(.22,.61,.36,1) !important;
  will-change:transform;
}
.sg__swiper .swiper-slide{
  position:relative;width:min(31vw,420px);z-index:1;
  transform:scale(.62);opacity:.9;
  backface-visibility:hidden;will-change:transform,opacity;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .42s ease;
}
.sg__swiper .swiper-slide-prev,.sg__swiper .swiper-slide-next{z-index:3;transform:scale(.8);opacity:1}
.sg__swiper .swiper-slide-active{z-index:5;transform:scale(1.25);opacity:1}
.sg__swiper .swiper-slide-prev:hover,.sg__swiper .swiper-slide-next:hover{transform:scale(.83)}
.sg__swiper .swiper-slide-active:hover{transform:scale(1.28) translateY(-4px)}

.sg__item{
  position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;
  border-radius:var(--r-lg);overflow:hidden;cursor:zoom-in;
  background:#E7EBF6;isolation:isolate;
  box-shadow:0 1px 2px rgba(6,16,52,.06),0 14px 30px rgba(45,48,143,.1);
  transition:box-shadow .4s var(--e-out),translate .4s var(--e-out);
}
.sg__item img{
  display:block;width:100%;height:100%;object-fit:cover;
  backface-visibility:hidden;transform:translateZ(0);
  transition:transform .7s var(--e-out);
}
.sg__swiper .swiper-slide-active .sg__item{box-shadow:0 26px 58px rgba(14,22,55,.28)}
.sg__item:hover,.sg__item:focus-visible{translate:0 -3px;box-shadow:0 1px 2px rgba(6,16,52,.06),0 22px 40px rgba(45,48,143,.22)}
.sg__item:hover img,.sg__item:focus-visible img{transform:scale(1.035) translateZ(0)}
.sg__item:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sg__zoom{
  position:absolute;right:.7rem;bottom:.7rem;z-index:2;
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--e-out),transform .3s var(--e-out);
}
.sg__zoom svg{width:16px;height:16px}
.sg__item:hover .sg__zoom,.sg__item:focus-visible .sg__zoom{opacity:1;transform:translateY(0)}

.sg__controls{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:clamp(1.4rem,2.6vw,2rem)}
.sg__prev,.sg__next{
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:2px solid var(--ink);border-radius:50%;cursor:pointer;
  background:#fff;color:var(--ink);box-shadow:0 7px 18px rgba(14,22,55,.08);
  transition:transform .2s var(--e-out),background .2s var(--e-out),color .2s var(--e-out),box-shadow .2s var(--e-out);
}
.sg__prev:hover,.sg__next:hover{transform:scale(1.09);background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(14,22,55,.2)}
.sg__prev:active,.sg__next:active{transform:scale(.94)}
.sg__prev:focus-visible,.sg__next:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sg__prev svg,.sg__next svg{width:18px;height:18px;transition:transform .2s var(--e-out)}
.sg__prev:hover svg{transform:translateX(-2px)}
.sg__next:hover svg{transform:translateX(2px)}

@media (max-width:900px){
  .sg__swiper .swiper-slide{width:min(40vw,360px)}
  .sg::after{background-size:calc(100% / 4) 100%}
}
@media (max-width:640px){
  .sg__stage{padding-top:1rem}
  .sg__swiper .swiper-slide{width:72vw;transform:scale(.72);opacity:.78}
  .sg__swiper .swiper-slide-prev,.sg__swiper .swiper-slide-next{transform:scale(.84);opacity:1}
  .sg__swiper .swiper-slide-active{transform:scale(1.14)}
  .sg__swiper .swiper-slide-active:hover{transform:scale(1.17) translateY(-3px)}
}

@media (prefers-reduced-motion:reduce){
  .sg__swiper .swiper-slide,.sg__item,.sg__item img{transition:none}
}