/**
 * Estilos visuales de los bloques BEON Editorial.
 * MISMO contrato de clases (.wp-block-beon-*) que ya está implementado del
 * lado de Astro en global.css (dentro de .sp-article-content). Si acá se
 * cambia un valor, lo ideal es cambiarlo también ahí para que el editor y el
 * sitio real no diverjan visualmente.
 */

:root {
  --beon-blue: #3A69FF;
  --beon-purple: #7432FF;
  --beon-ink: #20222D;
  --beon-ink-soft: #363A4C;
  --beon-ink-mute: #63698C;
  --beon-ink-mute-2: #7F8187;
  --beon-mist: #F4F5F7;
  --beon-line: #E5E7EB;
  --beon-gradient-mist: linear-gradient(180deg, #FCFCFD 0%, #F4F5F7 100%);
  --beon-gradient-brand: linear-gradient(135deg, #3A69FF 0%, #7432FF 100%);
  --beon-radius-sm: 14px;
  --beon-radius-md: 16px;
  --beon-radius-pill: 999px;
}

/* Key Takeaway */
.wp-block-beon-key-takeaway {
  background: var(--beon-gradient-mist);
  border: 1px solid var(--beon-line);
  border-radius: var(--beon-radius-md);
  padding: 24px 28px;
}
.wp-block-beon-key-takeaway__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beon-blue);
  margin-bottom: 8px;
}
.wp-block-beon-key-takeaway__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--beon-ink);
}

/* Interview Question */
.wp-block-beon-interview-question {
  border: 1px solid var(--beon-line);
  border-radius: var(--beon-radius-md);
  overflow: hidden;
}
.wp-block-beon-interview-question__header {
  background: var(--beon-mist);
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beon-blue);
}
.wp-block-beon-interview-question__body { padding: 22px; }
.wp-block-beon-interview-question__prompt {
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 18px;
}
.wp-block-beon-interview-question__answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wp-block-beon-interview-question__answer {
  background: var(--beon-mist);
  border-radius: 12px;
  padding: 16px 18px;
}
.wp-block-beon-interview-question__answer--strong {
  background: none;
  border: 1px solid rgba(58, 105, 255, 0.3);
}
.wp-block-beon-interview-question__answer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beon-ink-mute-2);
  margin-bottom: 8px;
}
.wp-block-beon-interview-question__answer--strong .wp-block-beon-interview-question__answer-label { color: var(--beon-blue); }
.wp-block-beon-interview-question__answer-text { font-size: 15px; line-height: 1.6; color: var(--beon-ink-mute); }
.wp-block-beon-interview-question__answer--strong .wp-block-beon-interview-question__answer-text { color: var(--beon-ink); }

