/**
 * Plantilla T-07 · Entrada.
 * Layout de /{categoria}/{slug}/, 96 entradas.
 *
 * Solo el layout de la plantilla y la tipografía del contenido editorial.
 * El TOC, el share, los relacionados y el CTA se estilan en sus componentes.
 *
 * Tokens canónicos, sin literales de respaldo: la capa de alias de style.css
 * es transitoria y esta hoja ya no depende de ella (issue #60).
 *
 * @package pfuture
 * @module contenidos
 */

/* La raíz NO acota: quien da el canalón es la regla de abajo, sobre el hijo
   directo. Con el contenedor aquí, `common/cta-box` sumaba el suyo encima. */
.pf-single {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-md);
  padding-block: var(--pf-space-md);
}

/* -------------------------------------------------------------------------
 * Canalón — issue #90. Idiom canónico de la DEC-027 de `portafolio`.
 *
 * Medido antes, en navegador y tema claro forzado en cliente, borde de
 * contenido de los cuatro hijos no-hero:
 *
 *   ventana   breadcrumbs   __article   form-newsletter   cta-box
 *   400        16            16          16                40
 *   1024       16            16          16                40
 *   1280       56            56          56                80
 *   1440      136           136         136               160
 *
 * O sea dos bordes en los cinco anchos, y el descolocado es siempre el mismo:
 * `common/cta-box`, que trae su propio `padding-inline: var(--pf-gutter)` y lo
 * sumaba al de la raíz. Es el caso que el #90 llama urgente.
 *
 * Tres cosas que no son opcionales, las tres medidas en el #78:
 *   - Va sobre el hijo directo y no sobre cada bloque, para no tocar la hoja de
 *     `common/cta-box`, que es de `shell` y la consumen seis plantillas.
 *   - Selector de dos clases (0,2,0) como mínimo, para ganar a
 *     `.pf-cta-box--section` (0,1,0) sin depender del orden de carga: los
 *     componentes encolan su hoja al pintarse, o sea DESPUÉS de ésta.
 *   - El hero excluido, que va a sangre a propósito y pone el canalón dentro de
 *     su `__inner`.
 * ---------------------------------------------------------------------- */
