/* Sobre o Jockey (TZ §4.14): intro, history + folheto timeline, turfe
 * cearense, hipódromo band, organisation steps, Quina, official documents. */

main .xilo img { object-position: var(--pos, 50% 50%); }
main figure { margin: 0; }

.so-prose { margin-top: 22px; }
.so-prose p { font-size: 17px; line-height: 1.65; max-width: 40em; }
.so-prose p + p { margin-top: 14px; }

.so-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.so-intro__side { display: grid; gap: 28px; }
.so-stats b { font-size: clamp(28px, 2.6vw, 40px); }
.so-photo .print { aspect-ratio: 3 / 2; }

.so-hist { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.so-hist .so-prose { margin-top: 0; }
.so-hist__photos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.so-portrait .print { aspect-ratio: 644 / 882; }
.so-portrait .print img { filter: grayscale(1); }
.so-sede .print { aspect-ratio: 4 / 3; }

/* timeline: a row of folhetos pinned to a rope */
.so-tl-h { margin-top: 56px; }
.so-tl {
  list-style: none; margin: 30px 0 0; padding: 26px 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 26px; position: relative;
}
.so-tl > li:nth-child(4n+1) { --tilt: -1deg; }
.so-tl > li:nth-child(4n+2) { --tilt: .8deg; }
.so-tl > li:nth-child(4n+3) { --tilt: -.5deg; }
.so-tl > li:nth-child(4n) { --tilt: 1.1deg; }
.so-tl .fo-head { padding-right: 60px; }
.so-tl__y { font: 400 22px/1.05 var(--font-display); }
.so-tl .fo-name { margin-top: 0; font-size: 17px; }
.so-tl .fo-text { margin-top: 6px; font-size: 15px; }
.so-tl .fo-num { font-size: 22px; width: 46px; height: 46px; }
.so-archive { margin-top: 56px; }
.so-archive figure { grid-column: span 4; }
.so-archive .print { aspect-ratio: 4 / 3; }

.so-two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.so-two--rev { align-items: center; }
.so-two .btn-row { margin-top: 24px; }
.so-stack { display: grid; gap: 22px; }
.so-stack .print { aspect-ratio: 3 / 2; }

.so-hipo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.so-hipo__photo .print { aspect-ratio: 1 / 1; border-color: var(--color-bg); box-shadow: 5px 5px 0 var(--color-brand); }
.so-hipo__photo .cap { color: var(--color-foot-muted); }
.so-hipo .facts { margin-top: 22px; border-top-color: var(--color-bg); }
.so-hipo .facts dt { color: var(--color-foot-muted); }
.so-hipo .facts dt, .so-hipo .facts dd { border-bottom-color: rgba(239, 230, 210, .25); }
.so-hipo .btn-row { margin-top: 24px; }

.so-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* documents */
.so-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.so-docs > .so-doc:last-child { grid-column: span 2; }
.so-doc { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: var(--bw) solid var(--color-ink); background: var(--color-surface); box-shadow: 4px 4px 0 var(--color-ink); }
.so-doc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.so-doc__top .icon { width: 30px; height: 30px; color: var(--color-brand-text); }
.so-doc h3 { font: 400 22px/1.1 var(--font-display); }
.so-doc p { font-size: 15px; line-height: 1.55; }
.so-doc .ext { margin-top: auto; }
.so-legal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; margin-top: 48px; padding-top: 32px; border-top: var(--bw) solid var(--color-ink); align-items: start; }
.so-legal p { margin-top: 12px; font-size: 16px; line-height: 1.6; }
.so-legal .facts a { color: var(--color-accent); }

@media (max-width: 1024px) {
  .so-intro, .so-hist, .so-two, .so-hipo, .so-legal { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .so-steps, .so-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-docs > .so-doc:last-child { grid-column: span 2; }
  .so-archive figure { grid-column: span 4; }
  .so-hipo__photo { max-width: 520px; }
}
@media (max-width: 760px) {
  .so-prose p { font-size: 16px; }
  .so-steps, .so-docs { grid-template-columns: 1fr; }
  .so-docs > .so-doc:last-child { grid-column: auto; }
  .so-archive figure { grid-column: span 12; }
  .so-archive .print { aspect-ratio: 4 / 4; }
  .so-hist__photos { grid-template-columns: 1fr; }
  .so-portrait { max-width: 260px; }
}
.so-legal b { white-space: nowrap; }

/* 13 events never leave one alone in the last row: two columns on the middle widths */
@media (min-width: 761px) and (max-width: 1439px) {
  .so-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}