/* --- Base Styles (Mobile First) --- */
.paragraph-container {
    width: 100%;
    padding: 20px 15px; /* Add some padding for mobile */
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center; /* Center content by default */
    /* No grid display by default - elements stack vertically */
}

.paragraph-content-wrapper {
    /* Takes full width available in the container on mobile */
    max-width: 600px; /* Optional: Limit max width for readability on very wide mobile */
    margin: 0 auto; /* Center the wrapper if max-width is applied */
}

.paragraph-title {
    font-size: 1.8rem; /* Adjust base font size as needed */
    margin-bottom: 8px;
    font-weight: bold;
    color: #333; /* Example text color */
    text-align: center; /* Ensure title is centered */
}

.paragraph-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0; /* Adjusted margin */
}

.separator-dots-container {
    display: flex;
    justify-content: center;
    margin-right: 8px; /* Space between dots and line */
}

.separator-dot {
    width: 5px;  /* Slightly larger dots */
    height: 5px;
    /* background-color is set inline via JS */
    border-radius: 50%;
    margin: 0 4px; /* Spacing between dots */
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.separator-line {
    width: 40px; /* Slightly longer line */
    height: 3px; /* Slightly thinner line */
    /* background-color is set inline via JS */
    border-radius: 1.5px; /* Rounded ends */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.paragraph-text {
    margin-top: 15px; /* Adjusted margin */
    font-size: 1rem; /* Base paragraph font size */
    line-height: 1.6;
    color: #555; /* Example text color */
    text-align: center; /* Ensure paragraph text is centered */
}


/* --- Tablet Styles --- */
@media (min-width: 768px) {
    .paragraph-container {
        /* Reintroduce grid for tablets, but simpler than original 5x5 */
        display: grid;
        grid-template-columns: 1fr minmax(auto, 700px) 1fr; /* Content column with max width, flexible side columns */
        grid-template-rows: auto; /* Single row is enough */
        padding: 30px 20px; /* Increase padding */
        align-items: center; /* Vertically center content in grid area */
        grid-column-gap: 10px; /* Add gap between grid columns */
    }

    .paragraph-content-wrapper {
        grid-column: 2 / 3; /* Place content in the center column */
         /* Reset mobile margin auto */
         margin: 0;
    }

    .paragraph-title {
        font-size: 2.2rem; /* Increase font size */
        margin-bottom: 10px;
    }

    .paragraph-separator {
        margin: 20px 0;
    }

     .separator-dot {
        width: 6px;
        height: 6px;
     }
     .separator-line {
        width: 50px;
     }


    .paragraph-text {
        font-size: 1.1rem; /* Increase font size */
        margin-top: 20px;
    }
}

/* --- Desktop Styles --- */
@media (min-width: 1024px) {
    .paragraph-container {
        /* Use a more spaced-out grid for desktops, similar to original idea */
        /* Using repeat(5, 1fr) is fine, or adjust ratios */
        grid-template-columns: 1fr 1fr minmax(auto, 800px) 1fr 1fr; /* Even more space, central content max width */
        /* Or keep the 5 equal columns: grid-template-columns: repeat(5, 1fr); */
        padding: 40px 30px;
    }

    .paragraph-content-wrapper {
         /* Center in the 5-column grid if using repeat(5, 1fr) */
         /* grid-column: 2 / 5; */ /* Spans 3 columns */
         /* Or center in the custom grid above: */
         grid-column: 3 / 4;
    }

    .paragraph-title {
        font-size: 2.5rem; /* Further increase font size */
        margin-bottom: 12px;
    }

    .paragraph-separator {
        margin: 25px 0;
    }

    .separator-dot {
        width: 6px;
        height: 6px;
    }
    .separator-line {
        width: 60px;
    }

    .paragraph-text {
        font-size: 1.15rem; /* Slightly larger text */
        margin-top: 25px;
    }
}

/* --- Optional: RTL adjustments if needed beyond text alignment --- */
/* If specific layout changes are needed for RTL beyond what document.dir handles */
/*
html[dir="rtl"] .separator-dots-container {
    margin-right: 0;
    margin-left: 8px;
}
*/