/* CONFIGURAÇÕES GERAIS E CORES */
:root {
    --hey-delivery-box: #F1DBAE;
    --hey-creme: #F4EDDC;
    --hey-heykitchen: #F35200;
    --hey-golden-fries: #F4AB12;
    --hey-avocado: #002922;
    --hey-salmon: #F69F7D;
    --hey-white: #FFFFFF;
}

.single-post-page {
    background-color: var(--hey-creme); 
    color: var(--hey-avocado);
    font-family: 'neue-haas-grotesk-text', sans-serif;
    padding: 60px 0;
}

.container {
    width: min(1800px, 92%);
    margin: auto;
}

/* Tags */
.tag {
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 8px;
}
.tag--yellow { background: var(--hey-golden-fries); color:var(--hey-avocado); }
.tag--dark { background:var(--hey-avocado); color: var(--hey-creme); }
.related-card .tag--dark { background:var(--hey-avocado); color: var(--hey-white); }
.tag--small { font-size: 10px; padding: 4px 12px; }

/* Hero Section */
.post-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 50px;
}

.post-title {
    font-family: 'obviously-condensed', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    line-height: 1.1;
    margin: 25px 0;
    text-transform: uppercase;
    color: var(--hey-avocado);
}

.post-meta {
    font-weight: 600;
    margin-bottom: 20px;
    opacity: 0.8;
}

.post-hero__image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

/* Layout de Conteúdo e Sidebar */
.post-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
}

.post-content {
    background: var(--hey-white);
    padding: 60px;
    border-radius: 30px;
    line-height: 1.6;
    font-size: 18px;
}
.post-content__inner-title{
    font-family: 'obviously-condensed', sans-serif;
}

.post-content p { margin-bottom: 20px; }

.post-tags {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-family: 'neue-haas-grotesk-text', sans-serif;
}

.post-tags a {
    display: inline-block;
    background: #f0f0f0;
    color: #333;
    padding: 5px 12px;
    border-radius: 25px;
    font-size: 14px;
    text-decoration: none;
    margin-right: 8px;
    margin-top:8px;
    transition: background 0.3s;
}

.post-tags a:hover {
    background: #002922; /* Cor que usas nos teus SVGs */
    color: #fff;
}

/* Sidebar */
.post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: var(--hey-white);
    border-radius: 20px;
    padding: 25px;
}

.author-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--hey-delivery-box);
}

.author-avatar img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.label { font-size: 12px; color: var(--hey-avocado); display: block; }
.author-info h4 { font-size: 18px; margin: 0; font-weight: bold; }

/* card categoria */
.cta-link-wrapper {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
    text-decoration: none; /
    color: inherit; /
}

/* Garante que o container interno não limita a largura */
.cta-text {
    width: 100%; 
    display: flex;
    flex-direction: column;
}

/* Efeito de Hover na Seta */
.cta-link-wrapper:hover .cta-arrow {
    transform: translateX(5px);
    transition: transform 0.3s ease;
    color: var(--hey-avocado);
}
.cta-title{color: var(--hey-delivery-box);}
.cta-title:hover{ color: var(--hey-avocado); }

.cta-arrow {
    display: flex;
    transition: transform 0.3s ease;
}




