/* 05-proof.css - P5 Proof. Every selector below starts with .s-proof
   or @media, per the section 4.4 collision rule. */

.s-proof .s-proof__feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.s-proof__art {
  background: var(--paper-3);
  padding: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.s-proof__art .mock {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  min-width: 0;
}

.s-proof__art .doodle {
  position: absolute;
  width: 80px;
  height: 50px;
  opacity: .6;
}

.s-proof__art .doodle--tl {
  top: 16px;
  left: 16px;
}

.s-proof__art .doodle--br {
  bottom: 16px;
  right: 16px;
  transform: scale(-1, -1);
}

.s-proof__mock-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.s-proof__mock-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.s-proof .s-proof__mock-actions .btn--outline {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
}

.s-proof__text {
  padding: 40px;
  min-width: 0;
}

.s-proof__text h3 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin: 0 0 16px;
}

.s-proof__text p {
  font-size: var(--fs-body);
}

.s-proof__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1199px) {
  .s-proof__art,
  .s-proof__text {
    padding: 28px;
  }

  .s-proof__grid {
    gap: 16px;
  }
}

@media (max-width: 809px) {
  .s-proof .s-proof__feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-proof__art,
  .s-proof__text {
    padding: 20px;
  }

  .s-proof__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}