/* =========================================

   1. ESTILOS GERAIS E TIPOGRAFIA (HERO)

   ========================================= */



/* Linha Vertical Branca (Hero) */

.openeu-title-border {

    border-left: 4px solid #ffffff !important;

    padding-left: 25px !important;

    margin-left: 0 !important;

}



h1.openeu-title-border, 

h2.openeu-title-border {

    color: #ffffff !important;



    font-weight: 700 !important;

    margin-top: 0 !important;

    margin-bottom: 15px !important;

    font-size: clamp(24px, 4vw, 46px) !important;

    line-height: 1.2 !important;

}



p.openeu-title-border {

    color: #ffffff !important;

    font-size: 16px !important;

    text-transform: uppercase !important;

    letter-spacing: 1px !important;

    margin: 0 !important;

    max-width: 600px;

}



/* Caixa do Logótipo (Topo Hero) */

.openeu-logo-box {

    border-left: 2px solid #ffffff !important;

    border-top: 2px solid #ffffff !important;

    padding: 15px 20px !important;

    display: inline-block !important;

}



/* =========================================

   2. ESTILOS DE RSS/LISTAS (LEGADO)

   ========================================= */



/* RSS Estilizado (Lista Simples) */

.rss-estilizado ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.rss-estilizado li {

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 25px;

    margin-bottom: 20px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.05);

    transition: transform 0.2s;

}



.rss-estilizado li:hover {

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



.rss-estilizado .wp-block-rss__item-title > a {

    font-weight: bold;

    text-decoration: none;

    color: #003366;

    font-size: 1.2rem;

}



.rss-estilizado .wp-block-rss__item-publish-date {

    font-size: 0.85rem;

    color: #888;

    margin-bottom: 10px;

    display: block;

}



/* Card RSS Clicável (Genérico) */

.card-rss-clicavel ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

}



.card-rss-clicavel li {

    position: relative;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 12px;

    padding: 20px;

    padding-top: 80px;

    transition: all 0.3s ease;

    box-shadow: 0 4px 6px rgba(0,0,0,0.05);

    overflow: hidden;

}



.card-rss-clicavel li::before {

    content: ''; 

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 60px;

    background-image: url('https://sites.uab.pt/gutenberg-dev/wp-content/uploads/sites/75/2025/11/video_investigador.png'); 

    background-size: cover;

    z-index: 1;

}



.card-rss-clicavel .wp-block-rss__item-title a {

    text-decoration: none;

    color: #333;

    font-weight: bold;

    font-size: 1.1rem;

    display: block;

}



.card-rss-clicavel .wp-block-rss__item-title a::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 2;

}



.card-rss-clicavel li:hover {

    transform: translateY(-5px);

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

    border-color: #003366;

}



/* Fix SVG rendering */

img[src$=".svg"] {

    shape-rendering: crispEdges !important;

}



/* =========================================

   3. GRELHA DE NOTÍCIAS (DESIGN OPENEU)

   ========================================= */

/* ATUALIZADO: Grelha Estrita (Sem Scrollbar) */



/* Configuração Base (Mobile First) */

.openeu-news-container .openeu-grid {

    display: grid;

    gap: 15px; /* Espaço entre cartões */

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

    padding-left: 0 !important;

    

    /* Padrão Mobile: 1 coluna */

    grid-template-columns: 1fr;

}



/* AJUSTE Tablet (Entre 600px e 1024px) */

/* Aqui muda para 3 colunas (fica 3 em cima, 3 em baixo) para não ficar apertado */

@media (min-width: 600px) {

    .openeu-news-container .openeu-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



/* AJUSTE Desktop (Acima de 1024px) */

/* AQUI FORÇA AS 6 COLUNAS NA MESMA LINHA */

@media (min-width: 1024px) {

    .openeu-news-container .openeu-grid {

        grid-template-columns: repeat(6, 1fr);

    }

}



/* Estilo do Cartão */

.openeu-news-container .openeu-card-item {

    margin: 0;

    padding: 0;

    /* O cartão ocupa sempre 100% da sua célula na grelha */

    width: 100%; 

}



/* Link (Área Clicável) */

.openeu-news-container .openeu-link {

    display: block;

    position: relative;

    height: 400px; /* Mantém a altura fixa */

    overflow: hidden;

    text-decoration: none;

}



/* Imagem de Fundo */

.openeu-news-container .openeu-image {

    width: 100%;

    height: 100%;

}



.openeu-news-container .openeu-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.openeu-news-container .openeu-link:hover .openeu-image img {

    transform: scale(1.05);

}



/* Caixa Azul (Sobreposição) */

.openeu-news-container .openeu-caption {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #0e2b4d;

    padding: 20px;

    min-height: 100px;

    display: flex;

    align-items: center;

    transition: background-color 0.3s;

}



.openeu-news-container .openeu-link:hover .openeu-caption {

    background-color: #1a3f6b;

}



/* Título */

.openeu-news-container .openeu-title {

    color: #ffffff !important;

    font-family: sans-serif;

    font-size: 14px; /* Tamanho ajustado para caber em colunas estreitas */

    font-weight: 700;


    margin: 0;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* =========================================

   4. AJUSTES MOBILE GERAIS (RESPONSIVIDADE)

   ========================================= */



/* Hero Section (Capa) */

@media (max-width: 768px) {

    #openeu-hero-section {

        padding: 40px 20px !important;

        min-height: auto !important;

    }

    #openeu-hero-section .wp-block-image img {

        width: 180px !important;

        height: auto !important;

    }

    #openeu-hero-section h1 {

        font-size: 1.8rem !important;

        line-height: 1.2 !important;

    }

    #openeu-hero-section .wp-block-spacer {

        height: 20px !important;

    }

}



