/* Slider controls follow the platform card rails: side arrows, page dots below. */
.platform-v2-visual .platform-v2-controls,
.review-rail-shell .review-controls,
.gallery-main .gallery-controls {
  position: absolute;
  z-index: 16;
  inset: 0;
  display: block;
  pointer-events: none;
}
.platform-v2-visual .platform-v2-controls .icon-button,
.review-rail-shell .review-arrow,
.gallery-main .gallery-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #8ad8e6a8;
  border-radius: 50%;
  background: #0e2734f2;
  color: #edf9fb;
  box-shadow: 0 10px 26px #0008;
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.platform-v2-visual .platform-v2-controls .icon-button:first-child,
.review-rail-shell .review-arrow:first-child,
.gallery-main .gallery-arrow:first-child { left: -19px; }
.platform-v2-visual .platform-v2-controls .icon-button:last-child,
.review-rail-shell .review-arrow:last-child,
.gallery-main .gallery-arrow:last-child { right: -19px; }
.platform-v2-visual .platform-v2-controls .icon-button:hover:not(:disabled),
.review-rail-shell .review-arrow:hover:not(:disabled),
.gallery-main .gallery-arrow:hover:not(:disabled) {
  color: #091923;
  border-color: #b9eef7;
  background: #83dded;
  box-shadow: 0 12px 29px #4ebdd750;
  transform: translateY(-50%);
}
.platform-v2-visual .platform-v2-controls .icon-button:disabled,
.review-rail-shell .review-arrow:disabled,
.gallery-main .gallery-arrow:disabled { opacity: .38; cursor: default; }
.platform-v2-visual .platform-v2-controls .icon-button:focus-visible,
.review-rail-shell .review-arrow:focus-visible,
.platform-v2-dot:focus-visible,
.review-dot:focus-visible,
.gallery-main .gallery-arrow:focus-visible { outline: 2px solid #bdeef8; outline-offset: 3px; }
.platform-v2-visual .platform-v2-controls svg,
.review-rail-shell .review-arrow svg,
.gallery-main .gallery-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.platform-v2-media-ui {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(calc(100cqw - 64px), calc((100cqh - 64px) * 1.6));
  aspect-ratio: 8 / 5;
  transform: translate(-50%, -50%);
}
.platform-v2-media-ui .platform-v2-cards {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  transform: none;
}
.platform-v2-media-ui .platform-v2-card { width: 100%; height: 100%; }
.platform-v2-media-ui .platform-v2-controls { inset: 0; }
.platform-v2-media-ui .platform-v2-controls,
.platform-v2-media-ui .platform-v2-pagination,
.platform-v2-progress {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.platform-v2.is-image-visible .platform-v2-controls,
.platform-v2.is-image-visible .platform-v2-pagination,
.platform-v2.is-image-visible .platform-v2-progress { opacity: 1; visibility: visible; }
.platform-v2-media-ui .platform-v2-pagination {
  position: absolute;
  z-index: 16;
  top: calc(100% + 20px);
  left: 0;
  right: 0;
  min-height: 24px;
}
.platform-v2-footer {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.platform-v2-footer .platform-v2-progress-track { display: none; }
.platform-v2-pagination,
.review-pagination { display: flex; justify-content: center; align-items: center; gap: 7px; }
.platform-v2-dot,
.review-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #7baab789;
  cursor: pointer;
  transition: width .25s cubic-bezier(.16,1,.3,1), background .25s, box-shadow .25s;
}
.platform-v2-dot:hover,
.review-dot:hover { background: #b6eaf4; }
.platform-v2-dot.is-active,
.review-dot.is-active {
  width: 24px;
  border-radius: 8px;
  background: #75d6eb;
  box-shadow: 0 0 14px #5acbe779;
}

.platform-v2:not(.is-ready) .platform-v2-media-ui {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  aspect-ratio: auto;
  transform: none;
}
.platform-v2:not(.is-ready) .platform-v2-media-ui .platform-v2-cards { position: relative; inset: auto; height: auto; }
.platform-v2:not(.is-ready) .platform-v2-media-ui .platform-v2-card { width: 100%; height: 380px; }

.reviews-stage.has-reviews { overflow: visible; }
.reviews .review-toolbar { display: block; padding-bottom: 20px; }
.review-rail-shell { position: relative; min-width: 0; }
.review-rail-shell .review-rail { scrollbar-width: none; padding: 4px 0 16px; }
.review-rail-shell .review-rail::-webkit-scrollbar { display: none; }
.review-rail-shell .review-arrow { font-size: 0; }
.review-pagination { min-height: 30px; margin-top: 11px; }
.review-card-footer { justify-content: flex-start; }

/* The transparent dialog extends beside the surface, so its close button
   remains visible while the panel scrolls without adding space above it. */
dialog.join-dialog, dialog.lightbox, dialog.review-dialog {
  width: min(750px, calc(100vw - 26px));
  max-height: calc(100svh - 20px);
  padding: 0 60px 0 0;
}
dialog.lightbox { width: min(1260px, calc(100vw - 26px)); }
dialog.review-dialog { width: min(820px, calc(100vw - 26px)); }
dialog .modal-surface { max-height: calc(100svh - 24px); }
dialog .dialog-close, dialog .review-dialog-close { top: 0; right: 0; }

@media (max-width: 800px) {
  .platform-v2-media-ui { position: relative; top: auto; left: auto; width: 100%; aspect-ratio: auto; transform: none; }
  .platform-v2-media-ui .platform-v2-cards { position: relative; inset: auto; width: auto; height: auto; }
  .platform-v2-media-ui .platform-v2-card { width: auto; height: auto; }
  .platform-v2-media-ui .platform-v2-controls { bottom: 38px; }
  .platform-v2-media-ui .platform-v2-pagination { position: relative; top: auto; left: auto; right: auto; margin-top: 6px; }
  .platform-v2-visual .platform-v2-controls .icon-button:first-child { left: -9px; }
  .platform-v2-visual .platform-v2-controls .icon-button:last-child { right: -9px; }
  .review-rail-shell .review-arrow:first-child { left: -14px; }
  .review-rail-shell .review-arrow:last-child { right: -14px; }
  .gallery-main .gallery-arrow:first-child { left: -9px; }
  .gallery-main .gallery-arrow:last-child { right: -9px; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 801px) {
  .platform-v2-media-ui { position: relative; top: auto; left: auto; width: 100%; aspect-ratio: auto; transform: none; }
  .platform-v2-media-ui .platform-v2-cards { position: relative; inset: auto; width: auto; height: auto; }
  .platform-v2-media-ui .platform-v2-card { width: auto; height: auto; }
  .platform-v2-media-ui .platform-v2-controls { bottom: 38px; }
  .platform-v2-media-ui .platform-v2-pagination { position: relative; top: auto; left: auto; right: auto; margin-top: 6px; }
}
@media (max-width: 560px) {
  .platform-v2-footer { gap: 10px; }
  .platform-v2-pagination, .review-pagination { gap: 6px; }
  .platform-v2-dot, .review-dot { width: 7px; height: 7px; }
  .platform-v2-dot.is-active, .review-dot.is-active { width: 21px; }
  .platform-v2-visual .platform-v2-controls .icon-button,
  .review-rail-shell .review-arrow,
  .gallery-main .gallery-arrow { width: 38px; height: 38px; }
  dialog.join-dialog, dialog.lightbox, dialog.review-dialog { width: calc(100vw - 20px); padding: 50px 0 0; }
  dialog.join-dialog .modal-surface, dialog.lightbox .modal-surface, dialog.review-dialog .modal-surface { max-height: calc(100svh - 74px); }
  dialog .dialog-close, dialog .review-dialog-close { width: 40px; height: 40px; }
}