/* ws-grid component */
.ws-grid {
    width: 100%;
}

.ws-grid-cell {
    min-height: 40px;
}

/* Don't override paragraph styles inside cells — let them inherit the global
 * --p-* variables (font-size, line-height, color, margin) so the cell content
 * matches the rest of the page. */
.ws-grid-cell p:last-child {
    margin-bottom: 0;
}

.ws-grid-cell img {
    max-width: 100%;
    height: auto;
}

/* Responsive: una columna en mòbil */
@container device (max-width: 768px) {
    .ws-grid {
        grid-template-columns: 1fr !important;
    }
    .ws-grid-cell {
        max-width: 100%;
    }
}

/* Fallback per quan no hi ha container queries */
@media (max-width: 768px) {
    .ws-grid {
        grid-template-columns: 1fr !important;
    }
    .ws-grid-cell {
        max-width: 100%;
    }
}

/* Empty state (editor) */
.ws-grid-empty {
    text-align: center;
    padding: 32px 16px;
    color: #999;
    font-size: 14px;
    border: 2px dashed #ddd;
    border-radius: 8px;
}

.ws-grid-empty i {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.4;
}

/* Edit mode: mostrar bordes de les cel·les */
body.edit-mode-active .ws-grid-cell {
    outline: 1px dashed rgba(0,0,0,0.15);
    outline-offset: -1px;
}