/* Editorial article experiences. Scoped to /articles/ routes only. */
/* Detail pages sit on ivory, so the white desktop header labels need dark ink.
   Scope to the compact detail state; the expanded header and other routes are unchanged. */
.header.cdm-article-site-header .cdm-article-header-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: .65rem;
    text-decoration: none;
    color: #102b52 !important;
}
.header.cdm-article-site-header .cdm-article-header-brand img {
    display: block;
    flex: 0 0 auto;
    width: clamp(46px, 4.5vw, 62px);
    height: clamp(46px, 4.5vw, 62px);
    object-fit: contain;
}
.header.cdm-article-site-header .cdm-article-header-brand span {
    display: block;
    font-size: clamp(.78rem, 1.2vw, 1.06rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #102b52;
}
.header.cdm-article-site-header #header-no-scroll .text-light,
.header.cdm-article-site-header #header-no-scroll a,
.header.cdm-article-site-header #header-no-scroll .bx {
    color: #102b52 !important; /* Overrides Bootstrap .text-light !important. */
}
.header.cdm-article-site-header #header-no-scroll .bg-light {
    background-color: #e6b74b !important;
}
.header.cdm-article-site-header #header-no-scroll a:hover,
.header.cdm-article-site-header #header-no-scroll .bx:hover {
    color: #174a79 !important;
}

.cdm-article-listing,
.cdm-article-detail {
    --article-navy: #102b52;
    --article-blue: #174a79;
    --article-gold: #e6b74b;
    --article-ink: #21314b;
    --article-muted: #52647b;
    --article-ivory: #fbfaf5;
    --article-border: #e0e6ec;
    color: var(--article-ink);
    background: var(--article-ivory);
    font-family: "Freesia", "Inter", system-ui, sans-serif;
}
.cdm-article-listing *,
.cdm-article-detail * { box-sizing: border-box; }
.cdm-articles-container { width: min(1160px, calc(100% - 3rem)); margin-inline: auto; }

