/* ==========================================================================
   bkdcurtain — SEOUL DUSK / COZY — overlay de assinatura
   ==========================================================================
   Esta folha é o "skin" que transforma os componentes herdados da Bright
   Curios no visual Seoul Dusk de verdade (spec canônica:
   design-system/bkdcurtain-prototypes/r/seoul-dusk-cozy/preview.html).

   Regras do jogo:
   - Carrega por ÚLTIMO no cascade (handle bc-seoul-dusk, deps bc-theme) —
     re-mira seletores existentes (.bc-site-header, .bc-blog-card, etc.)
     e define as classes novas do contrato (.bc-sd-*).
   - Só tokens (var(--*)); hex cru apenas onde a spec usa (#fffcf8,
     gradientes decorativos, borda do input #846a78).
   - Claro é o padrão; escuro via [data-theme="dark"] (tokens já viram).
   - Caixa-baixa SÓ em: hero title, labels/títulos de seção, nav, chips,
     eyebrows, h3 da newsletter, logo, tiers, botões. NUNCA em títulos de
     card/artigo nem no corpo do post.
   ========================================================================== */

/* ==========================================================================
   0. BASE — tipografia de voz + grão de filme
   ========================================================================== */

/* Corpo lê em Karla 17px com entrelinha de maratona (preview body) */
body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* A voz da casa: headings em Fraunces semibold (o theme.css herdado força
   sans extrabold — assinatura Bright Curios; aqui viram serif soft). */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-normal);
}

/* Grão de filme sutil — assinatura cozy, 100% CSS (copiado do preview) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: .05;
    mix-blend-mode: multiply;
    background-image:
        repeating-radial-gradient(circle at 17% 31%, transparent 0, rgba(45, 33, 48, .7) 1px, transparent 2px),
        repeating-radial-gradient(circle at 73% 64%, transparent 0, rgba(45, 33, 48, .6) 1px, transparent 3px);
    background-size: 7px 9px, 11px 13px;
}
[data-theme="dark"] body::after {
    mix-blend-mode: screen;
    opacity: .04;
    background-image:
        repeating-radial-gradient(circle at 17% 31%, transparent 0, rgba(246, 235, 226, .7) 1px, transparent 2px),
        repeating-radial-gradient(circle at 73% 64%, transparent 0, rgba(246, 235, 226, .6) 1px, transparent 3px);
}

/* ==========================================================================
   1. HEADER — glass sticky + nav caixa-baixa (re-mira .bc-site-header)
   ========================================================================== */

.bc-site-header {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-subtle);
}

.bc-site-header__nav a {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
    color: var(--text-secondary);
}
.bc-site-header__nav a:hover,
.bc-site-header__nav .current-menu-item > a,
.bc-site-header__nav .current-menu-parent > a,
.bc-site-header__nav .current-menu-ancestor > a,
.bc-site-header__nav .current_page_item > a {
    color: var(--text-accent);
    background: transparent;
}

/* Submenu desktop: painel quente, sem o glow dourado da BC */
.bc-site-header__nav .sub-menu {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.bc-site-header__nav .sub-menu a:hover,
.bc-site-header__nav .sub-menu .current-menu-item > a {
    background: var(--bg-surface-2);
    color: var(--text-accent);
}

/* Botões de ícone do header herdam o tom de superfície quente */
.bc-site-header__theme-toggle,
.bc-site-header__icon-btn,
.bc-site-header__hamburger {
    background: var(--bg-surface-1);
    box-shadow: var(--shadow-sm);
}
.bc-site-header__theme-toggle:hover,
.bc-site-header__icon-btn:hover,
.bc-site-header__hamburger:hover {
    border-color: var(--border-accent);
    color: var(--text-accent);
    transform: translateY(-1px);
}

/* ==========================================================================
   2. LOGO LOCKUP — letreiro Fraunces + bilhete Caveat (contrato .bc-sd-logo)
   ========================================================================== */

.bc-sd-logo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: var(--font-serif);
    font-weight: var(--fw-semibold);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    text-decoration: none;
    text-transform: lowercase;
}