.pf-single > :not(.pf-hero):not(.pf-form-newsletter) {
  width: 100%;
  max-width: var(--pf-container);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

/* Y una cuarta que T-09 y T-11 no tuvieron que resolver porque no cuelgan un
 * panel de `<main>`: `common/form-newsletter` pinta fondo y borde propios, así
 * que **su borde de caja ES el borde de contenido** que percibe quien lee, y su
 * relleno es interior legítimo (DEC-029 de `portafolio`). Con el canalón como
 * `padding-inline` su caja se quedaría en 40 mientras sus hermanos pintan texto
 * en 64: un panel 24px más a la izquierda que todo lo demás. Aquí el canalón va
 * por FUERA, descontándolo del ancho, y no se declara `padding-inline`, para no
 * pisar el relleno propio del componente, que es de `leads`.
 * Afecta también a T-13. Dicho en el #90. */
.pf-single > .pf-form-newsletter {
  width: calc(100% - var(--pf-gutter) * 2);
  max-width: calc(var(--pf-container) - var(--pf-gutter) * 2);
  margin-inline: auto;
}

.pf-single__header {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

/* El rótulo de categoría es una etiqueta en versalitas según la regla de uso
 * de la dirección «Expediente»: 13px, peso 500, el tracking común y
 * `text-muted` (5.30:1 sobre `bg` en claro, 7.18:1 en oscuro). No va en
 * `brand`, que desde el #111 es navy y se leía como un segundo titular sobre
 * el `<h1>`; ni en `accent`, que no es color de texto (DEC-022 de core).
 *
 * El enlace de dentro hereda el color y no se subraya en reposo. Sin esta
 * regla el `<a>` cogía el teal subrayado de la base de `a`, así que el color
 * del `<p>` nunca llegaba al ojo —medido: el `<p>` computaba navy y el texto
 * visible era teal—. El teal es de la prosa; una etiqueta de cabecera va como
 * la de `card-post`: hereda y se subraya solo al pasar por encima. Issue #116. */
.pf-single__category {
  margin: 0;
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
  color: var(--pf-color-text-muted);
}

.pf-single__category a {
  color: inherit;
  text-decoration: none;
}

.pf-single__category a:hover,
.pf-single__category a:focus-visible {
  color: var(--pf-color-brand-strong);
  text-decoration: underline;
}

.pf-single__title {
  margin: 0;
  max-width: 24ch;
  font-size: var(--pf-text-3xl);
  line-height: var(--pf-leading-tight);
}

.pf-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
  font-size: var(--pf-text-sm);
  color: var(--pf-color-text-muted);
}

/* Solo 2 de las 96 entradas tienen imagen destacada. El bloque entero no se
 * pinta en las otras 94, así que aquí no hay ni alto reservado ni fondo de
 * relleno: sin figure no queda hueco ni rectángulo gris. */
.pf-single__featured-image {
  margin: 0;
}

.pf-single__image {
  width: 100%;
  height: auto;
  border-radius: var(--pf-radius-md);
}

/* -------------------------------------------------------------------------
 * Rejilla índice + contenido — tanda 20, issue #207. El modelo es la página
 * legal (T-04, `templates/legal-page/styles.css`): columna izquierda fija con
 * el índice y, debajo, la caja CTA; contenido a la derecha. Anchura de la
 * columna `minmax(14rem, 18rem)` y hueco `xl` en escritorio, los de la legal,
 * para que T-04, T-07 y T-08 midan igual.
 *
 * EL CORTE ES EL DE `common/cta-box`, 1024px, NO EL `62rem` DE LA LEGAL. La
 * caja tiene dos caras —lateral desde `min-width: 1024px`, barra inferior
 * hasta `max-width: 1023px`— y esta columna la contiene, así que entre 993 y
 * 1023 una rejilla a dos columnas conviviría con una barra `position: fixed`
 * a todo el ancho de la ventana: es exactamente la banda «MIXTA» que
 * `servicios` midió y cerró en el #102 sobre T-08. La legal no pinta caja y
 * puede cortar a 62rem; en cuanto la pinte tendrá que cortar aquí. Mismo
 * número y misma unidad que el componente a propósito: un `grep 1023px`
 * encuentra los tres sitios. Antes esta hoja cortaba a `64rem`, que son los
 * mismos 1024px con la raíz a 16px, pero dejan de serlo si el lector agranda la
 * letra del navegador, y entonces la caja y la rejilla cambian de cara en
 * anchos distintos.
 *
 * Por debajo del corte, una columna y el orden que pide el issue: índice,
 * contenido, CTA. Ver la regla `display: contents` de abajo.
 * ---------------------------------------------------------------------- */
.pf-single__layout {
  display: grid;
  gap: var(--pf-space-md);
  grid-template-columns: minmax(0, 1fr);
}

/* Contenido editorial. Medida de lectura cómoda sobre el HTML nativo, con el
 * cuerpo de prosa y el interlineado holgado de la dirección «Expediente»
 * (17px en móvil, 18px desde ~1024). Los enlaces de dentro NO se redeclaran:
 * el teal, el subrayado de 1px, el offset y el hover son de la base de `a` en
 * style.css, que es de core; una sola fuente (correcciones del #116).
 *
 * Issue #106 — a 400px el documento se arrastraba: 533 de ancho sobre una
 * ventana de 400, con esta columna a 509 dentro de un hueco de 352. Tres
 * declaraciones, y las tres hacen falta:
 *
 *   - `min-width: 0`. Este bloque es un item de rejilla y su mínimo automático
 *     es su min-content; cualquier bloque desplazable de dentro —una tabla en
 *     su `figure`, un `<pre>`— lo sube al ancho de su contenido aunque él solo
 *     se desplazaría. MEDIDO en la 1384: el culpable no era la línea de código
 *     que decía el issue (313px de min-content, cabe en 352) sino la tabla de
 *     registros DNS, `figure.wp-block-table`, con 509. Con el mínimo a cero la
 *     pista baja a 352 y la tabla se desplaza dentro de su `figure`, que ya
 *     trae `overflow-x: auto` de wp-block-library, con las celdas intactas.
 *   - `overflow-wrap: anywhere`. Para la prosa: una URL desnuda en un párrafo
 *     no tiene donde partirse y el párrafo no se desplaza, así que sin esto
 *     pintaría fuera de su caja (control inyectado en el cliente). `anywhere` y
 *     no `break-word` porque rebaja el min-content, que es lo que deja encoger
 *     la pista. Mismo idiom que templates/single-tutorial y templates/search.
 *   - `overflow-wrap: normal` en `pre` y en `table`, porque `overflow-wrap` se
 *     hereda y el `anywhere` partiría las líneas de código y las celdas por
 *     cualquier carácter. MEDIDO con el remedio sin esta excepción: la tabla
 *     quedaba en `TY/PE`, `CN/AM/E` y `cdn.ex/ample/.com`. El código y la
 *     tabla se desplazan, no se parten.
 *
 * Límite conocido: el `<code>` de un bloque `wp-block-code` lleva de
 * wp-block-library `white-space: break-spaces` y `overflow-wrap: break-word`
 * como regla propia, no heredada, así que WordPress lo parte por diseño y esta
 * excepción solo protege a un `<pre>` sin esa clase. Hoy ya pasa en las cuatro
 * entradas con código largo y no es cosa de esta hoja. */
.pf-single__content {
  min-width: 0;
  max-width: 70ch;
  font-size: var(--pf-text-prose);
  line-height: var(--pf-leading-loose);
  overflow-wrap: anywhere;
}

.pf-single__content pre,
.pf-single__content table {
  overflow-wrap: normal;
}

.pf-single__content pre {
  overflow-x: auto;
}

.pf-single__content > * + * {
  margin-top: var(--pf-space-sm);
}

.pf-single__content img {
  height: auto;
  border-radius: var(--pf-radius-md);
}

.pf-single__footer {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
  padding-top: var(--pf-space-sm);
  border-top: 1px solid var(--pf-color-border);
}

.pf-single__terms-title {
  margin: 0 0 var(--pf-space-2xs);
  font-size: var(--pf-text-base);
}

.pf-single__terms-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Término de `cliente` o `herramienta` como píldora, según la regla de uso:
 * 13px, peso 400, borde de 1px `border` sobre `surface`, sin mayúsculas y sin
 * subrayado en reposo, en `text`. Hover con una sola señal, el borde a
 * `border-strong`. Hoy ninguna entrada tiene términos de estas taxonomías
 * (pendiente 5 de la bitácora), así que se prueba con una entrada de usar y
 * tirar. Issue #116. */
.pf-single__term a {
  display: inline-block;
  padding: var(--pf-space-3xs) var(--pf-space-xs);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-regular);
  line-height: var(--pf-leading-snug);
  text-transform: none;
  text-decoration: none;
  color: var(--pf-color-text);
  background: var(--pf-color-surface);
  border: 1px solid var(--pf-color-border);
  border-radius: var(--pf-radius-pill);
  transition: border-color var(--pf-transition);
}

