/* ==========================================================================
   Blog Leiautar — listagem (prefixo .bl-)
   Depende de site.css (chrome .lt-: tokens, cabeçalho, botões, rótulos,
   rodapé) e de base.css (tokens de cor, fontes, motion, cursor).
   Camada institucional: vermelho, rosa, amarelo, preto, branco e cinzas.
   ========================================================================== */

/* Seções de largura travada — 1 unidade = 1 px acima de 981 */
@media (min-width: 981px) {
  .bl-featured,
  .bl-recent,
  .bl-event,
  .bl-news,
  .lt-footer {
    --lt-u: 1px;
  }
}

/*
 * `hidden` sempre vence: cartões fora do filtro, cartões depois do 6º, o botão
 * "Carregar mais", o aviso de categoria vazia, o retorno da newsletter e o
 * banner de evento desligado. Sem esta regra o `display` de cada peça venceria.
 */
.bl-page [hidden] {
  display: none !important;
}

/* Rótulo que é título de seção (h2): o chip do site.css, com a fonte do texto. */
.bl-eyebrow span {
  font-family: var(--sans);
}

/* Hover dos cartões com foto: a foto cresce 4 % dentro da própria máscara. */
.bl-feature__media img,
.bl-card__media img {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bl-feature:hover .bl-feature__media img,
.bl-card__link:hover .bl-card__media img {
  transform: scale(1.04);
}

.bl-feature:focus-visible,
.bl-card__link:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 4px;
}

/* ==========================================================================
   1. Hero editorial + barra de categorias (fundo rosa)
   ========================================================================== */
.bl-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56 * var(--lt-u));
  padding: calc(112 * var(--lt-u)) calc(48 * var(--lt-u)) calc(88 * var(--lt-u));
  background: var(--pink-light);
}

/* Sobre o rosa o rótulo é branco. */
.bl-hero .lt-label {
  background: var(--white);
}

.bl-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--lt-u));
  width: min(100%, var(--lt-max));
  text-align: center;
}

/* H1 de abertura do site (--lt-h1, site.css); o balance divide em duas linhas. */
.bl-hero h1 {
  max-width: none;
  /* Corpo em px acima de 981 (como as seções travadas): com a unidade livre ele
     crescia até 131 em telas largas e a frase ia a três linhas na coluna de 1216. */
  font-size: var(--lt-h1);
  line-height: 0.88;
}

/* Grafite, não cinza médio: o #666 perdia contraste no rosa. */
.bl-hero__lead {
  max-width: calc(680 * var(--lt-u));
  color: var(--ink);
  font-size: calc(19 * var(--lt-u));
  line-height: 1.5;
}

/* Fundo rosa: filtros brancos, o ativo em preto, hover amarelo. Sem contorno. */
.bl-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 * var(--lt-u));
  width: min(100%, var(--lt-max));
}

.bl-cat {
  padding: calc(12 * var(--lt-u)) calc(18 * var(--lt-u));
  color: var(--black);
  background: var(--white);
  font-family: var(--sans);
  font-size: calc(13 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.bl-cat:hover {
  background: var(--yellow);
}

.bl-cat[aria-pressed="true"] {
  color: var(--white);
  background: var(--black);
}

.bl-cat:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 3px;
}

/* ==========================================================================
   2. Destaque (fundo cinza, cartão branco com filete vermelho)
   ========================================================================== */
.bl-featured {
  padding: calc(96 * var(--lt-u)) var(--lt-gutter) calc(40 * var(--lt-u));
  background: var(--gray-100);
}

.bl-featured__inner {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--lt-u));
}

/* Seção cinza: chip do título em branco. */
.bl-featured .bl-eyebrow,
.bl-recent .bl-eyebrow {
  background: var(--white);
}

.bl-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: calc(440 * var(--lt-u));
  background: var(--white);
  border-bottom: calc(5 * var(--lt-u)) solid var(--pink-light); /* filete rosa da paleta */
}

.bl-feature__media {
  position: relative;
  display: block;
  min-height: calc(320 * var(--lt-u));
  overflow: hidden;
  background: var(--gray-400);
}

.bl-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
  object-position: 50% 40%;
}

.bl-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(20 * var(--lt-u));
  min-width: 0;
  padding: calc(48 * var(--lt-u));
}

.bl-feature__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8 * var(--lt-u)) calc(16 * var(--lt-u));
}

/* Cartão branco: chip da categoria em cinza. */
.bl-feature__meta .lt-label {
  background: var(--gray-100);
}

.bl-feature__time {
  color: var(--gray-600);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.3;
}

.bl-feature__title {
  color: var(--ink);
  font-size: calc(56 * var(--lt-u));
  line-height: 0.92;
}

.bl-feature__excerpt {
  color: var(--gray-600);
  font-size: calc(17 * var(--lt-u));
  line-height: 1.55;
}

.bl-feature__cta {
  margin-top: calc(8 * var(--lt-u));
}

.bl-feature:hover .bl-feature__cta {
  color: var(--lt-link-hover);
  border-bottom-color: var(--lt-link-hover-line);
}

