/* --- Base Styles (Mobile First) --- */

/* Main container */
.multi-paragraph-parent {
    width: 100%;
    padding: 25px 15px; /* Vertical/horizontal padding */
    box-sizing: border-box;
    margin: 0 auto; /* Center if max-width is ever applied */
}

/* Wrapper for all content (title, sep, paras, footer) */
.multi-paragraph-content-wrapper {
    max-width: 700px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto; /* Center the content block */
    text-align: center; /* Center title, separator, footer by default */
}

/* Title */
.multi-paragraph-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    /* text-align: center; inherited */
}

/* Separator (reuse styles if defined globally) */
.multi-paragraph-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}
.separator-dots-container {
    display: flex;
    margin-right: 8px; /* LTR default */
}
.separator-dot {
    width: 5px; height: 5px; border-radius: 50%; margin: 0 4px;
    display: inline-block; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    /* background-color is inline */
}
.separator-line {
    width: 40px; height: 3px; border-radius: 1.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    /* background-color is inline */
}

/* Section containing the paragraphs */
.multi-paragraph-section {
    margin-top: 20px; /* Space above first paragraph */
    margin-bottom: 20px; /* Space below last paragraph */
    text-align: left; /* Default alignment for LTR paragraphs */
}

/* Individual paragraphs */
.multi-paragraph-text {
    font-size: 1rem;
    line-height: 1.7; /* Generous line height for readability */
    color: #444;
    margin-bottom: 1em; /* Consistent spacing between paragraphs */
    /* text-align is handled by parent section and RTL rules */
}
/* Remove margin from the last paragraph in the section */
.multi-paragraph-text:last-child {
    margin-bottom: 0;
}

/* Footer text */
.multi-paragraph-footer {
    font-size: 0.95rem;
    color: #666;
    margin-top: 30px; /* Space above footer */
    /* text-align: center; inherited */
}


/* --- Tablet Styles --- */
@media (min-width: 768px) {
    .multi-paragraph-parent {
        padding: 40px 20px;
    }
    .multi-paragraph-content-wrapper {
        max-width: 800px; /* Wider content area */
    }
    .multi-paragraph-title {
        font-size: 2.2rem;
        margin-bottom: 12px;
    }
    .multi-paragraph-separator {
        margin: 20px 0;
    }
    .separator-dot { width: 6px; height: 6px; }
    .separator-line { width: 50px; }

    .multi-paragraph-section {
        margin-top: 25px;
        margin-bottom: 25px;
    }
    .multi-paragraph-text {
        font-size: 1.05rem;
    }
    .multi-paragraph-footer {
        margin-top: 40px;
        font-size: 1rem;
    }
}

/* --- Desktop Styles --- */
@media (min-width: 1024px) {
    .multi-paragraph-parent {
        padding: 60px 30px;
    }
    .multi-paragraph-content-wrapper {
        max-width: 900px; /* Even wider */
    }
    .multi-paragraph-title {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }
    .multi-paragraph-separator {
        margin: 25px 0;
    }
     .separator-line { width: 60px; }

    .multi-paragraph-section {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .multi-paragraph-text {
        font-size: 1.1rem;
    }
    .multi-paragraph-footer {
        margin-top: 50px;
    }

    /* Optional: Add side margins using grid on desktop only */
    /*
    .multi-paragraph-parent {
        display: grid;
        grid-template-columns: 1fr minmax(auto, 900px) 1fr; // Center column fixed max width
        justify-items: center; // Center grid items
         padding: 60px 0; // Adjust padding if using grid for spacing
    }
    .multi-paragraph-content-wrapper {
        grid-column: 2 / 3; // Place content in the middle column
        width: 100%; // Take full width of the grid column
        max-width: none; // Remove max-width if controlled by grid column
        margin-left: 0; // Reset margin auto
        margin-right: 0;
    }
    */
}

/* --- RTL Specific Styles --- */
.multi-paragraph-parent[dir="rtl"] .separator-dots-container {
    margin-right: 0;
    margin-left: 8px; /* Space on the left for RTL */
}

/* Align paragraphs to the right in RTL */
.multi-paragraph-parent[dir="rtl"] .multi-paragraph-section {
    text-align: right;
}

/* You might not need the rule below if inheriting right-alignment is enough */
/*
.multi-paragraph-parent[dir="rtl"] .multi-paragraph-text {
    text-align: right;
}
*/