/* ===== Página Blog =====
   Reproduce el blog de TGA (tgaagro.uy/blog) con la tipografía y la paleta de
   esta landing. Los posts llegan por fetch al endpoint público, así que acá
   sólo vive el diseño: el HTML lo arma js/blog.js. */

/* El navbar es fixed y el logo mide 110px: sin este colchón el título queda
   tapado. Mismo criterio que .precios-header. */
.blog-header {
    padding-top: 11rem;
}

.blog-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tga-kale);
    margin-bottom: 0;
}

.blog-intro {
    color: #6b7280;
    font-size: 1.05rem;
}

/* ===== Pills de categorías ===== */
.blog-pill {
    border-radius: 50rem;
    padding: .45rem 1.35rem;
    margin: 0 .75rem .5rem 0;
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid var(--tga-gris);
    color: #4b5563;
    background: #fff;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.blog-pill:hover {
    border-color: var(--tga-carrot);
    color: var(--tga-carrot);
}
.blog-pill.is-active {
    background: var(--tga-carrot);
    border-color: var(--tga-carrot);
    color: #fff;
}

/* ===== Imágenes =====
   16/10 en las tarjetas y en el destacado, como el blog de TGA. */
.blog-img {
    border-radius: 1.5rem;
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}

/* Post sin imagen: en vez de un hueco, la marca sobre el verde TGA. */
.blog-img-placeholder {
    border-radius: 1.5rem;
    width: 100%;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--tga-kale), var(--tga-brooooli));
    color: rgba(255, 255, 255, .35);
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: .05em;
}
.blog-featured .blog-img-placeholder { font-size: 4rem; }

/* ===== Tarjetas ===== */
.blog-card-link { display: block; }
.blog-card-link img,
.blog-card-link .blog-img-placeholder {
    transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card-link:hover img,
.blog-card-link:hover .blog-img-placeholder {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(42, 59, 34, .16);
}

.blog-badge {
    display: inline-block;
    border: 1px solid var(--tga-gris);
    border-radius: 50rem;
    padding: .2rem .7rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tga-brooooli);
}

.blog-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.blog-card-title a { color: var(--tga-kale); }
.blog-card-title a:hover { color: var(--tga-carrot); }

.blog-card-desc {
    color: #6b7280;
    margin-bottom: .5rem;
}

.blog-fecha {
    color: #9ca3af;
    font-size: .85rem;
}

/* ===== Destacado (el primer post) ===== */
.blog-featured .blog-featured-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    margin-bottom: .75rem;
}
.blog-featured .blog-featured-title a { color: var(--tga-kale); }
.blog-featured .blog-featured-title a:hover { color: var(--tga-carrot); }
.blog-featured .lead { color: #4b5563; }

/* ===== Detalle del post ===== */
.blog-post-header { padding-top: 11rem; }

.blog-post-title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--tga-kale);
}

/* El cuerpo viene del editor del admin: se le da un ancho de lectura cómodo y
   se domestican las imágenes y tablas que puedan venir pegadas. */
.blog-post-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #374151;
}
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4 { margin-top: 2rem; margin-bottom: .75rem; }
.blog-post-body p { margin-bottom: 1.1rem; }
.blog-post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 1.25rem 0;
}
.blog-post-body iframe {
    max-width: 100%;
    border-radius: 1rem;
}
.blog-post-body table {
    width: 100%;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
}
.blog-post-body table td,
.blog-post-body table th {
    border: 1px solid var(--tga-gris);
    padding: .5rem .65rem;
}
.blog-post-body a { color: var(--tga-carrot); text-decoration: underline; }

.blog-volver {
    font-weight: 600;
    color: var(--tga-brooooli);
}
.blog-volver:hover { color: var(--tga-carrot); }

@media (max-width: 767px) {
    .blog-header,
    .blog-post-header { padding-top: 8rem; }
}