/* ==========================================================================
   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ã.
*/
.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;
   --si-post-hero-img-h: clamp(180px, min(36vh, calc((100vh - 220px) / 2)), 440px);
   height: var(--si-post-hero-img-h);
   min-height: var(--si-post-hero-img-h);
   max-height: var(--si-post-hero-img-h);
   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 {
   order: 2;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
   flex: 0 1 auto;
   min-height: 0;
   width: 100%;
   max-width: 720px;
   margin: 0 auto;
   padding: clamp(26px, 3.8vh, 48px) clamp(18px, 4vw, 36px) clamp(18px, 2.5vh, 32px);
   box-sizing: border-box;
}

.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: 14px;
}

.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;
}

/* --- Cartão do corpo do post: sem “puxar” por cima do hero; espaço acima do texto --- */
.post-template .section-post.wrap {
   margin: clamp(20px, 3vh, 40px) auto 0;
}

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

@media (max-width: 767px) {
   .post-template .section-featured.si-hero .featured-wrap {
      max-width: none;
      padding-left: clamp(16px, 5vw, 28px);
      padding-right: clamp(16px, 5vw, 28px);
   }

   .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);
   }
}