/* ═══════════════════════════════════════════════════════════
   image-pipeline.css
   Add these rules to style.css (or include as a separate
   <link rel="stylesheet"> before style.css closes).

   These are ADDITIVE — they only touch image rendering
   and the crop modal. No other component is affected.
═══════════════════════════════════════════════════════════ */

/* ── Lazy-load fade-in ───────────────────────────────────── */
img[data-src] {
  opacity: 0;
  transition: opacity .35s ease;
}
img.img-loaded {
  opacity: 1;
}

/* ── Prevent layout shift: give images a stable placeholder ─ */
.fc-img,
.hc-card-img,
.sermon-thumb img,
.leader-img,
.bd-spot-img,
.bd-avatar {
  display: block;
  background: var(--glass);
}

/* ── Feed card images — fixed 16:9, faces stay in frame ──── */
.fc-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;   /* shows heads, not feet */
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  min-height: 0;                 /* remove old min-height hacks */
}

/* ── Hero carousel slides ────────────────────────────────── */
.hero-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  background-size: cover !important;
  background-position: center 20% !important; /* bias toward face area */
  background-repeat: no-repeat !important;
  will-change: opacity;
}

.hero-slide.active {
  opacity: 1;
}

/* ── Gallery grid — square, no layout pop ────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}

.gallery-img-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--glass);
  cursor: pointer;
}

.gallery-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity .35s ease, transform .3s ease;
}

.gallery-img-wrap img:not(.img-loaded) {
  opacity: 0;
}

.gallery-img-wrap:active img {
  transform: scale(.97);
}

/* ── Profile picture — always shows the face ─────────────── */
#profilePicImg,
.header-avatar img,
.bd-spot-img,
.bd-avatar,
.leader-img {
  object-fit: cover;
  object-position: center top;
}

/* ── Leadership card images ──────────────────────────────── */
.leader-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
  transition: opacity .35s ease;
}

/* ── Home carousel card images ───────────────────────────── */
.hc-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  display: block;
  transition: opacity .3s ease;
}
.hc-card-img:not(.img-loaded) {
  opacity: 0;
  min-height: 100px;
}

/* ── Sermon thumbnails ───────────────────────────────────── */
.sermon-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--glass);
  flex-shrink: 0;
}

.sermon-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity .35s ease;
}
.sermon-thumb img:not(.img-loaded) {
  opacity: 0;
}

/* ── Lightbox image ──────────────────────────────────────── */
.lb-img {
  display: block;
  max-width: 100%;
  max-height: 70dvh;
  object-fit: contain;
  border-radius: var(--r-sm);
  transition: opacity .3s ease;
}

/* ── Birthday spot photos ────────────────────────────────── */
.bd-spot-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  flex-shrink: 0;
}

.bd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}

/* ── Skeleton shimmer (used before lazy images load) ─────── */
@keyframes ch-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.img-skeleton {
  background: linear-gradient(
    90deg,
    var(--glass)   25%,
    var(--glass-2) 50%,
    var(--glass)   75%
  );
  background-size: 200% 100%;
  animation: ch-shimmer 1.4s infinite;
  border-radius: var(--r-xs);
}

/* ── Crop modal responsive tweaks ───────────────────────── */
@media (min-width: 480px) {
  #imgCropModal {
    align-items: center !important;
  }
  #imgCropSheet {
    border-radius: var(--r) !important;
    max-width: 480px !important;
    margin: 0 auto;
  }
}

/* ── Reduce image memory on low-memory devices ───────────── */
@media (max-width: 400px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── contain: content on gallery items (mobile memory) ───── */
.gallery-img-wrap {
  contain: strict;
}

/* ── Prevent oversized images in feed cards ─────────────── */
.feed-card img,
.event-card img,
.hc-card img {
  max-width: 100%;
  height: auto;
}