/* Secções Gerais (Breakdown Mobile) */

@media (max-width: 781px) {

    

    /* "O Que é a OpenEU" */

    #oqueeaopeneu {

        padding-top: 40px !important;

        padding-bottom: 40px !important;

    }

    #oqueeaopeneu .wp-block-columns {

        flex-direction: column !important;

        gap: 30px;

    }

    #oqueeaopeneu .wp-block-column:first-child {

        border-right: none !important;

        padding-right: 0 !important;

        border-bottom: 1px solid #000;

        padding-bottom: 30px;

        margin-bottom: 30px;

        display: flex;

        justify-content: center;

    }

    #oqueeaopeneu .wp-image-430 {

        max-width: 250px;

        height: auto;

    }



    /* "Os Números da OpenEU" */

    #osnumerosdaopeneu {

        padding: 40px 20px 0 20px !important;

    }

    #osnumerosdaopeneu .wp-block-column {

        padding-top: 0 !important;

        padding-bottom: 30px !important;

        flex-basis: 100% !important;

    }

    #osnumerosdaopeneu .wp-block-group {

        padding-left: 0 !important;

        padding-right: 0 !important;

    }

    #osnumerosdaopeneu .wp-block-group.is-nowrap {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }



    /* "O Que Significa" */

    #O-Que-Significa-a-OpenEU-Para-a-UAb {

        padding: 40px 20px !important;

    }

    #O-Que-Significa-a-OpenEU-Para-a-UAb h2 br {

        display: none;

    }

    #O-Que-Significa-a-OpenEU-Para-a-UAb h2 br:after {

        content: " ";

    }

    #O-Que-Significa-a-OpenEU-Para-a-UAb .wp-block-columns {

        flex-direction: column !important;

        display: flex;

    }

    #O-Que-Significa-a-OpenEU-Para-a-UAb .wp-block-column {

        flex-basis: 100% !important;

        width: 100% !important;

        padding-top: 0 !important;

    }

    #O-Que-Significa-a-OpenEU-Para-a-UAb figure.alignright {

        float: none;

        margin: 30px auto 0 auto;

        text-align: center;

    }



    /* "Missão e Impacto" */

    #Missão-e-Impacto-da-OpenEU {

        padding: 40px 20px !important;

    }

    #Missão-e-Impacto-da-OpenEU p br {

        display: none;

    }

    #Missão-e-Impacto-da-OpenEU p br:after {

        content: " ";

    }

    #Missão-e-Impacto-da-OpenEU h2 {

        font-size: 1.8rem !important;

        word-wrap: break-word;

    }



    /* "Objetivos Estratégicos" */

    #O-Que-Significa-a-OpenEU-Para-Mim > .wp-block-columns > .wp-block-column:first-child {

        display: none !important;

    }

    #O-Que-Significa-a-OpenEU-Para-Mim > .wp-block-columns > .wp-block-column:last-child {

        flex-basis: 100% !important;

        max-width: 100% !important;

    }

    #O-Que-Significa-a-OpenEU-Para-Mim .wp-block-cover {

        min-height: auto !important;

        padding-top: 40px !important;

        padding-bottom: 40px !important;

    }

    #O-Que-Significa-a-OpenEU-Para-Mim .wp-block-cover .wp-block-columns {

        flex-direction: column !important;

        padding-right: 0 !important;

        gap: 20px;

    }

    #O-Que-Significa-a-OpenEU-Para-Mim .wp-block-group.has-background {

        width: 100% !important;

        margin-bottom: 15px !important;

        margin-top: 0 !important;

    }

    #O-Que-Significa-a-OpenEU-Para-Mim h2 br {

        display: none;

    }

}
@media (max-width: 781px) {
	
	/* 1. Inverter a ordem das colunas */
    .wp-container-core-columns-is-layout-b0f2cfb2 {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* 2. Ajustar a coluna do texto (que agora está no topo) */
    .wp-container-core-columns-is-layout-b0f2cfb2 .wp-block-column:last-child {
        padding-right: 0 !important; /* Remove os 80px do inline */
        margin-bottom: 30px !important; /* Espaço para a imagem que vem abaixo */
    }

    /* 3. Ajustar a coluna da imagem (que agora está em baixo) */
    .wp-container-core-columns-is-layout-b0f2cfb2 .wp-block-column:first-child {
        border-right: none !important;
        padding-right: 0 !important;
    }

    /* 4. Reset ao alinhamento da imagem */
    .wp-container-core-columns-is-layout-b0f2cfb2 .wp-block-image.alignright {
        float: none !important;
        margin: 0 auto !important;
        text-align: center;
    }
	
    /* 1. Ajustar ícones (Números) para ficarem menores e centrados */
    .wp-block-media-text__media img[src*="NumerosOpenEU"] {
        width: 80px !important; /* Tamanho reduzido */
		
        display: block;
    }
	
	.wp-block-media-text__content {
	 padding-left: 0 !important;	
	}

    /* Ajustar o texto que acompanha os ícones para alinhar ao centro no mobile */
    .wp-block-media-text__content {
        /*text-align: center !important;*/
        padding-top: 10px !important;
    }

    /* 2. Ajustar a imagem de banner (SVG) para não ser cortada agressivamente */
.wp-block-cover img.wp-block-cover__image-background {
        object-fit: cover !important;
        /* Ajusta a percentagem (X Y) para focar na parte importante do SVG */
        object-position: 80% 50% !important; 
    }

    /* 3. Remover a borda lateral da coluna "O que é a OpenEU" */
    .wp-block-column.is-vertically-aligned-center {
        border-right: none !important;
        padding-right: 0 !important;
        padding-bottom: 20px !important;
    }
	
	/* 1. Alinha a lista e os itens à direita */
    .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        align-items: flex-end !important; /* Alinha os blocos à direita */
        text-align: right !important;     /* Alinha o texto dentro dos blocos */
    }

    /* 2. Força as labels e os links a ocuparem a largura total e alinharem o texto */
    .wp-block-navigation-item__content {
        text-align: right !important;
        width: 100%;
        display: block;
    }

    /* 3. Ajuste do Logótipo (se estiver dentro do menu) */
    /* Tens um estilo inline margin-right: 86px no logo que vai empurrá-lo para a esquerda */
    .wp-block-navigation__responsive-container-content .wp-block-site-logo {
        margin-right: 0 !important;
        margin-left: auto !important; /* Empurra o logo para a direita */
        text-align: right !important;
    }

    /* 4. Remover paddings excessivos que o WordPress aplica no overlay */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding-right: 20px !important;
    }
}/* d41d8cd98f00b204e9800998ecf8427e */.has-pale-pink-background-color{background-color: #f78da7;}.has-pale-pink-color{color: #f78da7;}.has-vivid-red-background-color{background-color: #cf2e2e;}.has-vivid-red-color{color: #cf2e2e;}.has-luminous-vivid-orange-background-color{background-color: #ff6900;}.has-luminous-vivid-orange-color{color: #ff6900;}.has-luminous-vivid-amber-background-color{background-color: #fcb900;}.has-luminous-vivid-amber-color{color: #fcb900;}.has-light-green-cyan-background-color{background-color: #7bdcb5;}.has-light-green-cyan-color{color: #7bdcb5;}.has-vivid-green-cyan-background-color{background-color: #00d084;}.has-vivid-green-cyan-color{color: #00d084;}.has-pale-cyan-blue-background-color{background-color: #8ed1fc;}.has-pale-cyan-blue-color{color: #8ed1fc;}.has-vivid-cyan-blue-background-color{background-color: #0693e3;}.has-vivid-cyan-blue-color{color: #0693e3;}.has-very-light-gray-background-color{background-color: #eeeeee;}.has-very-light-gray-color{color: #eeeeee;}.has-cyan-bluish-gray-background-color{background-color: #abb8c3;}.has-cyan-bluish-gray-color{color: #abb8c3;}.has-very-dark-gray-background-color{background-color: #313131;}.has-very-dark-gray-color{color: #313131;}.has-small-font-size{font-size: 13px;}.has-normal-font-size{font-size: 16px;}.has-medium-font-size{font-size: 20px;}.has-large-font-size{font-size: 36px;}.has-huge-font-size{font-size: 48px;}