.news-list-layout {
    margin-top: 24px;
    max-width: var(--max-width-container);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    margin-bottom: 48px;
}

.news-list-category {
    margin-bottom: 32px;
}

.news-list-category__title {
    font-family: var(--font-family-medium);
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-near-black);
    margin: 0 0 12px 0;
}

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

.news-list-item {
    border: 1px solid var(--color-light-gray);
    background-color: var(--color-white);
    padding: 16px 20px;
    border-radius: 0;
    box-shadow: 0 0 0 color-mix(in srgb, var(--color-black) 0%, transparent);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.news-list-item+.news-list-item {
    margin-top: 12px;
}

.news-list-item:hover,
.news-list-item:focus-within {
    border-color: color-mix(in srgb, var(--color-dark-blue) 35%, transparent);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--color-black) 8%, transparent);
    transform: translateY(-1px);
}

.news-list-item__title {
    font-family: var(--font-family-medium);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-near-black);
    border-bottom: 2px solid var(--color-dark-blue);
    padding-bottom: 6px;
    margin: 0 0 10px 0;
}

.news-list-item__title a {
    color: inherit;
    text-decoration: none;
}

.news-list-item__title a:hover,
.news-list-item__title a:focus {
    text-decoration: underline;
}

.news-list-item__meta {
    font-family: var(--font-family-book);
    font-size: 13px;
    color: var(--color-dark-gray);
    margin: 0 0 8px 0;
}

.news-list-item__summary {
    font-family: var(--font-family-book);
    font-size: 15px;
    line-height: var(--line-height-relaxed);
    color: var(--color-near-black);
    margin: 0;
}

.news-list-item__summary--spaced {
    margin-bottom: 16px;
}

@media (max-width: 877px) {
    .news-list-item {
        padding: 14px 16px;
    }

    .news-list-item__title {
        font-size: 20px;
        line-height: 1.2;
    }
}

/* ==========================================================================
    Article cards - List.NewsListValentair.cshtml
--------------------------------------------------------------------------
    One article per row: text block on the left, summary image on the right,
    stacking image-first on mobile. The markup ships Bootstrap grid classes,
    but the layout below is self-contained flexbox so it renders identically
    whether or not a Bootstrap grid stylesheet is loaded on the page.
    Accent colours come from --color-dark-blue / --color-sky-blue, which the
    Valent theme (Content/valentair/css/styles.css) re-points to #751A15.
========================================================================== */
.news-list-layout .artical-card-with-shadow {
    display: block;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-gray);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 6%, transparent);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.news-list-layout .artical-card-with-shadow+.artical-card-with-shadow {
    margin-top: 24px;
}

.news-list-layout .artical-card-with-shadow:hover,
.news-list-layout .artical-card-with-shadow:focus-visible {
    border-color: color-mix(in srgb, var(--color-dark-blue) 35%, transparent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-black) 12%, transparent);
    transform: translateY(-2px);
}

.news-list-layout .artical-card-with-shadow:focus-visible {
    outline: 2px solid var(--color-dark-blue);
    outline-offset: 2px;
}

/* Neutralise Bootstrap gutters so card padding is the single source of
       spacing, then rebuild the two-column split with explicit flex values. */
.news-list-layout .artical-card-with-shadow .container-fluid {
    width: 100%;
    max-width: none;
    padding: 32px;
    margin: 0;
}

.news-list-layout .artical-card-with-shadow .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    margin: 0;
}

.news-list-layout .artical-card-with-shadow .row>[class*="col-"] {
    padding: 0;
    width: auto;
    max-width: 100%;
}

.news-list-layout .artical-card-with-shadow .row>[class*="col-"]:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.news-list-layout .artical-card-with-shadow .row>[class*="col-"]:last-child {
    flex: 0 0 280px;
    max-width: 280px;
}

.news-list-layout .artical-card-date {
    font-family: var(--font-family-medium);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-dark-gray);
    margin-bottom: 10px;
}

.news-list-layout .artical-card-title {
    font-family: var(--font-family-bold);
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--color-near-black);
    margin-bottom: 14px;
    transition: color 0.2s ease;
}

