/* ==========================================================================
   Páginas generales · Edicions del Bullent  (views/plantillas/bullent/general.ejs)
   Contenido editable (CKEditor) con estilos de lectura cómodos.
   ========================================================================== */

.pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-bottom: 4rem; }
.pagina--lateral { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: start; }
.pagina__titulo { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1.5rem; letter-spacing: -.01em; }
.pagina__vacia { color: var(--c-ink-soft); }

.pagina__lateral {
	padding: 1.25rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
	position: sticky; top: calc(var(--header-h) + 1rem);
}
.pagina__lateral-titulo { font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: .75rem; }
.pagina__hermanas li + li { margin-top: .15rem; }
.pagina__hermanas a { display: block; padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--c-ink); font-size: .95rem; }
.pagina__hermanas a:hover { background: var(--c-primary-soft); text-decoration: none; }
.pagina__hermanas a[aria-current="page"] { background: var(--c-primary); color: #fff; font-weight: 600; }

@media (max-width: 860px) {
	.pagina--lateral { grid-template-columns: minmax(0, 1fr); }
	.pagina__lateral { position: static; }
}

/* ---------- contenido editable ---------- */
.contenido { max-width: 78ch; overflow-wrap: break-word; }
.pagina--lateral .pagina__principal .contenido { max-width: none; }
.contenido > :first-child { margin-top: 0; }
.contenido h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2rem 0 .75rem; }
.contenido h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin: 1.6rem 0 .6rem; color: var(--c-primary-dark); }
.contenido h4, .contenido h5, .contenido h6 { font-size: 1.05rem; font-family: var(--font-body); margin: 1.3rem 0 .4rem; }
.contenido p, .contenido ul, .contenido ol, .contenido table, .contenido blockquote, .contenido pre { margin: 0 0 1.1em; }
.contenido ul { list-style: disc; padding-left: 1.4rem; }
.contenido ol { list-style: decimal; padding-left: 1.6rem; }
.contenido li + li { margin-top: .3rem; }
.contenido a { text-decoration: underline; text-underline-offset: 3px; }
.contenido img { height: auto; border-radius: var(--radius-sm); margin-block: .5rem; }
@media (max-width: 767px) { .contenido img { max-width: 100%; } }
.contenido hr { border: 0; border-top: 1px solid var(--c-line); margin: 2rem 0; }
.contenido blockquote { padding: .25rem 0 .25rem 1rem; border-left: 4px solid var(--c-accent); color: var(--c-ink-soft); }
.contenido pre, .contenido address { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: .75rem 1rem; white-space: pre-wrap; font-style: normal; }

.contenido .ta-center { text-align: center; }
.contenido .ta-right { text-align: right; }
.contenido .ta-justify { text-align: justify; }
.contenido img:is([src], [alt]) { margin-inline: auto; }

.contenido .tabla { overflow-x: auto; margin-bottom: 1.1em; }
.contenido table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.contenido th, .contenido td { padding: .55rem .75rem; border: 1px solid var(--c-line); vertical-align: top; text-align: left; }
.contenido th { background: var(--c-primary-soft); }

.contenido .video { position: relative; aspect-ratio: 16 / 9; margin: 1.25rem 0; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.contenido .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }