/* Estilos personalizados para hierarquia de títulos no artigo */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

.article-content h1 {
    font-size: 2.125rem; /* ~34px */
    margin-top: 2em;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5em;
}

.article-content h2 {
    font-size: 1.75rem; /* ~28px */
    color: #2c3e50;
    position: relative;
    padding-left: 1.5rem;
}

.article-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 1.5em;
    background: var(--primary-color, #3b82f6);
    border-radius: 3px;
}

.article-content h3 {
    font-size: 1.5rem; /* ~24px */
    color: #34495e;
}

.article-content h4 {
    font-size: 1.25rem; /* ~20px */
    color: #2c3e50;
    font-weight: 600;
}

.article-content h5 {
    font-size: 1.125rem; /* ~18px */
    font-weight: 600;
    color: #555;
}

.article-content h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Melhorar parágrafos */
.article-content p {
    margin-bottom: 1.25em;
    line-height: 1.7;
    color: #444;
    font-size: 1rem;
}

.prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem; /* 12px */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Responsividade */
@media (min-width: 640px) {
    .article-content h1 { font-size: 2.5rem; }
    .article-content h2 { font-size: 2rem; }
    .article-content h3 { font-size: 1.75rem; }
    .article-content p { font-size: 1.0625rem; }
}

@media (min-width: 1024px) {
    .article-content h1 { font-size: 2.75rem; }
    .article-content h2 { font-size: 2.125rem; }
    .article-content h3 { font-size: 1.875rem; }
}