/* JFSN CLS / LCP stability fixes (safe, minimal visual change)
   Put at: /assets/css/cls-fixes.css */

/* 1) Reserve space for the hero image so it doesn't push content after it loads */
.hero-image-container {
  position: relative;
  overflow: hidden;
  /* Matches art1010.avif (2800x2464). Keeps layout stable during load */
  aspect-ratio: 2800 / 2464;
  min-height: 60vh;
}

.hero-image-container picture,
.hero-image-container img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
}

/* 2) Same idea for the full-bleed section */
.full-bleed-image-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2800 / 2464;
}

.full-bleed-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3) Artwork of the day: keep image box stable */
.artwork-of-day-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4) Reduce CLS from early transforms/animations: enable after page is ready */
.parallax-slow {
  transform: none !important;
}

html.page-loaded .parallax-slow {
  transform: translateZ(0);
}

/* 5) Portrait + animated GIF wrappers: prevent late sizing */
.jfsn-about-portrait img,
.featured-projects-image {
  width: 100%;
  height: auto;
  display: block;
}
/* === HERO CLS FIX === */
.hero-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 2800 / 2464; /* matches your hero image */
  overflow: hidden;
}

.hero-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Artwork-of-the-Day: Reserve space to prevent CLS when image loads */
.artwork-of-day-content .col-md-4,
.artwork-of-day-skeleton .col-md-4 {
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
}

.artwork-of-day-skeleton .skeleton-image-artwork {
  aspect-ratio: 4 / 3;
  width: 100%;
  min-height: 200px;
}

#artworkOfDayImage,
.artwork-of-day-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 4 / 3;
}

.artwork-of-day-content .col-md-4 img {
  border-radius: 18px;
}

/* Full-bleed character img: block display prevents inline spacing CLS */
.full-bleed-gif {
  display: block;
  max-width: 320px;
  height: auto;
  aspect-ratio: 320 / 360;
}

/* Contain sections with scroll-reveal to limit layout impact */
.artwork-of-day-card,
#featured-artwork-section {
  contain: layout;
}