/**
 * article.css — Tema felipeonate
 *
 * Estilos del Single Article (single.php). Se encola en is_singular('post').
 *
 * IMPORTANTE: blog.css NO se encola en esta plantilla, así que los
 * componentes compartidos que el single necesita (.c-article-card en su
 * variante compacta, para el sidebar de relacionados) se redeclaran acá.
 * Mismo criterio que siguió case-study.css con .c-badge en BL-23.
 *
 * Convenciones: ver CLAUDE.md y DESIGN.md.
 *
 * BL-25
 *
 * @package felipeonate
 */


/* ============================================================
   ANCHO DEL MAINFRAME
   .container es Bootstrap puro (sin override global en el tema): en
   xxl llega a 1320px. Single Project NO usa .container — usa un ancho
   fijo propio de 1120px con 24px de padding lateral (.c-case-*__inner
   en case-study.css). Se replica ese mismo número acá, scoped a
   .single-post para no tocar el .container que usan el resto de
   plantillas (header, footer, home.php, archive.php, etc.).
   ============================================================ */
.single-post > .container {
  max-width: 1120px;
  padding-left: 24px;
  padding-right: 24px;
}


/* ============================================================
   CABECERA DEL ARTÍCULO
   ============================================================ */
.single-post__header {
  max-width: 760px;
  padding: 58px 0 28px;
}

/* Breadcrumb — mismo tratamiento que .c-breadcrumb de case-study.css */
.single-post .c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-gris-500);
  margin-bottom: 24px;
}

.single-post .c-breadcrumb a {
  font-weight: var(--fw-bold);
  color: var(--color-turquesa-500);
  text-underline-offset: 2px;
  transition: color 0.22s ease;
}

.single-post .c-breadcrumb a:hover {
  color: var(--color-turquesa-600);
  text-decoration: underline;
}

.single-post .c-breadcrumb__sep {
  color: var(--color-gris-200);
}

/* Nivel actual del breadcrumb: no es enlace, así que no lleva color de
   marca ni subrayado. En Single Project (case-study.css) tampoco lleva
   peso distinto — solo gris-500, igual que el resto del breadcrumb salvo
   los enlaces. Se replica ese mismo criterio acá, sin inventar un peso
   propio. */
.single-post .c-breadcrumb__current {
  color: var(--color-gris-500);
}

.single-post__cat {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-turquesa-600);
  margin-bottom: 10px;
}

/* H1 en Montserrat Bold, no Comfortaa. Sigue el precedente establecido en
   BL-23 para el single de proyecto: el display de marca se reserva a los
   hero de página, no a los titulares de contenido. */
/* Valores idénticos a .single-case-study .c-case-hero__title
   (case-study.css) — Single Article debe leerse tipográficamente igual
   que Single Project. Antes tenía 38px/1.22/margin 14px, aproximado a
   ojo; ahora es el mismo número, no una aproximación. */
.single-post__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-negro);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.single-post__meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-gris-500);
  margin: 0;
}

.single-post__meta-sep {
  margin: 0 6px;
  color: var(--color-gris-200);
}


/* ============================================================
   IMAGEN DESTACADA
   ============================================================ */
.single-post__featured {
  margin: 0 0 40px;
  border-radius: 14px;
  overflow: hidden;
}

.single-post__featured-img {
  display: block;
  width: 100%;
  height: auto;
}


/* ============================================================
   ÍNDICE DE CONTENIDOS
   Panel colapsable. El toggle es <button>; la animación de apertura
   vive en article.js (GSAP). El estado inicial cerrado se declara en
   tres sitios que deben coincidir: aria-expanded del PHP, gsap.set()
   del JS, y este overflow:hidden.
   ============================================================ */
.c-toc {
  margin: 0 0 32px;
  border: 1px solid var(--color-gris-50);
  border-radius: 12px;
  background: var(--color-blanco);
  overflow: hidden;
}

.c-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  background: transparent;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  color: var(--color-negro);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.c-toc__toggle:hover {
  background: var(--color-turquesa-50);
}

