/* Elevation Framework - Page-Specific Styles
   Colors and components unique to this framework page.
*/

/* ===== Quadrant Colors ===== */
:root {
  --color-eliminate: #9B8A7B;    /* Muted stone - low energy, stop */
  --color-automate: #7BA37B;     /* Sage green - systems, efficiency */
  --color-delegate: #D4915D;     /* Terracotta - hand off, warm */
  --color-elevate: #E05252;      /* Coral - energy, priority, accent */
}

/* ===== Two Questions Section ===== */
.two-questions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .two-questions {
    grid-template-columns: 1fr;
  }
}

.question-block {
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border-left: 4px solid var(--color-stone);
  transition: all 0.3s ease;
}

.question-block--work {
  border-left-color: var(--color-delegate);
}

.question-block--self {
  border-left-color: var(--color-elevate);
}

.question-block-header {
  margin-bottom: var(--space-4);
}

.question-block-axis {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-stone);
  margin-bottom: var(--space-2);
}

.question-block--work .question-block-axis { color: var(--color-delegate); }
.question-block--self .question-block-axis { color: var(--color-elevate); }

.question-block-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
}

.question-block--work .question-block-title { color: var(--color-delegate); }
.question-block--self .question-block-title { color: var(--color-elevate); }

.question-block-question {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.question-block-description {
  color: var(--color-stone);
  margin: 0;
  line-height: 1.6;
}

/* ===== Quadrant List (Interactive Section) ===== */
.quadrant-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.quadrant-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-parchment);
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.quadrant-item:hover {
  transform: translateX(4px);
}

.quadrant-item[data-highlight="eliminate"]:hover {
  border-left-color: var(--color-eliminate);
  background: color-mix(in srgb, var(--color-eliminate) 8%, var(--color-parchment));
}
.quadrant-item[data-highlight="automate"]:hover {
  border-left-color: var(--color-automate);
  background: color-mix(in srgb, var(--color-automate) 8%, var(--color-parchment));
}
.quadrant-item[data-highlight="delegate"]:hover {
  border-left-color: var(--color-delegate);
  background: color-mix(in srgb, var(--color-delegate) 8%, var(--color-parchment));
}
.quadrant-item[data-highlight="elevate"]:hover {
  border-left-color: var(--color-elevate);
  background: color-mix(in srgb, var(--color-elevate) 8%, var(--color-parchment));
}

.quadrant-item-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quadrant-item-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.quadrant-item-icon--eliminate { background: color-mix(in srgb, var(--color-eliminate) 15%, white); }
.quadrant-item-icon--automate { background: color-mix(in srgb, var(--color-automate) 15%, white); }
.quadrant-item-icon--delegate { background: color-mix(in srgb, var(--color-delegate) 15%, white); }
.quadrant-item-icon--elevate { background: color-mix(in srgb, var(--color-elevate) 15%, white); }

.quadrant-item-content {
  flex: 1;
}

.quadrant-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
}

.quadrant-item[data-highlight="eliminate"] .quadrant-item-title { color: var(--color-eliminate); }
.quadrant-item[data-highlight="automate"] .quadrant-item-title { color: var(--color-automate); }
.quadrant-item[data-highlight="delegate"] .quadrant-item-title { color: var(--color-delegate); }
.quadrant-item[data-highlight="elevate"] .quadrant-item-title { color: var(--color-elevate); }

.quadrant-item-position {
  font-size: 0.85rem;
  color: var(--color-stone);
  margin: 0 0 var(--space-2) 0;
}

.quadrant-item-desc {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.5;
}