.bc-sd-logo__word {
    font-family: var(--font-serif);
    font-weight: var(--fw-semibold);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
}

.bc-sd-logo__dot { color: var(--accent-primary); }

/* Expansão do nome — "Behind The K-Drama Curtain", bilhete sob o letreiro */
.bc-sd-logo__tagline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-script);
    font-weight: var(--fw-semibold);
    font-size: 1.0625rem;
    letter-spacing: .015em;
    line-height: var(--leading-none);
    color: var(--cyan-700);
    transition: color var(--duration-base) var(--ease-in-out);
}
[data-theme="dark"] .bc-sd-logo__tagline { color: var(--cyan-300); }

/* Tracinho do entardecer: pêssego → lavanda → ameixa, puramente decorativo */
.bc-sd-logo__tagline::before {
    content: "";
    flex: 0 0 18px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #e5816a 0%, #a58ac4 60%, #71558e 100%);
}

/* ==========================================================================
   3. HERO — céu do entardecer + janela de Seul (contrato .bc-sd-hero)
   ========================================================================== */

.bc-sd-hero {
    background: var(--bg-gradient);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}

.bc-sd-hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: var(--space-12);
    align-items: center;
    /* topo maior que a base: respiro do conteúdo sob o header glass sticky */
    padding: var(--space-24) var(--gutter) var(--space-20);
}

/* Coluna de texto do hero — min-width:0 evita estouro de título no grid */
.bc-sd-hero__copy { min-width: 0; }

.bc-sd-kicker {
    font-family: var(--font-script);
    font-size: var(--text-2xl);
    color: var(--text-accent);
    margin: 0 0 var(--space-2);
}

.bc-sd-hero__title {
    font-family: var(--font-serif);
    font-weight: var(--fw-regular);
    font-size: var(--text-7xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-transform: lowercase;
    margin: 0;
}
.bc-sd-hero__title em {
    font-style: italic;
    color: var(--accent-primary);
}

.bc-sd-hero__sub {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    max-width: 34rem;
    margin: var(--space-5) 0 var(--space-8);
}

.bc-sd-hero__ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
}

/* --- Janela de Seul ao entardecer — 100% CSS/SVG (preview .window-card) --- */
.bc-sd-window {
    aspect-ratio: 2 / 3;
    max-width: 300px;
    width: 100%;
    justify-self: center;
    margin: 0;
    background: var(--bg-surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-3) var(--space-10);
    box-shadow: var(--shadow-lg);
    transform: rotate(2.5deg);
    border: 1px solid var(--border-subtle);
}

.bc-sd-window__scene {
    height: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #f6c4b1 0%, #e9a9a5 30%, #bfabd5 62%, #5c4473 100%);
}

.bc-sd-window__sun {
    position: absolute;
    left: 50%;
    top: 34%;
    width: 64px;
    height: 64px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fdf1ec 0%, #efa28b 70%);
    box-shadow: 0 0 40px 14px rgba(239, 162, 139, .55);
}

.bc-sd-window__skyline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    height: auto;
}

.bc-sd-window__cap {
    font-family: var(--font-script);
    font-size: var(--text-xl);
    color: var(--text-secondary);
    text-align: center;
    margin-top: var(--space-3);
}

/* ==========================================================================
   4. CHIPS DE MOOD — pílulas caixa-baixa (contrato .bc-sd-chip)
   ========================================================================== */

.bc-sd-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-4) 0;
}

.bc-sd-chip {
    display: inline-flex; /* é <a> inline; garante padding/box corretos */
    align-items: center;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-transform: lowercase;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}
