/* =============================================
   TEREZA KATIELI — Blog Artigo CSS
   ============================================= */

/* ===== ARTIGO INDIVIDUAL ===== */
    .artigo-header { padding: 120px 0 48px; background: var(--preto); }
    .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--cinza); margin-bottom: 24px; }
    .breadcrumb a { color: var(--cinza); text-decoration: none; transition: 0.2s; }
    .breadcrumb a:hover { color: var(--dourado-lt); }
    .breadcrumb span { color: rgba(201,168,76,0.4); }

    .artigo-categoria { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--dourado); display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
    .artigo-categoria::before { content: ''; width: 20px; height: 1px; background: var(--dourado); }

    .artigo-titulo-h1 { font-family: var(--fonte-serif); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; color: var(--offwhite); line-height: 1.15; margin-bottom: 32px; max-width: 800px; }

    /* IMAGEM HERO */
    .artigo-hero-img { width: 100%; max-height: 520px; object-fit: cover; display: block; }
    .artigo-hero-placeholder { width: 100%; height: 320px; background: var(--preto-mid); border: 1px solid rgba(201,168,76,0.1); display: flex; align-items: center; justify-content: center; }
    .artigo-hero-placeholder span { font-family: var(--fonte-serif); font-size: 5rem; color: rgba(201,168,76,0.15); letter-spacing: 8px; }

    /* AUTOR E SHARE */
    .artigo-meta-bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid rgba(201,168,76,0.1); margin-bottom: 0; }
    .autor { display: flex; align-items: center; gap: 14px; }
    .autor-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(201,168,76,0.3); }
    .autor-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); display: flex; align-items: center; justify-content: center; font-family: var(--fonte-serif); font-size: 1rem; color: var(--dourado); }
    .autor-info { display: flex; flex-direction: column; gap: 2px; }
    .autor-nome { font-size: 13px; font-weight: 400; color: var(--offwhite); }
    .autor-data { font-size: 10px; color: var(--cinza); letter-spacing: 1px; }

    .share-buttons { display: flex; align-items: center; gap: 8px; }
    .share-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--cinza); margin-right: 4px; }
    .share-btn { width: 34px; height: 34px; border: 1px solid rgba(201,168,76,0.2); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: 0.25s; color: var(--cinza-lt); font-size: 13px; cursor: pointer; background: transparent; }
    .share-btn:hover { border-color: var(--dourado); color: var(--dourado-lt); background: rgba(201,168,76,0.06); }
    .share-btn.copied { border-color: #25D366; color: #25D366; }

    /* LAYOUT DO ARTIGO */
    .artigo-layout { display: grid; grid-template-columns: 1fr 280px; gap: 48px; padding: 48px 0 80px; align-items: start; }

    /* CONTEÚDO */
    .artigo-conteudo { min-width: 0; }
    .artigo-conteudo h2 { font-family: var(--fonte-serif); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 400; color: var(--offwhite); margin: 48px 0 20px; padding-left: 18px; border-left: 2px solid rgba(201,168,76,0.4); }
    .artigo-conteudo h3 { font-family: var(--fonte-serif); font-size: 1.3rem; font-weight: 400; color: var(--dourado-lt); margin: 36px 0 14px; }
    .artigo-conteudo p { font-size: 15px; font-weight: 300; color: var(--cinza-lt); line-height: 1.95; margin-bottom: 24px; }
    .artigo-conteudo ul, .artigo-conteudo ol { margin: 0 0 24px 0; padding: 0; }
    .artigo-conteudo ul li, .artigo-conteudo ol li { font-size: 14px; font-weight: 300; color: var(--cinza-lt); padding: 8px 0 8px 22px; border-bottom: 1px solid rgba(201,168,76,0.05); position: relative; line-height: 1.7; }
    .artigo-conteudo ul li::before { content: ''; position: absolute; left: 0; top: 17px; width: 4px; height: 4px; border-radius: 50%; background: var(--dourado); }
    .artigo-conteudo ol { counter-reset: item; }
    .artigo-conteudo ol li::before { content: counter(item) "."; counter-increment: item; position: absolute; left: 0; color: var(--dourado); font-size: 12px; font-weight: 500; }
    .artigo-conteudo strong { font-weight: 500; color: var(--dourado-lt); }
    .artigo-conteudo em { font-style: italic; color: var(--dourado-lt); }
    .artigo-conteudo a { color: var(--dourado); text-decoration: underline; text-underline-offset: 3px; }
    .artigo-conteudo a:hover { color: var(--dourado-lt); }
    .artigo-conteudo img { width: 100%; margin: 32px 0; border: 1px solid rgba(201,168,76,0.1); }
    .artigo-conteudo blockquote { border-left: 2px solid var(--dourado); background: rgba(201,168,76,0.04); padding: 24px 28px; margin: 32px 0; font-family: var(--fonte-serif); font-style: italic; font-size: 1.2rem; color: var(--offwhite); line-height: 1.7; }

    /* SIDEBAR COM BANNERS STICKY */
    .artigo-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }

    .banner-card { border: 1px solid rgba(201,168,76,0.12); overflow: hidden; }
    .banner-titulo { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cinza); padding: 12px 14px; border-bottom: 1px solid rgba(201,168,76,0.08); background: rgba(201,168,76,0.03); }
    .banner-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: 0.3s; }
    .banner-card a:hover .banner-img { opacity: 0.85; transform: scale(1.02); }
    .banner-placeholder { width: 100%; aspect-ratio: 1/1; background: var(--preto-mid); display: flex; align-items: center; justify-content: center; }
    .banner-placeholder span { font-family: var(--fonte-serif); font-size: 2rem; color: rgba(201,168,76,0.2); }

    /* ARTIGOS RELACIONADOS */
    .relacionados { padding: 60px 0; background: var(--preto-soft); position: relative; }
    .relacionados::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,0.2), transparent); }
    .relacionados-titulo { font-family: var(--fonte-serif); font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 300; color: var(--offwhite); margin-bottom: 32px; }
    .relacionados-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 0; }
    .rel-card { background: var(--preto-mid); text-decoration: none; display: block; transition: 0.25s; border: 1px solid rgba(201,168,76,0.08); }
    .rel-card:hover { background: var(--preto-soft); border-color: rgba(201,168,76,0.2); }
    .rel-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
    .rel-img-placeholder { width: 100%; aspect-ratio: 16/9; background: var(--preto-mid); display: flex; align-items: center; justify-content: center; }
    .rel-img-placeholder i { color: rgba(201,168,76,0.2); font-size: 1.5rem; }
    .rel-body { padding: 20px; }
    .rel-cat { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--dourado); margin-bottom: 8px; }
    .rel-titulo { font-family: var(--fonte-serif); font-size: 1.05rem; font-weight: 400; color: var(--offwhite); line-height: 1.35; transition: 0.25s; }
    .rel-card:hover .rel-titulo { color: var(--dourado-lt); }

    /* CTA BANNER */
    .cta-banner { padding: 80px 0; background: var(--preto-mid); position: relative; overflow: hidden; }
    .cta-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,0.2), transparent); }
    .cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .cta-eyebrow { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--dourado); margin-bottom: 16px; }
    .cta-titulo { font-family: var(--fonte-serif); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 300; color: var(--offwhite); line-height: 1.2; margin-bottom: 16px; }
    .cta-subtitulo { font-size: 14px; font-weight: 300; color: var(--cinza-lt); line-height: 1.8; margin-bottom: 32px; }
    .cta-imagem img { width: 100%; max-height: 400px; object-fit: cover; display: block; }
    .cta-imagem-placeholder { width: 100%; height: 300px; background: rgba(201,168,76,0.04); border: 1px solid rgba(201,168,76,0.15); display: flex; align-items: center; justify-content: center; }

    @media (max-width: 1024px) {
      .artigo-layout { grid-template-columns: 1fr; }
      .artigo-sidebar { position: static; flex-direction: row; }
      .banner-card { flex: 1; }
      .relacionados-grid { grid-template-columns: 1fr; }
      .cta-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .artigo-meta-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
      .artigo-sidebar { flex-direction: column; }
    }