/* ==========================================================================
   Gaia blog — /blog listing (Figma D - Blog 5513:87246, M - Blog 5513:85955)
   and /blog/<slug> posts (D - Blog Post 5516:88083, M - Blog Post 5516:88504).
   Pages are generated by scripts/blog/build_blog.py.
   ========================================================================== */

.blog-page {
    background: #F3F4F1;
    color: #180026;
}

/* Article pages sit on white; the closing band (lasting gesture + related
   articles) returns to the listing's white smoke. */
.blog-page--post {
    background: #FFFFFF;
}

.bp-more-band {
    margin: 56px -16px 0;
    padding: 0 16px;
    background: #F3F4F1;
}

.blog-page .bp-more-band .lg-section {
    padding: 56px 0;
}

/* Tags — Figma 5516:90154: neutral outline, Poppins 14/20 medium, #807388,
   8px radius, 4px 8px padding, 16px above the article title. */
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.blog-tag {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #807388;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.252px;
    color: #807388;
    white-space: nowrap;
}

/* Search + filter chips — same component as /faqs (.faq-search, .faq-tab-chip). */
.blog-filter__search {
    position: relative;
    width: 640px;
    max-width: 100%;
    margin: 0 auto 24px;
}

.blog-filter__search input {
    width: 100%;
    height: 56px;
    padding: 0 56px 0 24px;
    border: 1px solid #180026;
    border-radius: 56px;
    background: #FFFFFF;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.288px;
    color: #180026;
    outline: none;
}

.blog-filter__search input::placeholder {
    color: #807388;
}

.blog-filter__search input:focus {
    border-color: #1D4641;
    box-shadow: 0 0 0 3px rgba(29, 70, 65, 0.12);
}

.blog-filter__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.blog-filter__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto;
}

.blog-filter__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid #C0BAC4;
    border-radius: 100px;
    background: #FFFFFF;
    color: #463351;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.252px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.blog-filter__chip:hover,
.blog-filter__chip:focus-visible {
    border-color: #1D4641;
    color: #1D4641;
}

.blog-filter__chip:focus-visible {
    outline: 2px solid #1D4641;
    outline-offset: 2px;
}

.blog-filter__chip:active {
    transform: scale(0.97);
}

.blog-filter__chip.is-active {
    background: #D9EFDE;
    border-color: #1D4641;
    color: #1D4641;
}

/* ---------- Shared: author row ---------- */
.blog-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog-author__img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #000000;
}

.blog-author__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.blog-author__name {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: #180026;
}

.blog-author__meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 20px;
    color: #807388;
}

.blog-author__dot {
    display: inline-block;
    width: 20px;
    text-align: center;
}

/* ---------- Listing ---------- */
.bl {
    padding: 40px 16px 56px;
}

.bl-head {
    max-width: 960px;
    margin: 0 auto 40px;
    text-align: center;
}

.bl-title {
    margin: 0 0 32px;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.03em;
    color: #1D4641;
}

.blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px 24px;
    max-width: 1280px;
    margin: 0 auto;
}

.blog-grid__break {
    grid-column: 1 / -1;
}

.blog-grid.is-filtered .blog-grid__break {
    display: none;
}

