/* ==========================================================================
   skeleton.css — shared skeleton / shimmer loading states (Phase 2)
   One skeleton style for every async surface (scam-check, ugquiz,
   opsec-planner, blog lists, post "More in" rail). Modelled on the
   screenshot shimmer in checkurlink/assets/css/app.css.

   Tokens come from ug-brand.css (--bg-1/--bg-2/--line/--radius-*); hard
   fallbacks are provided so the blocks still render on pages that load
   this file without ug-brand.css.

   Usage: give the async container aria-busy="true" while loading and
   fill it with .ug-skel blocks shaped like the content that will land
   (banner, rows, cards). Remove them and set aria-busy="false" when the
   real content renders.
   ========================================================================== */

.ug-skel {
  display: block;
  border-radius: var(--radius-sm, 8px);
  background-color: var(--bg-1, #121214);
  /* gradient sits on background-image so background-color shows through
     for reduced-motion users (animation off, image removed below) */
}

@media (prefers-reduced-motion: no-preference) {
  .ug-skel {
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: ug-skel-shimmer 1.4s ease-in-out infinite;
  }
}

@keyframes ug-skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* --- shape variants ------------------------------------------------------ */

/* Single text line. Width modifiers fake ragged paragraph edges. */
.ug-skel--line {
  height: 0.9em;
  margin: 0.45em 0;
}
.ug-skel--w40 { width: 40%; }
.ug-skel--w60 { width: 60%; }
.ug-skel--w80 { width: 80%; }
.ug-skel--w100 { width: 100%; }

/* Heading-height line. */
.ug-skel--title {
  height: 1.3em;
  width: 55%;
  margin: 0.5em 0;
}

/* Banner / verdict-card shape (scam-check, trust checks). */
.ug-skel--banner {
  min-height: 4.6rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: var(--radius-md, 12px);
}

/* Generic card (plan cards, quiz panels). */
.ug-skel--card {
  min-height: 6.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: var(--radius-md, 12px);
}

/* Square thumbnail (blog aside covers, avatars). */
.ug-skel--thumb {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}

/* Wide media block (blog lead/river covers). */
.ug-skel--cover {
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* --- compositions -------------------------------------------------------- */

/* Row that mimics the blog .bl-row shape: text stack + square thumb. */
.ug-skel-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
}
.ug-skel-row__text { flex: 1 1 auto; min-width: 0; }

/* Vertical stack with consistent gaps. */
.ug-skel-stack { display: grid; gap: 0.75rem; }

/* Screen-reader-only caption for the loading state, so the skeleton is
   announced politely when it lands inside a live region. */
.ug-skel-note {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}