@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');
@import url("./footer.css");
@import url("./header.css");

*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}

:root{
  --cor-primaria:#2B2B2F;
  --cor-secundaria:#E3E3E3;
  --cor-terciaria:#D84042;
  --cor-quartenaria:#E9AD4E;
  --cor-de-fundo-alternativa:#3A3A3E;
  --borda-transparente: rgba(227,227,227,0.08);
  --sombra: rgba(0,0,0,0.28);

  --fonte-principal:'Montserrat',sans-serif;
  --fonte-secundaria:'Roboto',sans-serif;

  --radius:14px;
  --radius-sm:10px;
}

body{
  background: 
  radial-gradient(1200px 600px at 50% -10%, var(--sombra), transparent 60%),
  radial-gradient(900px 400px at 90% 0%, var(--sombra), transparent 60%),
  var(--cor-primaria);
  color: var(--cor-secundaria);
  font-family: var(--fonte-secundaria);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

main{
  max-width: 1200px;
  margin: 2.5rem auto 3.5rem;
  padding: 0 1.25rem;
}

.section-title{
  font-family: var(--fonte-principal);
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--cor-secundaria);
  margin: 0.25rem 0 1.25rem;
  position: relative;
  display: inline-block;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.section-title::after{
  content:"";
  display:block;
  height:3px;
  width:56%;
  margin-top:8px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--cor-quartenaria), transparent 80%);
  opacity:.9;
}

.publicacoes-destaque{ margin-bottom: 1.75rem; }
.publicacoes-destaque .container{
  background: linear-gradient(180deg, rgba(233,173,78,0.06), rgba(233,173,78,0.00));
  border: 1px solid var(--borda-transparente);
  border-radius: var(--radius);
  padding: 1.25rem;
}
#titulo-destaque{
  font-family: var(--fonte-principal);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-bottom: 1rem;
  letter-spacing: .3px;
}

.featured-container .featured-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px var(--sombra);
  border-color: rgba(233,173,78,0.25);
}
.featured-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.featured-card .featured-content{ padding:.9rem .9rem 1.05rem; }
.featured-card .featured-title{
  font-family: var(--fonte-principal);
  font-weight:700;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  color: var(--cor-secundaria);
  margin-bottom: .5rem;
}
.featured-card .featured-excerpt{ font-size:.95rem; color:var(--cor-secundaria); opacity:.95; }

.outros-artigos{ margin-top: 1.25rem; }

.blog-posts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.card{
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.08)) , var(--cor-de-fundo-alternativa);
  border: 1px solid var(--borda-transparente);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  outline-offset: 3px;
  min-height: 100%;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px var(--sombra);
  border-color: rgba(233,173,78,0.22);
}
.card:focus-within{ outline: 3px solid var(--cor-quartenaria); }

.card time{
  font-weight: 700;
  color: var(--cor-quartenaria);
  font-family: var(--fonte-principal);
  font-size: .9rem;
  margin-bottom: .6rem;
}

.card-title{
  font-family: var(--fonte-principal);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: .6rem;
  color: var(--cor-secundaria);
  letter-spacing: .2px;
}

.card-image{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  margin: .25rem 0 .7rem;
  border: 1px solid var(--borda-transparente);
}

.card-summary{
  font-size: 1rem;
  color: var(--cor-secundaria);
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin-bottom: .9rem;
  opacity: .95;
}

.btn-leia-mais{
  align-self: stretch;
  text-align: center;
  background: linear-gradient(180deg, var(--cor-quartenaria), var(--cor-quartenaria));
  color: var(--cor-primaria);
  font-family: var(--fonte-principal);
  font-weight: 800;
  font-size: 1rem;
  padding: .7rem 1rem;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: filter .18s ease, transform .06s ease;
}
.btn-leia-mais:hover{ filter: brightness(1.04); }
.btn-leia-mais:active{ transform: translateY(1px); }
.btn-leia-mais:focus{ outline: 3px solid var(--cor-terciaria); }

.pagination{ margin-top: 2rem; text-align: center; }
.pagination ul{
  list-style: none; padding: 0;
  display: inline-flex; gap: .6rem; flex-wrap: wrap;
  background: var(--cor-quartenaria);
  border: 1px solid var(--borda-transparente);
  border-radius: 999px;
  padding: .4rem;
}
.pagination a{
  text-decoration: none;
  font-family: var(--fonte-principal);
  font-weight: 700;
  color: var(--cor-primaria);
  background: var(--cor-secundaria);
  padding: .55rem 1rem;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .06s ease;
  display: inline-block;
}
.pagination a:hover{ transform: translateY(-1px); }
.pagination a[aria-current="page"]{
  background: linear-gradient(180deg, var(--cor-quartenaria), var(--cor-quartenaria));
  color: var(--cor-de-fundo-alternativa);
  cursor: default; pointer-events: none;
}

@media (max-width: 1024px){
  .featured-container{ grid-template-columns: repeat(2, 1fr); }
  .blog-posts{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  main{ margin: 1.5rem auto 2.5rem; }
  .featured-container{ grid-template-columns: 1fr; }
  .blog-posts{ grid-template-columns: 1fr; }
  .btn-leia-mais{ align-self: stretch; }
}