/*
 * Blog: listado y artículo. Se carga solo en sus páginas (content_for :head),
 * no en public.css, que ya viaja en todas. Tokens de base.css/public.css:
 * Fraunces en los títulos, Hanken Grotesk en el texto, --cream, --ink, --line.
 */

/* ---------- Listado ---------- */
.blog{max-width:var(--maxw);margin:0 auto;padding:44px 34px 88px}
.blog-head{max-width:46rem;margin:0 0 34px}
.blog-head h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:0 0 12px}
.blog-head p{margin:0;color:var(--ink-soft);font-size:1.12rem}
.blog-empty{color:var(--ink-soft)}

/* ---------- Portada: imagen a sangre con el título encima ---------- */
.blog-cover{position:relative;display:flex;align-items:flex-end;min-height:max(22rem,64vh);overflow:hidden;background:var(--ink);color:var(--paper);text-decoration:none}
.blog-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El degradado es lo que garantiza el contraste del texto, sea cual sea la foto:
   casi opaco abajo (donde va el texto) y transparente arriba. */
.blog-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(45,42,38,.9) 0%,rgba(45,42,38,.62) 40%,rgba(45,42,38,0) 75%)}
.blog-cover__inner{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:56px 34px}
.blog-cover__title{color:var(--paper);font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch;margin:14px 0 0;text-wrap:balance}
.blog-cover__intro{max-width:40rem;margin:16px 0 0;font-size:1.16rem;line-height:1.55;color:rgba(255,255,255,.92)}
/* En tarjeta estrecha la fecha y los minutos bajan de línea como piezas
   enteras, no partidos por la mitad. */
.blog-pill>*{white-space:nowrap}
.blog-pill{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:5px 13px;border-radius:999px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:.82rem;font-weight:600;letter-spacing:.02em}

/* Sin imagen: banda crema con el título en tinta. */
.blog-cover--plain{min-height:0;background:var(--cream);color:var(--ink)}
.blog-cover--plain::after{display:none}
.blog-cover--plain .blog-cover__title{color:var(--ink)}
.blog-cover--plain .blog-cover__intro{color:var(--ink-soft)}
.blog-cover--plain .blog-pill{background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);backdrop-filter:none;-webkit-backdrop-filter:none}

/* El destacado del listado: la misma portada, recortada en tarjeta. */
.blog-cover--link{border-radius:22px;min-height:max(20rem,54vh);margin:0 0 44px}
.blog-cover--link .blog-cover__inner{padding:40px}
.blog-cover--link.blog-cover--plain{min-height:0}