.bl-feature:hover .bl-feature__cta img {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   3. Artigos recentes — o cartão de conteúdo da home (.hm-article)
   ========================================================================== */
.bl-recent {
  padding: calc(56 * var(--lt-u)) var(--lt-gutter) calc(120 * var(--lt-u));
  background: var(--gray-100);
}

.bl-recent__inner {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--lt-u));
}

.bl-recent__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--lt-u)) calc(24 * var(--lt-u));
}

.bl-recent__status {
  color: var(--gray-600);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.4;
}

.bl-recent__status:empty {
  display: none;
}

.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cartões da mesma linha com a mesma altura: o link estica até o fim do item. */
.bl-card {
  display: flex;
  min-width: 0;
}

.bl-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border-bottom: calc(5 * var(--lt-u)) solid var(--pink-light); /* filete rosa da paleta */
}

.bl-card__media {
  display: block;
  height: round(calc(240 * var(--lt-u)), 1px);
  overflow: hidden;
  background: var(--gray-400);
}

.bl-card__media img {
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
}

.bl-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(10 * var(--lt-u));
  padding: calc(24 * var(--lt-u));
}

.bl-card__cat {
  color: var(--gray-600);
  font-family: var(--lt-mono);
  font-size: calc(11 * var(--lt-u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bl-card__title {
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

.bl-card__excerpt {
  color: var(--gray-600);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

/* Assinatura: foto quadrada, autora e, embaixo, data e tempo de leitura. */
.bl-card__byline {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--lt-u));
  margin-top: auto;
  padding-top: calc(14 * var(--lt-u));
}

.bl-card__byline img {
  width: calc(36 * var(--lt-u));
  height: calc(36 * var(--lt-u));
  flex: 0 0 auto;
  object-fit: cover;
}

.bl-card__who {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--lt-u));
  min-width: 0;
}

.bl-card__author {
  color: var(--ink);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

.bl-card__meta {
  color: var(--gray-600);
  font-size: calc(13 * var(--lt-u));
  line-height: 1.3;
}

/* Categoria sem artigos ainda. */
.bl-empty {
  padding: calc(32 * var(--lt-u));
  color: var(--ink);
  background: var(--white);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

.bl-empty__reset {
  padding: 0;
  color: inherit;
  background: none;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  border: 0;
  cursor: pointer;
}

.bl-empty__reset:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 3px;
}

.bl-recent__foot {
  display: flex;
  justify-content: center;
  padding-top: calc(16 * var(--lt-u));
}

.bl-more {
  cursor: pointer;
  border: 0;
}

/*
 * O "+" vira máscara pintada com a cor do texto (como as setas do site.css):
 * branco no preto, preto no hover amarelo. No hover ele gira um quarto de volta.
 */
.bl-more img {
  object-position: -9999px 0;
  background-color: currentColor;
  -webkit-mask: url("./assets/icon-plus.svg") center / contain no-repeat;
  mask: url("./assets/icon-plus.svg") center / contain no-repeat;
}

.bl-more:hover img {
  filter: none;
  transform: rotate(90deg);
}

/* ==========================================================================
   4. CTA dinâmico — banner de evento (desligado por padrão, ver o HTML)
   ========================================================================== */
.bl-event {
  padding: calc(96 * var(--lt-u)) var(--lt-gutter);
  background: var(--white);
}

.bl-event__card {
  position: relative;
  overflow: hidden;
  padding: calc(96 * var(--lt-u)) calc(48 * var(--lt-u)) calc(176 * var(--lt-u));
  color: var(--white);
  background: var(--black);
}

.bl-event__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--lt-u));
  max-width: calc(880 * var(--lt-u));
  margin-inline: auto;
  text-align: center;
}

.bl-event h2 {
  color: var(--white);
  font-size: calc(88 * var(--lt-u));
  line-height: 0.9;
}

.bl-event__inner > p:not(.lt-label) {
  max-width: calc(620 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(18 * var(--lt-u));
  line-height: 1.5;
}

.bl-event .lt-btn {
  margin-top: calc(12 * var(--lt-u));
}

/* Sobre preto o hover padrão (preto) sumiria: o destaque vira branco. */
.bl-event .lt-btn--accent:hover {
  color: var(--black);
  background-color: var(--white);
}

/* Faixa de losangos do CTA final, em fio de cor sólida. */
.bl-event__band {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(96 * var(--lt-u));
  background:
    repeating-linear-gradient(45deg, transparent 0 calc(22 * var(--lt-u)), #242424 calc(22 * var(--lt-u)) calc(26 * var(--lt-u))),
    repeating-linear-gradient(-45deg, transparent 0 calc(22 * var(--lt-u)), #242424 calc(22 * var(--lt-u)) calc(26 * var(--lt-u)));
}

/* ==========================================================================
   5. Newsletter (amarelo institucional)
   ========================================================================== */
/*
 * O hover do botão preto é amarelo no site: sobre este fundo ele vira vermelho
 * (branco se confundiria com o campo ao lado), com texto e seta brancos.
 */
.bl-news {
  --lt-dark-hover-bg: var(--red);
  --lt-dark-hover-ink: var(--white);
  --lt-dark-hover-icon: none;
  padding: calc(120 * var(--lt-u)) var(--lt-gutter);
  background: var(--yellow);
}

.bl-news__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--lt-u));
  /* 1216, a coluna do site: com 900 o título ia a três linhas com espaço sobrando. */
  max-width: var(--lt-max);
  margin-inline: auto;
  text-align: center;
}

