/* ==========================================================================
   site-extra.css — articles listing redesign, pagination, breadcrumbs
   Brand palette: blue #004377 · orange #ff9600 · font Gotham Pro
   ========================================================================== */

.articles_intro {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 2.75rem;
}
.articles_intro ._title {
    color: #004377;
    font-size: 2rem;
    margin-bottom: .75rem;
}
.articles_intro p {
    color: #33475b;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* --- breadcrumbs --- */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    font-size: .9rem;
    color: #64748b;
}
.breadcrumbs a {
    color: #004377;
    text-decoration: none;
    transition: color .2s linear;
}
.breadcrumbs a:hover { color: #ff9600; }
.breadcrumbs li::after {
    content: "›";
    margin-left: .5rem;
    color: #b0bcca;
}
.breadcrumbs li:last-child::after { content: ""; margin: 0; }
.breadcrumbs li[aria-current="page"] { color: #64748b; }

/* --- articles grid --- */
.articles_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.article_card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 67, 119, .10);
    border: 1px solid rgba(0, 67, 119, .06);
    transition: transform .22s ease, box-shadow .22s ease;
    text-decoration: none;
    height: 100%;
}
.article_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 67, 119, .18);
}
.article_card__top {
    position: relative;
    padding: 1.4rem 1.5rem 0;
}
.article_card__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    color: #004377;
    background: rgba(255, 150, 0, .14);
    border-radius: 2rem;
    padding: .32rem .8rem;
}
.article_card__body {
    padding: .9rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.article_card__title {
    color: #12263a;
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 .6rem;
    transition: color .2s linear;
}
.article_card:hover .article_card__title { color: #004377; }
.article_card__desc {
    color: #55657a;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article_card__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .92rem;
    color: #ff9600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.article_card__more i { transition: transform .2s linear; }
.article_card:hover .article_card__more i { transform: translateX(4px); }

/* --- pagination --- */
.pagination_nav {
    display: flex;
    justify-content: center;
    margin-top: 2.75rem;
}
.pagination_nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagination_nav a,
.pagination_nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 .6rem;
    border-radius: .6rem;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: all .2s linear;
}
.pagination_nav a {
    color: #004377;
    background: #ffffff;
    border: 1px solid rgba(0, 67, 119, .15);
}
.pagination_nav a:hover {
    background: #004377;
    color: #ffffff;
    border-color: #004377;
}
.pagination_nav .is_current {
    color: #ffffff;
    background: linear-gradient(200deg, #004272 0%, #004377 49%, #002643 100%);
    box-shadow: 0 6px 16px rgba(0, 38, 67, .35);
}
.pagination_nav .is_disabled {
    color: #b0bcca;
    background: #f1f4f8;
    cursor: not-allowed;
}

/* --- article page back link --- */
.article_back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    color: #004377;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s linear;
}
.article_back:hover { color: #ff9600; }
.article_back i { transition: transform .2s linear; }
.article_back:hover i { transform: translateX(-4px); }

@media (max-width: 575px) {
    .articles_intro ._title { font-size: 1.55rem; }
    .articles_grid { grid-template-columns: 1fr; }
}

/* --- article content (info articles) --- */
.item-page { color: #333; line-height: 1.7; }
.item-page > p { margin-bottom: 1.1rem; }
.item-page h2 {
    color: #004377;
    font-size: 1.5rem;
    margin: 2rem 0 .9rem;
    line-height: 1.3;
}
.item-page h3 {
    color: #004377;
    font-size: 1.2rem;
    margin: 1.5rem 0 .6rem;
}
.item-page ul,
.item-page ol { margin: 0 0 1.1rem 1.25rem; }
.item-page li { margin-bottom: .5rem; }
.item-page .lead {
    font-size: 1.1rem;
    color: #222;
    font-weight: 500;
}

/* CTA callout at the end of an article */
.article_cta {
    margin-top: 2.25rem;
    padding: 1.5rem 1.75rem;
    background: #f2f7fb;
    border-left: 4px solid #ff9600;
    border-radius: 8px;
}
.article_cta h2 {
    margin-top: 0;
    font-size: 1.35rem;
}
.article_cta p { margin-bottom: 0; }
.article_cta a { color: #004377; font-weight: 600; text-decoration: none; }
.article_cta a:hover { color: #ff9600; }

/* soft note / when-to-see-doctor emphasis */
.article_warning {
    background: #fff6ec;
    border-left: 4px solid #ff9600;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}
.article_warning p { margin-bottom: 0; }