/* ==========================================================================
   AREA PAGE — Template-specific styles
   Depends on: areas-shared.css
   ========================================================================== */

/* --- Hero variant --- */
.al-hero--area {
  background:
    radial-gradient(800px 380px at 75% 8%, rgba(255,39,20,.14), transparent 60%),
    radial-gradient(800px 380px at 15% 0%, rgba(2,67,91,.10), transparent 60%),
    linear-gradient(180deg, var(--al-light), var(--al-white));
}

/* --- Local Challenges --- */
.al-challenges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.al-challenge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--al-radius-sm);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  font-weight: 700;
  font-size: 14px;
  color: var(--al-dark);
  box-shadow: var(--al-shadow-sm);
}
.al-challenge svg {
  flex-shrink: 0;
  color: var(--al-primary);
}

/* --- Service Items --- */
.al-services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.al-service-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--al-radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--al-dark);
  background: var(--al-white);
  border: 1px solid var(--al-border);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.al-service-item:hover {
  transform: translateY(-1px);
  border-color: var(--al-primary-15);
  background: var(--al-primary-10);
  color: var(--al-primary);
}
.al-service-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* --- Pricing card accent --- */
.al-card--pricing {
  border-top: 3px solid var(--al-primary);
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .al-challenge {
    width: 100%;
  }
  .al-service-item {
    width: 100%;
    justify-content: center;
  }
}