/* ============================================================
   PROJECT IMAGES — reusable image classes for all project pages
   Supports: silk-towers and all future project detail pages.

   Usage:
     <div class="proj-img-wrap proj-ar-4-3">
       <img class="proj-img" src="..." alt="..." loading="lazy" decoding="async">
     </div>

   Hero background:
     <img class="proj-img-hero" src="..." alt="" loading="eager" decoding="async">

   Gallery strip:
     <div class="proj-gallery-strip">
       <div class="proj-img-wrap proj-ar-4-3">…</div> × 3
     </div>
   ============================================================ */

/* ── BASE WRAPPER ─────────────────────────────────────────── */
.proj-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--s1, #0f0f0f);
  display: block;
}

/* Diagonal fallback stripe — visible while image is absent or loading */
.proj-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 14px,
    rgba(196, 163, 90, 0.018) 14px,
    rgba(196, 163, 90, 0.018) 15px
  );
  pointer-events: none;
  z-index: 0;
}

/* ── IMAGE ELEMENT ────────────────────────────────────────── */
.proj-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
  /* Smooth fade-in prevents hard pop on load */
  opacity: 0;
  transition: opacity 0.45s ease;
}

.proj-img.is-loaded {
  opacity: 1;
}

/* ── HERO BACKGROUND IMAGE ────────────────────────────────── */
/* Sits behind all hero overlays, content text stays legible  */
.proj-img-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.42;
  z-index: 0;
  transition: opacity 0.6s ease;
}

.proj-img-hero.is-loaded {
  opacity: 0.42;
}

/* ── CARD VARIANT ─────────────────────────────────────────── */
/* Minimal radius matches the site's sharp luxury aesthetic   */
.proj-img-card {
  border-radius: 2px;
}

/* ── ASPECT RATIO UTILITIES ───────────────────────────────── */
.proj-ar-21-9 { aspect-ratio: 21 / 9; }
.proj-ar-16-9 { aspect-ratio: 16 / 9; }
.proj-ar-4-3  { aspect-ratio: 4  / 3; }
.proj-ar-4-5  { aspect-ratio: 4  / 5; }
.proj-ar-1-1  { aspect-ratio: 1  / 1; }
.proj-ar-3-1  { aspect-ratio: 3  / 1; }

/* ── GALLERY STRIP ────────────────────────────────────────── */
/* 3-column grid; responsive at 640 px → 2-col, last spans   */
.proj-gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

@media (max-width: 640px) {
  .proj-gallery-strip {
    grid-template-columns: 1fr 1fr;
  }

  .proj-gallery-strip .proj-img-wrap:last-child {
    grid-column: 1 / -1;
  }
}

/* ── GOLD BORDER ACCENT ───────────────────────────────────── */
/* Thin gold top border — use on featured images              */
.proj-img-accent {
  border-top: 1px solid rgba(196, 163, 90, 0.28);
}