/* ═══════════════════════════════════════════════════════════
   MOLECULE: Question Layer
   Callout card for emotional hook questions. Thick sky-blue
   left border, tinted background, generous padding.
   Designed to be instantly recognizable as a recurring motif.
   ═══════════════════════════════════════════════════════════ */

.question-layer {
  border-left: 3px solid var(--color-sky);
  background: rgba(14, 165, 233, 0.06);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) auto;
  max-width: 540px;
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-2);
  line-height: var(--leading-relaxed);
  text-align: center;
}

/* Light theme */
[data-theme="light"] .question-layer {
  background: rgba(14, 165, 233, 0.07);
  color: var(--color-text-1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .question-layer {
    background: rgba(14, 165, 233, 0.07);
    color: var(--color-text-1);
  }
}

/* On blue backgrounds */
.section--blue .question-layer,
.hero .question-layer,
.page-hero .question-layer {
  border-left-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

/* Ensure blue-background overrides beat light-mode specificity */
[data-theme="light"] .section--blue .question-layer,
[data-theme="light"] .hero .question-layer,
[data-theme="light"] .page-hero .question-layer {
  border-left-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .section--blue .question-layer,
  :root:not([data-theme="dark"]) .hero .question-layer,
  :root:not([data-theme="dark"]) .page-hero .question-layer {
    border-left-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
  }
}

@media (max-width: 768px) {
  .question-layer {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    max-width: 100%;
  }
}