/*
 * E-Iure — página Blog (maqueta «Blog — 1»). Se carga después de home.css e inner.css.
 */

.eh .mhero{padding:90px 0 78px}
.eh .topics{justify-content:center;padding:36px 0 30px}

/* Cuadrícula tipo revista: la primera entrada visible ocupa todo el ancho (destacada) */
.eh .bgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:90px}
.eh .bcard{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .22s,box-shadow .22s}
.eh .bcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.09)}
.eh .bcard:focus-visible{outline:3px solid var(--green);outline-offset:3px}
/* Tratamiento uniforme de las portadas */
.eh .bcard .cov{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#2f7d4a,#0f2e1e)}
.eh .bcard .cov img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04);transition:transform .6s ease}
.eh .bcard .cov::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,46,30,0) 55%,rgba(15,46,30,.28))}
.eh .bcard:hover .cov img{transform:scale(1.04)}
.eh .bcard .nocov::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 30% 30%,rgba(122,201,86,.3),transparent 60%)}
.eh .bcard .bd{display:flex;flex-direction:column;flex:1;padding:22px}
.eh .bcard .cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.eh .bcard .bt{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;margin:8px 0 10px;letter-spacing:-.01em}
.eh .bcard .meta{margin-top:auto;font-size:13px;color:#7a7468}
.eh .bcard .more{display:none}

.eh .bitem.is-feature{grid-column:1/-1}
.eh .is-feature .bcard{display:grid;grid-template-columns:1.1fr .9fr;border-radius:22px}
.eh .is-feature .cov{aspect-ratio:auto;min-height:380px}
.eh .is-feature .bd{padding:clamp(28px,4vw,50px);justify-content:center}
.eh .is-feature .cat{font-size:12px}
.eh .is-feature .bt{font-size:clamp(28px,3.4vw,42px);margin:10px 0 14px;line-height:1.1}
.eh .is-feature .meta{margin-top:0;font-size:14px}
.eh .is-feature .more{display:inline-flex;align-self:flex-start;margin-top:24px}

.eh .empty{padding:20px 0 60px;color:#8a8478;text-align:center}

@media(max-width:1024px){.eh .bgrid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .eh .bgrid{grid-template-columns:1fr}
  .eh .is-feature .bcard{grid-template-columns:1fr}
  .eh .is-feature .cov{min-height:220px;aspect-ratio:16/10}
}
/* ---------------------------------------------------------------------------
   BLOG EN MÓVIL
   Esta página se había quedado con las medidas de escritorio y pedía casi nueve
   pantallas de desplazamiento. Aquí se adapta SIN quitar contenido: siguen las
   14 entradas con su foto, categoría, titular y firma, y los seis filtros.
   --------------------------------------------------------------------------- */
@media(max-width:560px){
  /* ----- Cabecera ----- */
  .eh .blog-page .mhero{padding:50px 0 36px}
  .eh .blog-page .mhero h1{font-size:38px}
  .eh .blog-page .mhero p{font-size:15.5px;line-height:1.55;margin-top:12px}

  /* ----- Filtros de categoría -----
     Los seis se partían en tres renglones. En tira que se arrastra con el dedo
     caben en una línea, con el último asomando. Mismo patrón que en Members. */
  .eh .topics{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 -16px;padding:16px 16px 14px}
  .eh .topics::-webkit-scrollbar{display:none}
  .eh .topics .chip{flex:none;font-size:12.5px;padding:7px 14px}

  /* ----- Listado ----- */
  .eh .bgrid{gap:10px;padding-bottom:42px}

  /* Las entradas normales pasan a fila: miniatura a la izquierda y el texto al
     lado. No las puse a dos por fila a propósito: los titulares de este blog
     son largos (el mayor tiene 84 caracteres) y en media columna se partirían
     en siete renglones, que queda peor y encima no ahorra. */
  /* El relleno va en la tarjeta y no en el texto: así la miniatura tampoco toca
     los bordes en las entradas de titular corto, donde la foto llenaba la
     tarjeta de lado a lado. */
  .eh .bitem:not(.is-feature) .bcard{display:grid;grid-template-columns:104px 1fr;
    column-gap:12px;align-items:center;border-radius:14px;height:auto;padding:9px}
  .eh .bitem:not(.is-feature) .cov{grid-column:1;grid-row:1;aspect-ratio:4 / 3;border-radius:9px}
  .eh .bitem:not(.is-feature) .bd{grid-column:2;grid-row:1;padding:0 2px 0 0;flex:none}
  .eh .bitem:not(.is-feature) .cat{font-size:10px}
  .eh .bitem:not(.is-feature) .bt{font-size:15px;line-height:1.25;margin:4px 0 5px}
  .eh .bitem:not(.is-feature) .meta{font-size:11.5px;margin-top:0}

  /* La destacada se queda a todo el ancho: es la entrada más reciente y le da
     principio a la página. */
  .eh .is-feature .bcard{border-radius:16px}
  .eh .is-feature .cov{min-height:0;aspect-ratio:16 / 9}
  .eh .is-feature .bd{padding:16px}
  .eh .is-feature .cat{font-size:11px}
  .eh .is-feature .bt{font-size:21px;line-height:1.2;margin:6px 0 8px}
  .eh .is-feature .meta{font-size:12.5px}
  .eh .is-feature .more{margin-top:12px;padding:11px 20px;font-size:13.5px}

  .eh .empty{padding:16px 0 36px}
}

@media(prefers-reduced-motion:reduce){.eh .bcard,.eh .bcard .cov img{transition:none}}