/* Public Blog & Articles pages. Follows the Resources page look:
   navy #003557, red accent #f74254, soft-shadow cards. */

.blogx-page {
    /* the reading column each block measures itself against */
    --cm-measure: 1100px;
    /* how far past it the "Wide" step reaches, each side */
    --cm-wide: 160px;
    /* what a Wide block spans, and every block defaults to Wide, so the page
       furniture lines up with this rather than with the bootstrap container */
    --cm-page-col: calc(var(--cm-measure) + var(--cm-wide) * 2);

    margin-top: 80px;
    color: #1f2a37;
}

.blogx-page a { text-decoration: none; }

/* banner */

.blogx-banner {
    background: #003557 no-repeat center center;
    background-size: cover;
    padding: 56px 0;
    text-align: center;
}

.blogx-banner h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 10px;
}

.blogx-banner p {
    color: #e6eef5;
    font-size: 18px;
    max-width: 720px;
    margin: 0 auto;
}

/* toolbar: categories + search */

.blogx-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 28px 0 8px;
}

.blogx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blogx-chip {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid #d9dee5;
    border-radius: 999px;
    background: #fff;
    color: #003557;
    font-size: 14px;
    font-weight: 500;
    transition: all .15s ease;
}

.blogx-chip:hover { border-color: #003557; color: #003557; }

.blogx-chip.is-active,
.blogx-chip.is-active:hover {
    background: #003557;
    border-color: #003557;
    color: #fff;
}

/* category dropdown with search */

.blogx-catdd { position: relative; }

.blogx-catdd__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    padding: 10px 14px;
    border: 1px solid #d9dee5;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #003557;
    cursor: pointer;
}

.blogx-catdd__btn:hover,
.blogx-catdd.is-open .blogx-catdd__btn { border-color: #003557; }

.blogx-catdd__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6b7280;
}

.blogx-catdd__value { flex: 1 1 auto; text-align: left; font-weight: 600; }

.blogx-catdd__btn svg { transition: transform .15s ease; }
.blogx-catdd.is-open .blogx-catdd__btn svg { transform: rotate(180deg); }

.blogx-catdd__panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 300px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .14);
}

.blogx-catdd.is-open .blogx-catdd__panel { display: block; }

