/* ==========================================================================
   Lutz Ferrando · lf-blogpost.css
   Rediseño del POST individual de blog (artículo editorial premium).
   Se carga SOLO cuando template == 'blog-post' (ver layouts/layout.tpl).

   FUENTE DE VERDAD DE MARCA: /rediseno/estilo.css (prototipo del home).
   Esta hoja NO redeclara los tokens de marca: ya están disponibles acá
   porque static/lf-shell.css (--verde*, --tinta*, --gris, --linea, --hueso,
   --crema, --bronce*, --radio, --radio-lg, --sombra*, --sans, --display,
   --ease) y static/lf-global.css (--beige-sec) se cargan ANTES en
   layouts/layout.tpl para template != 'home'. Se consumen con var(...).

   SIN reset global `* {}` (rompería Morelia / la página de sucursales):
   todo acá abajo está scopeado a `.lf-blogpost` y sus descendientes, o a
   clases nativas puntuales del componente de blog (.fade-in, .img-absolute,
   .user-content) que YA existen en el theme y no se redefinen, solo se usan.

   GOTCHA importante (heredado de lf-shell.css): en páginas que NO son home,
   `.btn` es una clase NATIVA de Morelia (selector de cantidad, mostrar
   contraseña, WhatsApp flotante) — nunca se usa `.btn`/`.btn--primario`
   acá; los CTA usan `.lf-btn`/`.lf-btn--primario`, ya definidos y cargados
   por lf-shell.css en TODAS las páginas internas.
   ========================================================================== */

/* ============================================================
   0. WRAPPER
   ============================================================ */
.lf-blogpost {
  display: block;
}

/* ============================================================
   1. CABECERA — kicker/breadcrumbs + título grande centrado
   ============================================================ */
.lf-blogpost__cabecera {
  background: linear-gradient(180deg, var(--agua-2), transparent 130%);
  padding: 12px 0 4px;
}
.lf-blogpost__cabecera-in {
  max-width: 900px;
}

/* page-header.tpl siempre imprime text-center: se abraza ese centrado y se
   lo convierte en cabecera editorial (breadcrumbs = eyebrow, h1 = título). */
.lf-blogpost__ph {
  padding: 48px 0 36px !important;
}
@media (max-width: 560px) {
  .lf-blogpost__ph { padding: 34px 0 24px !important; }
}

/* Breadcrumbs nativos (snipplets/breadcrumbs.tpl) reestilizados como
   eyebrow/kicker editorial: mismo lenguaje visual que el "kicker" del home
   (uppercase + tracking + guioncito), con el guiño bronce (herencia 1878)
   SOLO en el guioncito decorativo (::before, no es texto). El texto real
   de las breadcrumbs usa gris/tinta-2 (AA 4.5:1 verificado sobre blanco/
   hueso) — el bronce #B08D57 sobre fondo claro da ~3.1:1 y no alcanza AA
   para texto normal de 12px, por eso no se usa como color de letra acá. */
.lf-blogpost__ph .breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris);
  margin-bottom: 18px;
}
.lf-blogpost__ph .breadcrumbs::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--bronce);
}
.lf-blogpost__ph .breadcrumbs .crumb { color: var(--gris); }
.lf-blogpost__ph .breadcrumbs .crumb:hover { color: var(--verde-txt); }
.lf-blogpost__ph .breadcrumbs .crumb.active { color: var(--tinta-2); }
.lf-blogpost__ph .breadcrumbs .separator { margin: 0 2px; color: var(--gris); opacity: .5; }

.lf-blogpost__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--tinta);
  max-width: 20ch;
  margin: 0 auto;
}

/* ============================================================
   2. CUERPO — firma + meta (fecha, vía componente nativo) + hero + rte
   ============================================================ */
/* .lf-blogpost__firma y .lf-blogpost__fecha (esta última la imprime el
   componente nativo, ver más abajo) son hermanos directos acá adentro:
   se centra el PAR como grupo con text-align en el contenedor y cada uno
   queda inline-flex para alinear su propio separador "·"; así conviven
   en la misma línea visual sin envolverlos en un div extra. El cuerpo de
   lectura (.lf-blogpost__rte, más abajo) resetea text-align a la
   izquierda de forma explícita para no heredar este centrado. */
