/* ============================================================
   KERUTO — FASE 3/4: plantilla de proyecto (single `porfolio`)
   Solo colocación/estructura. La tipografía, etiquetas, botones
   e imágenes viven como clases globales de Bricks (ker-f3-*).
   ============================================================ */

/* El cuerpo empieza arriba del todo para que el CONTENIDO de la ficha pueda
   subir por detrás del menú y salir por el borde superior (igual que las
   tarjetas en la página de categorías). La tarjeta de navegación recupera su
   sitio con un margen superior; el contenido con un padding superior. */
.ker-fase3 .ker-f3-body {
  position: absolute; top: 0; left: 0; right: calc(56 * var(--u)); bottom: 0;
  width: auto; display: flex; flex-direction: row; gap: calc(48 * var(--u)); align-items: stretch;
}

/* ---------- columna izquierda: navegación ----------
   La tarjeta va PEGADA al borde izquierdo y al inferior del marco (como en
   Figma): sin hueco a la izquierda, sin borde izquierdo/inferior y con la
   esquina inferior derecha recta. Solo la superior derecha va redondeada.
   La lista (.ker-f3-works) hace scroll; la barra negra y la etiqueta
   amarilla quedan fijas arriba. */
.ker-fase3 .ker-f3-nav {
  flex: 0 0 calc(506 * var(--u)); width: auto; min-height: 0;
  margin-top: calc(210 * var(--u));
  display: flex; flex-direction: column; gap: 0;
  overflow: hidden;
  background: var(--ker-paper);
  border-style: solid;
  border-color: var(--ker-black);
  border-width: calc(8 * var(--u)) calc(8 * var(--u)) 0 0;
  border-radius: 0 calc(20 * var(--u)) 0 0;
  box-sizing: border-box;
}

/* barra negra superior: ocupa todo el ancho de la tarjeta */
.ker-fase3 .ker-f3-nav .ker-f3-back {
  flex: 0 0 auto;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  margin: 0 !important;
  padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: calc(26 * var(--u)) !important;
  line-height: 1.1 !important;
}

/* Flecha "dibujada a mano" (assets/icons/flecha.svg, viewBox cuadrado 1118).
   Se aplica como máscara y hereda currentColor (barra negra → blanco).
   La clase global kf3b01 la referencia por URL; aquí se ajusta la geometría
   al nuevo SVG (1:1 en vez de 37/32) y se versiona la URL para que las
   cachés no sirvan la flecha antigua. */
.ker-fase3 .ker-f3-nav .ker-f3-back::before {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  aspect-ratio: 1 / 1;
  margin-right: calc(2 * var(--u));
  -webkit-mask: url("/wp-content/themes/keruto/assets/icons/flecha.svg?20261022") no-repeat center / contain;
  mask: url("/wp-content/themes/keruto/assets/icons/flecha.svg?20261022") no-repeat center / contain;
}

/* etiqueta amarilla: también a todo el ancho y fija bajo la barra negra */
.ker-fase3 .ker-f3-nav .ker-f3-catlabel {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: calc(12 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u)) calc(40 * var(--u));
  border-radius: 0;
  border-bottom: calc(5 * var(--u)) solid var(--ker-black);
  font-size: calc(24 * var(--u));
  line-height: 1.15;
}
.ker-fase3 .ker-f3-catlabel .ker-f3-cat-origin{ font-weight:700; }

/* lista: única zona con scroll. La barra dibujada se oculta (el scroll sigue
   funcionando); así el contenido llega hasta el borde negro de la tarjeta. */
.ker-fase3 .ker-f3-works {
  flex: 1 1 auto; min-height: 0;
  width: 100%;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.ker-fase3 .ker-f3-works::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ker-fase3 .ker-f3-works-list { display: block; }

.ker-fase3 .ker-f3-works .ker-f3-workitem {
  width: 100%;
  font-size: calc(24 * var(--u));
}
.ker-fase3 .ker-f3-works .ker-f3-workitem a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));
  border-radius: 0;
  line-height: 1.15;
}

