/* ============================================================
   grid.css — Constructor Filas -> Columnas -> Módulos (Fase G1)
   ------------------------------------------------------------
   CSS Vanilla. Grid de 12 columnas, responsive, sin frameworks.
   Solo se aplica al front cuando una página usa el constructor
   (el HTML lo emite GridRenderer.php). No afecta sitios clásicos.
   ============================================================ */

/* Banda de la fila: ancho completo (permite color de fondo a sangre). */
.cms-row {
    width: 100%;
}

/* Rejilla centrada de 12 columnas. La clase .contenedor (del tema) aporta
   el ancho máximo y el centrado; aquí imponemos el grid. */
.cms-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
}

/* Anchos de columna (span sobre el grid de 12). */
.cms-col-12 { grid-column: span 12; }
.cms-col-8  { grid-column: span 8; }
.cms-col-6  { grid-column: span 6; }
.cms-col-4  { grid-column: span 4; }
.cms-col-3  { grid-column: span 3; }

/* min-width:0 evita que contenido ancho (imágenes, iframes) desborde la columna. */
.cms-col { min-width: 0; }

/* ── Reconciliación de contenedores ──────────────────────────
   Cada renderer trae su propio <section class="seccion"> con un
   .contenedor centrado al ancho del sitio. Dentro de una columna
   eso sobre-restringe el contenido. Neutralizamos ancho/centrado
   y el padding vertical SOLO dentro de .cms-col. */
.cms-col .seccion {
    padding-top: 0;
    padding-bottom: 0;
}
.cms-col .contenedor {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ── Responsive ──────────────────────────────────────────────
   Móvil: todas las columnas ocupan el ancho completo (apiladas). */
@media (max-width: 768px) {
    .cms-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cms-col-12,
    .cms-col-8,
    .cms-col-6,
    .cms-col-4,
    .cms-col-3 {
        grid-column: 1 / -1;
    }
}

/* Tablet: las columnas muy estrechas (3 y 4) pasan a media anchura
   para que el contenido respire. */
@media (min-width: 769px) and (max-width: 1024px) {
    .cms-col-3,
    .cms-col-4 {
        grid-column: span 6;
    }
}