/* Compact, responsive, class-based styles to augment the global stylesheet.
   Uses flex layouts for desktop and mobile; minimal padding/margins as requested. */

.page-body {
    display: flex;
    flex-direction: column;
    gap: 12px;                /* compact vertical rhythm */
    padding: 12px;            /* reduced padding */
    max-width: 980px;
    margin: 0 auto;
}

.section-heading {
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 8px 0 10px 0;     /* compact margins */
    text-align: center;
}

.article-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;           /* tight section padding */
}

.subheading {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 6px 0 6px 0;
}

.styled-paragraph {
    line-height: 1.55;
    margin: 4px 0 6px 0;
    font-size: 0.98rem;
}

.styled-list {
    padding-left: 16px;       /* compact indent */
    margin: 4px 0 6px 0;
    line-height: 1.55;
    font-size: 0.97rem;
}

.styled-list li {
    margin: 4px 0;
}

/* Flex grid for sub-sections (responsive) */
.section-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.grid-col {
    flex: 1 1 420px;          /* two columns on desktop, single on mobile */
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Tables kept narrow: two columns, compact cells */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin: 6px 0;
    table-layout: fixed;      /* consistent narrow layout for mobile compatibility */
}

.styled-table th,
.styled-table td {
    border: 1px solid #d7d7d7;
    padding: 6px 8px;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.styled-table thead th {
    background: #f4f4f4;
    font-weight: 700;
}

.summary-table th:nth-child(1),
.summary-table td:nth-child(1) {
    width: 28%;
}

.summary-table th:nth-child(2),
.summary-table td:nth-child(2) {
    width: 72%;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .page-body {
        padding: 10px;
        gap: 10px;
    }
    .section-heading {
        font-size: 1.45rem;
        margin: 6px 0 8px 0;
    }
    .subheading {
        font-size: 1.05rem;
        margin: 4px 0;
    }
    .styled-paragraph,
    .styled-list {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .grid-col {
        flex: 1 1 100%;
        min-width: 100%;
    }
    .styled-table {
        font-size: 0.93rem;
    }
    .styled-table th,
    .styled-table td {
        padding: 6px;
    }
}

/* Ultra-compact option for very narrow screens */
@media (max-width: 380px) {
    .section-heading { font-size: 1.3rem; }
    .styled-table { font-size: 0.9rem; }
    .styled-table th, .styled-table td { padding: 5px; }
}