.pf-single__term a:hover,
.pf-single__term a:focus-visible {
  color: var(--pf-color-text);
  border-color: var(--pf-color-border-strong);
}

/* Móvil y tableta: la columna se disuelve. `display: contents` deja al índice
 * y a la caja como hijos directos de la rejilla, y `order` coloca la caja
 * DESPUÉS del contenido: es lo que pide el issue —índice arriba, contenido,
 * CTA al final— y es lo que la barra inferior de `common/cta-box` necesita.
 * Su script antepone a la caja un centinela y fija la barra mientras ese
 * hueco sigue POR DEBAJO de la ventana (README del componente, «La plantilla
 * la pone: al final, tras el contenido»); con la caja antes del contenido el
 * hueco sale por ARRIBA nada más bajar y la barra no aparece nunca. El
 * centinela va DENTRO de `__cta`, así que se reordena con ella y no consume
 * una fila ni un hueco de la rejilla. El orden del DOM no cambia —índice, caja,
 * contenido—: en esta cara la caja es una barra fija siempre visible mientras
 * se lee, así que el tabulador pasa del índice a algo que está en pantalla.
 * Sin JavaScript no hay barra y la caja se lee al final del contenido, donde
 * `order` la deja. Ver DEC-072. */
@media (max-width: 1023px) {
  .pf-single__aside {
    display: contents;
  }

  .pf-single__content {
    order: 1;
  }

  .pf-single__cta {
    order: 2;
  }

  /* Relleno de la caja cuando NO es barra: al llegar al final del contenido
   * el centinela entra en pantalla, la barra se suelta y la tarjeta se lee en
   * flujo, y sin JavaScript nunca hay barra. `common/cta-box` solo declara el
   * relleno de esa cara para la barra fijada (`.is-pinned`, 0,3,0) y para la
   * caja lateral desde 1024px; MEDIDO a 390 al pie de una ficha de T-08 y de
   * esta guía: `padding: 0px`, título pegado al borde. Es un hueco del
   * componente, dicho a `shell` en su issue; mientras, se resuelve desde aquí
   * (addendum de la tanda 20). Dos clases (0,2,0): la barra fijada sigue
   * ganando con su propio relleno, y esta regla solo alcanza a la tarjeta. */
  .pf-single__cta .pf-cta-box__inner {
    padding: var(--pf-space-md);
  }
}

