/* =============================================================
   MS-PRO NEXT GENERATION — IMAGE CONTROLS
   Universal featured image aspect ratio, fit, and hover rules.
   Applied globally: cards, archives, single, sports, search, related.
   Controlled by Design Center via CSS Bridge CSS variables.
   ============================================================= */

/* ── Universal Image Container ── */
.post-thumbnail,
.mspng-card__thumb,
.mspng-feat-thumb,
.mspng-archive-thumb,
.mspng-search-thumb,
.mspng-related-thumb,
.mspng-sports-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,
.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,
.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)));
}

/* 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 ── */
/*
 * Container: width 100%, aspect-ratio controlled, overflow hidden.
 * Image: fills container, object-fit from Design Center.
 * Rule: the container drives size. The image NEVER dictates page height.
 */
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);
  /* Use padding-bottom trick for aspect ratio so container drives height */
  position: relative;
  padding-bottom: calc(100% / (var(--card-img-ratio, 16/9)));
}
.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 {
  padding-bottom: 56.25%; /* Always 16:9 for hero */
}
.card-featured .mspng-card__img {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
  height: 100%;
}

/* ── 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;
}