/*
 * PUBLIC BIO — paridade da largura de conteúdo com a CENTRAL.
 *
 * Contrato histórico:
 * - --maxw controla a largura visual da moldura/fundo da BIO;
 * - o mesmo valor limita o conteúdo interno (bio, botões, planos,
 *   seletor de país e rodapé).
 */

main[role="main"] {
    width:
        min(
            100vw - 48px,
            370px
        );
}

/*
 * HERO PAGO — anti-FOUC.
 *
 * page.php marca o main antes da primeira pintura. Enquanto o bundle do
 * Hero ainda transforma o HTML base, escondemos somente os filhos do main;
 * o fundo/moldura continuam visíveis. Assim a BIO normal nunca pisca antes
 * do feed. O próprio Hero libera o conteúdo com data-hero-ready="1".
 */
main[data-hero-fast-entry="1"]:not([data-hero-ready="1"]) > * {
    visibility: hidden !important;
}

main[data-hero-fast-entry="1"][data-hero-ready="1"] > * {
    visibility: visible;
}

/*
 * HERO PAGO — somente a HOME do feed usa a arte fixa no viewport.
 *
 * O ::before (imagem) fica fixo para o conteúdo longo rolar por cima sem
 * recalcular background-size: cover pela altura inteira do feed.
 *
 * Importante: no Hero NÃO aplicamos scale(1.02). Em position:fixed esse
 * scale fazia a própria imagem ultrapassar alguns pixels da moldura e ficar
 * visível fora da camada de overlay. A moldura fixa recebe o mesmo radius do
 * MAIN para preservar exatamente o recorte externo.
 *
 * Já o ::after (overlay/tonalização) continua absoluto no MAIN e cobre a
 * altura TOTAL do Hero.
 */