.c-toc__toggle:focus-visible {
  outline: 2px solid var(--color-turquesa-500);
  outline-offset: -2px;
}

.c-toc__chevron {
  flex: 0 0 auto;
  color: var(--color-turquesa-500);
  transition: transform 0.28s ease;
}

.c-toc__toggle.is-open .c-toc__chevron {
  transform: rotate(180deg);
}

/* Regla global de main.css: los <i data-lucide> dentro de <a> se fijan en
   14px. Acá el chevron vive en un <button>, así que se declara su tamaño
   explícitamente. */
.c-toc__chevron svg {
  width: 18px;
  height: 18px;
}

.c-toc__panel {
  border-top: 1px solid var(--color-gris-50);
}

.c-toc__list {
  list-style: none;
  margin: 0;
  padding: 14px 18px 16px;
}

.c-toc__item {
  margin: 0 0 8px;
}

.c-toc__item:last-child {
  margin-bottom: 0;
}

/* Lista plana con modificador de nivel en vez de <ul> anidados: más simple
   de generar en PHP (sin estado de apertura/cierre) y el sangrado se
   resuelve acá. */
.c-toc__item--l3 {
  padding-left: 18px;
}

.c-toc__link {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-gris-700);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color 0.18s ease;
}

.c-toc__item--l3 .c-toc__link {
  font-size: 13px;
  color: var(--color-gris-600);
}

.c-toc__link:hover {
  color: var(--color-turquesa-600);
  text-decoration: underline;
}

.c-toc__link:focus-visible {
  outline: 2px solid var(--color-turquesa-500);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ============================================================
   CUERPO DEL ARTÍCULO
   ============================================================ */
/* Valores idénticos a .single-case-study .c-rte p (case-study.css):
   14.5px / line-height 1.72 / gris-700. Antes era 16px/1.75, un tamaño
   de blog genérico sin relación con lo que ya existe en el sitio — la
   consistencia tipográfica entre Single Article y Single Project pesa
   más que el tamaño "estándar" de un post de blog. */
.single-post__content {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--color-gris-700);
}

.single-post__content p {
  margin: 0 0 20px;
  text-wrap: pretty;
}

.single-post__content h2,
.single-post__content h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-negro);
  text-wrap: balance;

  /* Compensa el header sticky (.site-header, z-index 1030) al saltar a un
     ancla desde el índice. Sin esto, el encabezado de destino queda
     tapado por la barra de navegación.
     VERIFICAR en DevTools si cambia el alto real del header. */
  scroll-margin-top: 96px;
}

.single-post__content h2 {
  font-size: 26px;
  line-height: 1.3;
  margin: 40px 0 16px;
}

.single-post__content h3 {
  font-size: 20px;
  line-height: 1.35;
  margin: 32px 0 12px;
}

.single-post__content h2:first-child,
.single-post__content h3:first-child {
  margin-top: 0;
}

.single-post__content strong {
  color: var(--color-negro);
  font-weight: var(--fw-bold);
}

.single-post__content a {
  color: var(--color-turquesa-500);
  text-underline-offset: 2px;
  transition: color 0.18s ease;
}

.single-post__content a:hover {
  color: var(--color-turquesa-600);
}

.single-post__content ul,
.single-post__content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.single-post__content li {
  margin-bottom: 8px;
}

.single-post__content blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-turquesa-500);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-gris-600);
  font-style: italic;
}

.single-post__content blockquote p:last-child {
  margin-bottom: 0;
}

.single-post__content img,
.single-post__content figure {
  max-width: 100%;
  height: auto;
}

.single-post__content figure {
  margin: 28px 0;
}

.single-post__content figcaption {
  font-size: 12.5px;
  color: var(--color-gris-500);
  margin-top: 8px;
}

/* Embeds responsivos (YouTube, Vimeo). WordPress envuelve los oEmbed en
   .wp-block-embed__wrapper; el iframe suelto se cubre por si el contenido
   viene del editor clásico. */
