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

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

/* ── Universal Image ── */
.post-thumbnail img,
.mspng-card__img,
.mspng-feat__img,
.mspng-archive__img,
.mspng-search__img,
.mspng-related__img,
.mspng-post-thumb img,
.wp-post-image {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--card-img-ratio, 16/9);
  object-fit: var(--card-img-fit, cover);
  object-position: center;
  border-radius: var(--card-img-radius, 0);
  display: block;
  max-width: 100%;
  /* Prevent overflow */
  overflow: hidden;
}

/* ── No stretch, no overflow guarantee ── */
.mspng-card__thumb img,
.mspng-post-thumb img,
.post-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Thumb must have padding-based aspect ratio for absolute children */
.mspng-card__thumb {
  position: relative;
  padding-bottom: calc(100% / (var(--card-img-ratio, 16/9)));
}
.mspng-card__thumb > a:not(.cat-label),
.mspng-card__thumb .mspng-post-thumb {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mspng-post-thumb svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Exception: list cards use fixed width, not full padding */
.card-list .mspng-card__thumb {
  padding-bottom: 0;
  height: 100%;
  min-height: 120px;
}
.card-list .mspng-card__img {
  position: relative;
  height: 100%;
  aspect-ratio: unset;
  inset: unset;
}

/* ── 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 ── */
/* The CSS Bridge injects the active effect. These are the base rules. */
/* Zoom (default) */
.img-hover-zoom .mspng-card__img,
.mspng-card:hover .mspng-card__img {
  transition: transform var(--transition-slow), opacity var(--transition-base);
}

/* Lift — card moves, image stays */
.img-hover-lift .mspng-card:hover {
  transform: translateY(-6px);
}
.img-hover-lift .mspng-card:hover .mspng-card__img {
  transform: none;
}

/* Fade */
.img-hover-fade .mspng-card:hover .mspng-card__img {
  opacity: 0.82;
  transform: none;
}

/* None */
.img-hover-none .mspng-card:hover .mspng-card__img {
  transform: none;
  opacity: 1;
}

/* ── Responsive Adjustments ── */
@media (max-width: 640px) {
  /* On mobile, always use 16:9 for cards regardless of setting */
  .mspng-card__thumb {
    padding-bottom: 56.25%; /* 16:9 */
  }
}

/* ── Single Post Featured Image ── */
/*
 * RULE: Container drives dimensions. Image never exceeds 60vh in height.
 * padding-bottom = aspect ratio trick (16/9 default).
 * max-height: 60vh overrides the percentage when in Full Width layout mode.
 * In full-width mode, a 100vw container × 56.25% = 56.25vw height which can
 * exceed the viewport. max-height: 60vh hard-caps it.
 */
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);
  /* Padding-bottom = aspect ratio container trick */
  position: relative;
  /* Use aspect-ratio as modern approach, with max-height cap */
  aspect-ratio: var(--card-img-ratio, 16/9);
  max-height: 60vh;          /* Never taller than 60% of viewport */
}
/* Fallback for browsers that don't support aspect-ratio: use padding-bottom */
@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;
  }
}
.single-featured-image__img,
.single-featured-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--card-img-fit, cover);
  object-position: center;
  border-radius: 0;
  display: block;
  max-width: 100%;
}

/* ── Related Posts Images ── */
.mspng-related-posts__grid .mspng-card__thumb {
  padding-bottom: calc(100% / (var(--card-img-ratio, 16/9)));
}

/* ── Sports Card Images ── */
.mspng-sports-card__img,
.ms-match-hero__img,
.ms-team-hero__img {
  width: 100%;
  object-fit: var(--card-img-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: 340px !important;
}
.card-featured .mspng-card__img,
.posts-editorial .post-item:nth-child(1) .mspng-card__img {
  position: relative !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  object-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;
}