/* ==========================================================================
   Senso Incomum — Página de post (post.hbs + partials/posts.hbs, !home)
   Sobrepõe screen.css; não editar screen.css.
   ========================================================================== */

/*
   Espaço abaixo do header; hero em coluna (imagem em cima, meta em baixo).
   Largura viewport: estica o hero até às bordas horizontais do ecrã.
*/

.si-post-header{

    padding:

        clamp(54px,6vw,82px)

        clamp(70px,7vw,95px)

        36px;

}

.post-header-meta{

    margin-top:18px;

    opacity:.85;

}

.post-template .default-body-slot > article > .section-featured.si-hero {
   display: flex;
   flex-direction: column;
   margin-top: clamp(20px, 3.2vh, 44px);
   width: 100vw;
   max-width: 100vw;
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
}

/* Imagem: mesma largura horizontal do cartão escuro (.section-post), centrada no hero */
.post-template .section-featured.si-hero.is-featured-image .featured-image {
   position: relative;
   inset: auto;
   left: auto;
   right: auto;
   top: auto;
   bottom: auto;
   flex: 0 0 auto;
   width: var(--si-post-card-width, 60vw);
   max-width: var(--si-post-card-width, 60vw);
   margin-left: auto;
   margin-right: auto;
   z-index: 0;
   border-radius: var(--border-radius-primary);
   overflow: hidden;
   /* Canvas quadrado (era um banner baixo/retangular, clamp de altura em vh);
      a imagem em si não distorce — background-size:cover só recorta pra
      preencher a caixa mais alta. O corpo do texto desce de acordo. */
   aspect-ratio: 1 / 0.66;
   height: auto;
   background-size: cover;
   background-position: center center;
}

/* Sem imagem: só meta; sem “buraco” de altura de imagem */
.post-template .section-featured.si-hero.no-featured-image .featured-image {
   display: none;
}

.post-template .section-featured.si-hero .featured-wrap {
    display:none;
}


.post-template .section-featured.si-hero.no-featured-image .featured-wrap {
   padding-top: clamp(32px, 4.5vh, 56px);
}

.post-template .featured-wrap .featured-content {
   width: 100%;
   padding: 0;
}

.post-template .tags-wrap {
   margin-right: 0;
   margin-bottom: 26px;
}

.si-post-tags .global-tag{

    font-size:13px;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.post-template .featured-wrap h1 {
   margin: 0 0 18px;
   padding-top: 0;
   /* +50% face ao escalão anterior (1.75 / 4.2vw / 2.75 rem) */
   font-size: clamp(2.625rem, 6.3vw, 4.125rem);
   line-height: 1.12;
}

.post-template .featured-wrap .item-meta {
   width: 100%;
   margin-top: 4px;
}

/* Texto já não está sobre a foto: cores legíveis no fundo escuro global */
.post-template .featured-wrap h1.white,
.post-template .featured-wrap .item-meta.white,
.post-template .featured-wrap .item-meta.white a {
   color: #e8edf4;
}

.post-template .featured-wrap .item-meta.white .reading-time svg {
   fill: #b8c0cc;
}


.post-title{

    font-family:

        "Cormorant Garamond",

        serif;

    font-size:

        clamp(3.5rem,6vw,5.2rem);

    line-height:1.05;

    margin-bottom:24px;

}

.post-subtitle{

    font-family:

        "Cormorant Garamond",

        serif;

    font-style:italic;

    font-size:

        clamp(1.35rem,2vw,1.8rem);

    color:#b7b7b7;

    max-width:760px;

    margin-bottom:34px;

}





/* --- Cartão do corpo do post: sem “puxar” por cima do hero; espaço acima do texto --- */
.post-template .section-post.wrap {
 margin:-18px auto 0;

    position:relative;

    z-index:20;

    border-radius:18px;
}

.post-template .section-post.wrap > .post-wrap {
   padding-top: clamp(44px, 5.5vh, 80px);
}

/* Corpo do post: fonte Alegreya (Google Fonts) + tamanho +30% face ao
   corpo padrão do tema (19px -> 24.7px); títulos dentro do post herdam a
   família e escalam na mesma proporção. */
.post-template .post-wrap {
   font-family: 'Alegreya', serif;
   font-size: 24.7px;
}

.post-template .post-wrap h1 { font-size: 65px; }
.post-template .post-wrap h2 { font-size: 52px; }
.post-template .post-wrap h3 { font-size: 39px; }
.post-template .post-wrap h4 { font-size: 32.5px; }
.post-template .post-wrap h5 { font-size: 26px; }
.post-template .post-wrap h6 { font-size: 22.1px; }

@media (max-width: 767px) {


   .post-template .section-post.wrap > .post-wrap {
      padding-left: clamp(20px, 5vw, 40px);
      padding-right: clamp(20px, 5vw, 40px);
   }
}

/* Largura da imagem = cartão .section-post (espelha .wrap + regra mobile de screen.css) */
@media (min-width: 1025px) {
   .post-template .section-featured.si-hero.is-featured-image .featured-image {
      --si-post-card-width: 60vw;
   }
}

@media (min-width: 768px) and (max-width: 1024px) {
   .post-template .section-featured.si-hero.is-featured-image .featured-image {
      --si-post-card-width: calc(100vw - 85px - 85px);
   }
}

@media (min-width: 480px) and (max-width: 767px) {
   .post-template .section-featured.si-hero.is-featured-image .featured-image {
      --si-post-card-width: calc(100vw - 85px - 85px - 15px - 15px);
   }
}

@media (max-width: 479px) {
   .post-template .section-featured.si-hero.is-featured-image .featured-image {
      --si-post-card-width: calc(100vw - 15px - 15px);
   }
}


.si-post-divider{

    text-align:center;

    margin:

        42px 0

        18px;

    opacity:.55;

    font-size:20px;

}