/* ==========================================================================
   AFBS Weekly Newsletter
   Shared by index.html (latest issues), newsletters.html (all issues) and
   newsletter.html (single issue reader). Cards reuse the theme's
   .blog-card-two template; this file only adds what the template lacks.
   ========================================================================== */

/* --- Liquid pill button -------------------------------------------------
   Same effect as .ir-btn on the impact report and the portal buttons:
   blue at rest, an orange wave rises through it on hover or keyboard focus. */
.afbs-liquid-btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: #003FBB;
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 16px 36px;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
    transition: color 500ms ease;
}
.afbs-liquid-btn::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 150%;
    border-top-left-radius: 46%;
    border-top-right-radius: 46%;
    background: #003FBB;
    transition: 700ms cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.afbs-liquid-btn::after {
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 150%;
    border-bottom-left-radius: 46%;
    border-bottom-right-radius: 46%;
    background: #F65502;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.afbs-liquid-btn:hover::before,
.afbs-liquid-btn:focus-visible::before { top: 100%; }
.afbs-liquid-btn:hover::after,
.afbs-liquid-btn:focus-visible::after { bottom: -50%; }
.afbs-liquid-btn > span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.afbs-liquid-btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.afbs-liquid-btn--ghost::before { background: transparent; }
.afbs-liquid-btn[disabled] { opacity: .65; cursor: default; }
.afbs-liquid-btn[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .afbs-liquid-btn::before, .afbs-liquid-btn::after { transition: none; }
}

.nl-actions { text-align: center; margin-top: 46px; }

/* --- Cards ---------------------------------------------------------------
   The template's images are 204x288 portrait. CMS banners can be any shape,
   so crop them to the same frame rather than letting cards change height. */
.nl-card .blog-card-two__image img {
    width: 204px;
    height: 288px;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #0d1b3e;
}
.nl-card .blog-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Status / empty / error ------------------------------------------------ */
.nl-status {
    text-align: center;
    font-family: 'Manrope', sans-serif;
    color: #46506a;
    font-size: 15.5px;
    background: #f4f7fc;
    border: 1px solid #e7edf7;
    border-radius: 16px;
    padding: 34px 26px;
    margin: 0 0 30px;
}
.nl-status[hidden] { display: none !important; }
.nl-status__title { font-weight: 800; color: #0d1b3e; font-size: 17px; margin: 0 0 6px; }
.nl-status p { margin: 0; }

/* --- Archive page ----------------------------------------------------------- */
.nl-archive__intro {
    max-width: 680px;
    margin: -18px auto 44px;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #46506a;
}
.nl-archive__intro [data-nl-count] { font-weight: 800; color: #0d1b3e; white-space: nowrap; }

/* --- Join CTA (archive + reader) ------------------------------------------- */
.nl-join {
    margin-top: 64px;
    background: #0d1b3e;
    border-radius: 20px;
    padding: 44px 40px;
    text-align: center;
    color: #fff;
    font-family: 'Manrope', sans-serif;
}
.nl-join h2 { color: #fff; font-size: clamp(22px, 3vw, 29px); font-weight: 800; margin: 0 0 10px; }
.nl-join p { color: rgba(255,255,255,.85); font-size: 15.5px; line-height: 1.7; max-width: 560px; margin: 0 auto 24px; }

/* --- Reader ---------------------------------------------------------------- */
.nl-reader-col { max-width: 840px; margin: 0 auto; font-family: 'Manrope', sans-serif; }
.nl-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: #003FBB; font-weight: 800; font-size: 14px; text-decoration: none; margin-bottom: 22px;
}
.nl-back:hover { color: #0d1b3e; text-decoration: underline; }
.nl-reader {
    background: #fff;
    border: 1px solid #e7edf7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(0,0,0,.05);
}
.nl-reader > .nl-status { margin: 30px; }
.nl-reader__banner { display: block; width: 100%; max-height: 400px; object-fit: cover; }
.nl-reader__header { padding: 40px 48px 0; }
.nl-reader__issue {
    display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 100px;
    background: #003FBB; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.nl-reader__title {
    font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; line-height: 1.2; color: #0d1b3e; margin: 0 0 14px;
}
.nl-reader__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; color: #647488; font-size: 14px; font-weight: 600; }
.nl-reader__meta i { color: #003FBB; margin-right: 6px; }
.nl-reader__body { padding: 30px 48px 46px; }
.nl-reader__excerpt {
    font-size: 17.5px; line-height: 1.75; color: #0d1b3e; font-style: italic;
    border-left: 4px solid #F65502; padding: 4px 0 4px 20px; margin: 0 0 28px;
}
.nl-reader__content { font-size: 16.5px; line-height: 1.85; color: #2d3748; }
.nl-reader__content p { margin: 0 0 18px; }
.nl-reader__content h3.fbu-subhead { font-size: 21px; font-weight: 800; color: #0d1b3e; margin: 34px 0 12px; line-height: 1.3; }
.nl-reader__content h3.fbu-subhead:first-child { margin-top: 0; }
.nl-reader__content strong { color: #0d1b3e; }
.nl-reader__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; padding-top: 28px; border-top: 1px solid #e7edf7; }
.nl-reader__gate {
    background: #f4f7fc; border: 1px solid #e7edf7; border-left: 4px solid #003FBB;
    border-radius: 14px; padding: 26px 28px; font-size: 15.5px; line-height: 1.7; color: #46506a;
}
.nl-reader__gate strong { color: #0d1b3e; display: block; font-size: 17px; margin-bottom: 6px; }
.nl-reader__gate .nl-reader__actions { border-top: 0; padding-top: 0; margin-top: 18px; }

@media (max-width: 640px) {
    .nl-reader__header { padding: 28px 22px 0; }
    .nl-reader__body { padding: 22px 22px 32px; }
    .nl-join { padding: 34px 22px; }
    .afbs-liquid-btn { padding: 14px 28px; font-size: 13px; }
}