@media (min-width: 1024px) {
  .pf-single__layout {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: var(--pf-space-xl);
    align-items: start;
  }

  /* Hoy 3 de las 18 entradas quedan por debajo del umbral del índice y no
   * pintan columna lateral (eran 70 de 96 en la fase 1). Sin este modificador
   * el contenido caería en la pista de 14-18rem y se serviría estrujado contra
   * el margen izquierdo, con la mitad derecha vacía. La plantilla marca la
   * clase cuando el TOC no se pinta (DEC-023). */
  .pf-single__layout--no-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La columna entera va fija, como `.pf-legal__toc` en la legal, y su `top` es
   * el de los dos componentes que lleva dentro: `--pf-toc-offset` y
   * `--pf-cta-offset` son `--pf-header-height + md`. MEDIDO antes de tocar,
   * 1280×800 y 1500px de scroll: la cabecera es `sticky` de 72px y esta columna
   * se quedaba en `top: 24px` —y la legal en 32—, o sea con el título del
   * índice y su primera entrada TAPADOS por la cabecera. Con el mismo offset
   * que los componentes, el `position: sticky` propio del índice
   * (`.pf-toc--sticky`, `top: 96px`) queda inerte: su bloque contenedor es
   * `__toc`, que mide lo que él, y no tiene a dónde moverse.
   *
   * Reparto del alto. La columna es una pila flex acotada a la ventana; el
   * índice cede (`__toc`, `flex: 0 1 auto` con un suelo de `8rem`) y la caja no
   * (`__cta`, `flex: none`). Sin esto el índice de una guía —4066 mide 680px a
   * 1280×800, con `max-height` propio de `100vh - 120`— llenaba la columna y la
   * caja se quedaba fuera de la ventana en escritorio, que es justo donde el
   * dueño la quiere ver. El que se desplaza sigue siendo `.pf-toc`, no el
   * envoltorio: el scroll-spy del componente lleva la entrada activa a la
   * vista con `toc.scrollTo()` y solo lo hace si el propio índice desborda. Un
   * item flex con `overflow: auto` tiene el mínimo automático a cero, así que
   * encoge sin declararle nada. El suelo de `8rem` deja título y tres
   * entradas en una ventana muy baja; si ni eso cabe, la pila desborda por
   * abajo y la columna sigue leyéndose, no se recorta. Ver DEC-071. */
  .pf-single__aside {
    --pf-single-aside-offset: calc(var(--pf-header-height, 0px) + var(--pf-space-md));

    position: sticky;
    top: var(--pf-single-aside-offset);
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-md);
    max-height: calc(100vh - var(--pf-single-aside-offset) - var(--pf-space-md));
  }

  .pf-single__toc {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 8rem;
  }

  .pf-single__cta {
    flex: none;
  }
}