main[role="main"][data-hero-fast-entry="1"]::before {
    position: fixed;
    inset: auto;
    top: 24px;
    left: 50%;
    width: inherit;
    height: min(calc(100vh - 48px), 980px);
    transform: translateX(-50%);
    transform-origin: center center;
    border-radius: var(--radius, 16px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

main[role="main"][data-hero-fast-entry="1"]::after {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
}

/*
 * Quando o visitante sai da HOME experimental e entra em Planos / checkout,
 * o shell volta ao contrato visual NORMAL da BIO. A exceção de background
 * fixo deixa de existir nessa rota, portanto avatar, planos, idioma e fundo
 * passam a se comportar exatamente como na entrada sem Hero.
 */
main[role="main"][data-hero-fast-entry="1"][data-hero-standard-route="1"]::before {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: scale(1.02);
    transform-origin: center center;
    border-radius: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

main[role="main"][data-hero-fast-entry="1"][data-hero-standard-route="1"]::after {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
}

main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__identity[hidden] {
    display: none !important;
}

main[data-experiment="hero_feed_v1"][data-hero-standard-route="1"]
#publicLanguageSwitcher {
    display: block !important;
}

/*
 * HERO FEED — PARIDADE VISUAL COM O CANAL PRIVADO.
 *
 * O Hero usa os mesmos tokens configuráveis do Canal para badges, mídia,
 * captions e CTA. O texto introdutório, porém, pertence à BIO pública e
 * conserva --bio-color para não herdar uma cor de post personalizada.
 */
main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__intro {
    color:
        var(
            --bio-color,
            rgba(255, 255, 255, 0.90)
        ) !important;
}

main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__date {
    margin: 2px auto !important;
    padding: 5px 11px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(
                --channel-private-accent,
                #6366f1
            ) 45%,
            transparent
        ) !important;

    border-radius: 999px !important;

    background:
        color-mix(
            in srgb,
            var(
                --channel-private-accent,
                #6366f1
            ) 28%,
            transparent
        ) !important;

    color:
        var(
            --channel-private-accent-text,
            #ffffff
        ) !important;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.20) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__item {
    border-bottom-color:
        var(
            --channel-private-post-border,
            var(
                --channel-private-panel-border,
                rgba(255, 255, 255, 0.13)
            )
        ) !important;
}

main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__media {
    background:
        var(
            --channel-private-media-bg,
            var(
                --channel-private-post-bg,
                rgba(13, 25, 54, 0.94)
            )
        ) !important;

    border-width:
        var(
            --channel-private-media-border-width,
            var(
                --channel-private-post-border-width,
                1px
            )
        ) !important;

    border-style: solid !important;

    border-color:
        var(
            --channel-private-media-border,
            var(
                --channel-private-post-border,
                rgba(255, 255, 255, 0.12)
            )
        ) !important;

    border-radius:
        var(
            --channel-private-media-radius,
            16px
        ) !important;
}

main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__caption {
    color:
        var(
            --channel-private-media-caption-text,
            var(
                --channel-private-post-text,
                rgba(255, 255, 255, 0.82)
            )
        ) !important;
}

main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__status {
    color:
        var(
            --channel-private-muted,
            rgba(255, 255, 255, 0.66)
        ) !important;
}

main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__cta {
    background:
        var(
            --channel-private-send-bg,
            var(
                --channel-private-accent,
                #6366f1
            )
        ) !important;

    border-color:
        var(
            --channel-private-send-bg,
            var(
                --channel-private-accent,
                #6366f1
            )
        ) !important;

    color:
        var(
            --channel-private-send-text,
            #ffffff
        ) !important;
}

main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__cta:hover,
main[data-experiment="hero_feed_v1"]
.public-hero-feed-v1__cta:focus-visible {
    background:
        var(
            --channel-private-send-hover,
            var(
                --channel-private-send-bg,
                var(
                    --channel-private-accent,
                    #6366f1
                )
            )
        ) !important;
}

/*
 * HERO PAGO — o launcher de login continua fazendo parte da BIO.
 *
 * O stack privado pesado permanece adiado, mas o botão precisa existir e
 * manter o mesmo posicionamento/visual enquanto esse stack ainda não foi
 * carregado. A especificidade abaixo também vence o hide legado injetado
 * pelo bundle experimental sem alterar a BIO normal.
 */
main[role="main"][data-hero-fast-entry="1"][data-hero-ready="1"]
.bio-account-login-trigger-wrap {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 24;
    width:
        min(
            calc(100% - 28px),
            var(--maxw, 720px)
        );
    height: 44px;
    transform: translateX(-50%);
    pointer-events: none;
}

main[role="main"][data-hero-fast-entry="1"][data-hero-ready="1"]
#btnPreviewAccountLogin {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text, #ffffff);
    background: rgba(8, 15, 29, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
    pointer-events: auto;
    transition:
        transform 160ms ease,
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

main[role="main"][data-hero-fast-entry="1"][data-hero-ready="1"]
#btnPreviewAccountLogin:hover,
main[role="main"][data-hero-fast-entry="1"][data-hero-ready="1"]
#btnPreviewAccountLogin:focus-visible,
main[role="main"][data-hero-fast-entry="1"][data-hero-ready="1"]
#btnPreviewAccountLogin.is-active,
main[role="main"][data-hero-fast-entry="1"][data-hero-ready="1"]
#btnPreviewAccountLogin.is-authenticated {
    color: var(--account-login-accent-text, #ffffff);
    background:
        var(
            --account-login-accent,
            var(--accent, #6366f1)
        );
    border-color:
        var(
            --account-login-accent,
            var(--accent, #6366f1)
        );
    transform: translateY(-1px);
    outline: none;
}

main[role="main"][data-hero-fast-entry="1"][data-hero-ready="1"]
#btnPreviewAccountLogin svg {
    width: 1.05em;
    height: 1.05em;
    fill: currentColor;
    stroke: none;
    flex: 0 0 auto;
}

main[role="main"][data-hero-fast-entry="1"][data-hero-ready="1"]
#btnPreviewAccountLogin .public-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Planos antigos podem conter U+0336 para simular texto tachado. O JS
 * converte somente esse trecho legado em markup semântico; o CSS abaixo
 * garante aparência idêntica sem depender do suporte da fonte do aparelho.
 */
.plan-title .plan-title__legacy-strike {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
}

.hero-copy,
.preview-links,
.plans-header,
.plans-grid,
.plan-country-wrap,
.site-footer,
.telegram-cta {
    width: min(100%, var(--maxw, 720px));
    max-width: min(100%, var(--maxw, 720px));
    margin-left: auto;
    margin-right: auto;
}

.preview-bio,
.bio {
    width: 100%;
    max-width: 100%;
}

/*
 * A barra/picker ocupam a largura do wrap, que por sua vez obedece
 * --maxw. Isso mantém o seletor de país alinhado aos cards de planos.
 */
.plan-country-bar,
.plan-country-picker {
    width: 100%;
    max-width: none;
}

@media (max-width: 767px) {
    main[role="main"] {
        width:
            min(
                100vw - 24px,
                370px
            );
    }

    main[role="main"][data-hero-fast-entry="1"]::before {
        top: 12px;
        height: min(calc(100vh - 24px), 980px);
    }

    main[role="main"][data-hero-fast-entry="1"][data-hero-standard-route="1"]::before {
        top: 0;
        height: auto;
    }

    main[data-experiment="hero_feed_v1"]
    .public-hero-feed-v1__date {
        padding: 4px 9px !important;
        font-size: 10px !important;
    }

    /*
     * Sobrescreve o legado que removia max-width no mobile.
     * O usuário pode escolher uma coluna compacta (até 240px) mesmo
     * em telas estreitas, sempre centralizada dentro da moldura da BIO.
     */
    .hero-copy,
    .preview-links,
    .plans-header,
    .plans-grid,
    .plan-country-wrap,
    .site-footer,
    .telegram-cta {
        width: min(100%, var(--maxw, 720px));
        max-width: min(100%, var(--maxw, 720px));
        margin-left: auto;
        margin-right: auto;
    }
}

/* === PUBLIC CARD CONTENT WIDTH PARITY V2 ===
 *
 * O checkout de cartão participa do mesmo contrato
 * global de largura usado pela BIO, planos e botões.
 *
 * Plano selecionado e status também deixam de criar
 * um recuo horizontal adicional dentro desse envelope.
 */
#sectionCardPayment {
    width: min(100%, var(--maxw, 720px));
    max-width: min(100%, var(--maxw, 720px));
    margin-left: auto;
    margin-right: auto;
}

#sectionCardPayment #publicCardPlanSummary,
#sectionCardPayment #publicCardStatus {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}