/**
 * PAGE: features (WMSProApp — FeaturesPage)
 * Sections: page-hero, features-modules, workflow, features-control, integration
 */

.features-modules {
  background: #fff;
  padding: 4rem 0;
}

.features-modules-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .features-modules-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .features-modules-grid { grid-template-columns: repeat(4, 1fr); }
}

.feature-module-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 2rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  transition: all 0.3s;
}

.feature-module-card:hover {
  transform: translateY(-4px);
  border-color: #bfdbfe;
  box-shadow: 0 20px 25px rgba(15,23,42,.08);
}

.feature-module-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid;
}

.features-control {
  background: #fff;
  padding: 6rem 0;
}

.features-control-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .features-control-grid { grid-template-columns: 0.85fr 1.15fr; }
}

.features-control-panel {
  border-radius: 2.5rem;
  border: 1px solid #e2e8f0;
  background: #020617;
  padding: 1.5rem;
  color: #fff;
  box-shadow: 0 25px 50px rgba(15,23,42,.2);
}

.features-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.08);
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.1);
}

.features-mini-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .features-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

.features-mini-card {
  border-radius: 1.5rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 1.25rem;
}

.features-mini-card h3 {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 900;
  color: #020617;
}

.features-mini-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  color: #475569;
}

.feature-module-card h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #020617;
}

.feature-module-desc {
  margin-top: 0.875rem;
  flex: 1;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: #475569;
}

.feature-module-bullets {
  margin-top: 1.5rem;
  border-top: 1px solid #f1f5f9;
  padding-top: 1.25rem;
}

.feature-module-icon--blue { color: #2563eb; background: #eff6ff; border-color: #dbeafe; }
.feature-module-icon--emerald { color: #059669; background: #ecfdf5; border-color: #d1fae5; }
.feature-module-icon--indigo { color: #4f46e5; background: #eef2ff; border-color: #e0e7ff; }
.feature-module-icon--amber { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.feature-module-icon--rose { color: #e11d48; background: #fff1f2; border-color: #fecdd3; }
.feature-module-icon--purple { color: #9333ea; background: #faf5ff; border-color: #e9d5ff; }
.feature-module-icon--cyan { color: #0891b2; background: #ecfeff; border-color: #cffafe; }
.feature-module-icon--slate { color: #334155; background: #f8fafc; border-color: #e2e8f0; }

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  color: #334155;
}

.check-list .icon {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

.features-control-title {
  margin-top: 1rem;
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1.2;
  color: #020617;
}

@media (min-width: 640px) {
  .features-control-title { font-size: 2.25rem; }
}

.features-control-lead {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  color: #475569;
}

.features-control-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.features-control-panel-label {
  font-size: 0.875rem;
  font-weight: 900;
  color: #93c5fd;
}

.features-control-panel-title {
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}

.features-alert-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.features-alert-title {
  font-weight: 900;
  color: #fff;
}

.features-alert-desc {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
}

.features-alert-severity {
  flex-shrink: 0;
  border-radius: 9999px;
  background: rgba(255,255,255,.1);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 900;
  color: #dbeafe;
}