/* ---------- Cuadrícula ---------- */
.blog-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px}
.blog-card__link{display:block;color:inherit;text-decoration:none;border-radius:16px}
.blog-card__media{aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--cream-2) var(--ph-photo) center/48px no-repeat}
.blog-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.blog-meta{margin:14px 0 6px;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--greige)}
.blog-card__title{margin:0;font-size:1.45rem;line-height:1.18}
.blog-card__intro{margin:8px 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__link:hover .blog-card__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* Zoom lento de la imagen al pasar por encima. */
.blog-cover--link .blog-cover__img,.blog-card__media img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.blog-cover--link:hover .blog-cover__img,.blog-card__link:hover .blog-card__media img{transform:scale(1.03)}
.blog-cover--link:focus-visible,.blog-card__link:focus-visible,.blog-sibling:focus-visible{outline:3px solid var(--action);outline-offset:4px}

.blog-pager{display:flex;justify-content:space-between;gap:20px;margin-top:60px;font-weight:600}
.blog-pager a{color:var(--maroon);text-decoration:none}
.blog-pager a:hover{color:var(--ink)}
.blog-pager__older{margin-left:auto}

/* ---------- Artículo ---------- */
.blog-draft{margin:0;padding:10px 34px;background:var(--yellow);color:var(--ink);font-weight:600;text-align:center}
.blog-post .crumbs{padding-bottom:16px}
.blog-body{max-width:40rem;margin:60px auto 0;padding:0 24px;font-size:1.12rem;line-height:1.75;overflow-wrap:break-word}
.blog-body>p:first-child{font-size:1.32rem;line-height:1.6;color:var(--ink)}
.blog-body h2{font-size:1.95rem;margin:2.2em 0 .5em}
.blog-body h3{font-size:1.4rem;margin:1.8em 0 .4em}
.blog-body p,.blog-body ul,.blog-body ol{margin:0 0 1.2em}
.blog-body li{margin-bottom:.4em}
.blog-body a{color:var(--maroon);text-underline-offset:3px}
.blog-body a:hover{color:var(--ink)}
/* Las imágenes y las figuras rompen la columna por los lados. */
.blog-body img{display:block;width:calc(100% + 120px);max-width:none;height:auto;margin:2.4em -60px;border-radius:18px}
.blog-body figure{margin:2.4em -60px}
.blog-body figure img{width:100%;margin:0}
.blog-body figcaption{margin-top:10px;font-size:.88rem;color:var(--greige);text-align:center}
.blog-body blockquote{margin:2em 0;padding:4px 0 4px 22px;border-left:3px solid var(--orange);
  font-family:"Fraunces",Georgia,serif;font-size:1.36rem;line-height:1.45;color:var(--ink)}
.blog-body blockquote p:last-child{margin-bottom:0}
.blog-body hr{border:0;border-top:1px solid var(--line);margin:3em 0}

/* Cierre 1: anterior / siguiente. */
.blog-siblings{max-width:var(--maxw);margin:80px auto 0;padding:0 34px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.blog-sibling{display:block;padding:24px 26px;border:1px solid var(--line);border-radius:18px;color:inherit;text-decoration:none;transition:border-color .2s,background .2s}
.blog-sibling:hover{border-color:var(--greige);background:var(--cream)}
.blog-sibling--older{grid-column:1}
.blog-sibling--newer{grid-column:2;text-align:right}
.blog-sibling__label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--greige)}
.blog-sibling__title{display:block;margin-top:8px;font-family:"Fraunces",Georgia,serif;font-size:1.3rem;line-height:1.22}

/* Cierre 2: llamada al directorio. */
.blog-cta{max-width:var(--maxw);margin:48px auto 88px;padding:0 34px}
.blog-cta__box{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:44px;border-radius:22px;background:var(--cream)}
.blog-cta__box h2{margin:0 0 8px;font-size:1.9rem}
.blog-cta__box p{margin:0;max-width:34rem;color:var(--ink-soft)}
.blog-cta__btn{display:inline-flex;align-items:center;padding:13px 24px;border-radius:999px;background:var(--action);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s}
.blog-cta__btn:hover{background:var(--action-hover)}

/* ---------- Pantallas ---------- */
@media (max-width:900px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .blog-body img,.blog-body figure{width:100%;margin-left:0;margin-right:0}
}
@media (max-width:600px){
  .blog{padding:28px 16px 64px}
  .blog-grid{grid-template-columns:1fr}
  .blog-card__media{aspect-ratio:4/3}
  .blog-cover__inner{padding:36px 16px}
  .blog-cover--link .blog-cover__inner{padding:26px 22px}
  .blog-body{padding:0 16px;margin-top:40px}
  .blog-siblings{grid-template-columns:1fr;padding:0 16px}
  .blog-sibling--older,.blog-sibling--newer{grid-column:auto;text-align:left}
  .blog-cta{padding:0 16px}
  .blog-cta__box{padding:28px}
  .blog-draft{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){
  .blog-cover--link .blog-cover__img,.blog-card__media img,.blog-sibling,.blog-cta__btn{transition:none}
  .blog-cover--link:hover .blog-cover__img,.blog-card__link:hover .blog-card__media img{transform:none}
}