/* ==========================================
   PORTAL UFPR — COMPONENTES EXCLUSIVOS DO PADRÃO
   Blocos que não existiam no site anterior e que caracterizam a
   página inicial do portal: rótulo de seção com filete, faixa cinza
   de vitrine, banner de destaque e as quatro colunas de editoria
   com tarja colorida.

   ORDEM DE CARREGAMENTO: depois de components.css e antes de
   responsive.css.
   Depende de: tokens.css, components.css
========================================== */

/* ==========================================
   COLUNA EDITORIAL (largura estreita do portal)
========================================== */

.coluna-editorial{
    max-width:var(--container-narrow);
    margin:var(--space-7) auto;
    padding:0 20px;
}

/* ==========================================
   RÓTULO DE SEÇÃO ("UFPR EM DESTAQUE")
========================================== */

.rotulo-editorial{
    font-family:var(--font-condensada);
    font-size:var(--text-xs);
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--color-muted);
    border-bottom:1px solid var(--color-border);
    padding-bottom:var(--space-2);
    margin:0 0 var(--space-5);
}

/* ==========================================
   BANNER DE DESTAQUE (chamada principal)
========================================== */

.banner-destaque{
    position:relative;
    max-width:var(--container-narrow);
    margin:var(--space-7) auto var(--space-3);
    padding:0 20px;
}

.banner-quadro{
    display:none;
    grid-template-columns:1fr 1fr;
    min-height:160px;
    border:1px solid var(--color-border);
}

.banner-quadro.ativo{
    display:grid;
}

