/*
 * Shared styling for rich-text content produced by the Quill editor
 * (RichTextEditorWithUpload). Linked by BOTH the admin host (so it looks the
 * same while editing) and the public Website (so guides render identically).
 *
 * Covers: Quill alignment/indent classes that Tailwind `prose` doesn't style,
 * plus the custom layout blocks (side-by-side image rows, simple tables).
 */

/* ---- Quill alignment (class-based in Quill) ---- */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* ---- Quill indentation ---- */
.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }

/* ---- Side-by-side image row ---- */
.dd-image-row {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    width: 100%;
    align-items: stretch;
}

.dd-image-row .dd-image-cell {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.dd-image-row .dd-image-cell img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    border: 1px solid rgba(20, 18, 14, 0.1);
    margin: 0;
}

/* Stack the row on small screens */
@media (max-width: 640px) {
    .dd-image-row {
        flex-direction: column;
    }
    .dd-image-row .dd-image-cell img {
        max-height: none;
    }
}

/* ---- Simple table / grid block ---- */
.dd-rich-table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    table-layout: fixed;
}

.dd-rich-table td {
    border: 1px solid rgba(20, 18, 14, 0.18);
    padding: 8px 10px;
    vertical-align: top;
    word-break: break-word;
    min-width: 40px;
}

/* In the editor the cells are individually editable */
.ql-editor .dd-rich-table td[contenteditable="true"]:focus {
    outline: 2px solid #10b981;
    outline-offset: -2px;
}

/* Selected custom block highlight while editing */
.ql-editor .dd-image-row.ql-selected,
.ql-editor .dd-rich-table.ql-selected {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}