.bc-sd-chip:hover {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
}
.bc-sd-chip.is-active {
    background: var(--cyan-100);
    color: var(--cyan-700);
    border-color: var(--cyan-300);
}
[data-theme="dark"] .bc-sd-chip.is-active {
    background: var(--cyan-800);
    color: var(--cyan-200);
    border-color: var(--cyan-600);
}

/* ==========================================================================
   5. BOTÕES — pílulas do pôr-do-sol, tudo caixa-baixa
   ========================================================================== */

/* Primário já existe nos tokens (.bc-btn-pill) — só assina o tom de voz */
.bc-btn-pill {
    text-transform: lowercase;
    font-size: var(--text-base);
}

/* Base do contrato (.bc-sd-btn) — espelho do .btn do preview */
.bc-sd-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--text-base);
    text-transform: lowercase;
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--duration-base) var(--ease-in-out);
}

.bc-sd-btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.bc-sd-btn--secondary:hover {
    border-color: var(--accent-primary);
    color: var(--text-accent);
    transform: translateY(-2px);
}

.bc-sd-btn--ghost {
    background: var(--bg-surface-2);
    color: var(--text-secondary);
}
.bc-sd-btn--ghost:hover { color: var(--text-accent); }

/* ==========================================================================
   6. SECTION LABEL / HEAD — caixa-baixa com régua
   ========================================================================== */

.bc-sd-label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: lowercase;
    color: var(--text-tertiary);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.bc-sd-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-default);
}

/* Re-mira o head de seção da home (Mais recentes / categorias) */
.bc-home-blog__section-title {
    font-family: var(--font-serif);
    font-weight: var(--fw-semibold);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-normal);
    text-transform: lowercase;
}
.bc-home-blog__section-link {
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
    color: var(--text-accent);
}
.bc-home-blog__section-link:hover { color: var(--gold-700); }
[data-theme="dark"] .bc-home-blog__section-link:hover { color: var(--gold-200); }

/* ==========================================================================
   7. CARD POLAROID — a arte do pin é a capa do post
   (wrapper .bc-blog-card mantém o nome; miolo vem do contrato .bc-sd-*)
   ========================================================================== */

.bc-blog-card {
    background: var(--bg-surface-1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.bc-blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

/* Capa 2:3 com a polaroid torta dentro */
.bc-sd-cover {
    display: block; /* é <a>; inline ignoraria o aspect-ratio */
    aspect-ratio: 2 / 3;
    position: relative;
    padding: var(--space-4);
}

/* Selo de nota — pílula no gradiente do pôr-do-sol (AA c/ #fffcf8) */
.bc-sd-score {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
    background: var(--gradient-gold);
    color: #fffcf8;
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    font-weight: var(--fw-extrabold);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-gold);
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

/* Polaroid: papel #fffcf8 de propósito (é "foto física", não muda no dark) */
/* No markup é <span>: precisa de display:block pro filho resolver height:100% */
.bc-sd-polaroid {
    display: block;
    position: absolute;
    inset: var(--space-4);
    background: #fffcf8;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-2) var(--space-8);
    box-shadow: var(--shadow-md);
    transform: rotate(-1.5deg);
}

/* Arte da capa — gradiente do entardecer como fallback; thumbnail preenche */
/* É <span> no markup: display:block faz height:100% valer (pai tem altura via
   inset). aspect-ratio entra como rede de segurança se a altura não resolver. */
.bc-sd-cover-art {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    height: 100%;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f6c4b1 0%, #d9cbe7 55%, #5c4473 100%);
}
.bc-sd-cover-art svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.bc-sd-cover-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Legenda manuscrita da polaroid (tinta fixa: papel é sempre claro) */
.bc-sd-cover-title {
    display: block; /* é <span>; ancora na base do polaroid */
    position: absolute;
    bottom: var(--space-2);
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-script);
    font-size: var(--text-lg);
    color: #3c2d3b;
}

.bc-sd-card-body { padding: var(--space-5); }

.bc-sd-eyebrow {
    display: block; /* é <span>; no preview é div em linha própria */
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: lowercase;
    color: var(--accent-secondary);
    font-weight: var(--fw-bold);
}

/* Título do card — Fraunces, SEM lowercase (nomes próprios!) */
.bc-sd-card-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    margin: var(--space-2) 0;
}
.bc-sd-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.bc-sd-card-title a:hover { color: var(--text-accent); }

