/* Photo placeholders - replace with real images later
   Each placeholder uses CSS gradients + an SVG-like icon impression. */

.ph {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  color: rgba(15, 23, 42, 0.55);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  background-size: cover;
  background-position: center;
}
.ph-hero       { background: linear-gradient(135deg, #B9E4F3 0%, #6FC4E5 60%, #00A6E0 100%); }
.ph-crown      { background: linear-gradient(135deg, #EAF6FC 0%, #B9E4F3 100%); }
.ph-implant    { background: linear-gradient(135deg, #DFF1FA 0%, #9FD7EE 100%); }
.ph-denture    { background: linear-gradient(135deg, #F4FBFE 0%, #BFE5F3 100%); }
.ph-aligner    { background: linear-gradient(135deg, #E6F6FD 0%, #A8D9EE 100%); }
.ph-bridge     { background: linear-gradient(135deg, #CDE8F4 0%, #6FC4E5 100%); }
.ph-lab        { background: linear-gradient(135deg, #F2FAFE 0%, #C9E7F4 100%); }
.ph-shade      { background: linear-gradient(135deg, #DDF1FA 0%, #9FD7EE 100%); }
.ph-night      { background: linear-gradient(135deg, #EAF6FC 0%, #B0DDF0 100%); }
.ph-teeth      { background: linear-gradient(135deg, #F4FBFE 0%, #BFE5F3 100%); }
.ph-chair      { background: linear-gradient(135deg, #DFF1FA 0%, #6FC4E5 100%); }
.ph-materials  { background: linear-gradient(135deg, #EAF6FC 0%, #B9E4F3 100%); }
.ph .label {
  position: absolute;
  bottom: 14px;
  left: 16px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  text-transform: none;
  letter-spacing: 0;
}