/* Cabecera compartida de las guías (pageHero en src/templates/hero.mjs): texto + foto 4/3 en escritorio, foto 16/9 en móvil. */
.ph{background:linear-gradient(180deg,var(--tint),transparent);padding-block:clamp(.9rem,2vw,1.6rem) clamp(1.1rem,2.2vw,1.8rem)}
.ph-in{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
.ph-head{min-inline-size:0}

/* migas en una sola línea: la última (la propia página) se recorta con puntos suspensivos */
.ph .crumbs ol{flex-wrap:nowrap;margin:0 0 1rem}
.ph .crumbs li{flex:none}
.ph .crumbs li:last-child{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* etiqueta: mono en mayúsculas con un trazo terracota (marca) delante */
.ph-eyebrow{display:flex;align-items:center;gap:.65rem;margin:0 0 .65rem}
.ph-eyebrow::before{content:"";inline-size:1.5rem;block-size:2px;border-radius:2px;background:var(--fang)}

.ph-title{font-family:var(--ff-display);font-size:clamp(2rem,1.3rem + 2vw,3.2rem);line-height:1.06;letter-spacing:-.03em;margin:0 0 .45em;text-wrap:balance}
.ph--solo .ph-title{max-inline-size:26ch}
.ph-lead{font-size:clamp(1rem,.94rem + .3vw,1.13rem);line-height:1.5;color:color-mix(in oklch,var(--ink) 76%,var(--bg));max-inline-size:58ch;margin:0 0 .85rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.ph-meta{font:500 .76rem/1.55 var(--ff-mono);letter-spacing:.03em;color:var(--muted);margin:0}

/* foto: 16/9 en móvil, 4/3 en escritorio; crédito en una esquina */
.ph-photo{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-2);aspect-ratio:16/9;max-block-size:420px}
.ph-photo picture{display:block;inline-size:100%;block-size:100%;background:var(--dom)}
.ph-photo img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.ph-photo figcaption{position:absolute;inset-inline-end:0;inset-block-end:0;max-inline-size:100%;margin:0;padding:.3rem .6rem;text-align:end;border-start-start-radius:var(--r);background:rgba(12,26,33,.74);backdrop-filter:blur(4px)}
.ph-photo .credit{display:block;font:500 .66rem/1.35 var(--ff-mono);letter-spacing:.02em;color:#fff;text-decoration:none}
.ph-photo .credit:hover{text-decoration:underline}
:root[data-theme="dark"] .ph-photo img{filter:brightness(.92)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ph-photo img{filter:brightness(.92)}}

/* saltos rápidos: píldoras */
.ph-jumps{min-inline-size:0}
.ph-jumps ul{list-style:none;margin:0;padding:0;display:flex;gap:.45rem}
.ph-jumps a{display:inline-flex;align-items:center;min-block-size:38px;max-inline-size:26ch;padding:.35rem .85rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:500 .82rem/1.2 var(--ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;transition:border-color .18s,background .18s,color .18s}
.ph-jumps a:hover{border-color:var(--ink)}
@media (pointer:coarse){.ph-jumps a{min-block-size:44px}}

/* móvil y tablet: una columna; los saltos en una fila con scroll horizontal (la última píldora asoma para invitar a deslizar) */
@media (max-width:979.98px){
  .ph-jumps{margin-inline:calc(-1 * clamp(16px,4vw,44px));overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity}
  .ph-jumps::-webkit-scrollbar{display:none}
  .ph-jumps ul{flex-wrap:nowrap;inline-size:max-content;padding-inline:clamp(16px,4vw,44px)}
  .ph-jumps li{scroll-snap-align:start;scroll-margin-inline:clamp(16px,4vw,44px)}
}
@media (max-width:639.98px){.ph-lead{display:none}}

/* escritorio: texto a la izquierda, foto a la derecha; el texto queda centrado en vertical respecto de la foto */
@media (min-width:980px){
  .ph--photo .ph-in{grid-template-columns:minmax(0,1fr) minmax(300px,500px);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(2rem,4vw,4rem);row-gap:0}
  .ph--photo .ph-head{grid-column:1;grid-row:2}
  .ph--photo .ph-jumps{grid-column:1;grid-row:3;margin-block-start:1.1rem}
  .ph--photo .ph-photo{grid-column:2;grid-row:1 / -1;align-self:center;aspect-ratio:4/3}
  .ph--solo .ph-in{gap:1.1rem}
  .ph--solo .ph-head{max-inline-size:860px}
  .ph-jumps ul{flex-wrap:wrap}
}

/* el bloque que sigue a la cabecera ya no depende del margen de la foto de antes */
.ph + *{margin-block-start:clamp(1.5rem,3vw,2.25rem)}

/* móvil: en español e inglés ni los titulares ni el texto corrido se parten con guion a cada línea («expe-riencias», «Ma-galuf»); el alemán conserva la separación por sus palabras largas */
main h1:lang(es),main h2:lang(es),main h3:lang(es),main h1:lang(en),main h2:lang(en),main h3:lang(en),.prose:lang(es),.prose:lang(en){hyphens:manual}
@media (pointer:coarse){.map-zoom button{inline-size:44px;block-size:44px}}