/* ==========================================================================
   KROTAR — Blog section (+ "about-visual" editorial teaser)
   Medium visual intensity: localized blue light aimed at the featured
   article, never covering the whole section. No waves, no large blue
   surfaces, no effect stronger than the hero.
   ========================================================================== */

.blog-glow-a {
    top: -60px;
    left: -60px;
    width: 480px;
    height: 480px;
}

.blog-glow-b {
    bottom: -80px;
    right: -60px;
    width: 520px;
    height: 520px;
}

.blog-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-2);
}

/* Two-column layout — text 60-65% / cover 35-40% — shared by the featured
   card and, via .blog-secondary-list .blog-card further down, the two
   secondary cards. Fixed height so every card (and every cover) lines up
   at exactly the same size regardless of how long each excerpt/title is;
   .blog-card-desc/.blog-featured-desc are line-clamped to 3 lines so text
   never overflows that fixed height. */
.blog-featured {
    position: relative;
    height: 320px;
    padding: var(--space-6);
    display: grid;
    grid-template-columns: 5fr 3fr;
    align-items: stretch;
    gap: var(--space-7);
    border-color: rgba(0, 174, 239, 0.28);
}

.blog-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

/* The photo's frame: fixed to the row height, with its own inner padding
   so the image never touches the border, and centered content so a
   photo that doesn't exactly match this box's proportions (object-fit:
   contain below) is never cropped — it's shown whole and centered, with
   any leftover space distributed evenly on the sides it needs it. */
.blog-card-media {
    position: relative;
    z-index: 1;
    height: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Soft halo behind the featured article only — this is what should draw
   the eye, not a large blue wash across the section. */
.blog-featured-glow {
    position: absolute;
    top: -20%;
    right: -15%;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    filter: blur(90px);
    background: radial-gradient(circle, rgba(0, 145, 255, 0.28) 0%, transparent 70%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

/* Listado completo (/blog/index.html): tarjetas verticales en rejilla
   (.blog-index-grid), sin .blog-card-media — la portada sigue siendo un
   bloque 16:9 en la parte superior, sin tocar. */
.blog-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
}

/* Página de artículo individual (blog/<slug>/index.html): imagen de
   cabecera a ancho completo, altura acotada y sin recortar nunca al
   sujeto — mismo criterio de "nunca cortar personas" que en las
   tarjetas de la landing, aunque este contexto es un elemento suelto,
   no una tarjeta. */
.blog-article-cover {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    object-position: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    background: rgba(255, 255, 255, 0.02);
}

/* Landing (destacada + secundarias): dentro de .blog-card-media.
   object-fit: contain (no cover) a propósito — son retratos corporativos
   y no deben recortarse nunca (nunca cortar una cabeza ni el sujeto
   principal). La imagen se escala para caber entera dentro del marco y
   queda centrada ahí, sin estirarse ni deformarse. Mientras no exista
   imagen real, build-blog.js renderiza un placeholder con esta misma
   clase + .blog-image-placeholder. */
.blog-card-media .blog-featured-image,
.blog-card-media .blog-card-image {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border: none;
    border-radius: 0;
}

.blog-image-placeholder,
.blog-card-media .blog-image-placeholder {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    border-style: dashed;
    background: rgba(255, 255, 255, 0.025);
    color: var(--color-text-dim);
}

.blog-category {
    position: relative;
    z-index: 1;
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-cyan);
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(0, 174, 239, 0.3);
    border-radius: var(--radius-pill);
    background: rgba(0, 174, 239, 0.06);
}

.blog-featured-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.25;
    color: var(--color-text);
}

.blog-featured-desc {
    position: relative;
    z-index: 1;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--color-text-body);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.blog-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-shrink: 0;
    margin-top: auto;
    padding-top: var(--space-3);
}

.blog-date {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-text-dim);
}

.blog-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-cyan);
    text-decoration: none;
    white-space: nowrap;
}

.blog-link svg {
    transition: transform var(--duration-base) var(--ease-premium);
}

.blog-link:hover svg {
    transform: translateX(4px);
}

.blog-secondary-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.blog-card {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

/* Landing secondary cards only — same fixed height, same two-column
   layout and the same padding as .blog-featured, so both the card box
   and the cover photo inside line up at exactly the same size across all
   three cards. The full listing page's cards (.blog-index-grid, plain
   .blog-card above) are untouched. */
.blog-secondary-list .blog-card {
    flex: none;
    height: 320px;
    padding: var(--space-6);
    display: grid;
    grid-template-columns: 5fr 3fr;
    align-items: stretch;
    gap: var(--space-7);
}

.blog-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--color-text);
}

.blog-card-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-body);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.blog-card .blog-link {
    font-size: 0.82rem;
}

/* Listado completo (blog/index.html) — rejilla que crece con el número de
   artículos, a diferencia de blog-layout (destacado + lista), pensada solo
   para la vista resumida de la landing. */
/* Same "no hero above, header always in is-scrolled state" case as
   .legal-section (style.css): the listing page's section is the very
   first element on the page, so it needs its own clearance instead of
   the shared .section top padding used mid-page in the landing. */
.blog-index-section {
    padding-top: 6rem;
}

.blog-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-2);
}

.blog-cta {
    margin-top: var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 980px) {
    /* Same breakpoint as the "Nosotros" two-column layout below: stack
       text above cover instead of squeezing a 35-40% image column into a
       narrow width. The fixed desktop height is dropped here on purpose
       — forcing it while stacked would clip the text. */
    .blog-featured,
    .blog-secondary-list .blog-card {
        height: auto;
        grid-template-columns: 1fr;
    }

    .blog-card-media {
        height: 220px;
    }

    /* Below the stacked "Nosotros" layout, drop the desktop 4:5 ratio
       (sections.css) so the panel sizes to the cover photo's own 1:1
       ratio instead — .about-visual-image fills it at width:100%/
       height:100%, so the panel ends up exactly photo-shaped. */
    .about-visual {
        aspect-ratio: auto;
    }
}

@media (max-width: 640px) {
    .blog-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .blog-featured,
    .blog-card,
    .blog-secondary-list .blog-card {
        padding: var(--space-5) var(--space-4);
    }
}