/*
 * Material Detail Page Styling
 * Max-width constraints for better readability
 */

/* ============================================
   Material Detail Container
   ============================================ */

.material-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ============================================
   Text/HTML Content Width
   ============================================ */

/* For text materials, constrain to optimal reading width */
.material-text-content,
.material-html-content {
    max-width: 75ch;
    /* ~600-800px depending on font */
    margin: 0 auto;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 767px) {
    .material-detail-container {
        padding: 0 0.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .material-detail-container {
        max-width: 900px;
    }
}