/* Info card / lista de cards */
.wp-block-beon-info-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wp-block-beon-info-card {
  border: 1px solid var(--beon-line);
  border-radius: var(--beon-radius-sm);
  padding: 18px 22px;
}
.wp-block-beon-info-card__title { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.wp-block-beon-info-card__text  { font-size: 15px; line-height: 1.6; color: var(--beon-ink-soft); }

/* Red Flags grid */
.wp-block-beon-red-flags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wp-block-beon-red-flags__card {
  background: var(--beon-gradient-mist);
  border: 1px solid var(--beon-line);
  border-radius: var(--beon-radius-md);
  padding: 22px;
}
.wp-block-beon-red-flags__title { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.wp-block-beon-red-flags__text  { font-size: 15px; line-height: 1.6; color: var(--beon-ink-soft); margin-bottom: 12px; }
.wp-block-beon-red-flags__ask   { font-size: 14px; line-height: 1.5; color: var(--beon-blue); font-weight: 600; }

/* Stages numerados */
.wp-block-beon-stages { border-top: 1px solid var(--beon-line); }
.wp-block-beon-stages__row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--beon-line);
}
.wp-block-beon-stages__number {
  font-size: 30px;
  font-weight: 800;
  background: var(--beon-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wp-block-beon-stages__title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.wp-block-beon-stages__title    { font-size: 18px; font-weight: 700; }
.wp-block-beon-stages__duration { font-size: 12px; font-weight: 600; color: var(--beon-ink-mute); background: var(--beon-mist); border-radius: var(--beon-radius-pill); padding: 3px 10px; }
.wp-block-beon-stages__text     { font-size: 15.5px; line-height: 1.65; color: var(--beon-ink-soft); }

/* Signals (strong/weak) */
.wp-block-beon-signals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wp-block-beon-signals__group {
  border: 1px solid var(--beon-line);
  border-radius: var(--beon-radius-md);
  padding: 22px;
}
.wp-block-beon-signals__header { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.wp-block-beon-signals__group--strong .wp-block-beon-signals__header { color: var(--beon-blue); }
.wp-block-beon-signals__group--weak   .wp-block-beon-signals__header { color: var(--beon-ink-mute-2); }
.wp-block-beon-signals__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.wp-block-beon-signals__group--strong .wp-block-beon-signals__list li { font-size: 14.5px; line-height: 1.55; color: var(--beon-ink); }
.wp-block-beon-signals__group--weak .wp-block-beon-signals__list li   { font-size: 14.5px; line-height: 1.55; color: var(--beon-ink-mute); }

/* Do / Don't */
.wp-block-beon-do-dont {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wp-block-beon-do-dont__block {
  background: var(--beon-mist);
  border-radius: var(--beon-radius-sm);
  padding: 20px 24px;
}
.wp-block-beon-do-dont__block--do { background: none; border: 1px solid rgba(58, 105, 255, 0.3); }
.wp-block-beon-do-dont__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beon-ink-mute-2);
  margin-bottom: 8px;
}
.wp-block-beon-do-dont__block--do .wp-block-beon-do-dont__label { color: var(--beon-blue); }
.wp-block-beon-do-dont__text { font-size: 15px; line-height: 1.55; font-style: italic; color: var(--beon-ink-mute); }
.wp-block-beon-do-dont__block--do .wp-block-beon-do-dont__text { color: var(--beon-ink); }
.wp-block-beon-do-dont__note { font-size: 13.5px; line-height: 1.5; color: var(--beon-ink-mute-2); margin-top: 8px; font-style: normal; }

/* FAQ accordion */
.wp-block-beon-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wp-block-beon-faq details {
  border: 1px solid var(--beon-line);
  border-radius: var(--beon-radius-sm);
  background: #FFFFFF;
}
.wp-block-beon-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
}
.wp-block-beon-faq summary::-webkit-details-marker { display: none; }
.wp-block-beon-faq__chevron { flex-shrink: 0; color: var(--beon-blue); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.wp-block-beon-faq details[open] .wp-block-beon-faq__chevron { transform: rotate(180deg); }
.wp-block-beon-faq__answer { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.65; color: var(--beon-ink-soft); }

/* Mobile: los grids de 2 columnas pasan a 1 (mismo breakpoint que Astro: 980px) */
@media (max-width: 980px) {
  .wp-block-beon-red-flags,
  .wp-block-beon-signals,
  .wp-block-beon-interview-question__answers { grid-template-columns: 1fr; }
}

/* ── Espaciado SOLO en el editor para los bloques con InnerBlocks ────────────
   Gutenberg envuelve los bloques hijo en su propio contenedor interno
   (.block-editor-block-list__layout), un nivel más adentro que el wrapper al
   que le pusimos flex/grid+gap arriba. Esta clase no existe en el HTML del
   frontend (la genera solo el editor), así que estas reglas son 100%
   inofensivas para el sitio real — sirven únicamente para que el editor se
   vea espaciado igual que el resultado final. */
.wp-block-beon-info-card-list .block-editor-block-list__layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wp-block-beon-red-flags .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wp-block-beon-faq .block-editor-block-list__layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wp-block-beon-stages .block-editor-block-list__layout > * {
  margin-bottom: 16px;
}