.bc-sd-card-excerpt {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.bc-sd-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Badge "onde assistir" do card — bolinha verde = grátis */
.bc-sd-watch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 2px var(--space-2);
    font-weight: var(--fw-bold);
    color: var(--text-secondary);
}
.bc-sd-watch__dot {
    display: inline-block; /* é <span>; sem display, width/height seriam ignorados */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-600);
}
[data-theme="dark"] .bc-sd-watch__dot { background: var(--success-400); }

/* Tag de categoria — sai do mono BC, entra lavanda caixa-baixa */
.bc-category-tag {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    text-transform: lowercase;
    letter-spacing: var(--tracking-wider);
    color: var(--accent-secondary);
    font-weight: var(--fw-bold);
}

/* ==========================================================================
   8. LINHA HORIZONTAL DE CATEGORIA — scroll-snap + setas redondas
   ========================================================================== */

.bc-cat-section__track {
    scroll-snap-type: x mandatory;
    gap: var(--space-6);
    padding-bottom: var(--space-3);
}

.bc-cat-section__arrow {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-base) var(--ease-out);
}
.bc-cat-section__arrow:hover:not(:disabled) {
    background: var(--bg-surface-1);
    border-color: var(--border-accent);
    color: var(--text-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.bc-cat-section__arrow:disabled {
    opacity: .3;
    cursor: not-allowed;
}

/* ==========================================================================
   9. ONDE ASSISTIR — bloco de afiliado com barra do entardecer
   (contrato .bc-sd-watch-block / .bc-sd-platform)
   ========================================================================== */

.bc-sd-watch-block {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.bc-sd-watch-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-gold);
}

.bc-sd-watch-block__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.bc-sd-watch-block__head h3,
.bc-sd-watch-block__head h2 {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    margin: 0;
}

/* Selo "verificado em" — espelho do .verified-seal do preview */
.bc-sd-verified-seal {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: var(--success-600);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 2px var(--space-3);
    letter-spacing: var(--tracking-wide);
}
[data-theme="dark"] .bc-sd-verified-seal { color: var(--success-400); }

.bc-sd-platform-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
}

.bc-sd-platform {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-surface-2);
    transition: all var(--duration-base) var(--ease-out);
}
.bc-sd-platform:hover {
    border-color: var(--border-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Nome da plataforma — espelho do .platform-logo do preview */
.bc-sd-platform__logo {
    display: block; /* é <span>; no preview é div empilhada sobre o tier */
    font-family: var(--font-serif);
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
    margin-bottom: var(--space-1);
}

.bc-sd-platform__tier {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
}

/* ==========================================================================
   10. NEWSLETTER — painel do entardecer (re-mira .bc-newsletter-cta)
   ========================================================================== */

.bc-newsletter-cta {
    background: var(--bg-gradient);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    text-align: left;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    column-gap: var(--space-8);
    align-items: center;
}
.bc-newsletter-cta::before { content: none; } /* mata o glow dourado da BC */

/* Texto na coluna 1; formulário na coluna 2 (markup é flat) */
.bc-newsletter-cta__label,
.bc-newsletter-cta__title,
.bc-newsletter-cta__desc { grid-column: 1; }

.bc-newsletter-cta__label {
    font-family: var(--font-script);
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    letter-spacing: .015em;
    text-transform: lowercase;
    color: var(--text-accent);
    margin-bottom: var(--space-2);
}

/* h3 da newsletter no preview — aqui é o título do CTA: Fraunces lowercase */
.bc-newsletter-cta__title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-normal);
    text-transform: lowercase;
    margin: 0 0 var(--space-2);
    max-width: none;
}

