BLOGÃO DO GRÊMIO

(adsbygoogle = window.adsbygoogle || []).push({});

#grid-blogao {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}

/* POST DESTAQUE */
.post-destaque {
grid-column: span 2;
grid-row: span 2;
}

.post-item {
display: block;
text-decoration: none;
background: #fff;
border: 2px solid #0a2a66;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}

.post-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.post-thumb {
position: relative;
}

.post-thumb img {
width: 100%;
height: 200px;
object-fit: cover;
}

/* destaque maior */
.post-destaque .post-thumb img {
height: 100%;
min-height: 420px;
}

.badge {
position: absolute;
top: 10px;
left: 10px;
background: #0a2a66;
color: #fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
}

/* 🔥 TÍTULO SEM CORTE */
.post-title {
padding: 12px;
font-size: 15px;
font-weight: 700;
color: #111;
line-height: 1.4;

/* ESSENCIAL */
display: block;
overflow: visible;
word-break: break-word;
}

/* destaque com mais impacto */
.post-destaque .post-title {
font-size: 20px;
padding: 15px;
}

/* RESPONSIVO */
@media(max-width: 900px){
#grid-blogao {
grid-template-columns: repeat(2, 1fr);
}

.post-destaque {
grid-column: span 2;
grid-row: span 1;
}

.post-destaque .post-thumb img {
min-height: 260px;
}
}

@media(max-width: 500px){
#grid-blogao {
grid-template-columns: 1fr;
}

.post-destaque {
grid-column: span 1;
}
}

function pegarImagemDoConteudo(html){
let img = html.match(/]+src=”([^”>]+)”/);
return img ? img[1] : “https://via.placeholder.com/800×500”;
}

fetch(‘/feeds/posts/default/-/Blog%C3%A3o?alt=json&max-results=9’)
.then(res => res.json())
.then(data => {
let posts = data.feed.entry;
let container = document.getElementById(‘grid-blogao’);

posts.forEach((post, index) => {
let titulo = post.title.$t;
let link = post.link.find(l => l.rel === ‘alternate’).href;
let conteudo = post.content ? post.content.$t : “”;
let imagem = pegarImagemDoConteudo(conteudo);

let destaqueClass = index === 0 ? “post-item post-destaque” : “post-item”;

let item = `

Blogão

${titulo}

`;

container.innerHTML += item;
});
});