/* ============================================================
   PLACEHOLDERS.CSS — Image Placeholder System
   Remove this file once real images are in place.
   Each .img-ph shows: filename + dimensions + path
   ============================================================ */

/* ── Base placeholder ───────────────────────────────────── */
.img-ph {
  position: relative;
  background: var(--bg-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Diagonal stripe pattern */
.img-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(31, 75, 153, 0.04) 10px,
    rgba(31, 75, 153, 0.04) 20px
  );
  pointer-events: none;
}

.img-ph-icon {
  width: 36px;
  height: 36px;
  opacity: 0.25;
  flex-shrink: 0;
}

.img-ph-filename {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue);
  opacity: 0.55;
  text-align: center;
  padding: 0 12px;
  word-break: break-all;
  line-height: 1.4;
}

.img-ph-size {
  font-family: 'Courier New', Courier, monospace;
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ── Dark placeholder (inside navy section) ─────────────── */
.img-ph--dark {
  background: rgba(255, 255, 255, 0.04);
}
.img-ph--dark::before {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.03) 10px,
    rgba(255, 255, 255, 0.03) 20px
  );
}
.img-ph--dark .img-ph-filename { color: var(--blue-light); opacity: 0.5; }
.img-ph--dark .img-ph-size     { color: rgba(255,255,255,0.3); }
.img-ph--dark .img-ph-icon     { opacity: 0.15; }

/* ── Hero placeholder ───────────────────────────────────── */
.hero-placeholder {
  background: linear-gradient(135deg, #1a2a42 0%, #0e1c30 100%);
}
.hero-placeholder .img-ph-filename { color: var(--blue-light); opacity: 0.6; font-size: 11px; }
.hero-placeholder .img-ph-size     { color: rgba(255,255,255,0.35); font-size: 10px; }
.hero-placeholder .img-ph-icon     { opacity: 0.2; }

/* ── Catalog card placeholder ───────────────────────────── */
.catalog-card-img-wrap .img-ph {
  height: 220px;
  background: var(--bg);
}

/* ── Product dark card placeholder ─────────────────────── */
.product-card .img-ph--dark {
  height: 160px;
}

/* ── Project card placeholder ───────────────────────────── */
.project-card-img-wrap .img-ph {
  height: 200px;
}