.blogx-catdd__search {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 8px;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.blogx-catdd__search:focus { border-color: #003557; }

.blogx-catdd__list { max-height: 260px; overflow-y: auto; }

.blogx-catdd__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #1f2a37;
    font-size: 14px;
}

.blogx-catdd__item:hover { background: #f1f4f7; color: #003557; }

.blogx-catdd__item.is-active { background: #eef3f8; color: #003557; font-weight: 600; }

.blogx-catdd__item small { color: #6b7280; }

.blogx-catdd__empty { margin: 6px 10px; font-size: 13px; color: #6b7280; }

.blogx-search {
    position: relative;
    flex: 0 1 320px;
}

.blogx-search input {
    width: 100%;
    padding: 9px 40px 9px 14px;
    border: 1px solid #d9dee5;
    border-radius: 999px;
    font-size: 14px;
    outline: none;
}

.blogx-search input:focus { border-color: #003557; }

.blogx-search button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #003557;
    color: #fff;
    cursor: pointer;
}

/* section header with the two-tone underline used across the site */

.blogx-section-header {
    display: inline-block;
    color: #000;
    font-size: 28px;
    font-weight: 700;
    margin: 30px 0 18px;
}

.blogx-section-header .bars {
    display: flex;
    gap: 5px;
    margin-top: 4px;
}

.blogx-section-header .bars span:first-child { height: 4px; width: 70%; background: #f74254; }
.blogx-section-header .bars span:last-child  { height: 4px; width: 30%; background: #003557; }

/* featured post */

.blogx-featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 24px;
    margin-top: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
}

.blogx-featured__img {
    height: 340px;
    border-radius: 6px;
    background: #eef1f5 no-repeat center center;
    background-size: cover;
}

.blogx-featured h2 {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    color: #003557;
    margin: 12px 0 14px;
}

.blogx-featured h2 a { color: inherit; }
.blogx-featured h2 a:hover { text-decoration: underline; }

.blogx-featured p {
    font-size: 16px;
    line-height: 1.7;
    color: #4b5563;
}

/* card grid */

.blogx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blogx-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
    transition: transform .15s ease, box-shadow .15s ease;
}

.blogx-card:hover {
    transform: translateY(-3px);
    box-shadow: rgba(149, 157, 165, .3) 0 12px 28px;
}

.blogx-card__img {
    position: relative;
    height: 200px;
    border-radius: 5px;
    background: #eef1f5 no-repeat center center;
    background-size: cover;
}

.blogx-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    background: #f74254;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.blogx-card__title {
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: #003557;
    margin: 14px 0 8px;
}

.blogx-card__title a { color: inherit; }
.blogx-card__title a:hover { text-decoration: underline; }

.blogx-card__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #1f2a37;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blogx-meta {
    margin-top: auto;
    font-size: 13px;
    color: #6b7280;
}

.blogx-meta span + span::before {
    content: "\00b7";
    margin: 0 7px;
}

.blogx-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #003557;
    font-weight: 700;
    font-size: 14px;
}

.blogx-empty {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
    background: #fff;
    border-radius: 8px;
    box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
}

.blogx-pagination { margin: 34px 0 10px; }

.blogx-pagination .pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.blogx-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    width: auto;
    height: 40px;
    padding: 0 12px;
    margin-bottom: 0 !important;
    line-height: 1;
    border: 1px solid #d9dee5;
    border-radius: 6px;
    background: #fff;
    color: #003557;
    font-size: 14px;
}

.blogx-pagination .active .page-link {
    background: #003557;
    border-color: #003557;
    color: #fff;
}

.blogx-pagination .disabled .page-link { opacity: .45; }

/* no cover: navy gradient with the first letter */

.blogx-card__img--none {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #003557 0%, #0d5a8a 60%, #f74254 160%);
}

.blogx-initial {
    font-size: 64px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
}

.blogx-article__meta--slim {
    padding-bottom: 14px;
    margin-bottom: 22px;
}

/* single post */

.blogx-article {
    padding: 40px 0 60px;
}

/* The body is the reading column, and each block widens or bleeds from there.
   The back link, meta and title line up with the Wide step instead, because
   that is what every block defaults to - so the page reads on one edge. The
   container is narrower than that, hence the negative margins, clamped so they
   never reach past the viewport on a small screen. */
.blogx-article > .cm-content {
    max-width: var(--cm-measure);
    margin-left: auto;
    margin-right: auto;
}

.blogx-article > .blogx-topline,
.blogx-article > h1,
.blogx-page > .container > .blogx-related,
.blogx-page > .container > .blogx-toolbar,
.blogx-page > .container > .blogx-section-header,
.blogx-page > .container > .blogx-grid,
.blogx-page > .container > .blogx-pagination,
.blogx-page > .container > .blogx-empty {
    margin-left: max(calc(50% - 50vw), calc(50% - var(--cm-page-col) / 2));
    margin-right: max(calc(50% - 50vw), calc(50% - var(--cm-page-col) / 2));
}

/* full-bleed sections stretch to 100vw, which must not add a scrollbar */
.blogx-page { overflow-x: clip; }

.blogx-article__cover {
    height: 420px;
    border-radius: 8px;
    background: #eef1f5 no-repeat center center;
    background-size: cover;
    box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
    margin-bottom: 30px;
}

.blogx-article h1 {
    font-family: var(--cmf-heading, inherit);
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--cm-heading-color, #003557);
    margin: 0 0 26px;
}

.blogx-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.blogx-topline__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.blogx-topline__meta a { color: #003557; font-weight: 600; }
.blogx-topline__meta a:hover { text-decoration: underline; }

.blogx-topline__meta > * + *::before {
    content: "\00b7";
    margin: 0 6px;
    color: #c3c7cf;
}

.blogx-article__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e9ef;
    font-size: 14px;
    color: #6b7280;
}

.blogx-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef1f5;
}

.blogx-avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #003557;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.blogx-article__meta strong { color: #1f2a37; }

.blogx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 34px 0 0;
}

.blogx-tag {
    padding: 5px 12px;
    border-radius: 999px;
    background: #eef1f5;
    color: #003557;
    font-size: 13px;
}

.blogx-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #e5e9ef;
    font-size: 14px;
    color: #6b7280;
}

.blogx-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #003557;
    color: #fff;
}

.blogx-share a:hover { background: #f74254; color: #fff; }

.blogx-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #003557;
    font-weight: 600;
    font-size: 14px;
}

.blogx-related { padding-bottom: 60px; }

@media (max-width: 991px) {
    .blogx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blogx-featured { grid-template-columns: 1fr; }
    .blogx-featured__img { height: 260px; }
    .blogx-article__cover { height: 300px; }
    .blogx-article h1 { font-size: 30px; }
}

@media (max-width: 575px) {
    .blogx-banner h1 { font-size: 30px; }
    .blogx-grid { grid-template-columns: 1fr; }
    .blogx-search { flex: 1 1 100%; }
    .blogx-article__cover { height: 220px; }
}