/* ===== Interactive Matrix Diagram ===== */
.matrix-interactive {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.matrix-state {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.matrix-state--base {
  position: relative;
}

.matrix-state--eliminate,
.matrix-state--automate,
.matrix-state--delegate,
.matrix-state--elevate {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* Show specific state on hover */
.matrix-interactive[data-active="eliminate"] .matrix-state--eliminate,
.matrix-interactive[data-active="automate"] .matrix-state--automate,
.matrix-interactive[data-active="delegate"] .matrix-state--delegate,
.matrix-interactive[data-active="elevate"] .matrix-state--elevate {
  opacity: 1;
}

/* Hide base when quadrant is active */
.matrix-interactive[data-active="eliminate"] .matrix-state--base,
.matrix-interactive[data-active="automate"] .matrix-state--base,
.matrix-interactive[data-active="delegate"] .matrix-state--base,
.matrix-interactive[data-active="elevate"] .matrix-state--base {
  opacity: 0;
}

/* Matrix Description */
.matrix-description {
  margin-top: var(--space-4);
  min-height: 60px;
  text-align: center;
  width: 100%;
  max-width: 320px;
}

.matrix-desc {
  display: none;
  padding: var(--space-3) var(--space-4);
  background: var(--color-parchment);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  line-height: 1.5;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Show descriptions based on active state */
.matrix-interactive[data-active="eliminate"] ~ .matrix-description .matrix-desc--eliminate,
.matrix-interactive[data-active="automate"] ~ .matrix-description .matrix-desc--automate,
.matrix-interactive[data-active="delegate"] ~ .matrix-description .matrix-desc--delegate,
.matrix-interactive[data-active="elevate"] ~ .matrix-description .matrix-desc--elevate {
  display: block;
}

/* Color the description titles */
.matrix-desc--eliminate strong { color: var(--color-eliminate); }
.matrix-desc--automate strong { color: var(--color-automate); }
.matrix-desc--delegate strong { color: var(--color-delegate); }
.matrix-desc--elevate strong { color: var(--color-elevate); }

/* ===== Impact Questions (Know Thy Work) ===== */
.impact-questions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .impact-questions {
    grid-template-columns: 1fr;
  }
}

.impact-question {
  background: var(--color-canvas);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--color-delegate);
}

.impact-question-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-delegate);
  margin: 0 0 var(--space-3) 0;
}

.impact-question p {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.6;
}

/* ===== Superpower Grid (Know Thyself) ===== */
.superpower-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .superpower-grid {
    grid-template-columns: 1fr;
  }
}

.superpower-card {
  background: var(--color-parchment);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--color-elevate);
}

.superpower-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-elevate);
  margin: 0 0 var(--space-3) 0;
}

.superpower-card p {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-ink);
  line-height: 1.6;
}

.superpower-card p:last-child {
  margin-bottom: 0;
}

.superpower-card ul {
  margin: var(--space-3) 0;
  padding-left: var(--space-4);
  color: var(--color-ink);
}

.superpower-card li {
  margin-bottom: var(--space-2);
}

.superpower-card-note {
  font-size: 0.9rem;
  color: var(--color-stone);
  font-style: italic;
}

/* ===== Quadrant Cards (Deep Dive) ===== */
.quadrant-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .quadrant-cards {
    grid-template-columns: 1fr;
  }
}

.quadrant-card {
  background: var(--color-canvas);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--color-stone);
}

.quadrant-card--eliminate { border-top-color: var(--color-eliminate); }
.quadrant-card--automate { border-top-color: var(--color-automate); }
.quadrant-card--delegate { border-top-color: var(--color-delegate); }
.quadrant-card--elevate { border-top-color: var(--color-elevate); }

.quadrant-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.quadrant-card-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.quadrant-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.quadrant-card--eliminate .quadrant-card-title { color: var(--color-eliminate); }
.quadrant-card--automate .quadrant-card-title { color: var(--color-automate); }
.quadrant-card--delegate .quadrant-card-title { color: var(--color-delegate); }
.quadrant-card--elevate .quadrant-card-title { color: var(--color-elevate); }

.quadrant-card-position {
  font-size: 0.9rem;
  color: var(--color-stone);
  margin: 0 0 var(--space-3) 0;
  font-weight: 500;
}

.quadrant-card-desc {
  color: var(--color-ink);
  line-height: 1.6;
  margin: 0 0 var(--space-4) 0;
}

.quadrant-card-action {
  background: var(--color-parchment);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  line-height: 1.5;
}

.quadrant-card-action strong {
  color: var(--color-ink);
}

/* ===== Process Steps ===== */
.process-steps {
  max-width: 720px;
  margin: 0 auto;
}

.process-step {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-tan);
}

.process-step:last-child {
  border-bottom: none;
}

.process-step-number {
  width: 48px;
  height: 48px;
  background: var(--color-elevate);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.process-step-content {
  flex: 1;
  padding-top: var(--space-2);
}

.process-step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-2) 0;
}

.process-step-content p {
  margin: 0;
  color: var(--color-stone);
  line-height: 1.6;
}

/* ===== Traps Section ===== */
.traps-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .traps-layout {
    grid-template-columns: 1fr;
  }
}

.trap-item {
  margin-bottom: var(--space-6);
}

.trap-item:last-child {
  margin-bottom: 0;
}

.trap-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-2) 0;
}

.trap-item p {
  margin: 0;
  color: var(--color-stone);
  line-height: 1.6;
}

.traps-quote {
  position: sticky;
  top: var(--space-8);
}

.traps-quote blockquote {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-ink);
  font-style: italic;
  border-left: 4px solid var(--color-elevate);
  padding-left: var(--space-5);
  margin: 0;
}

/* ===== Override sticky container for this page ===== */
.framework-diagram-sticky {
  flex-direction: column;
  align-items: center;
}