.single-post__content iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 12px;
}

.single-post__content .wp-block-embed {
  margin: 28px 0;
}

.single-post__pages {
  margin: 32px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
}

.single-post__pages-label {
  margin-right: 8px;
  color: var(--color-gris-500);
}


/* ============================================================
   COMPARTIR
   ============================================================ */
.c-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--color-gris-50);
  border-bottom: 1px solid var(--color-gris-50);
}

.c-share__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--color-gris-600);
}

.c-share__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-gris-50);
  border-radius: 999px;
  background: var(--color-blanco);
  color: var(--color-gris-600);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.c-share__btn:hover {
  background: var(--color-turquesa-50);
  border-color: var(--color-turquesa-100);
  color: var(--color-turquesa-600);
}

.c-share__btn:focus-visible {
  outline: 2px solid var(--color-turquesa-500);
  outline-offset: 2px;
}

.c-share__btn svg {
  width: 16px;
  height: 16px;
}

.c-share__feedback {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-success);
}


/* ============================================================
   ACCIONES DE CIERRE
   Fila horizontal: secundario (Sobre el autor) + primario (CTA).
   flex-wrap para que en pantallas angostas caigan uno bajo otro en
   vez de desbordar o comprimirse.
   ============================================================ */
.single-post__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 32px 0 64px;
}


/* ============================================================
   SIDEBAR — RELACIONADOS
   ============================================================ */
.single-post__sidebar {
  padding-top: 8px;
  margin-bottom: 60px;
}

.c-related {
  position: sticky;
  top: 112px;
}

.c-related__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-negro);
  margin: 0 0 16px;
}

.c-related__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* .c-article-card redeclarada en su variante compacta: blog.css no se
   encola en esta plantilla. Valores alineados con blog.css. */
.single-post .c-article-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-50);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(2, 9, 10, 0.06), 0 2px 8px rgba(2, 9, 10, 0.04);
  transition: box-shadow 0.25s;
}

.single-post .c-article-card:hover {
  box-shadow: 0 8px 20px rgba(22, 129, 150, 0.12);
}

.single-post .c-article-card__media {
  flex: 0 0 88px;
  display: block;
  overflow: hidden;
  background: var(--color-gris-50);
}

.single-post .c-article-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.single-post .c-article-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-turquesa-50), var(--color-menta-50));
}

.single-post .c-article-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 12px 14px;
}

.single-post .c-article-card__cat {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-turquesa-600);
  margin-bottom: 5px;
}

.single-post .c-article-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1.35;
  margin: 0 0 6px;
  text-wrap: pretty;
}

.single-post .c-article-card__title a {
  color: var(--color-negro);
  text-decoration: none;
  transition: color 0.2s ease;
}

.single-post .c-article-card__title a:hover {
  color: var(--color-turquesa-500);
}

.single-post .c-article-card__meta {
  margin: auto 0 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--color-gris-500);
}

.single-post .c-article-card__sep {
  margin: 0 5px;
  color: var(--color-gris-200);
}


/* ============================================================
   NEWSLETTER — redeclarada, blog.css no se encola acá
   ============================================================ */
.single-post .c-newsletter {
  padding: 0 0 72px;
}

.single-post .c-newsletter__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
  border-radius: 14px;
  background: var(--color-turquesa-50);
  transition: transform 0.25s, box-shadow 0.25s;
}

.single-post .c-newsletter__inner:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(22, 129, 150, 0.15);
}

.single-post .c-newsletter__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-negro);
  margin: 0 0 10px;
}

.single-post .c-newsletter__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gris-700);
  margin: 0;
}

.single-post .c-newsletter__placeholder {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-gris-500);
  margin: 0;
}

/* Ancla de posicionamiento para .wpcf7-response-output — ver blog.css
   para el detalle de por qué es necesario. */
.single-post .c-newsletter__form {
  position: relative;
}