.news-list-layout .artical-card-with-shadow:hover .artical-card-title,
.news-list-layout .artical-card-with-shadow:focus-visible .artical-card-title {
    color: var(--color-dark-blue);
}

.news-list-layout .artical-card-desc {
    font-family: var(--font-family-medium);
    font-weight: 500;
    font-size: 16px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-gray);
}

.news-list-layout .artical-card-desc p {
    margin: 0;
}

.news-list-layout .artical-card-desc sup {
    font-size: 0.65em;
    line-height: 0;
    vertical-align: super;
}

/* "Read full article." - inline CTA inside the summary paragraph. */
.news-list-layout .artical-card-desc span {
    display: inline-block;
    font-family: var(--font-family-semi-bold);
    color: var(--color-dark-blue);
    white-space: nowrap;
}

.news-list-layout .artical-card-with-shadow:hover .artical-card-desc span,
.news-list-layout .artical-card-with-shadow:focus-visible .artical-card-desc span {
    color: var(--color-sky-blue);
    text-decoration: underline;
}

.news-list-layout .artical-card-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--color-light-gray);
}

/* Small desktop: 1025px - 1343px.
   Valent zeroes body > main's horizontal padding above 1024px
   (Content/valentair/css/styles.css) so full-bleed sections can span the
   viewport. Without a gutter here the cards would sit flush against the
   screen edge until the 1248px cap starts producing margins of its own at
   1344px. Greenheck keeps main's 48px padding at these widths, so this is
   scoped to body.valentair to avoid doubling it up. */
@media (min-width: 1025px) and (max-width: 1343px) {
    body.valentair .news-list-layout {
        /* Dropping the cap keeps the card width continuous across the 1344px
           hand-off: below it the gutter is this padding, above it the 1248px
           cap plus auto margins produce the same 48px. */
        max-width: none;
        padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop);
    }
}

/* Tablet: 878px - 1024px */
@media (min-width: 878px) and (max-width: 1024px) {
    .news-list-layout .artical-card-with-shadow .container-fluid {
        padding: 26px;
    }

    .news-list-layout .artical-card-with-shadow .row {
        gap: 24px;
    }

    .news-list-layout .artical-card-with-shadow .row>[class*="col-"]:last-child {
        flex: 0 0 220px;
        max-width: 220px;
    }

    .news-list-layout .artical-card-title {
        font-size: 21px;
    }

    .news-list-layout .artical-card-desc {
        font-size: 15px;
    }
    .news-list-layout {
        max-width: 736px;
    }
}

/* Mobile: max-width 877px - stack with the image on top */
@media (max-width: 877px) {
    .news-list-layout .artical-card-with-shadow+.artical-card-with-shadow {
        margin-top: 16px;
    }

    .news-list-layout .artical-card-with-shadow .container-fluid {
        padding: 20px;
    }

    .news-list-layout .artical-card-with-shadow .row {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 18px;
    }

    .news-list-layout .artical-card-with-shadow .row>[class*="col-"]:first-child,
    .news-list-layout .artical-card-with-shadow .row>[class*="col-"]:last-child {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    /* Image column is last in the markup; show it first on small screens. */
    .news-list-layout .artical-card-with-shadow .row>[class*="col-"]:last-child {
        order: 1;
    }

    .news-list-layout .artical-card-with-shadow .row>[class*="col-"]:first-child {
        order: 2;
    }

    .news-list-layout .artical-card-img {
        aspect-ratio: 16 / 9;
    }

    .news-list-layout .artical-card-date {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .news-list-layout .artical-card-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .news-list-layout .artical-card-desc {
        font-size: 15px;
    }
    .news-list-layout {
        /* 332px matches the content column body > main is capped to at this
           breakpoint in common.css; the calc only bites below ~356px viewports,
           where it keeps a 12px gutter instead of letting the card touch the
           screen edge. */
        width: 100;
        max-width: 332px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-list-layout .artical-card-with-shadow {
        transition: none;
    }

    .news-list-layout .artical-card-with-shadow:hover,
    .news-list-layout .artical-card-with-shadow:focus-visible {
        transform: none;
    }
}