/* ================================================================ */
/* STORYWEAVER SANCTUM - SOLUÇÃO DEFINITIVA RESPONSIVA */
/* ================================================================ */

:root {
    --primary-bg: #2c3e50;
    --menu-text: #333333;
    --purple-main: #5d3f6a;
}

/* 1. MENU: SEM HOVER E COM CORES CORRETAS */
.nav-item.has-dropdown:hover > .dropdown-menu {
    display: none !important; /* MATA O HOVER NO COMPUTADOR */
}

.nav-item.has-dropdown.dropdown-active > .dropdown-menu {
    display: block !important; /* SÓ ABRE NO CLIQUE */
}

.nav-item a {
    color: var(--menu-text) !important;
    font-weight: bold !important;
    text-decoration: none !important;
    padding: 12px 15px !important;
    display: flex !important;
}

/* 2. GRID E CARDS (DESKTOP) */
.post-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 30px !important;
    padding: 20px !important;
}


.post-card {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
    text-decoration: none !important;
}

/* 3. IMAGEM (ESTILO ADAPTATIVO REAL) */
.post-image {
    width: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

@media (min-width: 769px) {
    .post-image { aspect-ratio: 16 / 9 !important; }
}

/* 4. TEXTOS (TÍTULO E DESCRIÇÃO) */
.post-content { padding: 20px !important; }

.post-content h3 {
    color: var(--purple-main) !important;
    font-size: 1.3rem !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
    /* Reticências se passar de 3 linhas */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.post-content p {
    font-size: 1rem !important;
    color: #555 !important;
    line-height: 1.5 !important;
    /* Reticências se passar de 4 linhas */
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 5. AJUSTE TOTAL PARA MOBILE (RESOLVE O PROBLEMA DO CARD REDUZIDO) */
@media (max-width: 768px) {
    .post-grid {
        grid-template-columns: 1fr !important; /* Uma coluna só */
        padding: 10px !important;
        gap: 20px !important;
    }

    .post-card {
        width: 100% !important; /* Card ocupa a tela toda */
        max-width: none !important; /* Remove qualquer trava de largura */
        margin: 0 0 20px 0 !important;
    }

    .post-image {
        height: auto !important; /* Imagem cresce naturalmente */
        aspect-ratio: auto !important; /* Sem forçar o 16:9 que corta o rosto */
        max-height: 250px !important; /* Impede que a foto fique gigante demais */
    }

    /* Menu Mobile Visibility */
    #main-navigation { background-color: #fff !important; }
    .nav-list { display: flex !important; flex-direction: column !important; }
}
/* ================================================================ */
/* AJUSTE CIRÚRGICO: LIMITAÇÃO DE LINHAS E ADAPTAÇÃO DO CARD       */
/* ================================================================ */

/* 1. CONFIGURAÇÃO PARA COMPUTADOR (MANTÉM O QUE ESTÁ OK) */
/* ================================================================ */
/* SOLUÇÃO DEFINITIVA PARA AS RETICÊNCIAS (...) NA DESCRIÇÃO        */
/* ================================================================ */

.post-content p {
    /* 1. Ativa o motor de renderização de corte */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    
    /* 2. Define o limite exato de linhas */
    -webkit-line-clamp: 4 !important; 
    
    /* 3. Garante que o excedente fique invisível */
    overflow: hidden !important;
    
    /* 4. Força o surgimento dos três pontinhos */
    text-overflow: ellipsis !important;
    
    /* 5. Altura e Espaçamento (Crucial para o PC) */
    line-height: 1.5em !important;
    max-height: 6em !important; /* 1.5em x 4 linhas = 6em */
    
    /* 6. Reset de propriedades que podem anular o efeito */
    white-space: normal !important;
    word-break: break-word !important;
    margin-bottom: 15px !important;
}

/* Título continua 100% livre como você pediu */
.post-content h3 {
    display: block !important;
    height: auto !important;
    -webkit-line-clamp: none !important;
    overflow: visible !important;
}

/* 2. AJUSTE EXCLUSIVO PARA MOBILE (EVITA SOBRAS DE TEXTO) */
@media (max-width: 768px) {
    .post-content p {
        /* No celular, 4 linhas de texto ocupam muito espaço vertical. 
           Ajustamos para que o card se feche exatamente onde as reticências aparecem */
        -webkit-line-clamp: 4 !important; 
        /* Força o container do texto a respeitar o corte */
        height: auto !important;
        max-height: calc(1.5em * 4) !important; /* Garante que o card pare na 4ª linha */
    }

    .post-card {
        /* Garante que o card se ajuste ao novo tamanho do texto sem sobras */
        display: flex !important;
        flex-direction: column !important;
        height: auto !important; 
    }
}
/* ================================================================ */
/* AJUSTE: TÍTULO COMPLETO E DESCRIÇÃO COM RETICÊNCIAS              */
/* ================================================================ */

/* 1. TÍTULO: Agora totalmente liberado (sem cortes) */
.post-content h3 {
    display: block !important; /* Remove o modo box que limitava linhas */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important; /* Remove as reticências do título */
    color: var(--purple-main) !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    -webkit-line-clamp: none !important; /* Garante a liberação total */
}

/* 2. DESCRIÇÃO: Mantém as 4 linhas com reticências (...) */
.post-content p {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    line-height: 1.5 !important;
}

/* 3. COMPORTAMENTO ADAPTATIVO (PC & MOBILE) */
@media (max-width: 768px) {
    /* No celular, o card cresce o quanto for necessário para o título */
    .post-card {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Garante que a descrição continue respeitando o limite no mobile */
    .post-content p {
        -webkit-line-clamp: 4 !important;
        max-height: calc(1.5em * 4) !important;
    }
}
/* ================================================================ */
/* AJUSTE FINAL: TÍTULO LIVRE + RETICÊNCIAS NA DESCRIÇÃO (PC/MOBILE) */
/* ================================================================ */

/* 1. TÍTULO: Totalmente completo em qualquer tela */
.post-content h3 {
    display: block !important; 
    height: auto !important;
    overflow: visible !important;
    -webkit-line-clamp: none !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
}

/* 2. DESCRIÇÃO: Trazendo as reticências (...) de volta no PC */
.post-content p {
    /* Força o modo de caixa flexível para as reticências funcionarem */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important; /* Limite de 4 linhas */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    /* Ajustes de espaçamento */
    line-height: 1.5 !important;
    height: auto !important;
    margin-bottom: 15px !important;
}

/* 3. MOBILE: Mantém a descrição firme nas 4 linhas */
@media (max-width: 768px) {
    .post-content p {
        -webkit-line-clamp: 4 !important;
        /* Cálculo de altura para garantir que o card feche no lugar certo */
        max-height: calc(1.5em * 4) !important; 
    }
    
    .post-card {
        height: auto !important;
    }
}
/* =========================================
NAVIGATION SYSTEM — STORYWEAVER SANCTUM
========================================= */

.main-sanctum-nav{
    position: relative;
}

/* estrutura base */

.main-sanctum-nav ul{
    list-style:none;
    margin:0;
    padding:0;
}

.main-sanctum-nav a{
    text-decoration:none;
}

/* DESKTOP */

@media(min-width:769px){

.nav-list{
    display:flex;
    align-items:center;
    gap:10px;
}

.nav-item{
    position:relative;
}

.nav-item a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    font-size:0.9rem;
    font-weight:600;
    color:#333;
    transition:0.3s;
}

.nav-item a:hover{
    color:#D4AF37;
}

/* dropdown */

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
    background:#fff;
    border-radius:6px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    padding:10px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:0.3s;
    z-index:100;
}

.dropdown-menu li a{
    display:block;
    padding:10px 20px;
    font-size:0.85rem;
    color:#444;
}

.dropdown-menu li a:hover{
    background:#f7f7f7;
    color:#D4AF37;
}

.has-dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.mobile-exclusive-header,
.mobile-institutional-block,
.m-icon,
.m-arrow{
display:none;
}

}

/* =========================================
MOBILE NAVIGATION
========================================= */

@media(max-width:768px){

header nav.main-sanctum-nav{

position:fixed;
top:0;
left:-100%;
width:300px;
height:100vh;
background:#fff;
box-shadow:15px 0 40px rgba(0,0,0,0.15);
overflow-y:auto;
transition:0.4s ease;
z-index:9999;

}

header nav.main-sanctum-nav.open{
left:0;
}

.nav-list{
flex-direction:column;
align-items:stretch;
}

/* branding */

.mobile-exclusive-header{

display:block;
padding:40px 25px 25px;
background:#111;
}

.mobile-exclusive-header p{

font-size:9px;
letter-spacing:2px;
text-transform:uppercase;
color:#D4AF37;
font-weight:700;
margin:0;

}

.mobile-exclusive-header h2{

font-family:'Playfair Display',serif;
font-size:1.4rem;
color:#fff;
margin:5px 0;

}

.gold-line{

width:35px;
height:2px;
background:#D4AF37;
margin-top:10px;

}

/* itens */

.nav-item{

width:100%;

}

.nav-item a{

display:flex;
align-items:center;
gap:12px;
padding:16px 25px;
font-size:0.85rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:#1a1a1a;
border-bottom:1px solid #f1f1f1;

}

.m-icon{

display:inline-block;
width:22px;
color:#D4AF37;

}

.m-arrow{

margin-left:auto;
font-size:0.7rem;
color:#aaa;

}

/* dropdown mobile */

.dropdown-menu{

display:none;
flex-direction:column;
background:#fafafa;

}

.has-dropdown.open .dropdown-menu{
display:flex;
}

.dropdown-menu a{

padding:12px 50px;
font-size:0.8rem;
font-weight:500;
color:#555;

}

/* institucional */

.mobile-institutional-block{

display:block;
padding-bottom:80px;

}

.m-label{

padding:30px 25px 10px;
font-size:10px;
text-transform:uppercase;
color:#999;
letter-spacing:1px;
font-weight:800;

}

.m-sec a{

border:none;
padding:10px 25px;
font-weight:500;
color:#666;

}

/* botão */

.m-action-area{

padding:20px 25px;

}

.m-premium-btn{

display:block;
background:#D4AF37;
color:#fff;
text-align:center;
padding:12px;
border-radius:4px;
font-size:0.8rem;
font-weight:800;
text-transform:uppercase;

}

}
/* FIXAR HEADER DO MENU MOBILE */

@media(max-width:768px){

.mobile-exclusive-header{

position:sticky;
top:0;

z-index:5;

background:#111;

padding-top:env(safe-area-inset-top);

box-shadow:0 3px 10px rgba(0,0,0,0.15);

}

}
/* THE ARCHIVES — ESTILO PREMIUM */

@media(max-width:768px){

.m-label{

font-size:11px;
letter-spacing:2px;
color:#777;

position:relative;

}

.m-label::after{

content:"";
display:block;

width:40px;
height:2px;

background:#D4AF37;

margin-top:8px;

}

/* LINKS INSTITUCIONAIS */

.m-sec a{

font-size:0.85rem;

padding:12px 25px;

color:#444;

transition:all .25s ease;

border-left:3px solid transparent;

}

/* hover premium */

.m-sec a:hover{

background:#f7f7f7;

color:#000;

border-left:3px solid #D4AF37;

padding-left:30px;

}

}
/* ======================================
CORREÇÃO DA MARGEM SUPERIOR DO MENU MOBILE
====================================== */

@media(max-width:768px){

header nav.main-sanctum-nav{

top:0 !important;
margin-top:0 !important;

}

/* garante que o menu encoste totalmente no topo */

.main-sanctum-nav .nav-list{

padding-top:0 !important;
margin-top:0 !important;

}

/* remove qualquer espaço do primeiro elemento */

.main-sanctum-nav .mobile-exclusive-header{

margin-top:0 !important;

}

/* evita bounce branco em alguns navegadores */

.main-sanctum-nav{

overscroll-behavior:contain;

}

}
/* =========================================
FIX DEFINITIVO DA MARGEM SUPERIOR DO MENU
========================================= */

@media(max-width:768px){

/* impede colapso de margens no container */

header nav.main-sanctum-nav{
padding-top:1px;
margin-top:-1px;
}

/* garante que o header ocupe o topo absoluto */

.mobile-exclusive-header{
position:sticky;
top:0;
margin-top:-1px;
}

/* remove qualquer espaço herdado do primeiro item */

.main-sanctum-nav .nav-list > *:first-child{
margin-top:0 !important;
padding-top:30px;
}

}
/* ================================================================ */
/* ESTILO CONSOLIDADO DA CATEGORIA E METADADOS                      */
/* ================================================================ */

/* 1. Badge da Categoria (Estilo Etiqueta Curta) */
.post-card .post-content .post-category {
    display: inline-table !important; /* Faz o fundo envolver apenas o texto */
    width: auto !important;
    visibility: visible !important;
    background: rgba(93, 63, 106, 0.08) !important; /* Roxo suave */
    color: #5d3f6a !important; /* Texto roxo */
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
    letter-spacing: 1px !important;
    border: 1px solid rgba(93, 63, 106, 0.3) !important;
    line-height: 1 !important;
    font-family: sans-serif !important;
}

/* 2. Container de Texto (Ajuste para Mobile/Desktop) */
.post-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important; /* Garante respiro nas bordas do card */
}

/* 3. Metadados (Autor, Data e Tempo de Leitura) */
.post-meta {
    display: block !important;
    margin-top: 2px !important;
    margin-bottom: 10px !important;
    font-size: 0.85rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* 4. Estilo específico para o Texto do Tempo de Leitura */
.read-time-text {
    color: #888 !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

/* 5. Ajuste no Título para não grudar nos metas */
.post-content h3 {
    margin: 10px 0 !important;
    line-height: 1.3 !important;
}

/* Ajustes finos para Mobile (Telas até 768px) */
@media (max-width: 768px) {
    .post-card .post-content .post-category {
        font-size: 10px !important;
        padding: 2px 8px !important;
        margin-bottom: 10px !important;
    }
    
    .post-meta {
        font-size: 0.8rem !important;
    }
}
.story-slider {
  width: 100%;
  margin: 40px 0;
}

.story-slider .swiper-slide {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.story-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
}

.story-slider .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}

.slider-disclaimer {
  font-size: 13px;
  color: #777;
  margin-top: 10px;
  line-height: 1.5;
}
.story-slider {
  margin: 40px auto;
  max-width: 1200px;
}

.story-slider .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.swiper-wrapper {
  align-items: stretch;
}