/* ================================
   Life Domains Page Styles
   Load after shared.css on life-domains.html
================================ */

.life-domain-overview {
  text-align: left;
  padding-top: 24px;
  padding-bottom: 30px;
}

.domain-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.domain-detail-card {
  border-radius: var(--radius-lg);
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.052));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.domain-detail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(82,255,224,.32);
}

.domain-detail-card .domain-icon {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: rgba(82,255,224,.13);
  border: 1px solid rgba(82,255,224,.22);
  margin-bottom: 14px;
}

.domain-detail-card h3 {
  margin-bottom: 10px;
}

.domain-detail-card ul {
  margin: 16px 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.domain-detail-card li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.45;
  font-size: .95rem;
}

.domain-detail-card li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
}

.domain-detail-card .card-link {
  margin-top: auto;
}

.domain-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.domain-chip-row span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  color: var(--soft);
  font-size: .78rem;
  font-weight: 800;
}

.domain-feature-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.domain-feature-panel {
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 46px);
  background:
    linear-gradient(135deg, rgba(82,255,224,.12), rgba(185,150,255,.12)),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}

.domain-feature-panel ul {
  margin: 20px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.7;
}

.domain-journey-table {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
}

.domain-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.7fr;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.domain-row:last-child {
  border-bottom: none;
}

.domain-row > div {
  padding: 18px;
}

.domain-row.header {
  background: rgba(82,255,224,.12);
  color: var(--text);
  font-weight: 900;
}

.domain-row:not(.header) > div {
  color: var(--muted);
}

.domain-row strong {
  color: var(--text);
}

@media (max-width: 1080px) {
  .domain-map-grid,
  .domain-feature-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .domain-row {
    grid-template-columns: 1fr;
  }

  .domain-row.header {
    display: none;
  }

  .domain-row > div {
    padding: 14px 18px;
  }

  .domain-row > div::before {
    display: block;
    color: var(--teal);
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 4px;
  }

  .domain-row > div:nth-child(1)::before { content: "Domain"; }
  .domain-row > div:nth-child(2)::before { content: "Journey"; }
  .domain-row > div:nth-child(3)::before { content: "Focus"; }
}

@media (max-width: 640px) {
  .domain-map-grid,
  .domain-feature-band {
    grid-template-columns: 1fr;
  }

  .domain-detail-card {
    min-height: auto;
  }
}


/* Step 2A additions */
.life-routing-note { max-width: 760px; margin-top: 18px; color: var(--muted); font-weight: 750; }
.life-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.life-system-card { border-radius: var(--radius-lg); padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.052)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 48px rgba(0,0,0,.18); }
.life-system-card h3 { margin-top: 0; }
.domain-detail-card .domain-actions { display: grid; gap: 10px; margin-top: auto; }
.domain-detail-card .secondary-link { color: var(--soft); font-weight: 850; font-size: .92rem; }
.domain-detail-card .secondary-link:hover { color: var(--teal); }
.domain-row > div:nth-child(1)::before { content: "Life Area"; }
.domain-row > div:nth-child(2)::before { content: "Featured quests"; }
.domain-row > div:nth-child(3)::before { content: "Focus"; }
@media (max-width: 1080px) { .life-system-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .life-system-grid { grid-template-columns: 1fr; } }