.bc-newsletter-cta__desc {
    color: var(--text-secondary);
    margin: 0;
    max-width: 38rem;
}

.bc-newsletter-cta__form {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    gap: var(--space-3);
    max-width: none;
    margin: 0;
    flex-wrap: nowrap;
}

/* Borda sólida #846a78: WCAG 1.4.11 >= 3.0 vs campo, gradiente e dark */
.bc-newsletter-cta__input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    border: 1px solid #846a78;
    background: var(--bg-surface-1);
    color: var(--text-primary);
}
.bc-newsletter-cta__input::placeholder { color: var(--text-tertiary); }
.bc-newsletter-cta__input:focus {
    outline: none;
    border-color: var(--border-accent);
}

/* Mensagens de status ocupam a largura toda, sem quebrar o grid */
.bc-newsletter-cta .bc-newsletter-success,
.bc-newsletter-cta .bc-newsletter-error { grid-column: 1 / -1; }

/* ==========================================================================
   11. PULL-QUOTE — aspas coral gigante + assinatura manuscrita
   (contrato .bc-sd-quote — aparece em singles)
   ========================================================================== */

.bc-sd-quote {
    max-width: var(--container-prose);
    position: relative;
    padding: var(--space-8) var(--space-10);
    margin: var(--space-8) auto;
    border: 0;
}
.bc-sd-quote::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-serif);
    font-size: var(--text-6xl);
    line-height: 1;
    color: var(--accent-primary);
    opacity: .7;
}
.bc-sd-quote blockquote,
blockquote.bc-sd-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--fw-regular);
    font-size: var(--text-3xl);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    margin: 0;
    border: 0;
    padding: 0;
}
.bc-sd-quote blockquote strong,
blockquote.bc-sd-quote strong {
    font-style: normal;
    color: var(--accent-primary);
    font-weight: var(--fw-semibold);
}
.bc-sd-quote cite {
    display: block;
    margin-top: var(--space-4);
    font-family: var(--font-script);
    font-style: normal;
    font-size: var(--text-xl);
    color: var(--text-secondary);
}

/* ==========================================================================
   12. FOOTER — tagline manuscrita com barrinhas do entardecer
   (contrato .bc-sd-footer-tagline)
   ========================================================================== */

.bc-sd-footer-tagline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-family: var(--font-script);
    font-weight: var(--fw-semibold);
    font-size: var(--text-xl);
    color: var(--cyan-700);
}
[data-theme="dark"] .bc-sd-footer-tagline { color: var(--cyan-300); }
.bc-sd-footer-tagline::before,
.bc-sd-footer-tagline::after {
    content: "";
    flex: 0 0 18px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #e5816a 0%, #a58ac4 60%, #71558e 100%);
}

