/* Bike Fit Lab — guides.css (v6, agente GUIAS)
   Secção "Guias e ferramentas" (home), hub /guias, /glossario, tabela partilhada .table (zebra em --surface, sem
   filetes de 1 px), índice em .chips e a lista "Guias" do rodapé. Só tokens de site.css; cantos retos, sem sombras. */

/* ===== Linhas de guias (home e hub) ===== */
.guides__list { list-style: none; margin: 0; padding: 0; }
.guides__item { background: transparent; }   /* só as linhas pares têm fundo: o inspetor lê três caixas iguais como cards */
.guides__item:nth-child(even) { background: var(--surface); }
.guides__item a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.125rem; column-gap: 1rem; align-items: center; min-height: 3.25rem; padding: 0.9rem 1.25rem; text-decoration: none; color: var(--ink); }
.guides__icon { color: var(--accent); width: 1.5rem; height: 1.5rem; align-self: start; margin-top: 0.1rem; }
.guides__text { min-width: 0; }
.guides__text b { display: block; font-weight: 600; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; transition: transform var(--t-hover) var(--ease-out), color var(--t-hover) ease; }
.guides__text > span { display: block; margin-top: 0.3rem; color: var(--muted); font-size: var(--step-body); line-height: 1.45; }
.guides__arrow { color: var(--muted); justify-self: end; transition: transform var(--t-hover) var(--ease-out), color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .guides__item a:hover .guides__text b, .guides__item a:hover .guides__arrow { color: var(--accent); }
  .guides__item a:hover .guides__arrow { transform: translateX(0.25rem); }
}
.guides__item a:focus-visible { outline-offset: -3px; }

/* home: a lista sai até às margens da coluna de leitura, como .posts__list */
.reading .guides .guides__list { margin: 2rem calc(var(--pad) * -1) 0; }
.reading .guides .guides__item a { padding-inline: var(--pad); }
.reading .guides .guides__text > span { max-width: 52ch; }
.guides .guides__all { margin-top: 1.75rem; }
.guides__all .link { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* hub: linhas maiores; o tom sai 1.25rem para fora para o texto alinhar com o h2 (como .services) */
.guides__list--large { margin-inline: calc(-1 * min(1.25rem, var(--margin))); }
.guides__list--large .guides__item a { grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem; column-gap: 1.25rem; padding: 1.35rem min(1.25rem, var(--margin)); }
.guides__list--large .guides__icon { width: 2.25rem; height: 2.25rem; margin-top: 0.15rem; }
.guides__list--large .guides__arrow { width: 1.5rem; height: 1.5rem; }
.page__figs > .guides__list { margin-top: 0; }
@media (min-width: 64em) { .guides-page .page__figs > .guides__list--large { margin-top: 0.35rem; } }

/* ===== FAQ no hub (<details>, legível sem JS) ===== */
.guides-faq { margin-inline: calc(-1 * min(1.25rem, var(--margin))); }
.guides-faq__item { background: transparent; }
.guides-faq__item:nth-child(odd) { background: var(--surface); }
.guides-faq__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 1rem; column-gap: 1rem; align-items: center; min-height: 3.25rem; padding: 0.9rem min(1.25rem, var(--margin)); font-weight: 600; line-height: 1.35; }
.guides-faq__item summary::-webkit-details-marker { display: none; }
.guides-faq__item summary::after { content: ""; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); justify-self: center; margin-top: -0.25rem; transition: transform var(--t-ui) var(--ease-out); }
.guides-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: 0.25rem; }
.guides-faq__item summary:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .guides-faq__item summary:hover { color: var(--accent); } }
.guides-faq__item p { padding: 0 min(1.25rem, var(--margin)) 1.25rem; max-width: 60ch; line-height: 1.55; }
.page .guides-faq__item > * + * { margin-top: 0; }

/* ===== Chips (índice do glossário) ===== */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips .chip { min-height: 2.75rem; }
.chips--letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 0.5rem; }
.chips--letters .chip { min-width: 0; padding-inline: 0.4rem; justify-content: center; }
.glossary__index { margin-top: 2.5rem; }
.page--glossary { --page-gap: clamp(2rem, 4vw, 4.5rem); }
.glossary__index > p { margin: 0; }
.glossary__index > p + ul { margin-top: 0.6rem; }
.glossary__index > ul + p { margin-top: 1.5rem; }

