/* معرض الصور الدوّار — صفحات المعلمين */
.gallery-head {
  text-align: center;
  margin-inline: auto;
}

.gallery-3d {
  position: relative;
  height: 360px;
  margin: 1.2rem auto 0;
  max-width: 920px;
  display: grid;
  place-items: center;
}

.gallery-halo {
  position: absolute;
  inset: 18% 8%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--gold, #d4a857) 45%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--gold, #d4a857) 12%, transparent) inset;
  animation: gallery-halo 18s linear infinite;
  pointer-events: none;
}

.gallery-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: gallery-orbit 26s linear infinite;
}

.gallery-orbit b {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  font-weight: inherit;
  transform: rotate(var(--a)) translateY(-168px);
}

.gallery-orbit span {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--gold, #d4a857);
  background: color-mix(in srgb, var(--navy, var(--plum, #0c2340)) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold, #d4a857) 40%, transparent);
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  animation: gallery-orbit-fix 26s linear infinite;
}

.gallery-stage {
  width: 100%;
  height: 100%;
  perspective: 1100px;
  perspective-origin: 50% 46%;
}

.gallery-ring {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: gallery-spin 32s linear infinite;
}

.gallery-3d:hover .gallery-ring,
.gallery-3d:hover .gallery-halo,
.gallery-3d:hover .gallery-orbit {
  animation-play-state: paused;
}

.gallery-ring figure {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: 210px;
  height: 140px;
  transform:
    translate(-50%, -50%)
    rotateY(calc(var(--i) * 360deg / var(--n, 8)))
    translateZ(var(--r, 340px));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  background: #dbe4ee;
  backface-visibility: hidden;
  cursor: zoom-in;
}

.gallery-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-grid-mobile {
  display: none;
}

.gallery-grid-mobile figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.gallery-grid-mobile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-grid-mobile figcaption {
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted, #5a6d82);
  background: #fff;
}

.gallery-cta {
  text-align: center;
  margin-top: 1.35rem;
}

.gallery-cta .btn {
  min-width: min(100%, 280px);
}

@keyframes gallery-spin {
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes gallery-halo {
  to {
    transform: rotate(360deg);
  }
}

@keyframes gallery-orbit {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes gallery-orbit-fix {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 850px) {
  .gallery-3d,
  .gallery-orbit {
    display: none;
  }

  .gallery-grid-mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
  }
}

@media (max-width: 380px) {
  .gallery-grid-mobile {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-ring,
  .gallery-halo,
  .gallery-orbit {
    animation: none;
  }

  .gallery-3d {
    height: auto;
  }

  .gallery-stage {
    perspective: none;
  }

  .gallery-ring {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    height: auto;
  }

  .gallery-ring figure {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 46%;
    height: 120px;
  }

  .gallery-halo,
  .gallery-orbit {
    display: none;
  }
}