/*
 * Moldura das páginas de exemplo — NÃO faz parte da biblioteca.
 * Mostra cada componente nos dois temas lado a lado, como as pranchas do estudo, e é a
 * semente das páginas do site de documentação (fase 3). Classes doc-*.
 */
body.doc {
  margin: 0;
  padding: 32px;
  background: #DDE4EC;
  color: #0D1524;
}

.doc-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-block-end: 8px;
}

.doc-header h1 {
  margin: 0;
  font-size: 28px;
  color: #0D1524;
}

.doc-header p,
.doc-caption {
  margin: 0;
  color: #3D5A80;
  font-size: 14px;
}

.doc-section {
  margin-block-start: 32px;
}

.doc-section > h2 {
  margin-block-end: 4px;
  font-size: 18px;
  color: #0D1524;
}

.doc-section > .doc-caption {
  max-width: 1200px;
  margin-block-end: 12px;
}

.doc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.doc-theme {
  position: relative;
  padding: 40px 28px 28px;
  border-radius: 16px;
  background: var(--hibex-backdrop);
  box-shadow: 0 1px 2px rgb(13 21 36 / 8%), 0 12px 40px rgb(13 21 36 / 12%);
}

.doc-theme::before {
  position: absolute;
  inset: 12px 0 auto 28px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hibex-text-muted);
}

.doc-theme[data-theme="light"]::before { content: "tema claro"; }
.doc-theme[data-theme="dark"]::before { content: "tema escuro"; }

.doc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.doc-row + .doc-row,
.doc-stack > * + * {
  margin-block-start: 20px;
}

.doc-label {
  display: block;
  margin-block-end: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hibex-text-muted);
}

.doc-swatch {
  display: grid;
  gap: 2px;
  width: 132px;
  font-size: 12px;
}

.doc-swatch span:first-child {
  height: 48px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}

.doc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Mostra o anel de foco numa captura estática */
.doc-focus {
  outline: none;
  box-shadow: 0 0 0 var(--hibex-focus-width) var(--hibex-focus-gap), 0 0 0 calc(var(--hibex-focus-width) * 2) var(--hibex-focus);
}

/* Páginas inteiras embutidas, em escala: os pontos de quebra valem pela largura do iframe */
.doc-frame {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(13 21 36 / 8%), 0 12px 40px rgb(13 21 36 / 12%);
}

.doc-frame iframe {
  display: block;
  border: 0;
  transform-origin: top left;
}

/* Simula o ponteiro em cima numa captura estática */
.doc-hover {
  background-color: var(--hibex-nav-hover-bg);
}

/* Imagem de exemplo nos cartões: um degradê da marca no lugar de uma foto */
.doc-media {
  background: var(--hibex-gradient-aurora);
}