/* ===== Glossário ===== */
.glossary .page__head-text > .small { margin-top: 1.25rem; max-width: 52ch; }
.page .glossary__group { margin-top: 5.5rem; }   /* folga clara entre o último termo e o h2 seguinte (ganha a .page section) */
.glossary__group h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; max-width: none; }
.glossary__count { font-weight: 400; letter-spacing: 0; }
.glossary__list { margin-top: 1.5rem; }
.glossary__term { break-inside: avoid; page-break-inside: avoid; padding: 0.9rem 0 1rem; }
.glossary__term + .glossary__term { border-top: 0; }
.glossary__term dt, .glossary__term dd { break-inside: avoid; }
.glossary__term dt { font-weight: 600; font-size: var(--step-body); line-height: 1.35; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; scroll-margin-top: 5.5rem; }   /* nome à esquerda, # encostado à margem direita */
.glossary__term dd { margin: 0.35rem 0 0; line-height: 1.5; max-width: 60ch; }
.glossary__anchor { color: var(--muted); text-decoration: none; opacity: 0.55; font-weight: 400; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 1.75rem; min-height: 1.75rem; margin: -0.3rem 0; flex: none; transition: opacity var(--t-hover) ease, color var(--t-hover) ease; }
.glossary__anchor:focus-visible, .glossary__term:target .glossary__anchor { opacity: 1; color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .glossary__term:hover .glossary__anchor { opacity: 1; } .glossary__anchor:hover { color: var(--accent); } }
.glossary__term dt:target, .glossary__term:has(dt:target) { background: var(--surface); box-shadow: none; }
.glossary__term:has(dt:target) { margin-inline: calc(-1 * min(1rem, var(--margin))); padding-inline: min(1rem, var(--margin)); }
.glossary__br { display: inline; }
.glossary__see { display: block; margin-top: 0.45rem; color: var(--muted); }
.glossary__see a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; }
@media (hover: hover) and (pointer: fine) { .glossary__see a:hover { color: var(--accent); text-decoration-color: currentColor; } }
.glossary__post { font-weight: 600; }
.glossary .page__actions { margin-top: 4rem; }
@media (min-width: 64em) {
  .page--glossary .page__inner { max-width: 76rem; }
  .page--glossary .page__head { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); column-gap: var(--page-gap); align-items: start; }
  .page--glossary .page__head-text { grid-column: 1; }
  .page--glossary .glossary__index { grid-column: 2; margin-top: 0.75rem; max-width: 36rem; justify-self: end; width: 100%; }
  .page--glossary .page__head + .glossary__group { margin-top: 5rem; }
  .glossary__list { columns: 2; column-gap: 4rem; }
  .glossary__term { margin-top: 0; }
  .glossary__term dd { max-width: none; }
}
@media (max-width: 64em) { .glossary__term dd { max-width: none; } }

/* ===== Tabela partilhada (evidência em /bike-fit, regras em /sintomas, exemplos em /calculadoras) ===== */
.table-wrap { overflow-x: auto; margin-inline: calc(-1 * min(1rem, var(--margin))); }
.table { width: 100%; border-collapse: collapse; font-size: var(--step-body); line-height: 1.45; text-align: left; }
.table th, .table td { padding: 0.75rem min(1rem, var(--margin)); vertical-align: top; border: 0; }
.table th { font-weight: 600; }
.table thead th { font-size: var(--step-small); color: var(--muted); font-weight: 600; padding-bottom: 0.5rem; }
.table tbody tr:nth-child(odd) { background: var(--surface); }
.table td.nums, .table th.nums { white-space: nowrap; }
.table caption { caption-side: bottom; text-align: left; padding: 0.75rem min(1rem, var(--margin)) 0; }
.table--evidence th[scope="row"] { font-weight: 600; min-width: 9rem; }
.table--evidence td:last-child { min-width: 14rem; }
.page .table__sources { margin-top: 1.25rem; line-height: 1.6; }
@media (max-width: 64em) { .page__figs:has(> .table__sources) { padding-bottom: 2rem; } }   /* numa coluna só: folga entre as fontes e o h2 seguinte */
.table__sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; }
@media (hover: hover) and (pointer: fine) { .table__sources a:hover { color: var(--accent); text-decoration-color: currentColor; } }
@media (max-width: 48em) {
  /* telemóvel: cada estudo como um bloco (nome e ano na primeira linha, texto por baixo) */
  .table--evidence thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .table--evidence tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: 0.85rem min(1rem, var(--margin)) 1rem; }
  .table--evidence th, .table--evidence td { padding: 0; min-width: 0; }
  .table--evidence td:last-child { grid-column: 1 / -1; margin-top: 0.35rem; }
  .table--evidence td.nums { color: var(--muted); }
}

/* ===== Rodapé: lista "Guias" entre as ligações principais e os contactos ===== */
.footer__top .footer__guides { text-align: left; }
@media (max-width: 56.24em) {
  .footer__top .footer__guides { grid-template-columns: repeat(2, max-content); column-gap: 2.5rem; }
  .footer { min-height: 58rem; }   /* mais três linhas de ligações: o nome não pode subir para cima dos contactos (medido a 375 px) */
}