/* ---------- Card ---------- */
.blog-card {
    min-width: 0;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Hovering one card softly blurs the others in the grid (focus effect). */
@media (hover: hover) {
    .blog-grid:has(.blog-card:hover) .blog-card:not(:hover) {
        filter: blur(4px);
        opacity: 0.9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card {
        transition: none;
    }
    .blog-grid:has(.blog-card:hover) .blog-card:not(:hover) {
        filter: none;
        opacity: 1;
    }
}

.blog-card[hidden] {
    display: none;
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: 24px;
}

.blog-card__link:focus-visible {
    outline: 3px solid #1D4641;
    outline-offset: 6px;
}

.blog-card__media {
    overflow: hidden;
    height: 360px;
    border-radius: 24px;
    background: #000000;
}

.blog-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card__link:hover .blog-card__media img,
.blog-card__link:focus-visible .blog-card__media img {
    transform: scale(1.03);
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    gap: 40px;
}

.blog-card__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tags sit 16px above the title whatever the text gap is. */
.blog-card__text > .blog-tags {
    margin-bottom: 4px;
}

.blog-card__title {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    color: #180026;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.blog-card__link:hover .blog-card__title {
    text-decoration: underline;
}

.blog-card__link:active .blog-card__title {
    color: #1D4641;
}

.blog-card__excerpt {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #463351;
}

.blog-empty {
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 0;
    text-align: center;
    color: #463351;
}

.blog-empty__title {
    margin-bottom: 8px;
    font-size: 28px;
    line-height: 34px;
    color: #1D4641;
}

.blog-empty__reset {
    padding: 0;
    border: 0;
    background: none;
    color: #1D4641;
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Lasting gesture cross-sell (same as home, white card) ---------- */
.blog-page .lg-section {
    padding: 56px 16px;
}

.blog-page .lg-section--inline {
    padding: 0;
}

.lg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px;
    border-radius: 24px;
    background: #FFFFFF;
    color: #180026;
}

.lg-card__img {
    display: block;
    width: 224px;
    height: 224px;
    flex-shrink: 0;
    object-fit: contain;
}

.lg-card__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: 100%;
    min-width: 0;
}

.lg-card__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lg-card__title {
    margin: 0;
    color: inherit;
}

.lg-card__body {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: inherit;
}

.lg-card__ctas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lg-card__ctas .btn {
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
}

.lg-card .btn-secondary-green {
    box-shadow: inset 0 0 0 1px #1D4641;
}

/* ---------- Post ---------- */
.bp {
    padding: 32px 16px 0;
}

.bp-article {
    max-width: 1280px;
    margin: 0 auto;
}

.bp-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 960px;
    margin: 0 auto;
}

.bp-title {
    margin: 0 0 32px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.03em;
    color: #1D4641;
}

.bp-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

/* Share row — Figma 5516:89634 */
.bp-share {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bp-share__label {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.252px;
    color: #180026;
}

.bp-share__label:empty {
    display: none;
}

.bp-share__icons {
    display: flex;
    gap: 12px;
}

.bp-share__btn {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.bp-share__btn img {
    display: block;
    width: 32px;
    height: 32px;
    max-width: none;
}

.bp-share__btn:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.bp-share__btn:focus-visible {
    outline: 2px solid #1D4641;
    outline-offset: 2px;
}

.bp-share__btn:active {
    transform: scale(0.95);
}

.bp-share__toast {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 4px 12px;
    border-radius: 8px;
    background: #1D4641;
    color: #FFFFFF;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.bp-share__toast.is-visible {
    opacity: 1;
}

.bp-hero {
    margin: 40px 0 0;
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 1280 / 560;
    background: #000000;
}

.bp-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bp-layout {
    margin-top: 40px;
}

/* Right column (Figma 5516:89779): contents + "Stay updated" next best
   action. Hidden on mobile, as in the M - Blog Post frame and Terms page. */
.bp-side {
    display: none;
}

/* Table of contents — same component as terms-of-use.html (.pp-toc),
   unnumbered with the current section highlighted per Figma 5516:89748. */
.bp-toc__title {
    margin: 0 0 24px;
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: -0.432px;
    color: #180026;
}

/* "Stay updated" card — Figma 5516:89902 */
.bp-nba {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 32px 24px;
    border-radius: 16px;
    background: #232E26;
    text-align: center;
}

.bp-nba__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bp-nba__title {
    margin: 0;
    font-family: "Taviraj", serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: -0.36px;
    color: #D4E9CA;
}

.bp-nba__body {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.252px;
    color: #FFFFFF;
}

.bp-nba__form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid #C0BAC4;
    border-radius: 8px;
    background: #FFFFFF;
}

.bp-nba__form:focus-within {
    box-shadow: 0 0 0 3px rgba(212, 233, 202, 0.5);
}

.bp-nba__form input {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.324px;
    color: #180026;
    outline: none;
}

.bp-nba__form input::placeholder {
    color: #180026;
    opacity: 0.5;
}

.bp-nba__form .btn {
    flex-shrink: 0;
    padding: 9px 16px;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.288px;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px #1D4641;
}

.bp-nba__form .btn:active {
    transform: scale(0.98);
}

.bp-nba__msg {
    margin: -24px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: #D4E9CA;
}

.bp-nba__msg a {
    color: #FFFFFF;
}

/* In-article links are tertiary green and underlined (Figma 5540:84459). */
.bp-content a {
    color: #48705B;
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    transition: opacity 0.15s ease;
}

.bp-content a:hover {
    color: #1D4641;
}

.bp-content a:focus-visible {
    outline: 2px solid #1D4641;
    outline-offset: 2px;
    border-radius: 4px;
}

.bp-content a:active {
    opacity: 0.7;
}

.bp-content strong {
    font-weight: 600;
}

/* Quick answer — Figma Alert Banner 5545:119711 (only where it's needed). */
.bp-answer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 8px 24px 24px;
    border-left: 4px solid #48705B;
    border-radius: 16px;
    background: #F3F4F1;
}

