/* Preserve the eight approved material panels and their existing hit-box geometry.
   The title is real, stationary text; only the photo within its own window zooms. */
#view-surfaces .surf-material-line .surf-material-hotspot{
  display:grid;
  grid-template-rows:var(--material-title-row) minmax(0,1fr);
  background:var(--paper,#fff);
  border:1px solid rgba(10,10,10,.16);
  box-sizing:border-box;
  border-radius:clamp(7px,1.1vw,18px);
  overflow:hidden;
  isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.08);
  transform:none;
  filter:none;
  transition:box-shadow .35s var(--ease)
}
#view-surfaces .surf-material-hotspot--top{--material-title-row:21.052632%;--material-photo-y:14.718615%}
#view-surfaces .surf-material-hotspot--bottom{--material-title-row:19.169329%;--material-photo-y:95.689655%}
/* Remove the legacy full-panel raster: it contains a printed title that must not
   sit behind or scale with the new live title. The approved image is reused below. */
#view-surfaces .surf-material-line .surf-material-hotspot::before,
#view-surfaces .surf-material-line .surf-material-hotspot::after{content:none;display:none}
#view-surfaces .surf-material-card-title{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:0 4%;
  background:var(--paper,#fff);
  color:var(--ink,#0a0a0a);
  font:500 clamp(9px,1.9vw,28px)/1.1 var(--font-display);
  letter-spacing:-.015em;
  white-space:nowrap;
  pointer-events:none
}
#view-surfaces .surf-material-card-photo{
  display:block;
  position:relative;
  min-height:0;
  overflow:hidden;
  pointer-events:none
}
#view-surfaces .surf-material-card-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/assets/bco_web_material_grid_exact_lossless_1536x717_20260911.webp');
  background-size:450.45045% auto;
  background-position:var(--mf-crop-x) var(--material-photo-y);
  background-repeat:no-repeat;
  transform:scale(1);
  transform-origin:center;
  transition:transform .7s var(--ease)
}
/* Keep the whole card still so its title cannot rise into the row's clipping edge. */
#view-surfaces .surf-material-line .surf-material-hotspot:hover,
#view-surfaces .surf-material-line .surf-material-hotspot:focus-visible{
  transform:none;
  filter:none;
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.18)
}
#view-surfaces .surf-material-line .surf-material-hotspot:focus-visible{
  outline:2px solid var(--crimson,#a70008);
  outline-offset:-2px
}
@media(hover:hover) and (pointer:fine){
  #view-surfaces .surf-material-hotspot:hover .surf-material-card-photo::before{transform:scale(1.045)}
}
#view-surfaces .surf-material-hotspot:focus-visible .surf-material-card-photo::before{transform:scale(1.045)}
/* Preserve the four-up card dimensions on legacy narrow phone viewports. */
@media(max-width:360px){
  #view-surfaces .surf-material-card-title{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  #view-surfaces .surf-material-line .surf-material-hotspot,
  #view-surfaces .surf-material-card-photo::before{transition:none}
  #view-surfaces .surf-material-hotspot:hover .surf-material-card-photo::before,
  #view-surfaces .surf-material-hotspot:focus-visible .surf-material-card-photo::before{transform:none}
}