/* Layout Utilities for Core Web Vitals (CLS) */
.ratiobox {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: #f0f0f0;
}

.ratiobox.ratio-16-9 { padding-top: 56.25%; }
.ratiobox.ratio-4-3 { padding-top: 75%; }
.ratiobox.ratio-1-1 { padding-top: 100%; }
.ratiobox.ratio-blog { padding-top: 62.5%; }
.ratiobox.ratio-slider { padding-top: 30%; }
@media (max-width: 767px) {
  .ratiobox.ratio-slider { padding-top: 69%; }
}
.ratiobox.ratio-banner-home { padding-top: 31.27%; }
.ratiobox.ratio-product { padding-top: 100%; }

/* Fix conflict with original image-resize */
.image-resize.ratiobox {
  padding-bottom: 0 !important;
}

.ratiobox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratiobox .ls-blur-up-is-loading,
.ratiobox .lazyload:not([src]) {
  visibility: hidden;
}

/* Fallback if ratio class is missing */
.ratiobox:not([class*="ratio-"]) {
  height: auto;
  padding-top: 0;
}
.ratiobox:not([class*="ratio-"]) img {
  position: static;
  height: auto;
  width: 100%;
  display: block;
}

/* Video Stability */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* AJAX content placeholder */
.featured-blog-list {
	min-height: 250px;
}
@media (max-width: 767px) {
	.featured-blog-list {
		min-height: 400px;
	}
}