/* Styles for the home page only; shared styles, including the carousel,
   are in mainstyle.css */

/* The stand-in slides and About text hold their space, unseen, until the
   real ones load */
.hero.is-loading .slides,
.about-text.is-loading {
    visibility: hidden;
}

/* ---------- About ---------- */

.about p {
    margin: 0 0 14px;
}

.about p:last-child {
    margin-bottom: 0;
}

/* ---------- Counters ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.stat {
    padding: 18px 8px;
    background: #18181c;        /* a shade darker than the panels */
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}

.stat strong {
    display: block;
    color: var(--text);
    font-size: 1.5rem;
}

/* ---------- Status ---------- */

.status-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.status-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid;
    border-image: var(--fade-x) 1;
    color: var(--text);
}

.status-list li:last-child {
    border-bottom: 0;
}

.status-list .led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-list .mono {
    margin-left: auto;
}

/* ---------- Desktop ---------- */

@media (min-width: 960px) {
    /* The page is at least as tall as the window (see mainstyle.css), and the
       carousel row takes any spare height. If the content is taller than the
       window, rows keep their natural size and the page scrolls as normal. */
    main.wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(auto, 1fr);
        grid-auto-flow: dense;      /* lets Status fill the gap beside About */
        gap: 24px;
    }

    .stats {
        grid-column: 1 / -1;
        gap: 24px;
    }

    .stat {
        padding: 24px 12px;
    }

    .status {
        grid-column: 1 / -1;
    }

    /* Status items in rows of up to three, split by dividers. The list's
       data-count (set by the page script) picks the shape: one to three
       items in a row, four as two by two, five as three over two, six as
       three by two. The negative margin lines the outer items' text up with
       the panel's edges. */
    .status-list {
        --status-gutter: 1.5rem;
        display: grid;
        grid-template-columns: repeat(var(--status-columns, 3), minmax(0, 1fr));
        margin: 0 calc(-1 * var(--status-gutter));
    }

    .status-list[data-count="1"] {
        --status-columns: 1;
    }

    .status-list[data-count="2"],
    .status-list[data-count="4"] {
        --status-columns: 2;
    }

    .status-list li {
        position: relative;
        padding: 0.625rem var(--status-gutter);
        border-bottom: 0;
    }

    .status-list li + li {
        border-left: 1px solid;
        border-image: var(--fade-y) 1;
    }

    /* No divider at the start of a row */
    .status-list[data-count="4"] li:nth-child(3),
    .status-list[data-count="5"] li:nth-child(4),
    .status-list[data-count="6"] li:nth-child(4) {
        border-left: 0;
    }

    /* Line between the two rows, drawn above each second-row item */
    .status-list[data-count="4"] li:nth-child(n + 3)::before,
    .status-list[data-count="5"] li:nth-child(n + 4)::before,
    .status-list[data-count="6"] li:nth-child(n + 4)::before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--status-gutter);
        right: var(--status-gutter);
        border-top: 1px solid;
        border-image: var(--fade-x) 1;
    }

    .stat strong {
        font-size: 2rem;
    }

    /* Carousel and About share the top row; About matches Status' width */
    .hero {
        grid-column: span 2;
    }
}

/* Home page sizes in rem on desktop, so they follow the window-height
   scaling set up in mainstyle.css */
@media (min-width: 960px) {
    /* About, counters and Status */
    .about p {
        margin-bottom: 0.875rem;
    }

    .stats {
        gap: 1.5rem;
    }

    .stat {
        padding: 1.5rem 0.75rem;
    }

    .status-list li {
        gap: 0.75rem;
    }

    .status-list .led {
        width: 0.5rem;
        height: 0.5rem;
    }

    /* A second row of status items makes the page taller, so fit to that
       height instead (see --fit-height in mainstyle.css) */
    html:has(.status-list:is([data-count="4"], [data-count="5"], [data-count="6"])) {
        --fit-height: 925;
    }
}