/* Card styling and card-level variants */
/* ==========================================================================
 CARD OVERFLOW CONTRACT — IMPORTANT
 --------------------------------------------------------------------------
 Cards intentionally use:
 .card { overflow: hidden; }
 to preserve rounded corners and shadows.
 
 This ONLY works because child components (e.g. carousels)
 are REQUIRED to be width-bounded and scroll internally.
 
 DO NOT:
 - Remove width/max-width from .card
 - Change article lists/items to display:flex without rechecking carousels
 - Add width: fit-content / max-content to card descendants
 
 Home page expects:
 <section class="card articles">
 (plural — must match CSS selectors)
 
 If content appears truncated instead of scrollable,
 the issue is almost always a child expanding layout width.
 -------------------------------------------------------------------------- */
.card {
    background: var(--glass);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    
    overflow: hidden;
}

.card-pad {
    padding: var(--card-pad);
}

.card-pad-18 {
    padding: var(--size-18);
}

/* Home articles container overrides */
.card.articles {
    display: block; /* override .articles grid layout */
    position: relative;
    padding-left: var(--card-pad-x);
    padding-right: var(--card-pad-x);
}

.card.articles::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--size-1);
    background: var(--border-soft);
    pointer-events: none;
}

.card.articles::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--size-1);
    background: var(--border-soft);
    pointer-events: none;
}

/* News list within the card */
.card.articles .article-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.card.articles h3 {
    margin: 0 0 0.25em 0;
    text-align: left;
}

.card.articles .article-body {
    margin: 0 !important;
    padding: 0;
    text-align: left;
}

.card.articles .article-item {
    display: flow-root;  /* replaces clearfix */
    margin: 0 0 var(--space) 0;
}

.article-item {
    position: relative;
}

.article-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Ensure carousel & interactive elements stay above the link */
.article-item .carousel,
.article-item button,
.article-item a:not(.article-link-overlay) {
    position: relative;
    z-index: 2;
}

.card.article-index .article-index-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
}

.card.article-index .article-index-item {
    font-size: 0.95rem;
    line-height: 1.1;
    cursor: default;
}

/* Right-side card: scroll internally, not the page */
.article-index {
    /* keep the card visible while the left side scrolls */
    position: sticky;
    top: var(--space); /* match your .shell gap / spacing */
    
    padding-left: var(--card-pad-x);
    padding-right: var(--card-pad-x);
    padding-bottom: var(--card-pad-y);
    
    /* internal scrolling */
    overflow-y: auto;
    overscroll-behavior: contain;
    
    /* “just less than viewport” — adjust 180px if needed */
    max-height: calc(100vh - var(--size-220));
}

.article-index-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.article-index-link:hover {
    text-decoration: underline;
}