/* Bike Fit Lab — icons.css · ícones inline (src/icons.php + public/assets/img/icons.svg) e fotos anotadas (fig-foto.php) */

/* ---------- ícones ---------- */
.icon { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: -0.3em; stroke-width: 1.75; flex: none; }
.icon--sm { width: 1.125rem; height: 1.125rem; vertical-align: -0.2em; }
.icon--lg { width: 2.25rem; height: 2.25rem; vertical-align: -0.45em; }
.icon--lead { margin-inline-end: 0.5rem; }           /* ícone antes de um texto */
.icon--sm.icon--lead { margin-inline-end: 0.4rem; }
.icon--trail { margin-inline-start: 0.35rem; }       /* ícone depois de um texto (seta) */

/* contenção: o ícone acompanha o tamanho do título ou do marcador onde está */
.plan h2 .icon { width: 0.68em; height: 0.68em; vertical-align: -0.06em; margin-inline-end: 0.18em; }
.book__email .icon { width: 0.6em; height: 0.6em; vertical-align: -0.06em; margin-inline-end: 0.2em; }
.slip__row .icon { margin-inline-end: 0.5rem; opacity: 0.85; }
.button .icon { vertical-align: -0.35em; }
.footer__top p .icon { opacity: 0.85; }
.bar a .icon { margin-inline-end: 0.45rem; }
.book__meta .icon { vertical-align: -0.3em; }

/* ---------- foto anotada ---------- */
.fig--foto { max-width: 60rem; }
.fig-foto__frame { position: relative; max-width: 26rem; overflow: hidden; background: var(--soft); }
.fig-foto__frame picture, .fig-foto__frame img { display: block; width: 100%; height: auto; }
.fig-foto__pin { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--fg2); color: var(--fg2-ink); border: 2px solid var(--paper); font-weight: 600; font-size: 0.875rem; line-height: 1; cursor: pointer; transition: transform var(--t-hover) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.fig-foto__pin::before { content: ""; position: absolute; inset: -0.4rem; }   /* área de toque ≥ 44 px */
.fig-foto__pin .nums { position: relative; }
.fig-foto__pin:hover, .fig-foto__pin.is-hover { transform: translate(-50%, -50%) scale(1.12); }
.fig-foto__pin.is-active, .fig-foto__pin[aria-pressed="true"] { background: var(--paper); color: var(--fg); border-color: var(--fg2); outline: 2px solid var(--fg2); }
.fig-foto__pin:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.on-accent .fig-foto__pin:focus-visible { outline-color: var(--fg); }
.fig--foto .fig__points { margin-top: 1rem; }
@media (min-width: 56.25em) {
  .fig--foto { display: grid; grid-template-columns: minmax(0, 26rem) minmax(16rem, 1fr); gap: 1rem 2rem; align-items: start; }
  .fig--foto .fig-foto__frame { grid-row: 1 / span 2; }
  .fig--foto .fig__points { margin-top: 0; }
  .fig--foto figcaption { align-self: end; }
}
@media (prefers-reduced-motion: reduce) { .fig-foto__pin { transition: none; } .fig-foto__pin:hover, .fig-foto__pin.is-hover { transform: translate(-50%, -50%); } }