.banner-arte{
    background:
        radial-gradient(ellipse 60% 50% at 40% 70%, rgba(255,255,255,.22), transparent 70%),
        repeating-linear-gradient(78deg,#3a3a3a 0 18px,#1d1d1d 18px 24px),
        #222;
    background-size:cover;
    background-position:center;
}

.banner-chamada{
    padding:var(--space-5) var(--space-6);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:var(--color-ed-inst);
}

.banner-chamada h2{
    font-family:var(--font-condensada);
    font-size:var(--text-xl);
    font-weight:700;
    line-height:1.05;
    text-transform:uppercase;
    margin:0 0 var(--space-3);
    color:#fff;
}

.banner-chamada p{
    margin:0;
    font-size:var(--text-sm);
    line-height:var(--leading-snug);
    color:rgba(255,255,255,.92);
}

.banner-seta{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:0;
    cursor:pointer;
    color:var(--color-border-strong);
    font-size:var(--text-lg);
    line-height:1;
    padding:var(--space-2);
}

.banner-seta:hover{
    color:var(--color-text);
}

.banner-seta.anterior{ left:-16px; }
.banner-seta.proximo{ right:-16px; }

.banner-pontos{
    display:flex;
    gap:6px;
    justify-content:center;
    margin-top:var(--space-3);
}

.banner-pontos button{
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:var(--radius-full);
    background:var(--color-border-strong);
    cursor:pointer;
}

.banner-pontos button[aria-current="true"]{
    background:var(--color-ed-inst);
}

/* ==========================================
   FAIXA CINZA COM VITRINE DE CARTAZES
========================================== */

.faixa-vitrine{
    background:var(--color-bg-alt);
    padding:var(--space-6) 0;
    margin:var(--space-6) 0;
}

.vitrine{
    max-width:var(--container-narrow);
    margin:0 auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
    gap:var(--space-5);
}

.vitrine-item .vitrine-capa{
    aspect-ratio:3/4;
    border:1px solid var(--color-border-strong);
    background:var(--color-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:var(--space-3);
    font-family:var(--font-condensada);
    font-size:var(--text-xs);
    color:var(--color-muted);
    object-fit:cover;
}

/* Quando o item tem foto real (em vez do rótulo-placeholder em texto),
   a capa é uma <img> dentro de <picture> — sem padding, preenchendo
   o quadro 3/4 por completo. */
.vitrine-item picture{
    display:block;
    aspect-ratio:3/4;
    border:1px solid var(--color-border-strong);
    overflow:hidden;
}

.vitrine-item picture img.vitrine-capa{
    width:100%;
    height:100%;
    padding:0;
    border:0;
    display:block;
    object-fit:cover;
}

.vitrine-item h3{
    font-size:var(--text-xs);
    font-weight:400;
    line-height:var(--leading-snug);
    margin:var(--space-2) 0 0;
    color:var(--color-text);
}

.vitrine-item a{
    color:inherit;
    text-decoration:none;
}

.vitrine-item a:hover h3{
    color:var(--color-accent-ink);
    text-decoration:underline;
}

/* ==========================================
   EDITORIAS — QUATRO COLUNAS COM TARJA COLORIDA
========================================== */

.editorias{
    max-width:var(--container-narrow);
    margin:var(--space-6) auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-5);
}

.tarja-editoria{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    background:var(--color-ed-inst);
    color:#fff;
    font-family:var(--font-condensada);
    font-size:var(--text-xs);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
    padding:var(--space-1) var(--space-2);
    margin-bottom:var(--space-3);
}

.tarja-editoria .tarja-mais{
    font-weight:400;
    opacity:.85;
}

.editoria-ensino  .tarja-editoria{ background:var(--color-ed-ensino); }
.editoria-ciencia .tarja-editoria{ background:var(--color-ed-ciencia); }

/* O GPDCF-UFPR ainda não tem uma vertical de extensão documentada no
   site (não existe extensao.html nem conteúdo correspondente). A
   quarta coluna de editoria foi remapeada para Infraestrutura — uma
   página real do site — em vez de inventar um programa de extensão
   inexistente (por isso não há uma regra ".editoria-extensao" aqui —
   foi removida por não ter nenhum uso). Reaproveita o mesmo tom verde
   para manter o conjunto de 4 cores do padrão institucional. */
.editoria-infra .tarja-editoria{ background:var(--color-ed-extensao); }

.lista-editoria{
    list-style:none;
    margin:0;
    padding:0;
}

.lista-editoria li{
    border-bottom:1px solid var(--color-border);
    padding:var(--space-2) 0;
}

.lista-editoria li:last-child{
    border-bottom:0;
}

.lista-editoria a{
    text-decoration:none;
    color:inherit;
}

.lista-editoria h3{
    font-size:var(--text-xs);
    font-weight:400;
    line-height:var(--leading-snug);
    margin:0;
    color:var(--color-text);
}

.lista-editoria a:hover h3{
    color:var(--color-accent-ink);
    text-decoration:underline;
}

.data-editoria{
    display:block;
    font-family:var(--font-condensada);
    font-size:var(--text-xs);
    color:var(--color-muted);
    margin-top:var(--space-1);
}

/* ==========================================
   BOTÃO DE ARQUIVO ("TODAS AS ATUALIZAÇÕES")
========================================== */

.linha-botao{
    text-align:center;
    margin:var(--space-6) 0 var(--space-8);
}

.botao-portal{
    display:inline-block;
    border:1px solid var(--color-border);
    border-radius:var(--radius-full);
    padding:var(--space-2) var(--space-5);
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-condensada);
    font-size:var(--text-xs);
    letter-spacing:.8px;
    text-transform:uppercase;
    text-decoration:none;
    transition:background var(--transition-fast), border-color var(--transition-fast);
}

.botao-portal:hover{
    background:var(--color-bg-alt);
    border-color:var(--color-border-strong);
}

/* ==========================================
   RESPONSIVO DOS BLOCOS DESTE ARQUIVO
========================================== */

@media(max-width:900px){
    .editorias{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .banner-seta.anterior{ left:2px; }
    .banner-seta.proximo{ right:2px; }
}

@media(max-width:600px){
    .editorias{
        grid-template-columns:1fr;
    }

    .banner-quadro.ativo{
        grid-template-columns:1fr;
    }

    .banner-arte{
        min-height:120px;
    }
}