/* Resources Page Specific Styles */

.page-header {
  padding: calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 8);
  background: linear-gradient(135deg, var(--slate-50) 0%, var(--white) 100%);
}

.downloads {
  padding: calc(var(--u) * 8) calc(var(--u) * 6);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 3);
}

.download-card {
  display: flex;
  flex-direction: column;
}

.download-card .card-header {
  margin-bottom: calc(var(--u) * 3);
}

.download-card p {
  flex-grow: 1;
  margin-bottom: calc(var(--u) * 4);
  color: var(--slate-700);
}

.download-card .btn {
  align-self: flex-start;
}

.workflows {
  padding: calc(var(--u) * 8) calc(var(--u) * 6);
  background-color: var(--slate-50);
}

.workflow-card {
  display: flex;
  flex-direction: column;
}

.workflow-card h3 {
  margin-bottom: calc(var(--u) * 3);
  color: var(--royal);
}

.workflow-card p {
  color: var(--slate-700);
}

.how-to-use {
  padding: calc(var(--u) * 8) calc(var(--u) * 6);
}

.how-to-use p {
  max-width: 900px;
  color: var(--slate-700);
}

.newsletter {
  padding: calc(var(--u) * 8) calc(var(--u) * 6);
  background-color: var(--slate-50);
}

.newsletter-form {
  max-width: 600px;
  margin-top: calc(var(--u) * 6);
}

.newsletter-form .form-group {
  margin-bottom: calc(var(--u) * 6);
}

.checkbox-group {
  background-color: var(--white);
  padding: calc(var(--u) * 4);
  border-radius: var(--r-sm);
  border: 1px solid var(--slate-200);
  margin-bottom: calc(var(--u) * 6);
}

.checkbox-group .form-label {
  margin-bottom: calc(var(--u) * 3);
  font-weight: 600;
  color: var(--slate-900);
}

.newsletter-form .checkbox-group .checkbox-item {
  margin-bottom: calc(var(--u) * 3);
}

.newsletter-form .checkbox-group .checkbox-item:last-child {
  margin-bottom: 0;
}

.newsletter-form .checkbox-group .checkbox-item label {
  font-size: 14px;
  line-height: 20px;
  color: var(--slate-700);
  flex: 1;
}

@media (max-width: 768px) {
  .page-header {
    padding: calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 6);
  }

  .downloads,
  .workflows,
  .how-to-use,
  .newsletter {
    padding: calc(var(--u) * 6) calc(var(--u) * 4);
  }
}