/* separadores finos entre trabajos, sin llegar a los bordes */
.ker-fase3 .ker-f3-works-list + .ker-f3-works-list .ker-f3-workitem { position: relative; }
.ker-fase3 .ker-f3-works-list + .ker-f3-works-list .ker-f3-workitem::before {
  content: ""; position: absolute;
  top: 0; left: calc(40 * var(--u)); right: calc(24 * var(--u)); height: calc(2 * var(--u));
  background: var(--ker-line);
}

/* el trabajo actual */
.ker-fase3 .ker-f3-works .current-post a,
.ker-fase3 .ker-f3-works .is-current a { background: var(--ker-green); color: #fff; }

/* ---------- columna derecha: contenido del proyecto ---------- */
.ker-fase3 .ker-f3-content {
  flex: 1; min-width: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  /* El padding superior coloca el contenido en su sitio (210u + 4u) pero deja
     que al hacer scroll suba hasta el borde superior y pase por detrás del
     menú. El margen extra derecho/izquierdo evita recortar el borde ondulado
     de las imágenes. */
  padding: calc(214 * var(--u)) calc(28 * var(--u)) calc(56 * var(--u)) calc(4 * var(--u));
  display: flex; flex-direction: column; gap: calc(28 * var(--u));
}

/* ---------- móvil ---------- */
@media (max-width: 767px) {
  .ker-fase3 .ker-f3-body { position: static; flex-direction: column; gap: 22px; margin-top: 18px; }
  .ker-fase3 .ker-f3-nav {
    flex: none; width: auto; margin-top: 0;
    border-width: 4px;
    border-radius: 0 16px 16px 0;
  }
  .ker-fase3 .ker-f3-nav .ker-f3-back {
    padding: 12px 16px 14px 20px !important;
    font-size: 20px !important;
  }
  .ker-fase3 .ker-f3-nav .ker-f3-back::before {
    width: 32px;
    height: 32px;
    margin-right: 2px;
  }
  .ker-fase3 .ker-f3-nav .ker-f3-catlabel {
    padding: 10px 16px 10px 20px;
    border-bottom-width: 4px;
    font-size: 18px;
  }
  /* Acordeón de la lista de trabajos: el trabajo actual (verde) arriba, el
     botón negro "seleccionar otro trabajo" en medio (clase compartida
     ker-acc-toggle, estilos en ker-fase2.css) y los demás debajo al abrir.
     El orden va por .is-current-wrap (JS); antes de que corra, el <style>
     inyectado (#ker-f3-acc) lo da con :has() sobre el slug del post. */
  .ker-fase3 .ker-f3-works {
    overflow: visible;
    display: flex; flex-direction: column;
  }
  .ker-fase3 .ker-f3-works .ker-f3-works-list { order: 3; }
  .ker-fase3 .ker-f3-works .ker-f3-works-list.is-current-wrap { order: 1; }
  /* Sin separadores (los filetes ::before) con el acordeón plegado: con el
     reorden se colarían sobre la tarjeta verde. Al abrir quedan como siempre. */
  .ker-fase3 .ker-f3-works:not(.is-open) .ker-f3-workitem::before { display: none; }
  .ker-fase3 .ker-f3-works .ker-f3-workitem a { padding: 14px 16px 14px 20px; }
  .ker-fase3 .ker-f3-content { overflow: visible; padding: 0; gap: 22px; }
  /* Texto normal a 16px en móvil (igual que Sobre mí); el intro bajaba de 17px. */
  .ker-fase3 .ker-f3-content .ker-f3-intro { font-size: 16px; }
}

/* ============================================================
   5. ANTI-DESBORDAMIENTO
   Los textos de la ficha vienen de campos WYSIWYG (ACF) con su
   propio HTML. Una URL larga sin cortar daba un ancho mínimo
   enorme a los items flex de .ker-f3-content y estiraba toda la
   columna más allá de la pantalla (scroll lateral + texto cortado
   a la derecha). Con overflow-wrap:anywhere la palabra se parte
   solo cuando no cabe y el ancho mínimo vuelve a ser el del
   contenedor. (La red global está en ker-site.css.)
   ============================================================ */
.ker-fase3 .ker-f3-content > * {
  min-width: 0;
  max-width: 100%;
}
.ker-fase3 .ker-f3-content p,
.ker-fase3 .ker-f3-content a {
  overflow-wrap: anywhere;
}