.stats-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Hugs its own content instead of a fixed 600px. The figures are wider than
       600px once they are counted up, and flex items never shrink under their own
       text, so the old box overflowed — always to the right, which is what made the
       whole strip slide right as the numbers arrived. At fit-content the strip is
       as wide as it is and `margin: auto` keeps it centred at every width. */
    width: fit-content;
    max-width: 100%;
    margin: 8.2em auto 0 auto;
}

/* Entry Section */
.entries-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.entries-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 5px;
}

/* Every figure counts up from 0, so each one is a different width on every frame
   of the animation. Tabular digits make all of them the same width, and
   entryAttestationCounter.js reserves the width of the final value before it
   starts, so nothing around them moves while they run. */
.entries-number,
.attestations-number,
.status-number {
    font-variant-numeric: tabular-nums;
}

/* The strip is as wide as its content, so each section is only as wide as its
   widest word: on a short window, where the figures are set smaller, "TOTAL
   ENTRIES" would break over two lines under a number narrower than itself. */
.entries-label,
.attestations-label,
.status-label {
    white-space: nowrap;
}

.entries-label {
    font-size: 0.9rem;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Vertical Dividers */
.divider {
    width: 2px;
    /* Never shrink: the statuses in one row make the strip wider than the 600px the
       layout asks for, and a shrinkable 2px flex item is the first thing the
       overflow eats — the dividers were being squeezed to nothing. */
    flex: 0 0 2px;
    height: 80px;
    background-color: #bdc3c7;
    margin: 0 30px;
}

/* Status Section (2x2 grid) */
.status-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* Five states, not six: "Ready" is counted with "Review" (see
   modules/get-statistics.xq). Five sit in one row, which reads as a strip beside
   the two big figures and is a row shorter than the old 3 x 2 grid — on the home
   page that row is height the hero would rather spend on the search field. */
.status-grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 15px 22px;
    margin-bottom: 10px;
}

/* Forces the phone layout's row break; no width, no row of its own, until the
   media query below turns it on. */
.status-break {
    display: none;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.status-number {
    font-size: 1.4rem;
    font-weight: bold;
    color: #34495e;
    margin-bottom: 3px;
}

.status-label {
    font-size: 0.75rem;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Different colors for different statuses */
.status-draft .status-number { color: #f39c12; }
.status-review .status-number { color: #e67e22; }
.status-published .status-number { color: #2980b9; }
.status-deleted .status-number { color: #95a5a6; }
.status-new .status-number { color: #e74c3c; }

/* Attestations Section */
.attestations-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.attestations-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 5px;
}

.attestations-label {
    font-size: 0.9rem;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-layout {
        flex-direction: column;
        gap: 30px;
    }

    .divider {
        width: 80px;
        height: 2px;
        margin: 0;
    }

    /* Five in a row runs the full width of a phone with no margin either side.
       Two rows instead, each centred on its own. Flex, not the grid: grid columns
       would hold the second row to the first row's column positions, so the two
       leftovers would sit under the first two items rather than centred. The
       break element decides where the rows split - left to the wrap, it moves
       with the label widths and the counts' digits. */
    .status-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 22px;
    }

    .status-break {
        display: block;
        flex-basis: 100%;
        height: 0;
    }
}

@media (max-width: 480px) {
    .stats-container {
        padding: 20px 15px;
    }
    
    .entries-number,
    .attestations-number {
        font-size: 2rem;
    }
    
    .status-number {
        font-size: 1.2rem;
    }
}