/*
 * Myth vs Fact block — myth debunking block.
 * Visual tokens come from the active EggBlocks theme.
 */

.eggb-mf-side-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.eggb-mf-side-label--myth {
  color: var(--eggb-warning);
}

.eggb-mf-side-label--fact {
  color: var(--eggb-positive);
}

.eggb-mf-why-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.eggb-mf-why-text {
}

.eggb-mf-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.eggb-mf-myth {
  padding: 0.875rem;
  border-top: 3px solid color-mix(in srgb, var(--eggb-warning) 70%, transparent);
}

.eggb-mf-fact {
  padding: 0.875rem;
  border-top: 3px solid color-mix(in srgb, var(--eggb-positive) 60%, transparent);
  border-left: var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-mf-why {
  grid-column: 1 / -1;
  padding: 0.875rem;
  border-top: var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-myth-fact--inline .eggb-mf-item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 0.75rem;
  border-bottom: var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-myth-fact--inline .eggb-mf-item:last-child {
  border-bottom: 0;
}

.eggb-mf-verdict {
  grid-row: 1;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-align: center;
  padding: 0.25em 0.5em;
  border: var(--eggb-border-w) solid;
  border-radius: var(--eggb-radius);
  align-self: baseline;
  margin-top: 0.15em;
}

.eggb-mf-verdict--true {
  background: color-mix(in srgb, var(--eggb-positive) 12%, transparent);
  color: var(--eggb-positive);
  border-color: color-mix(in srgb, var(--eggb-positive) 30%, transparent);
}

.eggb-mf-verdict--false {
  background: color-mix(in srgb, var(--eggb-negative) 12%, transparent);
  color: var(--eggb-negative);
  border-color: color-mix(in srgb, var(--eggb-negative) 30%, transparent);
}

.eggb-mf-verdict--partial {
  background: color-mix(in srgb, var(--eggb-warning) 12%, transparent);
  color: var(--eggb-warning);
  border-color: color-mix(in srgb, var(--eggb-warning) 30%, transparent);
}

.eggb-mf-myth-text {
  grid-row: 1;
  font-weight: 600;
}

.eggb-mf-verdict-text {
  grid-row: 2;
  grid-column: 2;
}

@media (max-width: 640px) {
  .eggb-mf-pair {
    grid-template-columns: 1fr;
  }

  .eggb-mf-fact {
    border-left: 0;
    border-top: var(--eggb-border-w) solid var(--eggb-border);
  }

  .eggb-myth-fact--inline .eggb-mf-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .eggb-myth-fact--inline .eggb-mf-verdict {
    grid-row: auto;
    align-self: start;
    justify-self: start;
  }

  .eggb-myth-fact--inline .eggb-mf-myth-text {
    grid-row: auto;
  }

  .eggb-mf-verdict-text {
    grid-column: 1;
    grid-row: auto;
  }
}