/* Round Carousel — rid-energy.uz
 *
 * The reference component sets every value as an inline style from JavaScript.
 * Here the geometry that has to be responsive lives in CSS, because a 3-D ring
 * cannot be made responsive any other way: the radius is derived from the tile
 * width, so the tile width has to be something a media query can change.
 * round-carousel.js reads it back and recomputes the radius on resize.
 */

.gallery-section { background: #05080b; }

.rc {
  width: 100%;
  height: clamp(320px, 36vw, 470px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Perspective has to follow the ring's radius, which follows from the tile
     width and how many photographs there are:
         radius = (tileW * factor) / (2 * tan(pi / n))
     Fourteen tiles at 230px give a radius of 731px, and the front of the ring
     sits that much closer to the camera. At 1400 it would be magnified 2.09x
     — a 481px tile in a 230px slot. 3200 holds it to 1.3x. */
  perspective: 3200px;
  touch-action: pan-y;          /* let the page scroll; we only take the X axis */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.rc.is-dragging { cursor: grabbing; }
.rc:focus-visible { outline: 2px solid #0066ff; outline-offset: 4px; }

.rc__stage {
  transform-style: preserve-3d;
  transform: rotateX(-7deg);    /* the reference's tilt */
}

.rc__ring {
  position: relative;
  /* The one place the tile size is stated. Everything else follows from it.
     Portrait, because every photograph in this set is portrait: these are
     phone shots taken on the shop floor. A 3:2 landscape tile with
     object-fit:cover would crop away half the height of each one, which on
     these pictures means the tops of the cabinets and the workers' heads. */
  width: 230px;
  height: 310px;
  transform-style: preserve-3d;
}

.rc__slot {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.rc__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  backface-visibility: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  /* Photographs arrive at whatever size the phone that took them produced;
     without this the ring staggers. */
  background: #111;
}

/* The far side of the ring shows through the middle. Dimming it is what makes
   the ring read as having depth rather than as a flat band of clutter. */
.rc__face--back {
  transform: rotateY(180deg);
  filter: brightness(.35);
}

@media (max-width: 991px) {
  .rc__ring { width: 175px; height: 235px; }
  .rc { perspective: 2400px; }
}

@media (max-width: 575px) {
  .rc__ring { width: 132px; height: 178px; }
  .rc { perspective: 1800px; height: clamp(250px, 62vw, 330px); }
  .rc__face { border-radius: 10px; }
}

/* Parked, not spinning. Drag still works, so nothing becomes unreachable. */
@media (prefers-reduced-motion: reduce) {
  .rc { cursor: default; }
}