/* Bike Fit Lab — figures.css · figuras novas (bicicleta, tacos, joelho, pedalada) + padrão "SVG com pontos" */

/* ===== Padrão .fig--points ===== */
.fig--points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.75rem; align-items: start; }
.fig--points > svg { grid-column: 1; }
.fig--points > figcaption { grid-column: 1 / -1; margin-top: 0; }
.fig__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-size: var(--step-body); line-height: 1.5; color: var(--ink); counter-reset: none; }
.fig__points li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.15rem 0.65rem; align-items: start; padding: 0.5rem 0.65rem 0.55rem 0.5rem; border-left: 3px solid transparent; transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease, opacity var(--t-ui) ease; }
.fig__points li::before { content: attr(data-point); grid-column: 1; grid-row: 1; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; background: var(--fg2); color: var(--fg2-ink); font-weight: 600; font-size: 0.8125rem; line-height: 1; margin-top: 0.05rem; }
.fig__points li > b { grid-column: 2; grid-row: 1; font-weight: 600; align-self: center; }
.fig__points li > span { grid-column: 2; grid-row: 2; }
.fig__points .nums { font-weight: 600; }
.js .fig--points .fig__points li { cursor: pointer; }
.js .fig--points .fig__points li:focus-visible { outline-offset: 0; }
.fig--points .fig__points li.is-hover { background: var(--soft); }
.fig--points .fig__points li.is-active { background: var(--soft); border-left-color: var(--fg2); }
.fig--points.has-active .fig__points li:not(.is-active) { opacity: 0.6; }
.fig--points.has-active .fig__points li.is-hover { opacity: 0.85; }
.fig .f-hot.is-hover .f-hot__ring { opacity: 0.25; }
.fig .f-hot:focus-visible .f-num circle, .fig .f-hot.is-active .f-num circle { stroke: var(--paper); stroke-width: 2; }
.fig .f-hot .f-num text { pointer-events: none; }
.fig .f-mark circle { fill: var(--fg2); }
.fig .f-mark text { fill: var(--fg2-ink); font-weight: 600; font-size: 14px; }
.fig .f-title { font-weight: 600; font-size: 14px; }
.fig .f-small { font-size: 13px; }

@media (min-width: 56.25em) {
  .fig--points.fig--bicicleta, .fig--points.fig--pedalada { grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); }
  .fig--points.fig--bicicleta > .fig__points, .fig--points.fig--pedalada > .fig__points { grid-column: 2; grid-row: 1; }
  .fig--points.fig--bicicleta > svg, .fig--points.fig--pedalada > svg { grid-row: 1; position: sticky; top: 1rem; }
  .reading .fig.fig--points.fig--bicicleta, .reading .fig.fig--points.fig--pedalada, .page .fig.fig--points.fig--bicicleta, .page .fig.fig--points.fig--pedalada { max-width: none; }
  /* Nos artigos a coluna de texto é estreita (62ch): a figura fica numa só coluna, lista por baixo. */
  .post .prose .fig--points.fig--bicicleta, .post .prose .fig--points.fig--pedalada { grid-template-columns: minmax(0, 1fr); }
  .post .prose .fig--points.fig--bicicleta > .fig__points, .post .prose .fig--points.fig--pedalada > .fig__points { grid-column: 1; grid-row: 2; }
  .post .prose .fig--points.fig--bicicleta > svg, .post .prose .fig--points.fig--pedalada > svg { position: static; }
}

/* ===== Cotas ===== */
.fig .f-dim line { stroke: var(--fg2); stroke-width: 1.5; stroke-linecap: square; fill: none; }
.fig .f-dim { opacity: 0.6; }
.fig .f-dim-end { stroke-width: 1.5; }
.fig .f-dim-ref { stroke: var(--fg2); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.45; fill: none; }

/* ===== bicicleta ===== */
.fig--bicicleta .f-lever { stroke-width: 3.5; }
.fig--bicicleta-compact { max-width: 30rem; }
.fig--bicicleta-compact .fig__k { justify-content: center; }