.bp-content .bp-answer__label {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 3.84px;
    text-transform: uppercase;
    color: #48705B;
}

.bp-content .bp-answer__text {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.288px;
    color: #463351;
}

/* Common questions — Figma 5540:85676: 40px under the heading, 20/28 rows. */
.bp-content .bp-faq .bp-h2 {
    margin-bottom: 40px;
}

.bp-faq .faqs-accordion {
    padding: 0;
}

.bp-faq .faqs-accordion .accordion-button {
    gap: 24px;
    padding: 24px 8px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.36px;
}

.bp-faq .faqs-accordion .accordion-button:not(.collapsed) {
    padding-bottom: 0;
}

.bp-faq .faqs-accordion .accordion-body {
    padding: 16px 8px 24px;
}

.bp-faq .accordion-body p + p {
    margin-top: 16px;
}

/* Article footer — Figma 5540:110721: separator, category, credits, feedback. */
.bp-foot {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 24px;
    border-top: 0.5px solid #C0BAC4;
}

.bp-content .bp-foot p {
    margin-bottom: 0;
}

.bp-foot__text p + p {
    margin-top: 24px;
}

/* "Found this article helpful?" — Figma 5540:110743 */
.bp-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    background: #F3F4F1;
}

.bp-content .bp-feedback__q {
    flex: 1 1 0;
    min-width: 160px;
    font-weight: 500;
    color: #1D4641;
}

.bp-feedback__btns {
    display: flex;
    gap: 16px;
}

.bp-feedback__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 0;
    border-radius: 16px;
    background: #FFFFFF;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.bp-feedback__btn:hover {
    transform: translateY(-2px);
}

.bp-feedback__btn:focus-visible {
    outline: 2px solid #1D4641;
    outline-offset: 2px;
}

.bp-feedback__btn:active {
    transform: scale(0.95);
}

.bp-feedback__btn:disabled:not([aria-pressed="true"]) {
    opacity: 0.4;
}

.bp-feedback__btn:disabled {
    cursor: default;
    transform: none;
}

.bp-feedback__icon {
    display: block;
    width: 24px;
    height: 24px;
    background: no-repeat center / 24px 24px;
}

.bp-feedback__icon--up {
    background-image: url("/assets/icons/thumb_up.svg");
}

.bp-feedback__icon--down {
    background-image: url("/assets/icons/thumb_down.svg");
}

[aria-pressed="true"] > .bp-feedback__icon--up {
    background-image: url("/assets/icons/thumb_up_fill.svg");
}

[aria-pressed="true"] > .bp-feedback__icon--down {
    background-image: url("/assets/icons/thumb_down_fill.svg");
}

.bp-content .bp-feedback__thanks {
    flex-basis: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #463351;
}

.bp-feedback__thanks:empty {
    display: none;
}

.blog-related {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 0;
}

.blog-related__title {
    margin: 0 0 32px;
    font-size: 36px;
    line-height: 44px;
    color: #1D4641;
}

