/* Styles for /maly-fotbal/ pages. Copied into the site by run.py; builds on ../style.css (tokens, nav, hero, section, footer). */
.hero .eyebrow { justify-content: center; padding-left: 0; }
.hero .eyebrow::before { display: none; }
.hero-actions { justify-content: center; }
.hero-sub { margin-bottom: 2rem; }

.wide { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; text-align: center; }
.mf-head { margin-bottom: 1.1rem; }
.mf-head h2 { margin-bottom: 0; font-size: clamp(1.2rem, 2.6vw, 1.45rem); }
main > section { padding: 1.75rem 0; }

.mf-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; text-align: left; }
.mf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.mf { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .93rem; text-align: right; }
.mf th { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); font-weight: 500; padding: .85rem .7rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.mf td { padding: .65rem .7rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.mf tr:last-child td { border-bottom: 0; }
.mf .l { text-align: left; }
.mf .team { font-weight: 500; }
.mf .rk { font-size: 1.05rem; width: 2.4rem; text-align: center; padding-left: .3rem; padding-right: .3rem; }
.mf .strong { font-weight: 500; }
.mf .dim { color: var(--ink3); }
.mf tr.up td { background: #e1f2e8; }
.mf tr.po td { background: #f7f1d6; }
.mf tr.down td { background: #f8e3df; }

.mf th.pts { width: 42%; }
.pts-in { display: flex; align-items: center; gap: .65rem; }
.pts-in .strong { min-width: 2ch; text-align: right; }
.range { position: relative; flex: 1; min-width: 56px; height: 18px; }
.range .track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: var(--rule); }
.range .span { position: absolute; top: 50%; height: 8px; transform: translateY(-50%); border-radius: 4px; background: rgba(26,56,70,.2); }
.range .dot { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); border: 2px solid var(--surface); box-sizing: content-box; }

.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; justify-content: center; margin-top: 1.1rem; font-size: .84rem; color: var(--ink2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.note { color: var(--ink3); font-size: .84rem; max-width: 62ch; margin: .9rem auto 0; }

.hm td { text-align: center; padding: .5rem .2rem; font-size: .76rem; }
.hm th { padding-left: .2rem; padding-right: .2rem; }

details.mf-d { max-width: 1040px; margin: 1.25rem auto 0; border: 0; text-align: center; }
details.mf-d > summary { display: block; text-align: center; font-size: .92rem; font-weight: 500; color: var(--ink2); padding: .5rem 0; }
details.mf-d > summary::after { content: ' ▾'; font-size: .8rem; font-weight: 400; transform: none; color: var(--ink3); }
details.mf-d[open] > summary::after { content: ' ▴'; transform: none; }
.mf-d > .inner { margin-top: .9rem; }
.round-title { font-size: 1.1rem; margin: 2rem 0 .9rem; color: var(--ink2); font-weight: 600; }

/* fixtures */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; text-align: left; }
.fx { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.15rem 1rem; }
.fx time { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.fx .teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; margin: .5rem 0 .85rem; font-weight: 500; line-height: 1.25; }
.fx .h { text-align: right; } .fx .a { text-align: left; }
.fx .sc { font-size: 1.15rem; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--rule); }
.bar i { display: block; height: 100%; }
.c-h { background: var(--ink); } .c-d { background: #d6d2c8; } .c-a { background: var(--blue); }
.fx .pr { display: flex; justify-content: space-between; font-size: .82rem; color: var(--ink2); margin-top: .45rem; font-variant-numeric: tabular-nums; }
.fx .pr b { font-weight: 600; color: var(--ink); }
.fx .meta { font-size: .76rem; color: var(--ink3); margin-top: .65rem; text-align: center; }


/* model page */
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: .75rem; }
.prose h2:not(:first-child) { margin-top: 2.75rem; }
.prose p { max-width: 58ch; margin: 0 auto 1rem; color: var(--ink2); }
.prose p strong { color: var(--ink); font-weight: 500; }
.flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: left; counter-reset: s; }
.flow li { counter-increment: s; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.15rem 1.2rem; font-size: .9rem; color: var(--ink2); line-height: 1.5; }
.flow li::before { content: counter(s); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 500; margin-bottom: .7rem; }
.flow b { display: block; color: var(--ink); font-weight: 500; font-size: 1rem; margin-bottom: .2rem; }
.formula, .callout { max-width: 640px; margin: 1.25rem auto; padding: 1.1rem 1.4rem; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 10px; text-align: left; }
.formula { font-weight: 500; font-size: 1.05rem; line-height: 1.5; }
.callout { font-size: .95rem; color: var(--ink2); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin: 1.5rem auto; }
.fact b { display: block; font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.fact span { font-size: .8rem; color: var(--ink2); }
.limits { list-style: none; max-width: 58ch; margin: 0 auto; text-align: left; color: var(--ink2); }
.limits li { padding: .55rem 0 .55rem 1.2rem; position: relative; border-bottom: 1px solid var(--rule); }
.limits li::before { content: '–'; position: absolute; left: 0; color: var(--ink3); }
.mini { max-width: 600px; margin: 1.25rem auto 0; }

@media (max-width: 860px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .wide { padding: 0 .75rem; }
  .pts-in { gap: .4rem; }
  .mf th.pts { width: auto; }
  .range { flex: 0 0 72px; }
  table.mf { font-size: .88rem; }
  .hide-s { display: none; }
  .mf th, .mf td { padding-left: .3rem; padding-right: .3rem; }
  .mf td.team { white-space: normal; min-width: 5.2rem; line-height: 1.2; }
  .mf .rk { width: 1.8rem; }
  .fx-grid { grid-template-columns: 1fr; }
}

/* compact page header */
.mf-top { padding: 2rem 0 0; text-align: center; }
.mf-top h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5rem; }
.mf-top .back { display: inline-block; font-size: .85rem; margin-bottom: 1.25rem; text-decoration: none; color: var(--ink2); }
.mf-top .back:hover { color: var(--accent); }
.mf-top .meta { color: var(--ink2); font-size: .92rem; margin: 0; }
.mf-top + section { padding-top: 1.5rem; }