/* Photo-card layout. Type roles belong to process-cards.css and shared tokens. */
.pattern-safety-cards {
  background:var(--color-surface);
}
.safety-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:var(--space-6);
  margin:0;
  padding:0;
  list-style:none;
}
.pattern-safety-cards .flow-viewport {
  overflow:visible;
  scroll-snap-type:none;
}
.pattern-safety-cards .flow-controls {display:none}
.safety-cards__card {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:300px;
  overflow:hidden;
  padding:var(--space-6);
  border-radius:var(--action-radius);
  background:var(--color-dark);
  color:var(--color-surface);
}
.safety-cards__image {
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--safety-photo-position,center);
}
.safety-cards__card::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg,rgba(3,14,20,.48),rgba(3,14,20,.64) 45%,rgba(3,14,20,.92));
  pointer-events:none;
}
.safety-cards__card--cta {justify-content:flex-end}
.safety-cards__copy {margin-top:auto}
.safety-cards__card--cta .action {
  width:100%;
  margin-top:auto;
}
.safety-cards__card--cta .action:focus-visible {outline-color:var(--color-surface)}
@media (min-width:1024px) and (max-width:1199px) {
  .safety-cards__card {padding:var(--space-4);min-height:340px}
}
@media (max-width:1023px) {
  .pattern-safety-cards .flow-viewport {
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
  }
  .pattern-safety-cards .flow-controls {display:flex}
  .safety-cards {
    --safety-gap:var(--space-6);
    --safety-card-basis:calc((100% - var(--safety-gap))/2);
    display:flex;
    gap:var(--safety-gap);
  }
  /* The final CTA keeps the same width and starting position as every card. */
  .safety-cards::after {
    content:"";
    flex:0 0 calc(100% - var(--safety-card-basis) - var(--safety-gap));
  }
  .safety-cards__card {
    flex:0 0 var(--safety-card-basis);
    min-height:320px;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
}
@media (max-width:767px) {
  .safety-cards {
    --safety-gap:var(--space-4);
    --safety-card-basis:min(360px,calc(100% - 48px));
  }
}