/* ─────────────────────────────────────────────────────────────────────────────
   PROPHETIC DISCOVERY - HOW IT WORKS CSS
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── STEP BLOCKS ─────────────────────────────────────────────────────────── */
.step-block {
  padding: var(--section-pad) 32px;
  position: relative;
  overflow: hidden;
}

.step-block:nth-child(even) {
  background: var(--bgAlt);
}

.step-block-inner {
  max-width: 820px;
  margin: 0 auto;
  display: block;
}

/* Even steps: flip layout */
.step-block:nth-child(even) .step-block-inner {
  direction: ltr;
}
.step-block:nth-child(even) .step-block-inner > * {
  direction: ltr;
}

/* ─── STEP TEXT CONTENT ───────────────────────────────────────────────────── */
.step-content { }

.step-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.step-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  color: var(--border);
  flex-shrink: 0;
}

.step-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-3xl);
  color: var(--ink);
  line-height: 1.15;
}

.step-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--inkMid);
  margin-bottom: var(--space-6);
}

.step-details {
  list-style: none;
  margin-bottom: var(--space-6);
}

.step-details li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--inkMid);
  line-height: 1.6;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

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

.step-details li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 9px;
  flex-shrink: 0;
}

.step-outcome {
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-4) 0 0;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--inkMid);
  font-weight: 400;
}

.step-outcome strong {
  color: var(--ink);
  font-weight: 600;
}

.step-badges {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}


/* ─── DISC CALLOUT ────────────────────────────────────────────────────────── */
.disc-section { background: var(--bgAlt); }

.disc-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.disc-text h2 { margin-bottom: var(--space-4); }

.disc-text p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  color: var(--inkMid);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}

.disc-note {
  font-size: var(--text-sm);
  color: var(--inkLight);
}

.disc-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
  gap: var(--space-4);
}

/* When the badge holds a real photo */
.disc-photo-wrap {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-height: 300px;
}

.disc-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
  transition: transform 0.5s var(--ease-smooth);
}

.disc-photo-wrap:hover img {
  transform: none;
}

/* Fallback badge text - hidden by default when image is shown */
.disc-fallback-text {
  display: none;
}

/* When image fails to load, JS adds this class → show fallback text */
.disc-photo-fallback {
  padding: var(--space-7);
  aspect-ratio: unset;
  min-height: unset;
}

.disc-photo-fallback .disc-fallback-text {
  display: block;
}

.disc-badge-letters {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  line-height: 1;
}

.disc-badge p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--inkLight);
  line-height: 1.6;
}


/* ─── RESPONSIVE HOW IT WORKS ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .step-block-inner { max-width: 760px; }
}

@media (max-width: 768px) {
  .step-block { padding: var(--space-9) 20px; }

  .step-block-inner {
    display: block;
  }

  .step-block:nth-child(even) .step-block-inner {
    direction: ltr;
  }

  .step-visual { display: none; }
  .step-shape-wrap { width: 200px; height: 200px; }
  .disc-inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .disc-badge { flex-direction: row; }
}