/* Universal Media Overflow Protection */
img,
iframe,
video,
embed,
object,
table {
  max-width: 100% !important;
}

/* ── Universal Image Container & Wrapper ── */
.post-thumbnail,
.mspng-card__thumb,
.mspng-feat-thumb,
.mspng-archive-thumb,
.mspng-search-thumb,
.mspng-related-thumb,
.mspng-sports-thumb,
.mspng-post-thumb,
.mspng-image-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
  display: block;
  width: 100%;
}

/* ── Enforce aspect ratio on all wrapper components to prevent Cumulative Layout Shift (CLS) ── */
.mspng-card__thumb,
.mspng-image-wrapper {
  aspect-ratio: var(--card-img-ratio, 16/9);
}

/* Default padding-bottom trick disabled if aspect-ratio supported, fallback otherwise */
@supports (aspect-ratio: 16/9) {
  .mspng-card__thumb {
    padding-bottom: 0 !important;
  }
}
@supports not (aspect-ratio: 16/9) {
  .mspng-card__thumb {
    position: relative;
    padding-bottom: calc(100% / (var(--card-img-ratio, 16/9))) !important;
  }
}

/* ── Inner Image Rules: Center position, fill container ── */
.post-thumbnail img,
.mspng-card__img,
.mspng-feat__img,
.mspng-archive__img,
.mspng-search__img,
.mspng-related__img,
.mspng-post-thumb img,
.mspng-image-wrapper img,
.wp-post-image,
.single-featured-image img,
.single-featured-image__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--card-img-fit, cover) !important;
  object-position: var(--img-focal-x, 50%) var(--img-focal-y, 50%) !important;
  border-radius: var(--card-img-radius, 0);
  display: block;
  max-width: 100%;
  overflow: hidden;
  transition: transform var(--transition-slow, 0.4s ease), opacity var(--transition-base, 0.25s ease);
}

/* ── SVG placeholders ── */
.mspng-post-thumb svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
}

/* ── Exceptions and Adjustments ── */

/* List Cards (horizontal layout) */
.posts-list .mspng-card__thumb {
  aspect-ratio: 16/10 !important;
  padding-bottom: 0 !important;
  height: 100%;
}
.posts-list .mspng-card__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--card-img-fit, cover) !important;
}

/* Popular Posts widget custom circle/square thumbnails */
.card-numbered div[style*="overflow:hidden"] {
  position: relative;
  aspect-ratio: 1/1;
}
.card-numbered div[style*="overflow:hidden"] img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--card-img-fit, cover) !important;
}

/* Featured posts widget thumbnails */
.widget-posts__thumb {
  position: relative;
  width: 64px;
  height: 64px;
  aspect-ratio: 1/1;
}
.widget-posts__thumb img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--card-img-fit, cover) !important;
}

/* ── Gradient overlay on card hover ── */
.mspng-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.45) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 1;
  pointer-events: none;
}
.mspng-card:hover .mspng-card__thumb::after { opacity: 1; }

/* ── Image Hover Effects ── */
.img-hover-zoom .mspng-card__img,
.mspng-card:hover .mspng-card__img {
  transform: scale(1.04);
}
.img-hover-lift .mspng-card:hover {
  transform: translateY(-4px);
}
.img-hover-lift .mspng-card:hover .mspng-card__img {
  transform: none;
}
.img-hover-fade .mspng-card:hover .mspng-card__img {
  opacity: 0.82;
  transform: none;
}
.img-hover-none .mspng-card:hover .mspng-card__img {
  transform: none;
  opacity: 1;
}

/* ── Single Post Featured Image (Adaptive Container) ── */
figure.single-featured-image,
.single-featured-image {
  width: 100%;
  overflow: hidden;
  border-radius: var(--card-radius);
  margin-bottom: var(--space-8);
  background: var(--color-surface-2);
  position: relative;
  aspect-ratio: var(--card-img-ratio, 16/9);
  max-height: 65vh;          /* Cap max height on desktop */
}

/* For browsers without aspect-ratio support */
@supports not (aspect-ratio: 16/9) {
  figure.single-featured-image,
  .single-featured-image {
    padding-bottom: calc(100% / (var(--card-img-ratio, 16/9)));
    aspect-ratio: unset;
  }
}

/* Adaptive fit for Single Post based on orientation class */
.single-featured-image.mspng-image-landscape img,
.single-featured-image.mspng-image-square img,
.single-featured-image.mspng-image-landscape .single-featured-image__img,
.single-featured-image.mspng-image-square .single-featured-image__img {
  object-fit: cover !important;
}

.single-featured-image.mspng-image-portrait img,
.single-featured-image.mspng-image-portrait .single-featured-image__img {
  object-fit: contain !important;
  background: #0f172a; /* Dark letterboxing background for premium look */
}

/* ── Related Posts Images ── */
.mspng-related-posts__grid .mspng-card__thumb {
  aspect-ratio: var(--card-img-ratio, 16/9) !important;
}

