/* ═══════════════════════════════════════════
   WP Skeleton Loader — skeleton.css
   ═══════════════════════════════════════════ */

:root {
  --wpsl-base:    #e0e0e0;
  --wpsl-shimmer: #f5f5f5;
  --wpsl-speed:   1.5s;
  --wpsl-radius:  6px;
}

/* ── overlay wrapper ── */
#wpsl-skeleton {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity .45s ease;
}
#wpsl-skeleton.wpsl-fade-out { opacity: 0; pointer-events: none; }

.wpsl-wrap {
  width: min(720px, 94vw);
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── shimmer keyframe ── */
@keyframes wpsl-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ── base block ── */
.wpsl-block {
  background:
    linear-gradient(
      90deg,
      var(--wpsl-base)    25%,
      var(--wpsl-shimmer) 50%,
      var(--wpsl-base)    75%
    );
  background-size: 600px 100%;
  animation: wpsl-shimmer var(--wpsl-speed) infinite linear;
  border-radius: var(--wpsl-radius);
}

/* ── specific shapes ── */
.wpsl-header {
  height: 20px;
  width: 40%;
}

.wpsl-hero {
  height: 220px;
  width: 100%;
  border-radius: calc(var(--wpsl-radius) * 1.5);
}

.wpsl-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wpsl-line {
  height: 14px;
}

/* ── card grid ── */
.wpsl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wpsl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wpsl-card-img {
  height: 120px;
  width: 100%;
}
.wpsl-card-text {
  height: 13px;
  width: 100%;
}
.wpsl-card-text.short {
  width: 65%;
}

/* ── stagger delays ── */
.wpsl-hero           { animation-delay: .05s; }
.wpsl-lines .wpsl-line:nth-child(1) { animation-delay: .10s; }
.wpsl-lines .wpsl-line:nth-child(2) { animation-delay: .18s; }
.wpsl-lines .wpsl-line:nth-child(3) { animation-delay: .26s; }
.wpsl-cards .wpsl-card:nth-child(1) .wpsl-block { animation-delay: .12s; }
.wpsl-cards .wpsl-card:nth-child(2) .wpsl-block { animation-delay: .22s; }
.wpsl-cards .wpsl-card:nth-child(3) .wpsl-block { animation-delay: .32s; }

/* ── responsive ── */
@media (max-width: 600px) {
  .wpsl-cards { grid-template-columns: 1fr 1fr; }
  .wpsl-cards .wpsl-card:last-child { display: none; }
  .wpsl-hero  { height: 160px; }
}