.blog-page--post .blog-related__title {
    color: #180026;
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-card--featured {
        grid-column: 1 / -1;
    }
}

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
    .bl {
        padding: 64px 80px 80px;
    }

    .bl-head {
        margin-bottom: 64px;
    }

    .bl-title {
        margin-bottom: 48px;
        font-size: 55px;
        line-height: 64px;
    }

    .blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog-card--featured {
        grid-column: span 2;
    }

    .blog-grid.is-filtered .blog-card--featured {
        grid-column: auto;
    }

    .blog-card__link {
        gap: 32px;
        border-radius: 48px;
    }

    .blog-card__media {
        height: 520px;
        border-radius: 48px;
    }

    .blog-card__body {
        gap: 40px;
    }

    .blog-card__text {
        gap: 24px;
    }

    .blog-card__text > .blog-tags {
        margin-bottom: -8px;
    }

    .blog-card__title {
        font-size: 28px;
        line-height: 34px;
    }

    .blog-card__excerpt {
        font-size: 18px;
        line-height: 24px;
    }

    .blog-page .lg-section {
        padding: 80px 80px;
    }

    .blog-page .lg-section--inline {
        padding: 0;
    }

    .lg-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 64px;
        padding: 80px;
        border-radius: 48px;
    }

    .lg-card__img {
        width: 280px;
        height: 280px;
    }

    .lg-card__body {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -0.324px;
    }

    .lg-card__ctas {
        flex-direction: row;
        align-items: flex-end;
    }

    .lg-card__ctas .btn {
        width: auto;
        font-size: 1.125rem;
        line-height: 30px;
    }

    .lg-card__content {
        flex: 1 1 0;
        width: auto;
    }

    .bp {
        padding: 56px 80px 0;
    }

    .bp-more-band {
        margin: 80px -80px 0;
        padding: 0 80px;
    }

    .blog-page .bp-more-band .lg-section {
        padding: 80px 0;
    }

    .bp-title {
        margin-bottom: 24px;
        font-size: 55px;
        line-height: 64px;
        letter-spacing: -0.99px;
    }

    .bp-hero {
        margin-top: 48px;
        border-radius: 40px;
    }

    .bp-layout {
        display: grid;
        grid-template-columns: minmax(0, 760px) 320px;
        justify-content: center;
        gap: 56px;
        margin-top: 48px;
    }

    .bp-side {
        display: block;
    }

    .bp-side__sticky {
        position: sticky;
        top: 112px;
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    .blog-related {
        padding: 80px 0;
    }

    .blog-related__title {
        font-size: 40px;
        line-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bp-content .blog-tag--link:hover::after {
        animation: none;
    }

}

.bp-nba__form[hidden],
.bp-nba__msg[hidden] {
    display: none;
}

/* ---------- Article copy — Figma 5540:84459: 18/24 #463351, 40px between
   blocks; paragraphs that run on from each other sit 24px apart. ---------- */
.bp-content {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.324px;
    color: #463351;
}

.bp-layout .bp-content > * {
    margin-top: 0;
    margin-bottom: 0;
}

.bp-layout .bp-content > * + * {
    margin-top: 40px;
}

.bp-layout .bp-content > p + p {
    margin-top: 24px;
}

.bp-content p {
    margin-bottom: 0;
}

.bp-h2 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -0.36px;
    color: #180026;
    scroll-margin-top: 112px;
}

.bp-list {
    padding: 0;
    list-style: none;
}

.bp-list li {
    position: relative;
    padding-left: 36px;
}

.bp-list li + li {
    margin-top: 16px;
}

/* Bullet: assets/icons/ic_bullet.svg (24px, 12px gap). */
.bp-list--ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: url("/assets/icons/ic_bullet.svg") no-repeat center / 24px 24px;
}

.bp-list--ol {
    counter-reset: bp;
}

.bp-list--ol li {
    counter-increment: bp;
}

/* Numbers sit in a 24px column in the body style (Figma 5540:84495). */
.bp-list--ol li::before {
    content: counter(bp) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: #463351;
}

/* In-article images (only on articles where seeing helps). */
.bp-figure {
    overflow: hidden;
    border-radius: 24px;
    background: #000000;
}

.bp-figure img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

/* Artwork with its own rounded backdrop keeps its proportions. */
.bp-figure--natural {
    border-radius: 0;
    background: transparent;
}

/* Full column width (uploads are 2x the 760px slot); the width/height
   attributes reserve the space before the lazy image loads. */
.bp-layout .bp-figure--natural img {
    width: 100%;
    height: auto;
}

/* ---------- Next steps — linen Cross Sell panel of small NBA cards
   (Figma 5540:85733, design-system NBAs 10356:3020) ---------- */
.bp-next {
    padding: 40px 16px;
    border-radius: 24px;
    background: #FAF5EC;
}

.bp-next__title {
    margin: 0 0 24px;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: -0.324px;
    color: #180026;
    text-align: center;
}

