/* Striped placeholder pattern with caption */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.04) 0 14px,
      rgba(0, 0, 0, 0.08) 14px 28px
    ),
    linear-gradient(180deg, #e8e0d4 0%, #d8cdb8 100%);
  color: #5a4a35;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
}

.ph--green {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.04) 0 14px,
      rgba(0, 0, 0, 0.08) 14px 28px
    ),
    linear-gradient(180deg, #d6dcc4 0%, #b8c39d 100%);
  color: #4a5538;
}

.ph--wood {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.04) 0 14px,
      rgba(0, 0, 0, 0.08) 14px 28px
    ),
    linear-gradient(180deg, #e6cfa9 0%, #c7a877 100%);
  color: #6b4d24;
}

.ph--cool {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.04) 0 14px,
      rgba(0, 0, 0, 0.08) 14px 28px
    ),
    linear-gradient(180deg, #d4d8dd 0%, #aab2bb 100%);
  color: #3a4452;
}

.ph__caption {
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
  white-space: nowrap;
}