/* Rodapé sai do glow dourado BC e entra no quente discreto */
.bc-site-footer::before { content: none; }
.bc-site-footer__heading {
    font-family: var(--font-sans);
    text-transform: lowercase;
    letter-spacing: var(--tracking-widest);
}
.bc-site-footer__newsletter-form input { border: 1px solid #846a78; }
.bc-site-footer__newsletter-form button {
    color: #fffcf8; /* AA no --gradient-gold (4.67/6.05) */
    text-transform: lowercase;
    box-shadow: var(--shadow-gold);
}

/* ==========================================================================
   13. MOBILE HARDENING — colapsos e alvos 44px+ (portado do preview)
   ========================================================================== */

@media (max-width: 760px) {
    /* Escala fluida de tipo — só em viewport estreito */
    :root {
        --text-6xl: clamp(2.1rem, 8vw, 2.75rem);
        --text-5xl: clamp(1.75rem, 7vw, 2.4rem);
        --text-4xl: clamp(1.55rem, 6vw, 2rem);
        --text-3xl: clamp(1.4rem, 5.5vw, 1.7rem);
        --text-2xl: clamp(1.25rem, 5vw, 1.45rem);
    }

    .bc-sd-hero__title,
    .bc-sd-card-title,
    .bc-sd-quote blockquote,
    blockquote.bc-sd-quote {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* No header apertado a tagline sai de cena — segue viva no rodapé */
    .bc-sd-logo__tagline { display: none; }

    /* ---- hero colapsa em 1 coluna; janela endireita ---- */
    .bc-sd-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        padding: var(--space-12) var(--space-4) var(--space-10);
    }
    .bc-sd-hero__sub { font-size: var(--text-base); }
    .bc-sd-hero__ctas .bc-sd-btn,
    .bc-sd-hero__ctas .bc-btn-pill {
        width: 100%;
        justify-content: center;
        text-align: center;
        min-height: 48px;
    }
    .bc-sd-window {
        transform: rotate(0);
        margin-top: var(--space-6);
    }

    /* ---- alvos de toque >= 44px ---- */
    .bc-sd-chips .bc-sd-chip,
    .bc-sd-chip {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: var(--space-2) var(--space-4);
    }
    .bc-sd-btn,
    .bc-btn-pill {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .bc-sd-card-meta {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }

    /* ---- onde assistir empilha ---- */
    .bc-sd-watch-block { padding: var(--space-6) var(--space-5) var(--space-5); }
    .bc-sd-platform-row { grid-template-columns: 1fr; }
    .bc-sd-platform { min-height: 44px; }

    /* ---- citação ---- */
    .bc-sd-quote { padding: var(--space-5) 0 0 var(--space-8); }

    /* ---- newsletter empilha ---- */
    .bc-newsletter-cta {
        grid-template-columns: 1fr;
        padding: var(--space-6) var(--space-5);
        row-gap: var(--space-6);
        border-radius: var(--radius-xl);
    }
    .bc-newsletter-cta__form {
        grid-column: 1;
        grid-row: auto;
        flex-direction: column;
    }
    .bc-newsletter-cta__input {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }
    .bc-newsletter-cta__form .bc-btn-pill { justify-content: center; }
}

@media (max-width: 480px) {
    /* Telas bem estreitas: toggles viram só o ícone, alvo cheio */
    .bc-site-header__theme-toggle,
    .bc-site-header__icon-btn {
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
        flex: 0 0 44px;
    }
    .bc-sd-window { max-width: 260px; }
}

/* ==========================================================================
   14. HOME — DESTAQUE DA SEMANA, MAIS-LIDOS NA HOME E ELENCO (quem escreve)
   Só tokens do DS — os custom properties viram sozinhos no [data-theme="dark"],
   então cada par abaixo fica AA nos dois modos:
     - texto corpo: --text-primary / --text-secondary sobre --bg-surface-1/2
     - acento sobre tint: --text-accent-on-tint (gold-700 claro / gold-300 escuro)
   ========================================================================== */

/* ---- faixa destaque + mais-lidos (wrapper no front-page.php) ---- */
.bc-home-spotlight {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: stretch;
}
@media (min-width: 1000px) {
    .bc-home-spotlight { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
    .bc-home-spotlight--solo { grid-template-columns: minmax(0, 1fr); }
}

/* ---- vitrine "a escolha da semana" (sticky post) ---- */
.bc-destaque {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--gold-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-out);
}
.bc-destaque:hover { box-shadow: var(--shadow-lg); }
@media (min-width: 700px) {
    .bc-destaque { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.bc-destaque__cover { display: block; min-height: 200px; }
.bc-destaque__art {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    position: relative;
    overflow: hidden;
    /* mesmo gradiente-fallback do entardecer da capa polaroid */
    background: linear-gradient(180deg, #f6c4b1 0%, #d9cbe7 55%, #5c4473 100%);
}
.bc-destaque__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bc-destaque__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* selo manuscrito — Caveat só em legenda/destaque, regra da casa */
.bc-destaque__seal {
    align-self: flex-start;
    font-family: var(--font-script);
    font-size: var(--text-xl);
    line-height: var(--leading-snug, 1.3);
    color: var(--text-accent-on-tint);
    transform: rotate(-1.5deg);
}

.bc-destaque__title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-snug, 1.3);
    text-transform: none;
    margin: var(--space-1) 0;
    overflow-wrap: break-word;
}
.bc-destaque__title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.bc-destaque__title a:hover { color: var(--text-accent-on-tint); }
.bc-destaque__title a:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.bc-destaque__excerpt {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.65);
    margin: 0;
}

.bc-destaque__meta {
    margin-top: auto;
    padding-top: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ---- mais-lidos quando composto na faixa da home: vira card Seoul Dusk
       (o CSS base em home-blog.css assume sidebar sticky do hero antigo) ---- */
.bc-home-spotlight .bc-most-read {
    position: static;
    max-height: none;
    height: auto;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}
.bc-home-spotlight .bc-most-read__label {
    font-family: var(--font-sans);
    text-transform: lowercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-tertiary);
}
.bc-home-spotlight .bc-most-read__rank {
    background: var(--bg-surface-2);
    color: var(--text-accent-on-tint);
    border-radius: var(--radius-pill);
    font-family: var(--font-serif);
}
.bc-home-spotlight .bc-most-read__cat { font-family: var(--font-sans); text-transform: lowercase; }
.bc-home-spotlight .bc-most-read__link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
.bc-home-spotlight .bc-most-read__link:hover .bc-most-read__title { color: var(--text-accent); }

/* ---- elenco "quem escreve por aqui" (quem-escreve.php) ---- */
.bc-cast { padding-bottom: var(--space-12); }

.bc-cast__sub {
    max-width: 62ch;
    margin: calc(-1 * var(--space-3)) 0 var(--space-6);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.65);
}

/* mobile-first: 1 col → 2 → 3 → 5 (não quebra em 360px) */
.bc-cast__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 560px)  { .bc-cast__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .bc-cast__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .bc-cast__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.bc-cast-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--gold-300);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.bc-cast-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* hangul grande — sem webfont KR de propósito (zero request extra):
   stack de sistema cobre macOS/Windows/Android/Linux */
