/**
 * st-lazy-media.css — CLS-safe media containers for Core Web Vitals.
 * Pair with /js/st-lazy-media.js on homepage and magazine pages.
 */

/* Reserve space before lazy images/backgrounds paint (prevents layout shift) */
.st-media-box {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
}

.st-media-box--hero {
  aspect-ratio: 4 / 3;
}

.st-media-box--card {
  aspect-ratio: 16 / 10;
}

.st-media-box--thumb {
  aspect-ratio: 1 / 1;
}

.st-media-box--mag-banner {
  aspect-ratio: 16 / 9;
  min-height: 200px;
}

.st-media-box--mag-thumb {
  aspect-ratio: 16 / 9;
  min-height: 70px;
}

.st-media-box img,
.st-media-box picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lazy CSS background-image placeholders (magazine cards) */
.st-lazy-bg {
  background-color: #e8f7f8;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.st-lazy-bg.is-loaded {
  background-color: transparent;
}

.st-lazy-bg.is-error {
  background-color: #eef2f2;
}

/* Shimmer placeholder while off-screen backgrounds load */
.st-lazy-bg:not(.is-loaded):not(.is-error) {
  background-image: linear-gradient(
    90deg,
    #e8f7f8 0%,
    #f4fbfb 50%,
    #e8f7f8 100%
  ) !important;
  background-size: 200% 100%;
  animation: st-lazy-shimmer 1.4s ease-in-out infinite;
}

@keyframes st-lazy-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Deferred below-fold sections — revealed after idle/intersection */
[data-st-defer-section] {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

[data-st-defer-section].st-defer-visible {
  content-visibility: visible;
}

/* Magazine-specific CLS guards (pairs with data-st-lazy-bg migration) */
.st-lazy-bg.trending_auth_img,
.st-lazy-bg.People_and_Stories_Banner_Img,
.st-lazy-bg.section2_trending_auth_img {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.st-lazy-bg.trending_auth_img_small,
.st-lazy-bg.People_Stories_small_img {
  aspect-ratio: 16 / 9;
  min-height: 70px;
  width: 100%;
}

.st-lazy-bg.my-magazine-card {
  aspect-ratio: 3 / 4;
  min-height: 280px;
}

/* App store / Play store badges — never stretch (magazine + footer) */
.store_icons_width,
img[src*="app-store"],
img[src*="google-play"] {
  width: auto !important;
  max-width: 150px;
  height: auto !important;
  max-height: 44px;
  object-fit: contain;
}

/* Owl Carousel is display:none until .owl-loaded — show first slide before init */
#testimonial-owl.owl-carousel:not(.owl-loaded),
#owl-1.owl-carousel:not(.owl-loaded),
#owl-3.owl-carousel:not(.owl-loaded) {
  display: block !important;
}

#testimonial-owl.owl-carousel:not(.owl-loaded) > .item ~ .item,
#owl-1.owl-carousel:not(.owl-loaded) > .item ~ .item,
#owl-3.owl-carousel:not(.owl-loaded) > .item ~ .item {
  display: none;
}