/**
 * GC Framing v2026 - Articles Page Styles
 *
 * File: _css/articles.css
 *
 * Only loads on the Articles Page template (see _inc/theme_enqueue.inc.php).
 * Shared rules stay in _css/main.css: this file is just the image carousel at
 * the top of the list and the heading under it.
 *
 * Design tokens (--color_*, --radius_*, --font_*) come from :root in main.css,
 * which is enqueued as a dependency, so they are available here.
 *
 * 1. Rail and track
 * 2. Slides
 * 3. Arrows
 * 4. Section heading
 */


/* ==========================================================================
   1. Rail and track
   The track is a scroll snap row, so it works with no script at all: it stays
   swipeable and scrollable, only the arrows need JavaScript.
   ========================================================================== */
.article_rail {
    position: relative;
    margin-bottom: 2.5rem;
}

.article_rail_track {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: var(--radius_card);
}

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

.article_rail_track:focus-visible {
    outline: 2px solid var(--color_brown);
    outline-offset: 4px;
}


/* ==========================================================================
   2. Slides
   One image per screen on phones, two on tablets, three on desktop. The gap is
   taken out of the basis so a whole number of slides fits the viewport, which
   is what makes paging by track width land on a snap point.
   ========================================================================== */
.article_rail_item {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.article_rail_link {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius_medium);
    background: var(--color_oat);
    text-decoration: none;
}

.article_rail_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.article_rail_link:hover .article_rail_image,
.article_rail_link:focus-visible .article_rail_image {
    transform: scale(1.04);
}

.article_rail_link:focus-visible {
    outline: 2px solid var(--color_brown);
    outline-offset: 3px;
}

.article_rail_caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 1.125rem 0.9rem;
    font-family: var(--font_heading);
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--color_white);
    background: linear-gradient(to top, rgba(24, 18, 2, 0.82), rgba(24, 18, 2, 0));
}

@media (min-width: 40em) {
    .article_rail_item {
        flex-basis: calc(50% - 0.75rem);
    }
}

@media (min-width: 64em) {
    .article_rail_item {
        flex-basis: calc(33.333% - 1rem);
    }
}


/* ==========================================================================
   3. Arrows
   Hidden until _js/articles.js marks the rail as enhanced, so they are never
   dead controls.
   ========================================================================== */
.article_rail_nav {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    font-family: var(--font_heading);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color_white);
    background: var(--color_brown);
    border: none;
    border-radius: var(--radius_pill);
    box-shadow: var(--shadow_card);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 220ms ease, opacity 220ms ease;
}

.article_rail[data-enhanced="true"] .article_rail_nav {
    display: block;
}

.article_rail_nav:hover:not(:disabled) {
    background: var(--color_olive);
}

.article_rail_nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.article_rail_prev {
    left: 12px;
}

.article_rail_next {
    right: 12px;
}


/* ==========================================================================
   4. Section heading
   ========================================================================== */
.articles_heading {
    margin-top: 0;
    margin-bottom: 1.5rem;
}