/* ============================================================================
   UNIFORMIZAÇÃO DE IMAGENS — asemana.cv
   ============================================================================
   ONDE COLOCAR ESTE FICHEIRO:
   Extensões → Modelos (Templates) → Estilos → [o seu template ativo] →
   separador "CSS Personalizado" (Custom CSS), OU carregue este ficheiro
   para a pasta do template e adicione-o em index.php do template com:
     <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/SEU_TEMPLATE/css/uniformizar_imagens.css">

   Os seletores abaixo cobrem as estruturas mais comuns do Joomla
   (com_content em modo Blog/Categoria, e o template Cassiopeia/Bootstrap
   5 que vem com o Joomla). Se o seu template usar nomes de classe
   diferentes, use o "Inspecionar elemento" do navegador sobre um cartão
   de artigo para confirmar as classes reais e ajuste os seletores aqui.
   ========================================================================= */


/* ----------------------------------------------------------------------
   1) CARTÕES DE ARTIGO NAS PÁGINAS DE CATEGORIA / BLOG
   Corrige exatamente o problema visto em asemana.cv/economia: cartões
   com imagens de alturas diferentes, cujo texto por baixo acaba a
   sobrepor-se ao cartão seguinte. A técnica: a imagem passa a ter
   SEMPRE a mesma proporção (aspect-ratio), qualquer que seja o
   tamanho/orientação do ficheiro original, e o cartão todo vira uma
   coluna flexível para que a altura nunca dependa da imagem.
   ---------------------------------------------------------------------- */
.items-row .item,
.blog .item,
.com-content-category-blog .item,
article.item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.items-row .item img,
.blog .item img,
.com-content-category-blog .item img,
article.item > a > img,
article.item .img-fluid,
article.item .item-image img {
    width: 100%;
    aspect-ratio: 16 / 9;      /* proporção uniforme para todas as miniaturas */
    object-fit: cover;         /* preenche a moldura sem distorcer a imagem */
    object-position: center;
    display: block;
    border-radius: 6px;
}

/* Título/legenda sempre no rodapé do cartão, para que os cartões da
   mesma fila fiquem alinhados mesmo com textos de tamanhos diferentes */
.items-row .item .item-title,
article.item .item-title {
    margin-top: auto;
}

/* Espaço mínimo entre linhas de cartões, para nunca voltar a sobrepor */
.items-row,
.blog-items {
    row-gap: 28px;
}


/* ----------------------------------------------------------------------
   2) SLIDESHOW / CARROSSEL DE DESTAQUE
   Moldura fixa (510 largura x 1600 altura, conforme pedido), com a
   imagem a preencher automaticamente a largura da moldura e a cortar o
   excesso mantendo o centro da imagem — assim TODAS as imagens do
   slideshow ficam com o mesmo tamanho final, seja qual for o tamanho
   ou orientação do ficheiro original.

   Ajuste ".slideshow" para a classe/ID real do seu slideshow (procure
   no Inspecionar Elemento à volta das imagens do carrossel principal).
   ---------------------------------------------------------------------- */
.slideshow,
.slideshow .slide,
.slideshow-item {
    width: 100%;
    max-width: 510px;
    aspect-ratio: 510 / 1600;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.slideshow img,
.slideshow .slide img,
.slideshow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Em ecrãs largos, muitos sites preferem o slideshow principal mais
   "baixo" (tipo banner) em vez da proporção alta 510x1600 — se for o
   caso do vosso, troque a linha "aspect-ratio: 510/1600" acima por
   algo como "aspect-ratio: 16/9" só dentro deste bloco @media: */
@media (min-width: 992px) {
    .slideshow-banner-largo {
        aspect-ratio: 16 / 9;
        max-width: 100%;
    }
}


/* ----------------------------------------------------------------------
   3) IMAGEM DE ABERTURA DENTRO DO PRÓPRIO ARTIGO (página de leitura)
   Impede que uma imagem muito grande "estoure" a coluna de texto, sem
   forçar uma proporção fixa (aqui só queremos que caiba na largura).
   ---------------------------------------------------------------------- */
.item-page img,
.article-image img,
.com-content-article img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}


/* ----------------------------------------------------------------------
   4) RESPONSIVIDADE GERAL (telemóveis e tablets)
   O Joomla + Cassiopeia/Bootstrap já é responsivo por definição; estes
   ajustes cobrem os pontos que mais comummente ficam esquecidos em
   templates personalizados ou mais antigos.
   ---------------------------------------------------------------------- */

/* nunca deixar nada ultrapassar a largura do ecrã */
img, table, iframe, video {
    max-width: 100%;
    height: auto;
}

/* grelhas de cartões: 3 colunas no desktop -> 2 no tablet -> 1 no telemóvel */
.items-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 991px) {
    .items-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .items-row {
        grid-template-columns: 1fr;
    }

    /* em ecrãs pequenos o destaque principal (herói) fica mais baixo
       para não empurrar todo o resto da página para muito longe */
    .slideshow,
    .slideshow .slide,
    .slideshow-item {
        max-width: 100%;
        aspect-ratio: 4 / 5;
    }

    h1, .item-title, .page-header h1 {
        font-size: 1.35rem;
        line-height: 1.3;
    }
}

/* menu principal: garantir que não fica espremido/cortado em ecrãs
   estreitos quando o template não usa um menu "hambúrguer" nativo */
@media (max-width: 767px) {
    .nav-main, .navbar-nav {
        flex-wrap: wrap;
    }
}