/* ====================================================================
   Página: Blog Single (detalhe do post)
   ==================================================================== */

/* ----- Header (breadcrumb + tag + título + excerpt) ----- */
.bls-header {
    padding: var(--semantics-padding-broad) 0 var(--semantics-padding-big);
}

.bls-header__inner {
    width: 100%;
    max-width: var(--semantics-container-max);
    margin: 0 auto;
    padding: 0 var(--semantics-spacing-large);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--semantics-spacing-large);
}

.bls-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--semantics-spacing-small);
    font-family: var(--semantics-typography-family-inter);
    font-size: var(--semantics-typography-body-14);
    color: var(--semantics-colors-text-secondary);
}

.bls-breadcrumb__link {
    color: var(--semantics-colors-text-secondary);
    text-decoration: none;
}

.bls-breadcrumb__link:hover {
    color: var(--semantics-colors-text-interactive-link-default);
}

.bls-breadcrumb__sep {
    color: var(--semantics-colors-text-tertiary);
}

.bls-breadcrumb__current {
    color: var(--semantics-colors-text-primary);
}

.bls-header__title {
    color: var(--semantics-colors-text-heading-default);
    max-width: 900px;
    margin: 0;
}

.bls-header__desc {
    color: var(--semantics-colors-text-secondary);
    max-width: 640px;
    margin: 0;
}

/* ----- Cover ----- */
.bls-cover {
    padding: 0 var(--semantics-spacing-large) var(--semantics-padding-big);
}

.bls-cover__inner {
    width: 100%;
    max-width: var(--semantics-container-max);
    margin: 0 auto;
}

.bls-cover__media {
    width: 100%;
    aspect-ratio: 21 / 9;
    background-color: var(--primitives-colors-petunia-100);
    border-radius: var(--semantics-radius-big);
}

/* ----- Content wrapper / coluna de leitura ----- */
.bls-content {
    padding: 0 var(--semantics-spacing-large) var(--semantics-padding-broad);
}

.bls-content__inner {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-big);
}

/* ----- Autor / meta ----- */
.bls-author {
    display: flex;
    align-items: center;
    gap: var(--semantics-spacing-medium);
}

.bls-author__avatar {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: var(--semantics-radius-full);
    background-color: var(--semantics-colors-fill-accent-purpura);
    object-fit: cover;
    flex-shrink: 0;
}

.bls-share__btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.bls-author__info {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-hairline);
}

.bls-author__name {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-bold);
    font-size: var(--semantics-typography-body-14);
    color: var(--semantics-colors-text-heading-default);
}

.bls-author__meta {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-regular);
    font-size: var(--semantics-typography-body-14);
    color: var(--semantics-colors-text-secondary);
}

/* ----- Corpo do artigo (prose) ----- */
.bls-prose {
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-regular);
    font-size: var(--semantics-typography-body-16);
    line-height: var(--semantics-typography-baseline-normal);
    color: var(--semantics-colors-text-primary);
}

.bls-prose p + p,
.bls-prose p + h2,
.bls-prose h2 + p,
.bls-prose p + blockquote,
.bls-prose blockquote + h2,
.bls-prose p + ul,
.bls-prose ul + p {
    margin-top: var(--semantics-spacing-bigger);
}

.bls-prose h2 {
    font-family: var(--semantics-typography-family-poppins);
    font-weight: var(--semantics-typography-weight-bold);
    font-size: var(--semantics-typography-heading-small);
    line-height: var(--semantics-typography-baseline-tight);
    letter-spacing: var(--semantics-typography-tracking-tight-1);
    color: var(--semantics-colors-text-heading-default);
    margin-top: var(--semantics-spacing-big);
}

.bls-prose blockquote {
    border-left: var(--semantics-stroke-thick) solid var(--semantics-colors-stroke-accent-purpura);
    padding: var(--semantics-spacing-small) 0 var(--semantics-spacing-small) var(--semantics-spacing-bigger);
    font-family: var(--semantics-typography-family-inter);
    font-weight: var(--semantics-typography-weight-bold);
    font-size: var(--semantics-typography-body-18);
    line-height: var(--semantics-typography-baseline-snug);
    color: var(--semantics-colors-text-heading-default);
}

.bls-prose ul {
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-medium);
    padding-left: var(--semantics-spacing-bigger);
}

.bls-prose li {
    position: relative;
    padding-left: var(--semantics-spacing-large);
}

.bls-prose li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: var(--semantics-radius-full);
    background-color: var(--semantics-colors-fill-accent-purpura);
}

/* ----- Compartilhe ----- */
.bls-share__divider {
    margin-bottom: var(--semantics-spacing-large);
}

.bls-share {
    display: flex;
    align-items: center;
    gap: var(--semantics-spacing-medium);
}

.bls-share__label {
    color: var(--semantics-colors-text-heading-default);
}

.bls-share__list {
    display: flex;
    align-items: center;
    gap: var(--semantics-spacing-small);
}

.bls-share__btn {
    width: var(--semantics-spacing-big);
    height: var(--semantics-spacing-big);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--semantics-radius-full);
    background-color: var(--semantics-colors-fill-primary-subtle);
    color: var(--semantics-colors-icon-accent-purpura);
    font-size: var(--semantics-typography-body-16);
    transition: background-color var(--semantics-motion-duration-fast) var(--semantics-motion-easing-standard);
}

.bls-share__btn:hover {
    background-color: var(--semantics-colors-fill-interactive-primary-subtle-hover);
}

.bls-share__btn i {
    display: block;
    width: 1em;
    height: 1em;
}

/* ----- Veja também ----- */
.bls-related {
    background-color: var(--semantics-colors-fill-background-secondary);
    padding: var(--semantics-padding-broad) 0;
}

.bls-related__inner {
    width: 100%;
    max-width: var(--semantics-container-max);
    margin: 0 auto;
    padding: 0 var(--semantics-spacing-large);
    display: flex;
    flex-direction: column;
    gap: var(--semantics-spacing-big);
}

.bls-related__title {
    color: var(--semantics-colors-text-heading-default);
    margin: 0;
}

/* ====================================================================
   Responsivo (576/768/1024)
   ==================================================================== */
@media (max-width: 1024px) {
    .bls-header__title {
        max-width: 720px;
    }

    .bls-cover__media {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    .bls-header {
        padding: var(--semantics-padding-big) 0 var(--semantics-padding-larger);
    }

    .bls-header__title {
        font-size: var(--semantics-typography-heading-large);
    }

    .bls-related__title {
        font-size: var(--semantics-typography-heading-medium);
    }

    .bls-prose blockquote {
        font-size: var(--semantics-typography-body-16);
    }
}

@media (max-width: 576px) {
    .bls-header__inner {
        gap: var(--semantics-spacing-medium);
    }

    .bls-author {
        gap: var(--semantics-spacing-small);
    }

    .bls-share {
        flex-wrap: wrap;
    }

    .bls-content__inner,
    .bls-related__inner {
        gap: var(--semantics-spacing-big);
    }
}