.bc-cast-card__hangul {
    font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
                 "Noto Sans CJK KR", "NanumGothic", sans-serif;
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--text-accent);
}

.bc-cast-card__name {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    text-transform: none;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--text-primary);
}
.bc-cast-card__icon { font-size: var(--text-base); }

/* o card inteiro vira alvo via stretched link; foco desenha no card */
.bc-cast-card__link { color: inherit; text-decoration: none; }
.bc-cast-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.bc-cast-card__link:focus-visible { outline: none; }
.bc-cast-card__link:focus-visible::after {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}
.bc-cast-card__link:hover { color: var(--text-accent); }

.bc-cast-card__reading {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-wide);
}
.bc-cast-card__phonetic { font-style: italic; }

/* apelido manuscrito — Caveat, regra "só legenda/destaque" */
.bc-cast-card__nickname {
    margin: 0;
    font-family: var(--font-script);
    font-size: var(--text-lg);
    color: var(--text-accent-on-tint);
}

.bc-cast-card__role {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed, 1.65);
    color: var(--text-secondary);
}

.bc-cast-card__cta {
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
    color: var(--text-accent);
}

/* ---- mobile hardening das seções novas ---- */
@media (max-width: 760px) {
    .bc-destaque__body { padding: var(--space-5); }
    .bc-destaque__title { font-size: var(--text-2xl); }
    .bc-home-spotlight .bc-most-read { padding: var(--space-5); }
    .bc-cast-card { padding: var(--space-5) var(--space-4); }
}