/* =====================================================================
   HOMEPAGE 3D GALLERY — a ring of photo cards in real 3D space.
   Prev/Next spins the whole ring; clicking a card flips it to reveal
   its caption. Degrades to a plain flex row if 3D isn't supported.
   ===================================================================== */
.hk-gallery3d { background: var(--cream-dark); padding: clamp(64px, 9vw, 110px) 0; overflow: hidden; }

.g3d-viewport {
  position: relative;
  height: 360px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

.g3d-stage {
  position: relative;
  width: 220px;
  height: 280px;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,0,.2,1);
}

.g3d-item {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--angle)) translateZ(var(--g3d-radius, 320px));
}

.g3d-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.g3d-card.flipped { transform: rotateY(180deg); }

.g3d-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md, 16px);
  backface-visibility: hidden;
  box-shadow: 0 18px 40px -12px rgba(6,21,18,.45);
  overflow: hidden;
}

.g3d-front { background: #000; }
.g3d-front img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.g3d-front .g3d-title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px 12px;
  background: linear-gradient(0deg, rgba(6,21,18,.88), transparent);
  color: #fff; font-weight: 700; font-size: .88rem;
}

.g3d-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--brand-900), var(--brand-700));
  color: #fff;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.g3d-back h4 { color: #fff; font-size: 1rem; margin-bottom: 8px; }
.g3d-back p { color: #C7CCE8; font-size: .84rem; margin: 0; line-height: 1.5; }
.g3d-back i { font-size: 1.4rem; color: var(--brand-400); margin-bottom: 10px; }

.g3d-nav {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--sand-dark);
  background: #fff;
  color: var(--brand-900);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  z-index: 2;
  transition: var(--transition-smooth, transform .2s);
}
.g3d-nav:hover { background: var(--brand-900); color: #fff; transform: scale(1.08); }
.g3d-prev { margin-right: 22px; }
.g3d-next { margin-left: 22px; }

@media (max-width: 640px) {
  .g3d-viewport { height: 300px; }
  .g3d-stage { width: 170px; height: 220px; }
  .g3d-nav { width: 38px; height: 38px; font-size: 1rem; }
  .g3d-prev { margin-right: 10px; }
  .g3d-next { margin-left: 10px; }
}

/* No-JS / no-3D fallback: plain scrollable strip */
.no-g3d .g3d-viewport { height: auto; perspective: none; overflow-x: auto; justify-content: flex-start; padding-bottom: 10px; }
.no-g3d .g3d-stage { position: static; display: flex; gap: 16px; width: max-content; height: auto; transform: none !important; }
.no-g3d .g3d-item { position: static; transform: none !important; width: 220px; height: 280px; flex-shrink: 0; }
.no-g3d .g3d-nav { display: none; }