/* ─── Get Started (Landing) Page — CLS / Skeleton fixes ───
   Scoped to template_one/rb-get-started.php only. Not part of ringbuilder.css
   so it never loads on any other page. */

/* Hero image: reserve its box (matches its known 800x900 source dimensions)
   before it loads, and show a skeleton placeholder in the meantime instead
   of an empty box. aspect-ratio scales correctly at every breakpoint since
   ringbuilder.css only ever changes this element's max-width, never its
   aspect ratio. */
.vdb-rb-ring-img {
  aspect-ratio: 800 / 900;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(100deg, #f0f0f0 30%, #f6f6f6 50%, #f0f0f0 70%);
  background-size: 200% 100%;
  animation: vdbrb-skeleton-shimmer 1.4s ease-in-out infinite;
}

.vdb-rb-ring-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

.vdb-rb-ring-img.vdbrb-img-loaded {
  animation: none;
  background: none;
}

.vdb-rb-ring-img.vdbrb-img-loaded img {
  opacity: 1;
}

@keyframes vdbrb-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Inner content skeleton — independent of the outer #vdbrb_main_page_cover
   spinner (that one is untouched). Keeps the title/subtitle/button text in
   its normal layout position (no shift) but invisible, with a shimmer bar
   drawn over it, until the page's fonts are confirmed ready. This masks the
   font-swap reflow that would otherwise happen right after the cover fades.

   Targets the shared classes (.vdbrb-main-title etc.) rather than the
   .vdb-rb-only-mobile / .vdb-rb-only-desktop wrapper, so both the mobile and
   desktop copies of the title get the same treatment regardless of which
   one ringbuilder.css's responsive display:none/block toggle is currently
   showing (that toggle switches at max-width: 991px). */
.vdbrb-content-loading .vdbrb-main-title,
.vdbrb-content-loading .vdbrb-sub-title,
.vdbrb-content-loading .vdb-rb-btn-wrapper .vdb-rb-btn {
  position: relative;
  color: transparent !important;
  min-height: 1em;
}

.vdbrb-content-loading .vdbrb-main-title::after,
.vdbrb-content-loading .vdbrb-sub-title::after,
.vdbrb-content-loading .vdb-rb-btn-wrapper .vdb-rb-btn::after {
  content: "";
  position: absolute;
  inset: 6px 8%;
  border-radius: 6px;
  background: linear-gradient(100deg, #e8e8e8 30%, #f2f2f2 50%, #e8e8e8 70%);
  background-size: 200% 100%;
  animation: vdbrb-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* On narrow screens the title/subtitle wrap to multiple lines and the
   buttons stretch full-width (see ringbuilder.css's own max-width: 767px /
   440px rules) — keep the skeleton bar inset small and consistent instead
   of the wider desktop inset, so it doesn't look oversized against shorter
   mobile line-heights. */
@media screen and (max-width: 767px) {
  .vdbrb-content-loading .vdbrb-main-title::after,
  .vdbrb-content-loading .vdbrb-sub-title::after,
  .vdbrb-content-loading .vdb-rb-btn-wrapper .vdb-rb-btn::after {
    inset: 4px 4%;
    border-radius: 4px;
  }
}