/**
 * Blog media frames — photography vs. designed artwork
 *
 * Frames (set on .blog-card-image-link / .featured-post-image via data-media-frame):
 *   photo           — landscape photography (~3:2), object-fit: cover
 *   portrait-photo  — portrait photography, native ratio, object-fit: contain (no face crop)
 *   artwork         — designed covers with text/logos, native ratio, object-fit: contain
 *
 * Auto-classified by scripts/blog-media.js from width×height export sizes (see DESIGN-SYSTEM.md).
 * Override anytime: data-media-frame="artwork|photo|portrait-photo" on the link wrapper.
 *
 * Double-width grid cards: set data-featured="true" on .blog-card (not inferred from dimensions).
 */

.blog-card-image-link,
.featured-post-image {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--mid, #f0e4e8);
}

/* ── Landscape photography (default) ───────────────────────────────── */

.blog-card-image-link[data-media-frame="photo"],
.blog-card-image-link:not([data-media-frame]) {
  aspect-ratio: 3 / 2;
}

.blog-card-image-link[data-media-frame="photo"] .blog-card-image,
.blog-card-image-link:not([data-media-frame]) .blog-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ── Portrait photography — full frame, faces never cropped ────────── */

.featured-post-image[data-media-frame="portrait-photo"],
.blog-card-image-link[data-media-frame="portrait-photo"] {
  padding-top: 0 !important;
  height: auto !important;
  aspect-ratio: var(--media-aspect, 2 / 3);
  min-height: 0;
}

.featured-post-image[data-media-frame="portrait-photo"] img,
.blog-card-image-link[data-media-frame="portrait-photo"] .blog-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* ── Designed artwork — full graphic readable, never cropped ───────── */

.featured-post-image[data-media-frame="artwork"],
.blog-card-image-link[data-media-frame="artwork"] {
  padding-top: 0 !important;
  height: auto !important;
  aspect-ratio: var(--media-aspect, 1200 / 630);
  background: var(--panel, #fff);
}

.featured-post-image[data-media-frame="artwork"] img,
.blog-card-image-link[data-media-frame="artwork"] .blog-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* No gradient overlay on non-photo frames */
.blog-card-image-link[data-media-frame="artwork"]::after,
.blog-card-image-link[data-media-frame="portrait-photo"]::after,
.featured-post-image[data-media-frame="artwork"]::after,
.featured-post-image[data-media-frame="portrait-photo"]::after {
  display: none !important;
}

/* No hover zoom on artwork / portrait-photo (prevents clip) */
.blog-card:hover .blog-card-image-link[data-media-frame="artwork"] .blog-card-image,
.blog-card:hover .blog-card-image-link[data-media-frame="portrait-photo"] .blog-card-image,
.featured-post:hover .featured-post-image[data-media-frame="artwork"] img,
.featured-post:hover .featured-post-image[data-media-frame="portrait-photo"] img {
  transform: none !important;
}

/* ── Desktop layout ────────────────────────────────────────────────── */

@media (min-width: 1025px) {
  .featured-post {
    align-items: stretch;
  }

  .featured-post-image[data-media-frame="portrait-photo"] {
    height: 100%;
    min-height: 440px;
  }

  /* Double-width grid span — opt-in only (data-featured="true" on .blog-card) */
  .blog-card[data-featured="true"] {
    grid-column: span 2;
  }
}