/* 5041 Safety Training Module additions */
.safety-hero h1,
.safety-hero .cytitle { max-width: 1050px; margin: 0 auto; }

.safety-slide h2,
.safety-vertical h2,
.safety-quiz h2 {
  font-size: 1.42em;
  margin-bottom: 0.42rem;
}

.safety-intro {
  max-width: 1050px;
  margin: 0 auto 0.65rem;
  font-size: 0.58em;
  line-height: 1.22;
}

.safety-grid-2,
.safety-grid-3,
.safety-grid-4,
.safety-source-grid,
.safety-tool-grid {
  display: grid;
  gap: 0.7rem;
  max-width: 1100px;
  margin: 0 auto;
}

.safety-grid-2 { grid-template-columns: 1fr 1fr; }
.safety-grid-3 { grid-template-columns: repeat(3, 1fr); }
.safety-grid-4 { grid-template-columns: repeat(4, 1fr); }
.safety-source-grid { grid-template-columns: repeat(3, 1fr); }
.safety-tool-grid { grid-template-columns: repeat(3, 1fr); }

.safety-card,
.safety-source-card,
.safety-tool-card,
.safety-image-card,
.safety-action-card,
.safety-step-card {
  background: var(--light);
  border-left: 10px solid var(--red);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  text-align: left;
}

.safety-card-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
    background: var(--light);
  border-left: 10px solid var(--red);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  text-align: left;
}

.safety-card-center.gray
 { background: var(--black); color: var(--white); }

.safety-card-center h3
 {
  margin: 0 0 0.28rem;
  font-size: 0.68em;
}

.safety-card-center p {
  margin: 0;
  font-size: 0.42em;
  line-height: 1.18;
}

.safety-card-center li {
  font-size: 0.43em;
  line-height: 1.18;
  margin-bottom: 0.12rem;
}

.safety-card-center ul { 
  margin: 0.25rem 0 0; 
  padding-left: 0.85em; 
}


.safety-card.gray,
.safety-source-card.gray,
.safety-tool-card.gray { border-left-color: var(--gray); }
.safety-card.dark { background: var(--black); color: var(--white); }

.safety-card h3,
.safety-source-card h3,
.safety-tool-card h3,
.safety-action-card h3,
.safety-step-card h3 {
  margin: 0 0 0.28rem;
  font-size: 0.68em;
}

.safety-card p,
.safety-source-card p,
.safety-tool-card p,
.safety-action-card p,
.safety-step-card p {
  margin: 0;
  font-size: 0.42em;
  line-height: 1.18;
}

.safety-card li,
.safety-source-card li,
.safety-tool-card li,
.safety-action-card li,
.safety-step-card li {
  font-size: 0.43em;
  line-height: 1.18;
  margin-bottom: 0.12rem;
}

.safety-card ul,
.safety-tool-card ul,
.safety-action-card ul,
.safety-step-card ul { 
  margin: 0.25rem 0 0; 
  padding-left: 0.85em; 
}

.safety-callout {
  max-width: 1050px;
  margin: 0.7rem auto 0;
  padding: 0.55rem 0.75rem;
  background: var(--white);
  border-left: 10px solid var(--red);
  border-radius: 8px;
}
.safety-callout p { margin: 0; font-size: 0.5em; line-height: 1.18; }
.safety-callout.gray { border-left-color: var(--gray); }

.safety-img {
  width: 100%;
  height: 350px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  display: block;
  margin: 0 0 0;
}