.bp-nba-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.bp-content .bp-nba-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    border: 1px solid #1D4641;
    border-radius: 12px;
    background: #FFFFFF;
    font-weight: 400;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.bp-content .bp-nba-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29, 70, 65, 0.12);
}

.bp-content .bp-nba-card:focus-visible {
    outline: 2px solid #1D4641;
    outline-offset: 2px;
}

.bp-content .bp-nba-card:active {
    transform: scale(0.99);
    opacity: 1;
}

.bp-nba-card__img {
    flex-shrink: 0;
    align-self: stretch;
    width: 88px;
    min-height: 112px;
    border-radius: 8px;
    background: #F3F7FA;
    object-fit: cover;
}

.bp-nba-card__body {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bp-nba-card__label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: -0.252px;
    color: #48705B;
}

.bp-nba-card__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: -2px;
    background-color: #48705B;
    -webkit-mask: url("/assets/icons/ic_arrow_right.svg") no-repeat center / 16px 12px;
    mask: url("/assets/icons/ic_arrow_right.svg") no-repeat center / 16px 12px;
}

.bp-nba-card__desc {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: -0.288px;
    color: #000000;
}

/* "Category:" + the article's tags, on one row (Figma 5540:110723). */
.bp-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.bp-content .bp-tags__label {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #180026;
}

.bp-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-content .blog-tag--link {
    position: relative;
    font-weight: 500;
    color: #807388;
    text-decoration: none;
}

/* Hover: text and border stay put; a soft ring ripples out once. */
.bp-content .blog-tag--link:hover,
.bp-content .blog-tag--link:focus-visible,
.bp-content .blog-tag--link:active {
    color: #807388;
}

.bp-content .blog-tag--link::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid #807388;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.bp-content .blog-tag--link:hover::after {
    animation: blog-tag-ripple 0.6s ease-out;
}

@keyframes blog-tag-ripple {
    from {
        opacity: 0.6;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.12, 1.35);
    }
}

.bp-content .blog-tag--link:focus-visible {
    outline: 2px solid #1D4641;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .bp-nba-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .bp-nba-grid--single {
        grid-template-columns: minmax(0, 344px);
        justify-content: center;
    }

    .bp-next {
        padding: 40px 24px;
    }

    .bp-figure {
        border-radius: 40px;
    }

    .bp-figure img {
        height: 360px;
    }
}

@media (min-width: 992px) {
    .bp-h2 {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.504px;
    }

    /* Related articles band — Figma 5542:111733 */
    .blog-page .bp-more-band {
        margin-top: 56px;
        padding: 56px 80px;
    }

    .blog-page--post .blog-related {
        padding: 0;
    }

    .blog-page--post .blog-related__title {
        margin-bottom: 64px;
        font-size: 48px;
        line-height: 48px;
        letter-spacing: -0.864px;
    }
}

/* Phone numbers in article copy are tap-to-call links (same as other links). */
.bp-content a.bp-tel {
    white-space: nowrap;
}

/* Blog contents rail — Figma 5540:84523: light track, tertiary marker and
   current item, 10px from the text. (Terms/Privacy keep the shared look.) */
.bp-toc .toc-rail::before {
    background: #EFEDF0;
}

.bp-toc .toc-rail::after {
    background: #48705B;
}

.bp-toc .toc-rail > li {
    padding-left: 14px;
}

.bp-toc .toc-rail > li.is-current,
.bp-toc .toc-rail > li.is-current > a {
    color: #48705B;
}

/* Mobile: "Share blog with" sits flush left above the icons. */
@media (max-width: 767px) {
    .bp-share__label {
        text-align: left;
    }
}

/* Post pages: the newsletter band continues the white-smoke related band
   (the partial has no background of its own, so it would show the page white). */
.blog-page--post #subscribeNewsLetter {
    background: #F3F4F1;
}

/* ---------- Mobile post layout ---------- */
@media (max-width: 767px) {
    .bp-hero {
        aspect-ratio: 3 / 2;
    }

    .bp-layout .bp-content > * + * {
        margin-top: 32px;
    }

    .bp-layout .bp-content > .bp-h2 + * {
        margin-top: 16px;
    }

    .bp-content .bp-faq .bp-h2 {
        margin-bottom: 16px;
    }

    .bp-faq .faqs-accordion .accordion-button {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -0.324px;
    }

    .bp-feedback {
        padding: 16px 16px 16px 24px;
    }
}