.cta-arrow {
    background: var(--hey-delivery-box);
    color: var(--hey-heykitchen);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Related Posts */
.section-title {
    margin: 80px 0 30px;
    text-transform: uppercase;
    font-size: 32px;
    font-family: 'obviously-condensed', sans-serif;
}
/* Layout da Grelha de Relacionados */
.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Estrutura do Card (Flexbox para imagem à esquerda) */
.related-card {
    background: var(--hey-white);
    border-radius: 30px;
    overflow: hidden;
    display: flex; /* Alinha imagem e conteúdo lado a lado */
    min-height: 280px;
}

/*.related-card:hover { transform: translateY(-5px); }*/
.related-card__image {
    flex: 0 0 45%; /* Imagem ocupa 45% da largura */
    overflow: hidden;
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-card__content {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tipografia do Card */
.related-card h3 {
    font-family: 'obviously-condensed', sans-serif;
    font-size: 24px;
    line-height: 1.1;
    margin: 15px 0;
    text-transform: uppercase;
}

.related-excerpt p {
    font-size: 14px;
    line-height: 1.4;
    color: var(--hey-avocado);
    margin-bottom: 20px;
}

.card-date {
    font-size: 12px;
    font-weight: 700;
    margin-left: auto; /* Empurra a data para a direita se houver espaço */
}

/* BOTÃO  */
.btn-read-more {
    background: var(--hey-heykitchen);
    color: var(--hey-white);
    text-align: center;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    width: 100%;
    transition: background 0.3s ease;
}

.btn-read-more:hover {
color: var(--hey-avocado);
}

/* Container dos ícones de partilha */
.share-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.share-icons {
    display: flex; /* Alinha em linha */
    flex-wrap: wrap; /* Permite quebrar linha se o ecrã for muito pequeno */
    gap: 10px; /* Espaço entre os ícones */
    align-items: center;
}

.placeholder-icon svg {
    display: block;
    width: 40px; /* Garante o tamanho correto */
    height: 40px;
    transition: transform 0.2s ease;
}

.placeholder-icon:hover svg {
    transform: scale(1.1); /* Efeito opcional ao passar o rato */
}

/* Ajuste na CTA lateral para garantir alinhamento */
.cta-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--hey-heykitchen);
    color: var(--hey-delivery-box);
    text-decoration: none; /* Caso decida envolver num link <a> */
}

.cta-text h3 {
    margin: 0;
    font-size: 35px;
    text-transform: uppercase;
    font-family: 'obviously-condensed', sans-serif;
}

/* AJUSTE MOBILE: Volta a empilhar verticalmente */
@media (max-width: 1024px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
    
    .related-card {
        flex-direction: column; /* Imagem volta para cima no mobile */
    }
    
    .related-card__image {
        flex: 0 0 200px;
    }
}
/* Mobile */
@media (max-width: 900px) {
    .post-hero, .post-layout, .related-grid {
        grid-template-columns: 1fr;
    }

    .post-content { padding: 30px 20px; }

    /* Inverte a ordem e centraliza os itens do Hero */
    .post-hero {
        display: flex;
        flex-direction: column-reverse; /* Inverte a ordem: imagem passa para cima do texto */
        text-align: center; /* Alinha o texto ao centro */
        gap: 30px;
    }

    /* Garante que as tags e a meta também fiquem centradas */
    .post-categories, 
    .post-meta {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .post-title {
        font-size: 32px;
        margin: 15px 0;
    }

    /* Remove padding excessivo se houver e ajusta a imagem */
    .post-hero__image {
        width: 100%;
         order: -1;
    }

    .post-hero__image img {
        border-radius: 20px;
    }

    /* Ajuste adicional para a sidebar e outros elementos */
    .post-layout {
        display: flex;
        flex-direction: column;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
}


/* Contentor Geral das Breadcrumbs */
.breadcrumbs-container {
    width: min(1800px, 92%);
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600; 
    margin-bottom: 25px; 
}

/* Links (Homepage e Level 1) */
.breadcrumbs-container a {
    color: #0c4e44;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* Efeito ao passar o rato nos links */
.breadcrumbs-container a:hover {
    color: var(--hey-avocado);
    text-decoration: underline;
}

/* Separadores ( > ) */
.breadcrumbs-container .separator {
    color: var(--hey-avocado);
    margin: 0 5px; 
    font-weight: 400; 
}

/* Texto da Página Atual (Current) */
.breadcrumbs-container .last, 
.breadcrumbs-container span:last-child {
    color: #c0a97b;
    font-weight: 600;
}

/* --- Ajustes para Dispositivos Móveis (Telemóveis e Tablets pequenos) --- */
@media (max-width: 768px) {
    .breadcrumbs-container {
        text-align: center; 
        font-size: 16px;   
        padding: 0 15px;    
        line-height: 1.4;  
    }
}