/* Design rationale/history: docs/claude_context/home_layout.md */

.home-layout {
    display: flex;
    height: 100%;
}

.home-layout .sidemenu_container {
    flex: 0 0 auto;
    /* the colored rail background lives here, not on .sidemenu itself --
    this container stretches (default align-items:stretch on the flex row
    above) to the full scrollable page height, while .sidemenu is sticky
    and sized to just its own content. That split is what lets the color
    fill the whole rail top-to-bottom without the sticky menu itself
    needing to be page-height (which caused it to get squeezed/pushed near
    the footer -- see sidemenu.css). Width tracks .sidemenu automatically
    since it's flex-basis:auto around that single child. */
    background-color: var(--color-accent-hover);
}

.home-layout .maincontent {
    flex: 1;
    /* flex items default to min-width:auto (not 0), which stops them
       shrinking below their content's natural min size. sidemenu_container
       is flex-shrink:0 and grows further on hover, so maincontent is the
       one that's supposed to give up the width -- without this it can't
       shrink past its content's own minimum, and the whole .home-layout
       row overflows the viewport instead. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
}

.home-layout .maincontent .top {
    flex: 0 0 auto;
}

/* Message board + News/Articles on the left, Events box on the right --
Events spans the combined height of both (message board included, not just
the suggestions-row below it), which is why it lives one level up from
.suggestions-row rather than as a third column inside it. */
.home-layout .maincontent .content-row {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.home-layout .maincontent .content-row > .content-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Suggested News / Suggested Info Articles: a plain 50/50 row. Each half is
a self-contained column (heading + card grid); the grid inside picks its
own card count for whatever width its half actually is (see
newsbar_layout.css). Neither column's width depends on the other's content,
so there's no shrink negotiation between them and nothing for one side to
"steal" from the other. */
.home-layout .maincontent .suggestions-row {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.home-layout .maincontent .suggestions-row > .newsbar_container,
.home-layout .maincontent .suggestions-row > .articlesbar_container {
    flex: 1;
    min-width: 0;
    /* lets newsbar_layout.css's full/short heading swap key off this
    column's own actual rendered width (a @container query) instead of a
    guessed viewport breakpoint -- how narrow this column ends up is a
    product of the sidebar, the events box, and the viewport all at once,
    not the viewport alone. */
    container-type: inline-size;
}

/* eventsbox width/overflow rationale: docs/claude_context/home_layout.md.
overflow-x:hidden is required alongside overflow-y:auto, not decorative --
setting only overflow-y forces overflow-x to auto too (CSS overflow spec
quirk), which produced a horizontal scrollbar instead of wrapping. */
.home-layout .maincontent .content-row > .eventsbox_container {
    flex: 0 1 clamp(18rem, 20vw, 30rem);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
}

/* the box's own padding above replaces newsbar-heading's usual left/right
margin and top spacing (see newsbar_layout.css) -- without this override the
two would stack, pushing the heading in further than News/Articles' own. */
.home-layout .maincontent .content-row > .eventsbox_container > .newsbar-heading {
    margin: 0 0 0.75rem;
}

/* 72rem breakpoint derivation: docs/claude_context/home_layout.md */
@media (max-width: 72rem) {
    .home-layout .maincontent .content-row {
        flex-direction: column;
        align-items: stretch;
    }

    /* display:contents + order -- see
    docs/claude_context/home_layout.md for why this is needed to get
    Message board / Events / News-Articles in that stacked order. */
    .home-layout .maincontent .content-row > .content-main {
        display: contents;
    }

    .home-layout .maincontent .content-row > .eventsbox_container {
        flex: 0 0 auto;
        order: 1;
    }

    /* .content-main > .suggestions-row, not .content-row > .suggestions-row
    -- see docs/claude_context/home_layout.md, display:contents doesn't
    change the real DOM parent for selector-matching purposes. */
    .home-layout .maincontent .content-main > .suggestions-row {
        order: 2;
    }

    /* full-screen takeover rationale: docs/claude_context/home_layout.md.
    border/border-radius fall through unchanged from the base rule's own
    visual declarations (home_page.css) -- only the shadow gets bumped up
    there for this state, not set here. */
    .home-layout .maincontent .content-row > .eventsbox_container.is-expanded {
        position: fixed;
        inset: 0.5rem;
        z-index: 1000;
        max-height: none;
        height: auto;
        margin: 0;
    }
}

/* once there's not even room for one full-size card per column side by
side, stack News/Articles, capping article/news cards to 4 visible each.
By this width Events has already dropped out of the row above (72rem >
45rem), so .content-main measuring against the full available width here
is accurate again -- this is unchanged from before Events existed. */
@media (max-width: 45rem) {
    .home-layout .maincontent .suggestions-row {
        flex-direction: column;
        /* align-items:flex-start (base rule) sizes cross-axis items to their
           own content instead of stretching -- irrelevant while cross-axis
           was vertical, but now that flex-direction is column, cross-axis is
           horizontal, so it would shrink-wrap each column instead of letting
           it fill the row's width. */
        align-items: stretch;
    }

    .home-layout .maincontent .suggestions-row > .newsbar_container,
    .home-layout .maincontent .suggestions-row > .articlesbar_container {
        flex: 0 0 auto;
    }

    .home-layout .maincontent .suggestions-row .articlecard:nth-child(n + 5) {
        display: none;
    }
}

@media (max-width: 480px) {
    .home-layout .maincontent {
        padding: 0.75rem 0.75rem;
    }

    /* locked to the collapsed width, regardless of .sidemenu's own current
    width -- on a phone, an expanded (200px) .sidemenu is meant to overlay
    .maincontent rather than push it aside (see sidemenu.css). Since this
    container's width no longer tracks its child, .sidemenu just visually
    spills out past this box's boundary (default overflow:visible) instead
    of growing it. */
    .home-layout .sidemenu_container {
        width: 56px;
    }
}