.lf-blogpost__cuerpo {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 0 88px;
  text-align: center;
}

/* Firma editorial fija de marca (no hay post.author expuesto por el
   componente nativo blog/blog-post-content en este theme: en vez de
   inventar un autor por nota, se usa una firma de marca constante, real
   para todas las notas del blog). */
.lf-blogpost__firma {
  display: inline-flex;
  align-items: center;
  font-size: .86rem;
  font-weight: 500;
  color: var(--tinta-2);
}

/* .lf-blogpost__fecha la imprime el componente nativo (post.date real). */
.lf-blogpost__fecha {
  display: inline-flex;
  align-items: center;
  font-size: .86rem;
  color: var(--gris);
  margin-left: 10px;
}
.lf-blogpost__fecha::before {
  content: "·";
  margin-right: 10px;
  color: var(--linea);
  font-weight: 700;
}

/* Imagen destacada: dato real (post.image), se le agranda el radio y se
   le da aire respecto del meta y del cuerpo. Se conserva "fade-in"
   (clase funcional del lazy-load nativo, static/css/style-critical.scss)
   para no perder la transición de carga ya probada en el resto del theme. */
.lf-blogpost__hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
  margin: 28px auto 48px;
}

/* ============================================================
   3. COLUMNA DE LECTURA — .lf-blogpost__rte (extiende .user-content)
   ============================================================ */
/* .user-content ya trae tipografía base (lf-global.css sección 11):
   tamaño, interlineado, color y links. Acá solo se agregan las piezas
   editoriales que faltan: ancho de lectura, jerarquía de títulos, citas,
   imágenes de cuerpo y capitular. */
.lf-blogpost__rte {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--tinta-2);
  text-align: left; /* blindaje: no hereda el text-align:center de .lf-blogpost__cuerpo */
}
.lf-blogpost__rte > *:first-child { margin-top: 0; }

.lf-blogpost__rte h2,
.lf-blogpost__rte h3,
.lf-blogpost__rte h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--tinta);
  line-height: 1.2;
  margin: 1.7em 0 .6em;
}
.lf-blogpost__rte h2 { font-size: 1.7rem; }
.lf-blogpost__rte h3 { font-size: 1.32rem; }
.lf-blogpost__rte h4 { font-size: 1.1rem; }

.lf-blogpost__rte p { margin: 0 0 1.4em; }
.lf-blogpost__rte ul,
.lf-blogpost__rte ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
}
.lf-blogpost__rte li { margin-bottom: .5em; }
.lf-blogpost__rte li::marker { color: var(--verde-txt); }

.lf-blogpost__rte a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.lf-blogpost__rte hr {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 2.4em auto;
  max-width: 120px;
}

/* Capitular: único guiño bronce dentro del cuerpo, referencia sutil a la
   herencia de la marca (1878) sin forzar el número donde no corresponde. */
.lf-blogpost__rte > p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.4em;
  line-height: .82;
  float: left;
  padding: .04em .09em 0 0;
  color: var(--bronce);
}

/* Citas: se estilizan TODAS las variantes que puede traer el editor rico
   (Tienda Nube exporta <blockquote> desde su WYSIWYG). */
.lf-blogpost__rte blockquote {
  position: relative;
  margin: 2em 0;
  padding: .3em 0 .3em 1.6em;
  border-left: 3px solid var(--bronce);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.lf-blogpost__rte blockquote p { margin: 0; }
.lf-blogpost__rte blockquote cite {
  display: block;
  margin-top: .6em;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: .82rem;
  color: var(--gris);
}

/* Imágenes dentro del cuerpo (galería / fotos del artículo cargadas desde
   el editor del admin): mismo lenguaje visual que la imagen destacada. */
.lf-blogpost__rte img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-xs);
  margin: 2.2em auto;
}
.lf-blogpost__rte figure { margin: 2.2em 0; }
.lf-blogpost__rte figcaption {
  text-align: center;
  font-size: .84rem;
  color: var(--gris);
  margin-top: -1.4em;
}

.lf-blogpost__rte strong { color: var(--tinta); font-weight: 700; }

