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

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-width: 0;               /* don't let the hidden slides widen the page */
    padding: 32px 0 12px;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 6px var(--card);
}

/* Slides sit side by side; scroll snapping gives swipe support for free */
.slides {
    display: flex;
    margin: 0 7px;              /* stay inside the inset ring */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.slides::-webkit-scrollbar {
    display: none;
}

.slide {
    flex: 0 0 100%;
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 0 15px;
    scroll-snap-align: start;
}

.slide-title {
    font-size: clamp(2.1rem, 8vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.slide-title span {
    color: var(--red);
}

/* On phones the chevrons sit either side of the dots */
.hero-arrow {
    position: absolute;
    bottom: 12px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--tab);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.hero-arrow:hover {
    border-color: #555;
}

.hero-arrow svg {
    width: 22px;
    height: 22px;
}

.hero-prev {
    left: 14px;
}

.hero-next {
    right: 14px;
}

.hero p {
    margin: 0;
    max-width: 36rem;
    font-size: 1.05rem;
}

.hero-rule {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-rule::before,
.hero-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fade-x);
}

.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-top: 18px;
}

/* Bigger tap target than the visible dot */
.dots button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.dots button::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    transition: width 0.2s, background 0.2s;
}

.dots button[aria-current="true"]::before {
    width: 16px;
    background: var(--text);
}

/* ---------- 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: 720px) {
    .hero {
        padding: 56px 0 16px;
    }

    .slide {
        padding: 0 90px;
    }

    /* Chevrons move out to the sides */
    .hero-arrow {
        top: 50%;
        bottom: auto;
        width: 44px;
        height: 44px;
        transform: translateY(-50%);
    }

    .hero-prev {
        left: 22px;
    }

    .hero-next {
        right: 22px;
    }
}

@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;
    }

    /* Keep the slide content centred as the carousel grows taller */
    .hero {
        display: flex;
        flex-direction: column;
    }

    .slides {
        flex: 1;
    }

    .slide {
        align-content: center;
    }

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

    .stat {
        padding: 24px 12px;
    }

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

    /* Status items side by side, split by dividers */
    .status-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .status-list li {
        padding: 10px 24px;
        border-bottom: 0;
    }

    .status-list li:first-child {
        padding-left: 0;
    }

    .status-list li:last-child {
        padding-right: 0;
    }

    .status-list li + li {
        border-left: 1px solid;
        border-image: var(--fade-y) 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) {
    /* Carousel */
    .hero {
        padding: 3.5rem 0 1rem;
    }

    .slide {
        gap: 1.125rem;
    }

    .hero-arrow {
        width: 2.75rem;
        height: 2.75rem;
    }

    .dots {
        height: 2.5rem;
        margin-top: 1.125rem;
    }

    .dots button {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* 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;
        padding: 0.625rem 1.5rem;
    }

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

@media (prefers-reduced-motion: reduce) {
    .slides {
        scroll-behavior: auto;
    }
}