/* ========================================
   Applications Page — css/pages/applications.css
   ======================================== */

/* Page Header */

.page-header {
  background-color: var(--color-off-white);
  border-bottom: 1px solid var(--color-pale-aqua);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

.page-header h1 {
  margin-bottom: var(--space-md);
}

.page-header-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-dark-gray);
  max-width: 720px;
}

/* Conversion Capabilities */

.conversion h2 {
  margin-bottom: var(--space-lg);
}

/* Client Categories */

.client-categories {
  background-color: var(--color-off-white);
}

.client-categories h2 {
  margin-bottom: var(--space-xl);
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.category-block {
  background-color: var(--color-white);
  border: 1px solid var(--color-pale-aqua);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
}

.category-block h3 {
  margin-bottom: var(--space-sm);
}

.category-block p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark-gray);
}

/* Compliance Standards */

.compliance h2 {
  margin-bottom: var(--space-md);
}

.compliance-intro {
  font-size: 16px;
  color: var(--color-dark-gray);
  margin-bottom: var(--space-xl);
}

.standards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.standard-item {
  background-color: var(--color-off-white);
  border: 1px solid var(--color-pale-aqua);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
}

.standard-name {
  font-family: var(--font-condensed-medium);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-near-black);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-xs);
}

.standard-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-medium-gray);
  line-height: 1.4;
}

/* ========================================
   Responsive — Tablet (768px)
   ======================================== */

@media (min-width: 768px) {
  .page-header-intro {
    font-size: 18px;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .standards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   Responsive — Desktop (1024px)
   ======================================== */

@media (min-width: 1024px) {
  .page-header-intro {
    font-size: 19px;
  }

  .standards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}