/* ============================================================
   4. COMPARTIR — 100% client-side (sin variables de post no confirmadas)
   ============================================================ */
.lf-blogpost__compartir {
  max-width: 700px;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
}
.lf-blogpost__compartir-lbl {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.lf-blogpost__compartir-acc {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Reusa .iconbtn (static/lf-shell.css) tal cual usa el header: mismo
   tamaño, radio y hover que el resto del sitio. */
.lf-share[data-share="whatsapp"]:hover { background: #E9F9EF; color: #25D366; }
.lf-share[data-share="facebook"]:hover { background: #EAF2FF; color: #1877F2; }
.lf-share[data-share="twitter"]:hover { background: var(--tinta); color: #fff; }
.lf-blogpost__compartir-ok {
  font-size: .82rem;
  font-weight: 500;
  color: var(--verde-txt);
}

/* ============================================================
   5. MÁS NOTAS — cards reales (component blog/blog-post-item) o CTA
   ============================================================ */
.lf-blogpost__mas {
  padding: 80px 0 96px;
  background: var(--beige-sec);
}
.lf-blogpost__mas-head {
  max-width: 620px;
  margin: 0 auto 44px;
  text-align: center;
}
.lf-blogpost__mas-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--verde-txt);
}
.lf-blogpost__mas-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
  opacity: .55;
}
.lf-blogpost__mas-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -.03em;
  margin-top: 14px;
  color: var(--tinta);
}

.lf-blogpost__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
/* Salvavidas: si por alguna razón entran 4 tarjetas (post actual no
   detectado entre las primeras del listado), se recorta a 3 en pantalla
   en vez de romper la grilla de 3 columnas. */
.lf-blogpost__grid > :nth-child(n+4) { display: none; }

.lf-relcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-xs);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.lf-relcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
}
/* position:relative es necesario (ancla real para .img-absolute, que el
   componente nativo posiciona en absolute); el alto de la caja lo resuelve
   el propio componente con un padding-bottom inline según el aspect ratio
   real de la foto (mismo mecanismo que ya usa el listado en blog.tpl) —
   por eso NO se fuerza un aspect-ratio propio acá, para no duplicar/pelear
   con ese cálculo. El degradé es el fondo visible mientras carga la imagen. */
.lf-relcard__fig {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, var(--agua-2), var(--menta));
}
.lf-relcard__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}
.lf-relcard__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.lf-relcard__summary {
  font-size: .88rem;
  color: var(--gris);
  margin-top: 8px;
  line-height: 1.55;
}
.lf-relcard__link {
  margin-top: auto;
  padding-top: 16px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--verde-txt);
  align-self: flex-start;
}
.lf-relcard__link:hover { color: var(--verde-nte); }

.lf-blogpost__mas-cta {
  display: flex;
  justify-content: center;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .lf-blogpost__grid { grid-template-columns: repeat(2, 1fr); }
  .lf-blogpost__grid > :nth-child(n+3) { display: none; }
  .lf-blogpost__mas { padding: 60px 0 72px; }
}
@media (max-width: 560px) {
  .lf-blogpost__title { max-width: 100%; }
  .lf-blogpost__firma, .lf-blogpost__fecha { font-size: .8rem; }
  .lf-blogpost__rte { font-size: 1.02rem; }
  .lf-blogpost__rte blockquote { font-size: 1.12rem; padding-left: 1.2em; }
  .lf-blogpost__rte > p:first-of-type::first-letter { font-size: 2.8em; }
  .lf-blogpost__hero { aspect-ratio: 4 / 3; border-radius: var(--radio); margin: 22px auto 34px; }
  .lf-blogpost__grid { grid-template-columns: 1fr; max-width: 420px; }
  .lf-blogpost__grid > :nth-child(n+2) { display: none; }
  .lf-blogpost__compartir { gap: 12px; }
}

/* ============================================================
   7. ACCESIBILIDAD / MOTION
   ============================================================ */
:where(.lf-share, .lf-relcard, .lf-relcard__link, .lf-blogpost__ph .crumb):focus-visible {
  outline: 2px solid var(--verde-txt);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .lf-relcard { transition: none; }
}