.cdm-articles-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(7.5rem, 12vh, 10rem) 0 clamp(4rem, 9vh, 6rem);
    background-color: #102b52;
    background-image:
        linear-gradient(180deg, rgba(6, 23, 47, .72), rgba(8, 32, 62, .66)),
        url("../images/design/mph-top-snipe.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
}
.cdm-articles-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 4vh, 2.5rem);
}
.cdm-articles-discovery { width: 100%; }
.cdm-articles-hero .cdm-articles-filter-section {
    width: 100%;
    margin-top: 0;
}
.cdm-articles-hero .cdm-articles-filter-form {
    background: rgba(255, 255, 255, .94);
    border-color: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.cdm-article-listing.is-results-mode .cdm-articles-hero {
    min-height: clamp(20rem, 42svh, 28rem);
    padding: clamp(6rem, 11vh, 7.5rem) 0 clamp(1.75rem, 4vh, 2.75rem);
}
.cdm-article-listing.is-results-mode .cdm-articles-hero-inner { gap: 1rem; }
.cdm-article-listing.is-results-mode .cdm-articles-hero h1 {
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    letter-spacing: .035em;
}
.cdm-article-listing.is-results-mode .cdm-articles-hero-description { display: none; }
.cdm-article-listing.is-results-mode .cdm-articles-filter-form { padding: .95rem 1.1rem; }
.cdm-article-listing.is-results-mode .cdm-articles-results { padding-top: 2.25rem; }
.cdm-article-listing.is-results-mode .cdm-articles-results-heading { margin-bottom: 2rem; }

.cdm-articles-eyebrow {
    margin: 0 0 1rem;
    color: var(--article-blue);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.cdm-articles-hero h1 {
    margin: 0 auto;
    max-width: 1080px;
    color: var(--article-gold);
    font-size: clamp(2.5rem, 7.5vw, 6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .045em;
    text-wrap: balance;
    overflow-wrap: normal;
}
.cdm-articles-hero-description {
    color: #f0f3f7;
    font-size: clamp(1rem, 1.8vw, 1.22rem);
    line-height: 1.7;
    max-width: 730px;
    margin: 1.35rem auto 0;
}

.cdm-articles-filter-section {
    position: relative;
    z-index: 1;
    margin-top: -1rem;
    scroll-margin-top: 7rem;
}
.cdm-articles-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(170px, 1fr) minmax(150px, .85fr) auto auto;
    gap: 1rem;
    align-items: end;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid var(--article-border);
    border-radius: .8rem;
    box-shadow: 0 12px 36px rgba(13, 41, 73, .11);
}
.cdm-articles-field { min-width: 0; }
.cdm-articles-field label {
    display: block;
    margin-bottom: .45rem;
    color: var(--article-ink);
    font-size: .81rem;
    font-weight: 750;
}
.cdm-articles-field :is(input, select) {
    display: block;
    width: 100%;
    min-height: 2.8rem;
    background: #f8fafc;
    border: 1px solid #cfd9e5;
    border-radius: .38rem;
    padding: .65rem .8rem;
    color: var(--article-ink);
    font: inherit;
    font-size: .92rem;
}
.cdm-articles-search-button,
.cdm-article-back-link,
.cdm-article-retry {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    min-height: 2.8rem;
    padding: .72rem 1.35rem;
    border: none;
    border-radius: .4rem;
    background: var(--article-navy);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.cdm-articles-search-button:hover,
.cdm-article-back-link:hover,
.cdm-article-retry:hover { background: #225584; color: #fff; }
.cdm-articles-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: .65rem .95rem;
    border: 1px solid #b7cadc;
    border-radius: .4rem;
    background: #f8fafc;
    color: var(--article-navy);
    font: inherit;
    font-size: .9rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}
.cdm-articles-clear-button:hover { background: #e7eff6; }
.cdm-articles-clear-button[hidden] { display: none !important; }


.cdm-articles-results { padding: 4.5rem 0 6rem; scroll-margin-top: 7rem; }
.cdm-articles-results-heading { margin: 0 0 3.5rem; }
.cdm-articles-results-heading h2 {
    margin: 0 0 .85rem;
    color: var(--article-navy);
    font-size: clamp(1.8rem, 3.1vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.035em;
}
.cdm-articles-results-heading > p:last-child { max-width: 680px; margin: 0; color: var(--article-muted); }
.cdm-article-listing .category-section { margin-bottom: 3.7rem; }
.cdm-articles-category-heading { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.35rem; }
.cdm-articles-category-heading h3 { margin: 0; font-size: 1.5rem; color: var(--article-navy); font-weight: 800; }
.cdm-articles-category-rule { height: 1px; background: #d9e1eb; flex: 1; }
.cdm-articles-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.15rem; }
.cdm-article-listing .article {
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    overflow: hidden;
    border: 1px solid var(--article-border);
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 5px 16px rgba(12,38,70,.06);
    transition: box-shadow .2s ease, transform .2s ease;
}
.cdm-article-listing .article:hover { box-shadow: 0 12px 26px rgba(12,38,70,.13); transform: translateY(-3px); }
.cdm-article-listing .article a { color: inherit; }
.cdm-article-listing .card-img-wrap { width: 100%; aspect-ratio: 1.58; height: auto; position: relative; overflow: hidden; background: #e9edf3; }
.cdm-article-listing .card-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .25s ease;
}
.cdm-article-listing .card-img-wrap img.img-loaded { opacity: 1; }
.cdm-article-listing .img-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#e8edf2 20%,#f5f7f9 50%,#e8edf2 80%);
    background-size: 210% 100%;
    animation: cdm-article-shimmer 1.35s ease-in-out infinite;
}
.cdm-article-listing .img-shimmer.shimmer-done { opacity: 0; pointer-events: none; }
.cdm-article-listing .card-img-placeholder {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #8294aa;
    background: #e7edf3;
}
.cdm-article-listing .card-body { display: flex; flex: 1; flex-direction: column; gap: .75rem; padding: 1.15rem; }
.cdm-article-listing .card-meta { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; }
.cdm-article-listing .badge {
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: .25rem .55rem;
}
.cdm-article-listing .badge-event { background: #e9f2fb; color: #1c4d7d; }
.cdm-article-listing .badge-news { background: #e8f4ef; color: #24634e; }
.cdm-article-listing .badge-announce { background: #fff2d7; color: #855b16; }
.cdm-article-listing .badge-other { background: #f0edf6; color: #604e7e; }
.cdm-article-listing .card-date { color: var(--article-muted); font-size: .72rem; }
.cdm-article-listing .card-title {
    margin: 0;
    color: var(--article-navy);
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cdm-article-listing .card-summary {
    margin: 0;
    color: var(--article-muted);
    font-size: .86rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cdm-article-listing .card-footer { display: block; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--article-border); }
.cdm-article-listing .card-read { color: #155385; font-size: .84rem; font-weight: 750; }
.cdm-articles-more { display: flex; justify-content: center; margin-top: 1.35rem; }
.cdm-articles-more .load-more-btn {
    padding: .65rem 1.45rem;
    background: #fff;
    border: 1px solid #b7cadc;
    border-radius: .4rem;
    color: var(--article-navy);
    font-weight: 750;
    cursor: pointer;
}
.cdm-articles-more .load-more-btn:not(:disabled):hover { background: #eaf2f8; }
.cdm-articles-more .load-more-btn:disabled { opacity: .55; cursor: default; }
.cdm-article-listing .card-entering { animation: cdm-article-enter .42s ease both; }

.cdm-article-detail { padding: clamp(7.5rem, 11vw, 10.5rem) 0 6rem; }
.cdm-article-detail .cdm-article-shell { width: min(970px, calc(100% - 3rem)); margin-inline: auto; }
.cdm-article-breadcrumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 2rem; color: var(--article-muted); font-size: .86rem; }
.cdm-article-breadcrumbs a { color: var(--article-blue); text-decoration: none; }
.cdm-article-breadcrumbs a:hover { text-decoration: underline; }
.cdm-article-breadcrumbs [aria-current] { overflow-wrap: anywhere; }
.cdm-article-detail-header { border-bottom: 1px solid var(--article-border); padding-bottom: 2.1rem; margin-bottom: 2.25rem; }
.cdm-article-detail-meta { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; color: var(--article-muted); font-size: .83rem; font-weight: 650; }
.cdm-article-category { padding: .28rem .65rem; border-radius: 100px; background: #e7eef6; color: var(--article-blue); }
.cdm-article-detail-title { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); color: var(--article-navy); font-weight: 850; line-height: 1.13; letter-spacing: -.03em; overflow-wrap: anywhere; }
.cdm-article-detail-summary { max-width: 790px; margin: 1.4rem 0 0; color: var(--article-muted); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; }
.cdm-article-detail-summary[hidden] { display: none !important; }
.cdm-article-feature { margin: 0 0 2.5rem; overflow: hidden; border-radius: .75rem; background: linear-gradient(120deg,#1c4a7c,#0d2a51); }
.cdm-article-feature img { display: block; width: 100%; max-height: 490px; aspect-ratio: 16/9; object-fit: cover; }
.cdm-article-feature-placeholder { min-height: 190px; display: flex; justify-content: center; align-items: center; color: #e1ebf5; font-weight: 700; letter-spacing: .12em; text-align: center; padding: 2rem; }
.cdm-article-detail .article-content {
    max-width: 780px;
    margin: 0 auto 3rem;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: 1.06rem;
    line-height: 1.85;
    color: #29394d;
}
.cdm-article-detail .article-content :is(h2,h3,h4) { color: var(--article-navy); margin: 1.8em 0 .6em; line-height: 1.3; font-weight: 800; }
.cdm-article-detail .article-content p { width: auto; max-width: 100%; margin: 0 0 1.25rem; }
.cdm-article-detail .article-content img { max-width: 100%; height: auto; margin: 1.3rem auto; object-fit: contain; }
/* Document scans are wider than their CKEditor editor-size preview, never the reading column. */
.cdm-article-detail .article-content figure.cdm-document-page {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    float: none !important;
    margin: 1.6rem auto !important;
}
.cdm-article-detail .article-content img.cdm-document-page-image,
.cdm-article-detail .article-content figure.cdm-document-page img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    max-height: none;
    object-fit: contain;
    margin: 0 auto !important;
}
.cdm-article-detail .article-content figure.cdm-document-page figcaption {
    width: 100%;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}
.cdm-article-detail .article-content .cdm-document-page-fullsize {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: .45rem;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .18rem;
    color: #155b91;
}

/* Uploaded CMS MP4 links are presented as native players on published article details. */
.cdm-article-detail .article-content .cdm-article-inline-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(76vh, 720px);
    object-fit: contain;
    background: #061f31;
    border-radius: .8rem;
    margin: 1rem 0 1.5rem;
}
.cdm-article-detail .article-content .cdm-article-video-error {
    font-size: .95rem;
    color: var(--article-muted);
}
.cdm-article-detail .article-content .cdm-article-video-error[hidden] { display: none !important; }
.cdm-article-detail .article-content :is(figure.table,table) { width: 100%; max-width: 100%; overflow-x: auto; display: block; }
.cdm-article-detail .article-content :is(td,th) { padding: .65rem; border: 1px solid #dae2ea; }
.cdm-article-detail .article-content :is(a) { color: #155b91; text-decoration: underline; }
.cdm-article-detail .article-content :is(ul,ol) { padding-left: 1.6rem; margin-bottom: 1.2rem; }
.cdm-article-detail .article-content blockquote { padding: 1rem 1.5rem; border-left: 4px solid var(--article-gold); background: #f2f5f8; }
.cdm-article-detail .cdm-article-loading { color: var(--article-muted); padding: 1.5rem 0; }
.cdm-article-detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--article-border); padding-top: 2rem; }
.cdm-article-share { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.cdm-article-share p { margin: 0 .3rem 0 0; color: var(--article-muted); font-weight: 700; }
.cdm-article-share a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.6rem; border: 1px solid #c8d4df; border-radius: 50%; color: var(--article-navy); }
.cdm-article-share a:hover { background: #e7f1f9; color: var(--article-navy); }
.cdm-article-listing :is(a,button,input,select):focus-visible,
.cdm-article-detail :is(a,button,input,select):focus-visible { outline: 3px solid var(--article-gold); outline-offset: 3px; }

@keyframes cdm-article-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes cdm-article-enter { from { opacity: .2; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1040px) {
    .cdm-articles-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .cdm-articles-filter-form { grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(125px,1fr)); }
    .cdm-articles-search-button { grid-column: 1 / -1; }
    .cdm-articles-clear-button:not([hidden]) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .cdm-articles-container,
    .cdm-article-detail .cdm-article-shell { width: min(100% - 2rem, 640px); }
    .cdm-articles-hero { padding: 7rem 0 3rem; }
    .cdm-articles-hero-inner { gap: 1.3rem; }
    .cdm-article-listing.is-results-mode .cdm-articles-hero {
        min-height: 0;
        padding: 6.5rem 0 1.75rem;
    }
    .cdm-articles-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cdm-articles-field-search { grid-column: 1 / -1; }
    .cdm-articles-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cdm-articles-results { padding: 3.25rem 0 4rem; }
    .cdm-article-detail { padding-top: 7rem; }
}
@media (max-width: 520px) {
    .cdm-articles-filter-form { grid-template-columns: 1fr; gap: .7rem; padding: 1rem; }
    .cdm-articles-field-search { grid-column: auto; }
    .cdm-articles-grid { grid-template-columns: 1fr; }
    .cdm-articles-hero h1 { font-size: clamp(2.1rem, 10vw, 3.15rem); letter-spacing: .02em; }
    .cdm-article-listing.is-results-mode .cdm-articles-hero h1 {
        font-size: clamp(1.45rem, 7.5vw, 1.85rem);
    }
    .cdm-article-detail-title { font-size: clamp(2rem, 9vw, 2.65rem); }
    .cdm-article-feature-placeholder { min-height: 150px; }
    .cdm-article-detail-actions { align-items: flex-start; flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) {
    .cdm-article-listing *,
    .cdm-article-detail * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .cdm-article-listing .card-entering { animation: none; opacity: 1; transform: none; }
    .cdm-article-listing .img-shimmer { animation: none; }
}