/* ===== tacos ===== */
.fig--tacos, .fig--joelho { max-width: 34rem; }
.fig--tacos .f-sole__out { fill: var(--paper); stroke: var(--fg); stroke-width: 2; stroke-linejoin: miter; }
.fig--tacos .f-cleat { fill: var(--soft); stroke: var(--fg); stroke-width: 2; stroke-linejoin: miter; }
.fig--tacos .f-slot { fill: var(--paper); stroke: var(--fg); stroke-width: 1.5; }
.fig--tacos .f-foot { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.5; }
.fig--tacos .f-axle { stroke: var(--fg2); stroke-width: 2; stroke-linecap: square; }
.fig--tacos .f-ind { fill: none; stroke: var(--fg2); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.fig--tacos .f-ind .f-arc { stroke-width: 2; }
.fig--tacos .f-wedge .f-thick { stroke: var(--fg); opacity: 0.55; stroke-linecap: square; }
.fig--tacos .f-wedge polygon { fill: var(--fg2); opacity: 0.35; }
.fig--tacos .f-sole-cut { stroke: var(--fg); stroke-width: 3; stroke-linecap: square; }
.fig--tacos .f-foot-cut { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.5; }

/* ===== joelho ===== */
.fig--joelho .f-wheel { fill: var(--paper); stroke: var(--fg); stroke-width: 2; }
.fig--joelho .f-track { fill: none; stroke: var(--fg); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: square; opacity: 0.45; }
.fig--joelho .f-track--ok { stroke: var(--fg2); stroke-width: 2.5; opacity: 1; }
.fig--joelho .f-leg__knee { fill: var(--fg2); stroke: var(--paper); stroke-width: 2; }
.fig--joelho .f-leg__line, .fig--joelho .f-leg__foot, .fig--joelho .f-leg__knee { transform-box: view-box; }
.fig--joelho .f-leg__line { animation: fig-knee-leg 1s var(--ease-in-out) infinite alternate paused; }
.fig--joelho .f-leg__knee { animation: fig-knee-up 1s var(--ease-in-out) infinite alternate paused; }
.fig--joelho .f-leg__foot { animation: fig-knee-foot 1s var(--ease-in-out) infinite alternate paused; }
.fig--joelho .f-leg--b .f-leg__line, .fig--joelho .f-leg--b .f-leg__knee, .fig--joelho .f-leg--b .f-leg__foot { animation-delay: -1s; }
.js .fig--joelho.fig--on .f-leg__line, .js .fig--joelho.fig--on .f-leg__knee, .js .fig--joelho.fig--on .f-leg__foot { animation-play-state: running; }
@keyframes fig-knee-leg { from { transform: scaleY(1); } to { transform: scaleY(0.618); } }
@keyframes fig-knee-up { from { transform: translateY(0); } to { transform: translateY(-44px); } }
@keyframes fig-knee-foot { from { transform: translateY(0); } to { transform: translateY(-42px); } }

/* ===== pedalada ===== */
.fig--pedalada .f-sec { stroke: none; }
.fig--pedalada .f-sec--pow1 { fill: var(--fg2); opacity: 0.22; }
.fig--pedalada .f-sec--pow2 { fill: var(--fg2); opacity: 0.45; }
.fig--pedalada .f-sec--rec { fill: var(--soft); }
.fig--pedalada .f-ring { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: square; }
.fig--pedalada .f-dead rect { fill: var(--fg); }
.fig--pedalada .f-crank { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-linecap: square; transform-box: view-box; animation: fig-crank 2.4s linear infinite paused; }
.fig--pedalada .f-crank circle { fill: var(--paper); }
.js .fig--pedalada.fig--on .f-crank { animation-play-state: running; }
@keyframes fig-crank { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fig--pedalada .f-force { fill: none; stroke: var(--fg2); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.fig--pedalada .f-axis-line { stroke: var(--fg); stroke-width: 1.5; opacity: 0.6; }
.fig--pedalada .f-curve { fill: none; stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.fig--pedalada .f-curve--a { stroke: var(--fg2); }
.fig--pedalada .f-curve--b { stroke: var(--fg); opacity: 0.45; stroke-dasharray: 5 4; }

@media (prefers-reduced-motion: reduce) {
  .fig--joelho .f-leg__line, .fig--joelho .f-leg__knee, .fig--joelho .f-leg__foot, .fig--pedalada .f-crank { animation: none; }
  .fig__points li { transition: none; }
}

/* ===== mapa ===== */
/* fig-mapa.php: imagem gerada em build (scripts/build-map.php) com pinos posicionados por --x/--y, como em fig-foto. */
.fig--mapa { max-width: 60rem; }
.fig-mapa__frame { position: relative; overflow: hidden; background: var(--soft); }
.fig-mapa__frame picture, .fig-mapa__frame img { display: block; width: 100%; height: auto; }
.fig-mapa__frame .img-placeholder { aspect-ratio: 3 / 2; min-height: 0; display: grid; place-items: center; color: var(--muted); }
/* pinos da variante local: herdam .fig-foto__pin (icons.css); aqui só o que muda */
.fig-foto__pin.fig-mapa__pin--studio { width: 2.5rem; height: 2.5rem; font-size: 1rem; z-index: 2; }
.fig-mapa__pin--station { background: var(--fg); color: var(--paper); }
.fig-mapa__pin--station.is-active, .fig-mapa__pin--station[aria-pressed="true"] { background: var(--paper); color: var(--fg); border-color: var(--fg); outline-color: var(--fg); }
/* pino estático da região: quadrado --fg2 com o nome ao lado */
.fig-mapa__pin--static { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); width: 1.25rem; height: 1.25rem; background: var(--fg2); border: 2px solid var(--paper); box-sizing: border-box; z-index: 2; }
.fig-mapa__pin--static .fig-mapa__name { position: absolute; left: calc(100% + 0.4rem); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--paper); color: var(--fg); font-weight: 600; font-size: 13px; line-height: 1; padding: 0.3rem 0.4rem; border: 1.5px solid var(--fg2); }
/* rótulos das cidades: etiqueta em --paper (13 px) deslocada do ponto; o ponto é um quadrado --fg em ::before */
.fig-mapa__label { --pad: 0.55rem; position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 1; display: inline-block; white-space: nowrap; font-size: 13px; line-height: 1; font-weight: 600; color: var(--fg); background: var(--paper); border: 1.5px solid var(--fg); padding: 0.3rem 0.4rem; pointer-events: none; }
.fig-mapa__label::before { content: ""; position: absolute; width: 0.6rem; height: 0.6rem; background: var(--fg); border: 1.5px solid var(--paper); box-sizing: border-box; }
.fig-mapa__label--right { transform: translate(var(--pad), -50%); }
.fig-mapa__label--right::before { left: calc(-1 * var(--pad) - 0.3rem); top: calc(50% - 0.3rem); }
.fig-mapa__label--left { transform: translate(calc(-100% - var(--pad)), -50%); }
.fig-mapa__label--left::before { right: calc(-1 * var(--pad) - 0.3rem); top: calc(50% - 0.3rem); }
.fig-mapa__label--top { transform: translate(-50%, calc(-100% - var(--pad))); }
.fig-mapa__label--top::before { left: calc(50% - 0.3rem); bottom: calc(-1 * var(--pad) - 0.3rem); }
.fig-mapa__label--bottom { transform: translate(-50%, var(--pad)); }
.fig-mapa__label--bottom::before { left: calc(50% - 0.3rem); top: calc(-1 * var(--pad) - 0.3rem); }
.fig-mapa__label .fig-mapa__t { font-weight: 400; color: var(--muted); }
/* lista da região: uma linha por cidade (nome, km, min) */
.fig-mapa__cities { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; font-size: var(--step-body); line-height: 1.5; max-width: 34rem; }
.fig-mapa__cities li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0 1rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--soft); }
.fig-mapa__cities li > span { white-space: nowrap; }
.fig-mapa__cities li > b { font-weight: 600; }
.fig-mapa__cities li > .nums { text-align: right; }
.fig-mapa__cities li.is-off { color: var(--muted); }
.fig-mapa__cities li.is-off > b { font-weight: 400; }
.fig-mapa__cities li.is-off .muted { font-size: var(--step-small); }
.fig--mapa-local .fig__points { margin-top: 1rem; max-width: 40rem; }
.fig--mapa figcaption { margin-top: 0.75rem; }
@media (max-width: 40em) {
  .fig-mapa__label .fig-mapa__t { display: none; }                  /* a 390 px só o nome; o tempo fica na lista */
  .fig-mapa__label { font-size: 12px; padding: 0.22rem 0.3rem; --pad: 0.45rem; }
  .fig-mapa__pin--static .fig-mapa__name { display: none; }          /* o quadrado --fg2 ao centro é o estúdio; a lista explica */
  .fig-foto__pin.fig-mapa__pin--studio { width: 2.25rem; height: 2.25rem; }
  .fig-mapa__cities li { gap: 0 0.6rem; }
  .fig-mapa__cities li.is-off .muted { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fig-mapa__pin { transition: none; } }

/* ===== larguras das figuras nas páginas de apoio (v6, coluna 2 de .page--cols) ===== */
/* A coluna das figuras tem ≥ 37rem em ≥ 64em: bicicleta e pedalada ficam lado a lado (SVG + lista); tacos e joelho
   alinham à esquerda com 40rem em vez de 34rem. Abaixo de 64em valem as regras de cima. */
/* A coluna 2 tem no máximo 37,5rem (76rem − 34rem − gap), menos do que o lado a lado (SVG + lista) precisa para a lista
   não ficar com 12 caracteres de largura: aqui as figuras com pontos empilham (SVG a toda a largura da coluna, lista por
   baixo em duas colunas de ~18rem). A foto anotada mantém o lado a lado (regras em site.css). */
@media (min-width: 64em) {
  .page--cols .page__figs > .fig--tacos, .page--cols .page__figs > .fig--joelho { max-width: none; }
  .page--cols .page__figs > .fig--points.fig--bicicleta, .page--cols .page__figs > .fig--points.fig--pedalada { max-width: none; grid-template-columns: minmax(0, 1fr); }
  .page--cols .page__figs > .fig--points.fig--bicicleta > .fig__points, .page--cols .page__figs > .fig--points.fig--pedalada > .fig__points { grid-column: 1; grid-row: 2; }
  .page--cols .page__figs > .fig--points.fig--bicicleta > svg, .page--cols .page__figs > .fig--points.fig--pedalada > svg { position: static; }
  .page--cols .page__figs > .fig--points:not(.fig--foto):not(.fig--mapa) > .fig__points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 0.15rem; align-items: start; }
  .page--cols .page__figs > .fig--bicicleta-compact { max-width: 30rem; }
}