.safety-img.tall { height: 400px; }
.safety-img.wide { height: 360px; }
.safety-img.small { height: 150px; }
.safety-image-card img { width: 100%; height: 480px; object-fit: contain; background: #fff; }

.safety-split {
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 0.75rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

.safety-split.reverse { 
  grid-template-columns: 1fr 46%; }

.safety-list-large li { font-size: 0.52em; line-height: 1.22; margin-bottom: 0.22rem; }

.safety-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  max-width: 1050px;
  margin: 0.4rem auto 0;
}
.safety-badge {
  font-family: "Droid Sans", Arial, sans-serif;
  background: var(--black);
  color: var(--white);
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  font-size: 0.38em;
  font-weight: 700;
}
.safety-badge.red { background: var(--red); }
.safety-badge.gray { background: var(--gray); }

.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; max-width: 1050px; margin: .4rem auto 0; }
.review-item { background: #fff; border: 2px solid #ccc; border-left: 8px solid var(--gray); border-radius: 8px; padding: .5rem; font-size: .42em; font-weight: 700; cursor: pointer; text-align: left; }
.review-item.reviewed { border-left-color: #2e7d32; background: #e6f4ea; }
.review-feedback { margin: .45rem auto 0; font-size: .42em; font-weight: 700; text-align: center; }

/* Sort interactives */
.safety-sort-slide .sort-bank,
.safety-sort-slide .sort-targets,
.safety-order-slide .order-list { max-width: 1050px; margin: 0 auto; }

.safety-sort-slide .sort-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.35rem;
  background: var(--light);
  border: 3px dashed var(--gray);
  border-radius: 8px;
  min-height: 86px;
  max-height: 150px;
  overflow-y: auto;
}

.safety-sort-slide .sort-chip,
.safety-order-slide .order-card {
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: 7px;
  padding: 0.22rem 0.42rem;
  font-size: 0.34em;
  line-height: 1.1;
  font-weight: 700;
  color: #222;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.safety-sort-slide .sort-chip.dragging,
.safety-order-slide .order-card.dragging { opacity: .45; }
.safety-sort-slide .sort-chip.correct,
.safety-order-slide .order-card.correct { border-color: #2e7d32; background: #e6f4ea; }
.safety-sort-slide .sort-chip.incorrect,
.safety-order-slide .order-card.incorrect { border-color: #b00020; background: #fdecea; }

.safety-sort-slide .sort-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: .6rem;
}

.safety-sort-slide .sort-zone {
  min-height: 230px;
  background: var(--light);
  border-left: 10px solid var(--red);
  border-radius: 8px;
  padding: 0.45rem;
}
.safety-sort-slide .sort-zone.gray { border-left-color: var(--gray); }
.safety-sort-slide .sort-zone h3 { font-size: .58em; margin: 0 0 .25rem; text-align: center; }
.safety-sort-slide .sort-list { display: flex; flex-direction: column; gap: .22rem; min-height: 160px; }
.safety-sort-slide .drag-over,
.safety-order-slide .drag-over { outline: 4px solid var(--red); outline-offset: 2px; }

.activity-controls { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .45rem; }
.activity-feedback { min-width: 260px; margin: 0; font-size: .4em; font-weight: 700; }
.quiz-button, .safety-button {
  font-size: .38em;
  padding: .32rem .7rem;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-family: "Droid Sans", Arial, sans-serif;
  font-weight: 700;
  cursor: pointer;
}
.quiz-button.secondary, .safety-button.secondary { background: var(--gray); }

.safety-order-slide .order-list {
  display: grid;
  gap: .3rem;
  background: var(--light);
  border: 3px dashed var(--gray);
  border-radius: 8px;
  padding: .45rem;
}
.safety-order-slide .order-card { font-size: .42em; padding: .35rem .5rem; }

/* Quiz */
.quiz-slide .tag { margin-bottom: .1rem; }
.progress-note { font-family: "Droid Sans", Arial, sans-serif; font-size: .42em; color: var(--gray); margin-bottom: .25rem; }
.quiz-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--light);
  border-left: 10px solid var(--red);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  text-align: left;
}
.quiz-card p { font-size: .64em; line-height: 1.2; margin: 0 0 .55rem; font-weight: 700; }
.quiz-card label { display: block; font-size: .5em; line-height: 1.18; margin: .32rem 0; padding: .25rem .35rem; background: #fff; border-radius: 6px; }
.quiz-card input { transform: scale(1.2); margin-right: .35rem; }
.result { font-size: .62em; font-weight: 700; background: #fdecea; border-left: 10px solid #b00020; padding: .75rem; border-radius: 8px; max-width: 900px; margin: .6rem auto; }
.result.success { background: #e6f4ea; border-left-color: #2e7d32; }
.locked { opacity: .45; filter: grayscale(1); }

@media (max-width: 1100px) {
  .safety-grid-4, .safety-tool-grid { grid-template-columns: repeat(4, 1fr); gap: .45rem; }
  .safety-grid-3, .safety-source-grid { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .safety-card, .safety-source-card, .safety-tool-card { padding: .45rem .5rem; }
  .safety-card h3, .safety-source-card h3, .safety-tool-card h3 { font-size: .55em; }
  .safety-card p, .safety-source-card p, .safety-tool-card p, .safety-card li, .safety-tool-card li { font-size: .34em; }
  .safety-img { height: 160px; }
  .safety-img.wide { height: 270px; }
  .safety-img.tall { height: 320px; }
  .safety-intro { font-size: .45em; }
  .review-grid { gap: .35rem; }
  .review-item { font-size: .34em; }
  .quiz-card p { font-size: .54em; }
  .quiz-card label { font-size: .42em; }
}

.pdf-image-link {
  display: block;
  max-width: 500px;
  margin: 0 auto;
  text-decoration: none;
}

.pdf-preview-img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  display: block;
  background: #ffffff;
  border: 2.5px solid #980000;
  border-radius: 2.5px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.pdf-image-link:hover .pdf-preview-img,
.pdf-image-link:focus .pdf-preview-img {
  outline: 3px solid #980000;
  outline-offset: 4px;
  transform: scale(1.01);
}

.safety-resource-slide {
  height: 100%;
}

.safety-resource-intro {
  max-width: 1000px;
  margin: 0 auto 0.7rem;
  font-size: 0.5em;
  line-height: 1.2;
  text-align: center;
}

.safety-resource-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  max-width: 1120px;
  margin: 0 auto;
}

.safety-resource-card {
  background: #f4f4f4;
  border-left: 10px solid var(--red);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  text-align: left;
}

.safety-resource-card h3 {
  margin: 0 0 0.3rem;
  font-size: 0.72em;
}

.safety-resource-card p {
  margin: 0 0 0.55rem;
  font-size: 0.42em;
  line-height: 1.18;
}

.resource-link-list {
  display: grid;
  gap: 0.28rem;
}

.resource-link-list a {
  display: block;
  background: #ffffff;
  border-left: 7px solid var(--red);
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
  color: #000000;
  font-family: "Droid Sans", Arial, sans-serif;
  font-size: 0.36em;
  font-weight: 700;
  text-decoration: none;
}

.resource-link-list a:hover,
.resource-link-list a:focus {
  background: var(--red);
  color: #ffffff;
}

.safety-resource-slide .elec-callout {
  margin-top: 0.65rem;
}

@media (max-width: 900px) {
  .safety-resource-grid {
    grid-template-columns: 1fr;
  }
}

.tool-safety-slide .safety-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tool-safety-slide .safety-list-large {
  margin-top: 0;
  margin-bottom: 0;
}