.bl-news h2 {
  max-width: none;
  font-size: calc(80 * var(--lt-u));
  line-height: 0.9;
}

.bl-news__lead {
  max-width: calc(560 * var(--lt-u));
  color: var(--ink);
  font-size: calc(19 * var(--lt-u));
  line-height: 1.5;
}

.bl-news__form {
  display: flex;
  width: min(100%, calc(600 * var(--lt-u)));
  margin-top: calc(16 * var(--lt-u));
}

/* Campo com o ícone de e-mail à esquerda (o mesmo traço reto do formulário da mentoria). */
.bl-news__field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.bl-news__icon {
  position: absolute;
  top: 50%;
  left: calc(20 * var(--lt-u));
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  translate: 0 -50%;
  pointer-events: none;
}

.bl-news__input {
  flex: 1;
  min-width: 0;
  min-height: calc(56 * var(--lt-u));
  padding: 0 calc(20 * var(--lt-u)) 0 calc(50 * var(--lt-u));
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
  font-size: calc(16 * var(--lt-u));
  border: 0;
  border-radius: 0;
  appearance: none;
}

.bl-news__input::placeholder {
  color: var(--gray-600);
  opacity: 1;
}

/* Foco: filete preto na base do campo, por dentro (sem moldura em volta). */
.bl-news__input:focus,
.bl-news__input:focus-visible {
  outline: none;
  box-shadow: inset 0 calc(-3 * var(--lt-u)) 0 var(--black);
}

.bl-news__submit {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
}

.bl-news__feedback {
  max-width: calc(600 * var(--lt-u));
  color: var(--black);
  font-size: calc(16 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

.bl-news__feedback a,
.bl-news__note a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bl-news__feedback a:hover,
.bl-news__note a:hover {
  text-decoration-color: var(--red);
}

/* Aviso de dados: o padrão de todos os formulários do site (o da lista de espera do curso). */
.bl-news__note {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(8 * var(--lt-u));
  max-width: calc(560 * var(--lt-u));
  margin-inline: auto;
  color: var(--gray-700);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
  text-align: left;
}

.bl-news__note img {
  width: calc(14 * var(--lt-u));
  height: calc(14 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(3 * var(--lt-u));
}

.bl-news__note strong {
  color: var(--black);
  font-weight: 500;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1279px) {
  .bl-feature__title {
    font-size: calc(48 * var(--lt-u));
  }
}

@media (max-width: 980px) {
  .bl-hero {
    padding: 80px 48px 64px;
    gap: 40px;
  }

  .bl-hero__lead {
    font-size: 18px;
  }

  /* Fita rolável, sangrando a margem (wireframe: scroll horizontal no celular). */
  .bl-cats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: calc(100% + 96px);
    margin-inline: -48px;
    padding-inline: 48px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bl-cats::-webkit-scrollbar {
    display: none;
  }

  .bl-featured {
    padding-top: 80px;
  }

  .bl-recent {
    padding-bottom: 80px;
  }

  .bl-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .bl-feature__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .bl-feature__body {
    padding: 32px;
  }

  .bl-feature__title {
    font-size: clamp(40px, 7vw, 56px);
  }

  .bl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .bl-card__media {
    height: 220px;
  }

  .bl-event {
    padding-block: 80px;
  }

  .bl-event h2 {
    font-size: clamp(48px, 9vw, 80px);
  }

  .bl-news {
    padding-block: 96px;
  }

  .bl-news h2 {
    font-size: clamp(48px, 9vw, 72px);
  }
}

@media (max-width: 620px) {
  .bl-hero {
    padding: 64px 24px 48px;
  }

  .bl-hero__lead {
    font-size: 16px;
  }

  .bl-cats {
    width: calc(100% + 48px);
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .bl-cat {
    padding: 11px 14px;
    font-size: 12px;
  }

  .bl-featured {
    padding-top: 64px;
  }

  .bl-feature__body {
    gap: 16px;
    padding: 24px;
  }

  .bl-feature__title {
    font-size: clamp(36px, 11vw, 48px);
  }

  .bl-feature__excerpt {
    font-size: 16px;
  }

  .bl-recent {
    padding-bottom: 64px;
  }

  .bl-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bl-recent__foot .bl-more {
    width: 100%;
  }

  .bl-event {
    padding-block: 64px;
  }

  .bl-event__card {
    padding: 64px 24px 128px;
  }

  .bl-event h2 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .bl-event__band {
    height: 72px;
  }

  .bl-news {
    padding-block: 72px;
  }

  .bl-news h2 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .bl-news__lead {
    font-size: 16px;
  }

  .bl-news__form {
    flex-direction: column;
    gap: 8px;
  }

  .bl-news__submit {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-btn img,
  .lt-textlink img,
  .bl-feature__media img,
  .bl-card__media img {
    transition: none;
  }
}