/* ── Sports Card Images ── */
.mspng-sports-card__img,
.ms-match-hero__img,
.ms-team-hero__img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--card-img-radius, 0);
  display: block;
}

/* ── Hero/Featured Card ── */
.card-featured .mspng-card__thumb,
.posts-editorial .post-item:nth-child(1) .mspng-card__thumb {
  padding-bottom: 0 !important;
  aspect-ratio: 16/9 !important;
  max-height: 380px !important;
}
.card-featured .mspng-card__img,
.posts-editorial .post-item:nth-child(1) .mspng-card__img {
  position: absolute !important;
  height: 100% !important;
  object-fit: var(--card-img-fit, cover) !important;
}

/* ── Archive/Category Hero Image ── */
.mspng-archive-hero__thumb {
  width: 100%;
  max-height: 380px;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-8);
}
.mspng-archive-hero__thumb img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center;
}

/* ═══════════════════════════════════════════════════════════
   TEXT ALIGNMENT — Design Center → CSS Bridge → Frontend
   All text-align values come from --text-align-* CSS vars.
   ═══════════════════════════════════════════════════════════ */

/* ── Card Titles ── */
.mspng-card__title,
.ms-card__title,
.card-title,
[class*="card__title"],
[class*="card-title"] {
  text-align: var(--text-align-card-title, left);
}

/* ── Card Excerpts / Descriptions ── */
.mspng-card__excerpt,
.ms-card__excerpt,
.card-excerpt,
[class*="card__excerpt"],
[class*="card-excerpt"],
.mspng-card__desc {
  text-align: var(--text-align-card-excerpt, left);
}

/* ── Sidebar / Widget Text ── */
.widget,
.widget_text p,
.widget ul,
.widget ol,
.sidebar .widget p,
.mspng-widget p {
  text-align: var(--text-align-widget, left);
}

/* ── Widget Titles: always left for readability ── */
.widget-title,
.widgettitle,
.widget .widget-title {
  text-align: var(--text-align-widget, left);
}

/* ── Footer ── */
.mspng-footer p,
.site-footer p,
.footer-widget p,
.footer-widget ul,
.footer-widget ol {
  text-align: var(--text-align-footer, left);
}

/* ── Comments ── */
.comment-content p {
  text-align: var(--text-align-content, justify);
}

/* ── Justification: suppress on RTL elements and headings inside cards ── */
/* Card titles should never be justified — it looks bad at short line lengths */
.mspng-card__title,
[class*="card__title"] {
  hyphens: none !important;
}
/* Hyphenation aid for justified body text */
body, p, .mspng-post-content p {
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Layout & Footer Column Protection System ── */
.mspng-footer-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: var(--space-6) !important;
}

.footer-widget,
.mspng-footer-widgets .footer-widget {
  display: flex !important;
  flex-direction: column !important;
  min-height: 1px !important;
  box-sizing: border-box !important;
}

/* Empty footer widgets collapsing and hidden area rules */
.footer-widget:empty,
.mspng-footer-widgets .footer-widget:empty {
  display: none !important;
}

/* ── Custom Image Wrappers for List / Circle / Tab Elements ── */
.mspng-card__thumb-list-wrapper {
  width: 120px !important;
  height: 80px !important;
  aspect-ratio: 3/2 !important;
}
.widget-posts__thumb-circle {
  width: 56px !important;
  height: 56px !important;
  aspect-ratio: 1/1 !important;
  border-radius: var(--radius-lg);
}
.mspng-tab-post-thumb-wrapper {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1/1 !important;
}

.mspng-carousel-img-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
}

.mspng-fit-contain img {
  object-fit: contain !important;
}

.mspng-fit-cover img {
  object-fit: cover !important;
}

.mspng-image-ratio-auto,
[style*="--card-img-ratio: auto"] .mspng-card__thumb,
[style*="--card-img-ratio:auto"] .mspng-card__thumb,
.mspng-card__thumb[style*="aspect-ratio: auto"],
.mspng-card__thumb[style*="aspect-ratio:auto"] {
  aspect-ratio: auto !important;
  height: auto !important;
}

.mspng-image-ratio-auto > a,
.mspng-image-ratio-auto .mspng-post-thumb,
[style*="--card-img-ratio: auto"] .mspng-card__thumb > a,
[style*="--card-img-ratio:auto"] .mspng-card__thumb > a,
[style*="--card-img-ratio: auto"] .mspng-card__thumb .mspng-post-thumb,
[style*="--card-img-ratio:auto"] .mspng-card__thumb .mspng-post-thumb {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  inset: auto !important;
}

.mspng-image-ratio-auto img,
[style*="--card-img-ratio: auto"] .mspng-card__thumb img,
[style*="--card-img-ratio:auto"] .mspng-card__thumb img,
[style*="--card-img-ratio: auto"] .mspng-card__img,
[style*="--card-img-ratio:auto"] .mspng-card__img {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  inset: auto !important;
}