/* Loaded only on template-tools.php — inner content max-width matches .program-page (900px) */

.tools-page {
  padding-bottom: 48px;
  background: var(--gray, #f4f5f7);
}

@media (max-width: 600px) {
  .tools-page {
    padding-bottom: 32px;
  }
}

/* Centered content band (same width as program pages) */
.tools-section-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 600px) {
  .tools-section-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Full-bleed section backgrounds */
.section-tool {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding-top: 40px;
  /* padding-bottom: 40px; */
  min-height: 0;
}

.section-tool:last-of-type {
  padding-bottom: 0;
}

.section-tool.--right {
  background: transparent;
}

.section-tool.--left {
  background: var(--gray, #f4f5f7);
}

.section-tool.--left .tools-section-inner {
  background: #fff;
}

.tools-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px 40px;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Even rows (--left): text left, image right (World row-reverse) */
.section-tool.--left .tools-section-media {
  order: 2;
}

.section-tool.--left .tools-section-body {
  order: 1;
}

@media (max-width: 760px) {
  .tools-section-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    text-align: center;
  }

  .section-tool.--left .tools-section-media,
  .section-tool.--left .tools-section-body {
    order: unset;
  }

  .tools-section-actions {
    justify-content: center;
  }
}

.tools-section-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.tools-section-title {
  margin: 0 0 16px;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text, #333);
}

.tools-section-content.program-body {
  margin-bottom: 24px;
}

.tools-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}