/* Blog rediseño — medidas del frame de Figma PAMA-Blog (node 455:402). Ver
   context/specs/0022-blog-rediseno.md. Reutiliza .blog-grid, .news-card,
   .byline, .tags y .more-link ya definidos en main.css. Ajustes de la
   revisión 25_9 (lienzo blanco, espaciados, secciones, cards): spec 0032. */

body.blog-page{background:#fff}

.blog-hero{padding:100px 0 80px;text-align:center}
.blog-hero h1{font-size:71px;line-height:1.11;color:var(--color-primary);margin:0 0 14px}
.blog-hero-lede{font-size:28px;color:var(--color-ink);max-width:960px;margin:0 auto 26px}

.blog-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 134px}
.blog-filter{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;border:1px solid #d9d9d9;border-radius:17px;background:#fff;color:var(--color-primary);font-size:15px;font-weight:600}
.blog-filter.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

.blog-search{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px}
.blog-search-label{display:flex;align-items:center;gap:12px;margin:0;font-size:24px;font-weight:700;color:var(--color-ink)}
.blog-search-label img{width:24px;height:24px;filter:brightness(0)}
.blog-search-row{display:flex;align-items:center;gap:32px}
.blog-search-row input{height:50px;width:434px;max-width:70vw;border:1px solid var(--color-ink);border-radius:8px;padding:0 16px;font-size:16px}
.blog-search-row button{height:50px;padding:0 12px;border:0;background:transparent;color:var(--color-ink);font-size:20px;cursor:pointer}

.blog-heading{font-size:74px;font-weight:100;text-transform:uppercase;color:var(--color-ink);margin:0 0 28px;line-height:1.2}

.blog-recent{background:#f3f9fa;padding:80px 0 70px}
.blog-recent .blog-heading{text-align:center}
.blog-recent-grid{display:grid;grid-template-columns:550px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:24px;max-width:1031px;margin:0 auto}
.blog-recent-card{display:block;background:#fff;border-radius:8px;overflow:hidden;color:inherit}
.blog-recent-card.is-featured{grid-column:1;grid-row:1/3;display:flex;flex-direction:column}
.blog-recent-card.is-featured>img{width:100%;height:250px;object-fit:cover}
.blog-recent-card.is-featured>div{padding:20px 12px 16px}
.blog-recent-card.is-compact{grid-column:2;padding:12px 12px 16px;display:flex;flex-direction:column;justify-content:center}
.blog-recent-card h3{font-size:24px;font-weight:500;line-height:1.31;margin:0 0 8px}
.blog-recent-excerpt{font-size:16px;line-height:1.31;color:var(--color-ink);margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-recent-card .byline{margin:0 0 12px}
.blog-recent-card .author-photo-placeholder{display:inline-block;width:20px;height:20px;border-radius:50%;background:#d9d9d9}

.blog-section{padding:10px 0 80px}
.blog-section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #6d9ca6;padding-bottom:16px;margin-bottom:56px}
.blog-section-heading .blog-heading{margin:0}
/* "Leer más" inline con el título: texto + flecha simple, sin el margin-top:60px de main.css. */
.blog-section-heading .more-link{flex:0 0 auto;margin:0;gap:14px;color:var(--color-primary);font-size:16px;font-weight:400}
.more-link-arrow{width:20px;height:20px;flex:0 0 20px}
.blog-section .blog-grid{margin:0}

/* Cards de las secciones del blog (y de los resultados filtrados), solo en esta página:
   borde suave, padding de 12px y título centrado en su bloque de 96px como en Figma. */
.blog-section .news-card,.blog-results .news-card{border:1px solid #d9d9d9;border-radius:8px;box-shadow:0 1px 3px rgba(28,27,31,.08)}
.blog-section .news-card>div,.blog-results .news-card>div{padding:12px}
.blog-section .news-card h3,.blog-results .news-card h3{display:flex;align-items:center;overflow:hidden;margin:0 0 22px}
.blog-section .news-card .byline,.blog-results .news-card .byline{margin-bottom:40px}
/* Los flyers de eventos tienen el título arriba: recortar desde arriba, no desde el centro. */
.blog-section-events .news-card>img{object-position:center top}

.blog-ad-placeholder{background:var(--color-surface-soft);border:1px dashed #d9d9d9;border-radius:8px;padding:16px 24px;margin:40px 0;min-height:120px;text-align:left}
.blog-ad-placeholder .ad-label{font-size:11px;color:var(--color-neutral-600);text-transform:uppercase;margin:0 0 8px}
.blog-ad-placeholder p:last-child{margin:0;font-size:16px;color:var(--color-ink);text-align:center}
.blog-ad{display:block;margin:40px 0}
.blog-ad img{width:100%;height:auto;border-radius:8px}
.blog-section .blog-ad-placeholder,.blog-section .blog-ad,.blog-section .blog-donation-banner{margin:122px 0 0}

.blog-donation-banner{display:flex;align-items:center;gap:28px;background:#fef2e0;border-radius:8px;padding:24px 16px 24px 96px;min-height:120px;margin:40px 0}
.blog-donation-banner img{width:48px;height:48px;flex:0 0 48px}
.blog-donation-copy{display:flex;align-items:center;gap:28px;flex:1}
.blog-donation-copy strong{flex:0 0 auto;font-size:28px;font-weight:700;color:var(--color-ink);white-space:nowrap}
.blog-donation-copy span{max-width:347px;font-size:16px;line-height:1.31;color:var(--color-ink)}
.blog-donation-button{flex:0 0 335px;margin-left:16px;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 32px;border-radius:8px;background:var(--color-primary);color:#fff;font-size:15px;font-weight:600}

@media(max-width:1190px){
  .blog-donation-banner{padding-left:40px}
  .blog-donation-button{flex-basis:auto;margin-left:0}
}
@media(max-width:1000px){
  .blog-hero{padding:90px 0 48px}
  .blog-hero h1{font-size:52px}
  .blog-hero-lede{font-size:22px}
  .blog-filters{margin-bottom:64px}
  .blog-recent-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .blog-recent-card.is-featured,.blog-recent-card.is-compact{grid-column:1;grid-row:auto}
  .blog-heading{font-size:52px}
  .blog-section{padding-top:24px}
  .blog-section .blog-ad-placeholder,.blog-section .blog-ad,.blog-section .blog-donation-banner{margin-top:64px}
  .blog-donation-banner{flex-wrap:wrap;text-align:center;justify-content:center;padding:24px 40px}
  .blog-donation-copy{flex-direction:column;gap:6px;flex-basis:100%}
  .blog-donation-copy strong{white-space:normal}
  .blog-donation-copy span{max-width:none}
}
@media(max-width:640px){
  .blog-hero{padding:64px 0 36px}
  .blog-hero h1{font-size:38px}
  .blog-hero-lede{font-size:18px}
  .blog-filters{margin-bottom:40px}
  .blog-search{flex-direction:column;gap:16px}
  .blog-search-row{gap:8px;width:100%}
  .blog-search-row input{width:100%;max-width:none}
  .blog-heading{font-size:38px}
  .blog-section{padding-bottom:56px}
  .blog-section .news-card .byline,.blog-results .news-card .byline{margin-bottom:16px}
  .blog-section-heading{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:32px}
  .blog-section .blog-ad-placeholder,.blog-section .blog-ad,.blog-section .blog-donation-banner{margin-top:48px}
  .blog-donation-banner{padding:20px}
  .blog-donation-button{width:100%}
}