/* Override de los inputs de CF7 sobre fondo claro — mismo problema y
   misma solución que blog.css: la regla base .wpcf7
   input[type="text"]/[type="email"] en main.css asume el fondo oscuro
   de .contact-section. Redeclarado acá porque blog.css no se encola en
   single.php.
   Antes solo cubría input[type="email"] — mismo gap de contraste en
   your-name (type="text") que en blog.css, corregido igual acá. */
.single-post .c-newsletter .wpcf7 input[type="text"],
.single-post .c-newsletter .wpcf7 input[type="email"] {
  background: var(--color-blanco);
  border-color: var(--color-turquesa-200);
  color: var(--color-gris-700);
}

.single-post .c-newsletter .wpcf7 input[type="text"]::placeholder,
.single-post .c-newsletter .wpcf7 input[type="email"]::placeholder {
  color: var(--color-gris-500);
}

/* Layout siempre apilado, en todos los tamaños de pantalla — ver
   blog.css para el detalle completo del cambio (elimina el zigzag
   anterior, a pedido de Felipe, referencia visual Newsletter
   Desktop/Mobile). */
.single-post .c-newsletter .wpcf7-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.single-post .c-newsletter .wpcf7-form > p {
  display: inline;
}

.single-post .c-newsletter .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  position: relative;
}

.single-post .c-newsletter .wpcf7 input[type="text"],
.single-post .c-newsletter .wpcf7 input[type="email"] {
  width: 100%;
}

/* Botón turquesa de marca — ver blog.css para el detalle completo. */
.single-post .c-newsletter .wpcf7 input[type="submit"] {
  align-self: flex-start;
  width: auto;
  white-space: nowrap;
  background: var(--color-turquesa-500);
  border-color: var(--color-turquesa-500);
  color: var(--color-blanco);
}

.single-post .c-newsletter .wpcf7 input[type="submit"]:hover {
  background: var(--color-turquesa-600);
  border-color: var(--color-turquesa-600);
}

/* Tooltip en position:absolute — ver blog.css para el detalle de por
   qué (no desarmar el layout al aparecer/desaparecer). */
.single-post .c-newsletter .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
}

/* Ajuste manual de Felipe: position:absolute anclado explícito, no el
   static-position fallback (mismo fix aplicado en blog.css hace un
   tiempo — nunca se había replicado acá, el mensaje seguía pudiendo
   superponerse al input en esta página). */
.single-post .c-newsletter .wpcf7-response-output {
  margin-top: 16px !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
}


/* ============================================================
   RESPONSIVE
   El form de newsletter ya no tiene patrón zigzag propio — ver
   blog.css para el detalle completo del cambio.
   ============================================================ */
@media (max-width: 991px) {
  .single-post__header {
    padding: 40px 0 24px;
  }

  .single-post__title {
    font-size: 30px;
  }

  /* Sin override de font-size acá: 14.5px se mantiene en todos los
     tamaños, igual que .c-rte p en case-study.css (que tampoco reduce
     el cuerpo de texto en responsive, solo los títulos). Antes había
     un valor de 15.5px que, con la base ahora en 14.5px, quedaba al
     revés — mobile más grande que desktop. */

  .single-post__content h2 {
    font-size: 23px;
  }

  .single-post__content h3 {
    font-size: 18px;
  }

  /* El sidebar cae debajo del contenido: sticky deja de tener sentido. */
  .c-related {
    position: static;
  }

  .single-post__sidebar {
    padding-top: 24px;
  }

  .single-post__actions {
    margin-bottom: 32px;
  }

  .single-post .c-newsletter__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
  }

  /* Título y descripción centrados al colapsar a una columna — ver
     blog.css para el detalle. */
  .single-post .c-newsletter__text {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .single-post__title {
    font-size: 26px;
  }

  .single-post__featured {
    margin-bottom: 28px;
  }

  .c-share {
    gap: 10px;
  }

  /* Único ajuste de newsletter que sigue siendo necesario en mobile —
     ver blog.css para el detalle completo. */
  .single-post .c-newsletter .wpcf7 input[type="submit"] {
    width: 100%;
  }
}