/* ============================================================
   APPS PAGE — apps.css
   ============================================================ */

/* ── Page Hero ──────────────────────────────────────────────── */
.apps-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--color-primary) 12%, var(--color-bg)) 0%,
    var(--color-bg) 50%,
    color-mix(in oklab, var(--color-gold) 8%, var(--color-bg)) 100%);
  text-align: center;
}

.apps-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, color-mix(in oklab, var(--color-main) 12%, transparent), transparent),
    radial-gradient(ellipse 50% 40% at 80% 70%, color-mix(in oklab, var(--color-gold) 10%, transparent), transparent);
  pointer-events: none;
}

.apps-hero-heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  position: relative;
}

.apps-hero-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  position: relative;
}

.apps-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  position: relative;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  border: 1.5px solid currentColor;
  transition: all var(--transition);
}

.hero-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.hero-pill--main    { color: var(--color-main);     background: var(--color-main-light); }
.hero-pill--marriage { color: var(--color-marriage); background: var(--color-marriage-light); }
.hero-pill--teen    { color: var(--color-teen);     background: var(--color-teen-light); }
.hero-pill--recovery { color: var(--color-recovery); background: var(--color-recovery-light); }

/* ── App Sections ───────────────────────────────────────────── */
.app-section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  border-bottom: 1px solid var(--color-divider);
}

.app-section:last-of-type { border-bottom: none; }

.app-section--main     { --app-accent: var(--color-main);     --app-accent-light: var(--color-main-light); }
.app-section--marriage { --app-accent: var(--color-marriage); --app-accent-light: var(--color-marriage-light); }
.app-section--teen     { --app-accent: var(--color-teen);     --app-accent-light: var(--color-teen-light); }
.app-section--recovery { --app-accent: var(--color-recovery); --app-accent-light: var(--color-recovery-light); }

/* Banner stripe at top of each section */
.app-section-banner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-10);
  background: linear-gradient(135deg, var(--app-accent-light), var(--color-surface));
  border: 1.5px solid color-mix(in oklab, var(--app-accent) 25%, var(--color-border));
}

.app-section-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.app-section-meta { flex: 1; }

.app-section-name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.app-section-tagline {
  font-size: var(--text-base);
  font-style: italic;
  color: var(--app-accent);
  font-family: var(--font-display);
  margin-bottom: var(--space-3);
}

.app-section-mission {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 62ch;
}

/* ── App Feature Grid ───────────────────────────────────────── */
.app-features-heading {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-features-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

.app-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

/* App-accented feature items */
.app-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all var(--transition);
}

.app-feature-item:hover {
  border-color: var(--app-accent);
  background: var(--app-accent-light);
  transform: translateY(-1px);
}

.app-feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-accent);
  flex-shrink: 0;
  margin-top: 6px;
}

.app-feature-item h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: 2px;
}

.app-feature-item p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: none;
}

/* ── Store badges row ───────────────────────────────────────── */
.app-stores-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.app-stores-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-weight: 500;
}

/* ── Pastor/Partner Callout ─────────────────────────────────── */
.pastor-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1.5px solid color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
  border-left: 4px solid var(--color-primary);
}

.pastor-callout-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pastor-callout h4 {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.pastor-callout p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  max-width: none;
}

/* Section nav anchors */
.apps-nav-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 0;
  position: sticky;
  top: 64px;
  background: var(--color-bg);
  z-index: 10;
}

.apps-nav-anchors a {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--transition);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.apps-nav-anchors a:hover { color: var(--color-text); border-color: var(--color-text); }
.apps-nav-anchors a[data-app="main"]:hover    { color: var(--color-main);     border-color: var(--color-main); }
.apps-nav-anchors a[data-app="marriage"]:hover { color: var(--color-marriage); border-color: var(--color-marriage); }
.apps-nav-anchors a[data-app="teen"]:hover    { color: var(--color-teen);     border-color: var(--color-teen); }
.apps-nav-anchors a[data-app="recovery"]:hover { color: var(--color-recovery); border-color: var(--color-recovery); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app-section-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .app-feature-grid {
    grid-template-columns: 1fr;
  }
  .pastor-callout {
    flex-direction: column;
    padding: var(--space-5);
  }
}