/* The API page. Everything general is in /style/paper.css; this file only adds
   what a reference page needs and the hub does not have: a narrow reading
   column, a field table, the snippet builder and a frame for the live widget.
   No card grid: the page is read top to bottom like documentation. */

.uzke { width: min(760px, 100%); }
.siroke { width: min(1040px, 100%); }

/* min-width: 0 na stĺpcoch je nutnosť, nie kozmetika: bez neho berie stĺpec
   mriežky najmenšiu šírku svojho obsahu, a jedna položka v <select> („Hares,
   Anti-knight Sudoku") roztiahla celú stránku na 772 bodov pri šírke okna
   390. Zmerané snímkou a kontrolou pretečenia. */
.api-hero { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: start; }
.api-hero > *, .stavebnica > * { min-width: 0 }
@media (max-width: 900px) { .api-hero { grid-template-columns: 1fr } }

.fakty { font-family: var(--ui); font-size: 14px; color: var(--muted); margin: 22px 0 0; padding: 0; list-style: none; }
.fakty li { padding: 7px 0; border-top: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; }
.fakty b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.polia { margin: 18px 0 0 }
.polia div { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.polia dt { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.polia dd { margin: 0; font-size: 16px; }
@media (max-width: 620px) { .polia div { grid-template-columns: 1fr; gap: 3px } }

/* 1.6em, nie 1.2: pri 390 bodoch orezáva užší odsadenie číslo položky. */
.kroky { font-size: 16px; padding-left: 1.6em; }
.kroky li { margin: 0 0 9px }

/* Úryvky sa zalamujú, nescrollujú. Vodorovný posuvník v kóde, ktorý si má
   niekto skopírovať, len skrýva jeho koniec; zalomenie do textu nič nepridá,
   lebo sa kopíruje textContent, nie to, čo nakreslil prehliadač. */
pre.kod { margin: 14px 0; min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere }
pre.kod b { color: var(--accent); font-weight: 400; }

.stavebnica { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .stavebnica { grid-template-columns: 1fr } }
.volby { display: flex; flex-direction: column; gap: 14px; }
.volby label { font-family: var(--ui); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
.volby select, .volby input {
  font: inherit; font-size: 16px; width: 100%; min-width: 0; max-width: 100%; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.volby select:focus-visible, .volby input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }

.ramcek { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.ramcek iframe { display: block; width: 100%; height: 620px; border: 0; }
.ramcek .popisok { font-family: var(--ui); font-size: 13px; color: var(--muted); padding: 9px 13px; border-top: 1px solid var(--line); }

.kopiruj { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.kopiruj button {
  font-family: var(--ui); font-size: 14px; padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
}
.kopiruj button:hover { background: var(--ink); color: var(--paper) }
.kopiruj span { font-family: var(--ui); font-size: 13px; color: var(--ok) }

details { border-top: 1px solid var(--line); padding: 14px 0 }
details summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink) }
details p { margin: 10px 0 0 }

.ukazky { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px; margin: 22px 0 0; }
.ukazky figure { margin: 0 }
.ukazky img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px }
.ukazky figcaption { font-family: var(--ui); font-size: 12px; color: var(--muted); margin-top: 6px; text-align: center }