/* Blog (the section formerly "gallery"; classes keep the gallery__ name): a ring of image cards orbiting slowly around a vertical axis, seen from just outside
   the ring, tilted 5 degrees, with the section heading on top.

   Geometry (all in cqw of the stage, so it scales with the screen):
   - 12 columns, 30deg apart, each pivoting around a point --r behind it: a cylinder of radius --r;
   - columns alternate two cards / one card; cards are 4:3 (the photos are landscape truck shots);
   - perspective 1.5x the stage width; the whole ring turns once a minute (js/gallery.js).
   Back faces stay visible, so the far side of the ring shows through the gaps (mirrored, smaller
   with distance), as in the reference. */

.gallery {
  --gutter: clamp(24px, 5vw, 96px);                /* same gutter and header as the fleet section */
  --chevron: var(--h10-yellow);                    /* chevron tint on the dark ground (base.css) */
  --chevron-dim: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  padding-block: clamp(112px, 12vh, 144px) clamp(72px, 10vh, 120px);
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

.gallery__head {
  position: relative; z-index: 2;
  max-width: 1760px; margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: content-box;                         /* 1760 of content, as in the fleet section */
}

/* the stage: a 3D viewport under the header */
.gallery__stage {
  pointer-events: none;
  --stage-w: min(100vw, 1480px);
  container-type: inline-size;
  position: relative;
  width: var(--stage-w); height: calc(var(--stage-w) * 0.38);   /* the ring band plus a little air (4:3 cards) */
  margin: clamp(24px, 4vh, 48px) auto 0;
  perspective: calc(var(--stage-w) * 1.5);
}
.gallery__tilt {
  pointer-events: none;                            /* only the cards take the pointer: the flat layers above them in the 3D stack would win the hit test */
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateZ(5deg);
}
.gallery__ring {
  --r: 62cqw;                                      /* cylinder radius */
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50% calc(var(--r) * -1);   /* spin around the cylinder's axis */
  will-change: transform;
}
.gallery__col {
  position: absolute; left: 50%; top: 50%;
  width: 16cqw; height: 44cqw;
  margin: -22cqw 0 0 -8cqw;
  display: flex; flex-direction: column; justify-content: center; gap: 3cqw;
  transform-style: preserve-3d;
  transform-origin: 50% 50% calc(var(--r) * -1);
  transform: rotateY(calc(var(--i) * 30deg));
}
.gallery__card {
  position: relative; display: block; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #1C1F24;
  color: #FFFFFF; text-decoration: none;
  pointer-events: auto;
  transform-style: preserve-3d;                    /* lets the hover label hide its own back face */
  transform: scale(1.35);                          /* cards overhang their column, as in the reference */
  transition: scale 300ms var(--ease-out);
}
.gallery__col:has(.gallery__card + .gallery__card) .gallery__card { transform: scale(1.12); }
.gallery__card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* hover (fine pointers): a tinted frosted layer fades in over the photo with "read more", as on
   the reference; js/gallery.js stops the ring while a card is hovered. The blur is a
   backdrop-filter on that layer (a filter or clip-path on the photo breaks the 3D paint in
   Chrome), and it's only switched on while hovered so 18 idle cards cost nothing. */
.gallery__more {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8cqw;
  border-radius: inherit;
  background: rgba(14, 15, 18, 0.35);
  font-size: clamp(12px, 1.25cqw, 18px); font-weight: 600;
  opacity: 0;
  backface-visibility: hidden;                     /* no mirrored label on the far side */
  transition: opacity 300ms var(--ease-out);
}
.gallery__more-icon {
  display: grid; place-items: center;
  width: 3cqw; height: 3cqw; min-width: 32px; min-height: 32px; border-radius: 50%;
  background: var(--h10-yellow); color: var(--h10-ink);
}
.gallery__more-icon svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gallery__more-icon svg:dir(rtl) { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .gallery__card:hover { scale: 1.05; }
  .gallery__card:hover .gallery__more { opacity: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

.gallery__all { flex: none; }

@media (max-width: 900px) {
  .gallery { --gutter: 16px; padding-top: 72px; }   /* matches the fleet section */
}
@media (max-width: 760px) {
  /* a wider virtual stage on phones so the cards stay a readable size; the edges fall off-screen */
  .gallery__stage { --stage-w: 215vw; margin-inline: calc((100vw - var(--stage-w)) / 2); margin-top: 8px; }
}

/* touch screens: no hover label, so no extra 3D layer per card (fewer layers to composite while
   the ring turns) */
@media (hover: none), (pointer: coarse) {
  .gallery__more { display: none; }
  .gallery__card { transform-style: flat; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__card, .gallery__more { transition: none; }
}