/* ==========================================================================
   AVRA - project gallery

   Full-bleed strip: 816x500 frames on a 48px gutter, centre-peeked. The label
   and pager sit on the 120px gutter; only the track runs edge to edge.
   Section rhythm from Figma: label 64, frames 152, caption 664, pager 738,
   section 842 tall.
   ========================================================================== */

.avra-pgallery { width: 100%; }
.avra-pgallery > .avra-seclabel { padding-inline: var(--avra-gutter); }

.avra-pgallery__vp {
  margin-top: 47px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.avra-pgallery__vp::-webkit-scrollbar { display: none; }
.avra-pgallery__track {
  display: flex;
  gap: 48px;
  width: max-content;
  padding-inline: calc((100% - 816px) / 2);
}

.avra-pgallery__slide { flex: 0 0 816px; width: 816px; margin: 0; scroll-snap-align: center; }
.avra-pgallery__frame { position: relative; width: 100%; height: 500px; overflow: hidden; }
.avra-pgallery__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Figma dims the frame that carries the video control */
.avra-pgallery__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .2); pointer-events: none; }
.avra-pgallery__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
.avra-pgallery__play svg { width: 40px; height: 40px; display: block; }
.avra-hover .avra-pgallery__play:hover { transform: translate(-50%, -50%) scale(1.06); }

.avra-pgallery__cap {
  margin: 12px 0 0;
  min-height: 24px;
  font-family: var(--avra-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .28px;
  color: var(--avra-accent);
  opacity: .8;
  font-feature-settings: "ss01" 1;
}

/* ---- Pager --------------------------------------------------------------- */

.avra-pgallery__pager {
  margin-top: 50px;
  padding-inline: var(--avra-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.avra-pgnav,
.avra-pgnav:hover,
.avra-pgnav:focus,
.avra-pgnav:active {
  width: 48px;
  height: 48px;
  padding: 12px;
  background: rgba(92, 91, 90, .2);
  border: 0;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, opacity .25s ease;
}
.avra-pgnav svg { width: 20px; height: 12px; display: block; }
.avra-pgnav--next svg { transform: rotate(180deg); }
.avra-hover .avra-pgnav:not([disabled]):hover { background: rgba(92, 91, 90, .32); }
.avra-pgnav[disabled] { opacity: .35; cursor: default; }
.avra-pgnav:focus-visible { outline: 2px solid var(--avra-accent); outline-offset: 3px; }

/* The gallery band is dark, so white is correct here. */
.avra-pgallery__count {
  margin: 0;
  font-family: var(--avra-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) { .avra-pgallery__vp { cursor: grab; } }
.avra-pgallery__vp.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.avra-pgallery__vp.is-dragging * { user-select: none; }
.avra-pgallery__vp.is-dragging img { pointer-events: none; }

/* ---- Mobile -------------------------------------------------------------- */

@media (max-width: 1024px) {
  .avra-pgallery__vp { margin-top: 38px; }
  .avra-pgallery__track { gap: 16px; padding-inline: var(--avra-gutter); }
  .avra-pgallery__slide { flex: 0 0 calc(100vw - (var(--avra-gutter) * 2)); width: calc(100vw - (var(--avra-gutter) * 2)); }
  .avra-pgallery__frame { height: 244px; }
  .avra-pgallery__pager { margin-top: 32px; }
  .avra-pgallery__count { font-size: 16px; letter-spacing: 1.28px; }
  .avra-pgnav, .avra-pgnav:hover { width: 44px; height: 44px; padding: 10px; }
}

/* Dark band: the gallery sits on Black Sheep, per the Figma frame. */
.avra-galsec { background: var(--avra-black); }
.avra-galsec .avra-seclabel__rule { background: rgba(207, 179, 149, .3); }
.avra-pgnav svg path { stroke: #FFFFFF; }

/* Video slides sit in the same frame box as the stills. */
.avra-pgallery__frame video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.avra-pgallery__frame.is-video { background: #000; }

/* gallery label + nav fixes */
/* Figma sets the gallery caption label at 16/1.28, not the 14/0.84 used by the
   other section headers. */
.avra-pgallery .avra-seclabel__text { font-size: 16px; letter-spacing: 1.28px; }

/* Hello Elementor colours bare buttons with its own accent - the pager was
   inheriting pink for its text colour. */
.avra-pgnav,
.avra-pgnav:hover,
.avra-pgnav:focus,
.avra-pgnav:active,
.avra-pgnav[disabled] {
  color: #FFFFFF;
  background-color: rgba(92, 91, 90, .2);
}

/* Figma 25502:2366 - caption lh 22 on mobile; 24 is desktop (25502:1581). */
@media (max-width: 1024px) {
  .avra-pgallery__cap { line-height: 22px; }
}