/* Estilos Base */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Cabeçalho */

/* Estilos do Logo */
.logo-site {
    max-width: 250px; /* Controla o tamanho do logo */
    height: auto;
    border-radius: 50%; /* Como o logo tem um formato circular, isto ajuda a dar um efeito de medalha */
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Dá uma sombra ligeira para destacar o logo */
    border: 4px solid #fff; /* Uma margem branca à volta do logo */
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 40px 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

header p {
    font-size: 1.2em;
    color: #1abc9c;
}

/* Layout Principal */
.content-area {
    display: flex;
    gap: 30px;
    margin-top: 40px;
}

main {
    flex: 2;
}

aside {
    flex: 1;
}

/* Artigos do Blog */
.post {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    display: flex;
    gap: 20px;
}

.post-icon {
    font-size: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-content h3 {
    margin-top: 0;
    color: #2980b9;
}

.date {
    font-size: 0.9em;
    color: #7f8c8d;
    display: block;
    margin-bottom: 10px;
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    color: #1abc9c;
    text-decoration: none;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
}

/* Barra Lateral (Sobre a Família) */
.about-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.about-card h3 {
    margin-top: 0;
    color: #e67e22;
}

.about-card ul {
    list-style-type: none;
    padding: 0;
}

.about-card ul li {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    line-height: 1.5;
}

.about-card ul li:last-child {
    border-bottom: none;
}

/* Imagem da Tripulação */
/* Imagem da Tripulação */
.img-tripulacao {
    max-width: 100%; /* Garante que NUNCA fica maior do que a barra lateral */
    height: auto;
    display: block; /* Ajuda a imagem a comportar-se bem dentro da caixa */
    border-radius: 6px;
    margin: 0 auto 15px auto; /* Centra a imagem se for mais pequena que o espaço */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Rodapé */
footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

/* Responsividade para ecrãs mais pequenos */
/* =========================================
   Responsividade para Telemóveis e Tablets
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Ajustes Gerais do Layout */
    .content-area {
        flex-direction: column; /* Coloca a barra lateral debaixo dos artigos */
        margin-top: 20px;
        gap: 20px;
    }

    /* 2. Ajustes no Cabeçalho (Header) */
    header {
        padding: 25px 0; /* Reduz o espaço no topo e base */
    }

    .logo-site {
        max-width: 160px; /* Reduz o tamanho do logo para não ocupar o ecrã todo */
        margin-bottom: 10px;
        border-width: 3px;
    }

    header h1 {
        font-size: 1.8em; /* Título ligeiramente mais pequeno */
    }

    header p {
        font-size: 1em;
        padding: 0 10px; /* Evita que o texto encoste nas bordas do ecrã */
    }

    /* 3. Ajustes nos Artigos (Posts) */
    .post {
        flex-direction: column; /* Coloca o ícone/imagem em cima e o texto em baixo */
        text-align: center; /* Centra o texto no telemóvel */
        padding: 15px;
        gap: 10px;
    }

    .post-icon {
        font-size: 4em; /* Destaca o ícone quando está sozinho no topo */
    }

    .post-content h3 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }

    /* 4. Ajustes na Barra Lateral (About Card) */
    .about-card {
        text-align: center; /* Centra o título e texto introdutório */
    }
    
    .about-card ul {
        text-align: left; /* Mantém a lista alinhada à esquerda para facilitar leitura */
    }
}

/* Regra extra para ecrãs MESMO muito pequenos (ex: iPhone SE antigo) */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.5em;
    }
}