/* CMS loading skeletons and dynamic content fade-in */

.cms-loading .cms-fallback {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.cms-dynamic {
  position: relative;
}

/* Grid wrappers must not break layout */
.stories-grid > .cms-injected,
.stories-grid > .cms-fallback,
.biz-grid > .cms-injected,
.biz-grid > .cms-fallback,
.testimonial-grid > .cms-injected,
.testimonial-grid > .cms-fallback,
.teaser-grid > .cms-injected,
.teaser-grid > .cms-fallback,
.events-grid > .cms-injected,
.events-grid > .cms-fallback {
  display: contents;
}

.cms-skeleton {
  display: none;
}

.cms-loading .cms-skeleton {
  display: block;
}

.cms-loaded .cms-fallback {
  display: none;
}

.cms-loaded .cms-skeleton {
  display: none;
}

.cms-fade-in {
  animation: cmsFadeIn 0.4s ease forwards;
}

@keyframes cmsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.skeleton-block {
  background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: 6px;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-line {
  height: 14px;
  margin-bottom: 10px;
}

.skeleton-line--short { width: 40%; }
.skeleton-line--med { width: 70%; }
.skeleton-line--long { width: 100%; }

.skeleton-card {
  height: 180px;
  margin-bottom: 16px;
}

/* Community partner ad slot */
.community-ad {
  padding: 2rem 5%;
  background: var(--sand);
  text-align: center;
}

.community-ad-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--indigo);
  opacity: 0.55;
  margin-bottom: 0.75rem;
}

.community-ad-link {
  display: inline-block;
  max-width: 720px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(27, 45, 94, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.community-ad-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(27, 45, 94, 0.18);
}

.community-ad-link img {
  display: block;
  width: 100%;
  max-height: 120px;
  object-fit: cover;
}

.community-ad-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--indigo);
  margin-top: 0.5rem;
}