/**
 * APEEMSD Website Layout Fix v3
 * Issue: Tables have hardcoded widths that overflow columns
 * Solution: Override inline widths and make tables responsive
 * 
 * Upload as: /templates/purity_iii/css/custom.css
 */

/* =====================================================
   FIX: Override hardcoded table widths
   ===================================================== */

/* Remove fixed widths from tables */
.item table,
.items-row table,
.col-md-4 table,
article table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

/* Remove fixed widths from table cells */
.item td,
.item th,
.items-row td,
.items-row th,
.col-md-4 td,
.col-md-4 th,
article td,
article th {
    width: auto !important;
    max-width: none !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* First column (labels) - give it a reasonable width */
.item table td:first-child,
.items-row table td:first-child,
.col-md-4 table td:first-child {
    width: 35% !important;
    min-width: 80px !important;
}

/* Second column (values) - takes remaining space */
.item table td:last-child,
.items-row table td:last-child,
.col-md-4 table td:last-child {
    width: 65% !important;
}

/* =====================================================
   FIX: Article container - allow content to show
   ===================================================== */

/* Don't clip - use visible overflow with word wrapping */
.item,
.col-md-4,
.items-row > div,
article {
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* But the row itself should contain floats */
.items-row {
    overflow: hidden !important;
}

/* =====================================================
   FIX: Images should be responsive
   ===================================================== */

.item img,
.col-md-4 img,
article img {
    max-width: 100% !important;
    height: auto !important;
}

/* =====================================================
   FIX: Long URLs should break
   ===================================================== */

.item a,
.col-md-4 a,
article a {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

/* =====================================================
   FIX: Font sizes in tables (optional - improves fit)
   ===================================================== */

.col-md-4 table span,
.col-md-4 table td {
    font-size: 14px !important;
}

/* =====================================================
   END OF FIX
   ===================================================== */