/* ═══════════════════════════════════════════════
   Diamond Plate  -  Industrial Texture System
   Elevator thresholds, tool boxes, tread plate
   ═══════════════════════════════════════════════ */

:root {
  /* Diamond plate pattern  -  staggered raised lozenges
     Mimics the raised diamond pattern on elevator thresholds,
     industrial platforms, and Snap-On tool box lids */
  --diamond-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='6' y='1' width='8' height='4' rx='1' fill='rgba(45,122,232,0.07)' transform='rotate(25 10 3)'/%3E%3Crect x='-4' y='11' width='8' height='4' rx='1' fill='rgba(45,122,232,0.07)' transform='rotate(25 0 13)'/%3E%3Crect x='16' y='11' width='8' height='4' rx='1' fill='rgba(45,122,232,0.07)' transform='rotate(25 20 13)'/%3E%3C/svg%3E");

  /* Dense variant  -  tighter pattern for thin accent bands */
  --diamond-plate-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect x='3' y='0.5' width='6' height='3' rx='0.8' fill='rgba(45,122,232,0.1)' transform='rotate(25 6 2)'/%3E%3Crect x='-3' y='6.5' width='6' height='3' rx='0.8' fill='rgba(45,122,232,0.1)' transform='rotate(25 0 8)'/%3E%3Crect x='9' y='6.5' width='6' height='3' rx='0.8' fill='rgba(45,122,232,0.1)' transform='rotate(25 12 8)'/%3E%3C/svg%3E");
}

/* ── Card hover: grid lines only ── */
.card::before {
  background-image:
    linear-gradient(rgba(45,122,232,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,122,232,0.05) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
}

/* ── Footer: diamond plate accent band at top ── */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: var(--diamond-plate-dense);
  background-size: 12px 12px;
  opacity: 0.5;
}

/* ── Hero: diamond plate behind elevator shaft schematic ── */
.hero-schematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--diamond-plate);
  background-size: 20px 20px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 50% 60% at center, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at center, black 10%, transparent 70%);
}

/* ── Diamond plate accent band (standalone section divider) ── */
.diamond-plate-band {
  height: 4px;
  background-image: var(--diamond-plate-dense);
  background-size: 12px 12px;
  opacity: 0.5;
  margin: var(--space-2xl) 0;
  border-radius: 2px;
}

/* ── Diamond plate card variant (for featured/premium cards) ── */
.card--diamond::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background-image: var(--diamond-plate);
  background-size: 20px 20px;
  opacity: 0;
  transition: opacity var(--duration) ease;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.card--diamond:hover::after {
  opacity: 1;
}