/* Díl 4 „Otázky, které dostanete“ (review zakladatele 2026-10-03):
   - REVIEW-16 (obrázek 12): karta otázky ve dvou sloupcích (vlevo Proč se ptají, Jak odpovědět, Na co pozor, vpravo
     Vaše odpověď a Ukázka odpovědi), na úzkém displeji pod sebou; nápověda u částí STAR; nenápadný filtr.
   - REVIEW-4: sekce „Jak může pohovor probíhat“ (fáze jako rozbalovací kroky).
   Načítá se po dily-kompakt.css (složka, díl) a na veřejné ukázce (/ukazka). Dva sloupce řídí šířka karty (container
   query), ne okna, protože vedle papíru bývá panel chatu. Starší karty bez `sl-karta__telo--dvoje` se nemění. */

.sl-dil--otazky .sl-filtr[hidden] { display: none; }

.sl-dil--otazky .sl-otazky,
.sl-dil--otazky .sl-prubeh { container-type: inline-size; }
.sl-dil--otazky .sl-otazky { container-name: otazky; }
.sl-dil--otazky .sl-prubeh { container-name: prubeh; }

@media screen {
  /* ---------- nadpis nad otázkami a nenápadný filtr ---------- */
  main .sl-dil--otazky .sl-otazky-hlava {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--m-1) var(--m-4); margin: var(--m-4) 0 var(--m-2);
  }
  /* h2: pravidla dílu v dily-kompakt.css (hlavička, odstup nadpisů na velkém monitoru) mají vyšší specificitu */
  main .sl-stranka .sl-dil--otazky .sl-otazky-hlava > h2 { margin: 0; font-size: var(--velikost-h4); line-height: 1.3; }
  main .sl-dil--otazky .sl-otazky-hlava .sl-otazky-pokyn { flex: 1 0 100%; order: 3; margin: 0; }
  main .sl-dil--otazky .sl-otazky-hlava .sl-filtr { display: inline-flex; flex-wrap: wrap; gap: 0 var(--m-1); margin: 0; }
  main .sl-dil--otazky .sl-filtr__volba {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    min-height: 2.75rem; padding: 0.2rem 0.75rem; cursor: pointer;
    font: 600 var(--velikost-s)/1.2 var(--pismo-text, inherit); color: var(--tlumeny);
  }
  main .sl-dil--otazky .sl-filtr__volba:hover { color: var(--produkt-text); }
  main .sl-dil--otazky .sl-filtr__volba[aria-pressed="true"] { color: var(--produkt-text); border-bottom-color: var(--produkt-text); }
  main .sl-dil--otazky .sl-filtr__volba:focus-visible { outline: var(--fokus-sirka, 3px) solid var(--produkt-text); outline-offset: 2px; }

  /* ---------- Jak může pohovor probíhat ---------- */
  main .sl-dil--otazky .sl-prubeh { margin: 0 0 var(--m-2); }
  main .sl-dil--otazky .sl-prubeh__hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--m-3); margin: 0 0 var(--m-2); }
  main .sl-stranka .sl-dil--otazky .sl-prubeh__hlava > h2 { margin: 0; font-size: var(--velikost-h4); line-height: 1.3; }
  main .sl-dil--otazky .sl-prubeh__uvod { margin: 0; color: var(--tlumeny); font-size: var(--velikost-s); max-width: none; }
  main .sl-dil--otazky .sl-faze { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m-1) var(--m-2); }
  main .sl-dil--otazky .sl-faze__polozka { margin: 0; padding: 0; min-width: 0; }
  main .sl-dil--otazky .sl-faze__krok {
    background: var(--n-papir, var(--plocha)); border: 1px solid var(--n-papir-linka, var(--linka)); border-radius: 12px;
  }
  main .sl-dil--otazky .sl-faze__krok[open] { box-shadow: var(--n-stin-1, none); }
  main .sl-dil--otazky .sl-faze__krok > summary {
    display: flex; align-items: center; gap: var(--m-2); min-height: 2.75rem; padding: 0.15rem var(--m-3);
    cursor: pointer; list-style: none; border-radius: 12px; font-size: var(--velikost-s);
  }
  main .sl-dil--otazky .sl-faze__krok > summary::-webkit-details-marker { display: none; }
  main .sl-dil--otazky .sl-faze__krok > summary::after { content: "▸"; margin-left: var(--m-1); color: var(--produkt-text); }
  main .sl-dil--otazky .sl-faze__krok[open] > summary::after { content: "▾"; }
  main .sl-dil--otazky .sl-faze__krok > summary:focus-visible { outline: var(--fokus-sirka, 3px) solid var(--produkt-text); outline-offset: 2px; }
  main .sl-dil--otazky .sl-faze__cislo {
    flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; text-align: center;
    font: 700 0.75rem/1.4rem var(--pismo-text, inherit); background: var(--produkt-plocha); color: var(--produkt-text);
  }
  main .sl-dil--otazky .sl-faze__nadpis { flex: 1 1 auto; font-weight: 700; min-width: 0; }
  main .sl-dil--otazky .sl-faze__delka { flex: 0 0 auto; color: var(--tlumeny); font-size: var(--velikost-xs); }
  main .sl-dil--otazky .sl-faze__telo {
    display: grid; gap: var(--m-2) var(--m-5); padding: 0 var(--m-3) var(--m-3) calc(var(--m-3) + 1.9rem);
    font-size: var(--velikost-s); line-height: 1.5;
  }
  main .sl-dil--otazky .sl-faze__telo p { margin: 0 0 var(--m-1); max-width: none; }
  main .sl-dil--otazky .sl-faze__tip { color: var(--tlumeny); }
  main .sl-dil--otazky .sl-faze__tip strong { color: var(--text); }
  main .sl-dil--otazky .sl-vymena { margin: 0 0 var(--m-2); padding-left: var(--m-3); border-left: 3px solid var(--produkt-plocha); }
  main .sl-dil--otazky .sl-vymena:last-child { margin-bottom: 0; }
  main .sl-dil--otazky .sl-vymena__stitek { font-weight: 700; color: var(--produkt-text); }
  main .sl-dil--otazky .sl-vymena__otazka > .sl-t { font-weight: 600; }
  main .sl-dil--otazky .sl-vymena__odkaz { white-space: nowrap; padding-block: .75rem; } /* cíl 44 px bez změny řádkování */
  /* místa „doplňte“ v průběhu jsou ukázka, ne hlavní práce: na myši drobná, na dotyku s plnou plochou */
  main .sl-dil--otazky .sl-faze__telo .sl-doplnte { display: inline; min-height: 0; padding: 0 0.3rem; margin: 0; border-width: 1px; line-height: inherit; }
  @media (pointer: coarse) {
    main .sl-dil--otazky .sl-faze__telo button.sl-doplnte { display: inline-block; min-height: 2.75rem; padding: 0.3rem 0.4rem; }
    main .sl-dil--otazky .sl-vymena__odkaz { display: inline-flex; align-items: center; min-height: 2.75rem; }
  }
  /* úzká šířka: číslo, název a šipka v jednom řádku, délka pod názvem */
  @container prubeh (max-width: 36rem) {
    main .sl-dil--otazky .sl-faze__telo { padding-left: var(--m-3); }
    main .sl-dil--otazky .sl-faze__krok > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--m-2); row-gap: 0; padding-block: 0.3rem; }
    main .sl-dil--otazky .sl-faze__cislo { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    main .sl-dil--otazky .sl-faze__nadpis { grid-column: 2; grid-row: 1; }
    main .sl-dil--otazky .sl-faze__delka { grid-column: 2; grid-row: 2; }
    main .sl-dil--otazky .sl-faze__krok > summary::after { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  }
  /* od 40 rem zavřené kroky ve dvou sloupcích, otevřený krok přes celou šířku (neřeší-li to prohlížeč bez :has, krok
     zůstane v půlce řádku a je stejně čitelný) */
  @container prubeh (min-width: 40rem) {
    main .sl-dil--otazky .sl-faze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    main .sl-dil--otazky .sl-faze__polozka:has(> details[open]) { grid-column: 1 / -1; }
  }
  @container prubeh (min-width: 46rem) {
    main .sl-dil--otazky .sl-faze__telo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  }

  /* ---------- karta otázky: dva sloupce ---------- */
  /* Pořadí na úzkém displeji: Proč se ptají, Jak odpovědět, Vaše odpověď, Ukázka, Na co pozor, rada. Sloupce jsou
     `display: contents` (bloky jsou přímé položky karty), `order` je řadí. Od šířky karty 46 rem jsou to dva skutečné
     sloupce se stejným pořadím uvnitř. */
  main .sl-dil--otazky .sl-karta__telo--dvoje { display: flex; flex-direction: column; }
  main .sl-dil--otazky .sl-karta__telo--dvoje > .sl-otazka__sloupec { display: contents; }
  main .sl-dil--otazky .sl-karta__telo--dvoje [data-blok="proc"] { order: 1; }
  main .sl-dil--otazky .sl-karta__telo--dvoje [data-blok="jak"] { order: 2; }
  main .sl-dil--otazky .sl-karta__telo--dvoje [data-blok="odpoved"] { order: 3; }
  main .sl-dil--otazky .sl-karta__telo--dvoje [data-blok="ukazka"] { order: 4; }
  main .sl-dil--otazky .sl-karta__telo--dvoje [data-blok="briefing"] { order: 5; }
  main .sl-dil--otazky .sl-karta__telo--dvoje [data-blok="obecna"] { order: 5; }
  main .sl-dil--otazky .sl-karta__telo--dvoje [data-blok="pozor"] { order: 6; }
  main .sl-dil--otazky .sl-karta__telo--dvoje .sl-otazka__sloupec > .sl-rada { order: 7; }
  main .sl-dil--otazky .sl-karta__telo--dvoje h3 { margin: var(--m-3) 0 0.1rem; }
  main .sl-dil--otazky .sl-karta__telo--dvoje .sl-seznam { margin: 0.1rem 0; }
  main .sl-dil--otazky .sl-karta__telo--dvoje p { max-width: none; }
  main .sl-dil--otazky .sl-blok--jak li { margin: 0.25rem 0; }
  main .sl-dil--otazky .sl-blok--ukazka {
    margin-top: var(--m-3); padding: 0.1rem var(--m-3) var(--m-2); background: var(--produkt-plocha); border-radius: 10px;
  }
  main .sl-dil--otazky .sl-blok--ukazka h3 { color: var(--produkt-text); }
  main .sl-dil--otazky .sl-ukazka { margin: 0.2rem 0 0; }
  main .sl-dil--otazky .sl-star__napoveda { display: block; font-size: var(--velikost-xs); font-weight: 400; color: var(--tlumeny); margin: 0 0 0.15rem; }
  @container otazky (min-width: 46rem) {
    main .sl-dil--otazky .sl-karta__telo--dvoje {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 var(--m-5); align-items: start;
    }
    main .sl-dil--otazky .sl-karta__telo--dvoje > .sl-otazka__sloupec { display: flex; flex-direction: column; min-width: 0; }
    main .sl-dil--otazky .sl-otazka__sloupec > .sl-blok:first-child > h3 { margin-top: 0; }
  }
}

/* ---------- tisk: jeden sloupec, fáze rozbalené ---------- */
@media print {
  .sl-dil--otazky .sl-otazky-hlava h2 { font-size: 1.1rem; margin: 0.8rem 0 0.3rem; }
  .sl-dil--otazky .sl-prubeh > h2 { font-size: 1.1rem; margin: 0.8rem 0 0.2rem; }
  .sl-dil--otazky .sl-faze { list-style: none; padding: 0; margin: 0; }
  .sl-dil--otazky .sl-faze__krok { break-inside: avoid; border: 1px solid #999; border-radius: 4px; margin: 0 0 0.4rem; padding: 0.2rem 0.5rem; }
  .sl-dil--otazky .sl-faze__krok > summary { list-style: none; font-weight: 700; }
  .sl-dil--otazky .sl-faze__krok > summary::-webkit-details-marker { display: none; }
  .sl-dil--otazky .sl-faze__cislo::after { content: ". "; }
  .sl-dil--otazky .sl-faze__cislo, .sl-dil--otazky .sl-faze__nadpis, .sl-dil--otazky .sl-faze__delka { display: inline; }
  .sl-dil--otazky .sl-faze__delka::before { content: " · "; }
  .sl-dil--otazky .sl-vymena { margin: 0.2rem 0; padding-left: 0.5rem; border-left: 2px solid #999; }
  .sl-dil--otazky .sl-vymena__stitek { font-weight: 700; }
  .sl-dil--otazky .sl-karta__telo--dvoje, .sl-dil--otazky .sl-karta__telo--dvoje > .sl-otazka__sloupec { display: block; }
  .sl-dil--otazky .sl-star__napoveda { display: block; font-size: 0.8rem; color: #444; }
  .sl-dil--otazky .sl-blok--ukazka { border-left: 2px solid #999; padding-left: 0.5rem; }
}

/* D8 (UAT2) a D16: záložky s ⓘ a řádek STAR (kolečko `.sl-nap` je ve sdíleném napoveda.css). */
.sl-zalozky-rada { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; }
.sl-zalozky-rada[hidden] { display: none; }
.sl-star-radek { margin: 0.25rem 0 0.5rem; }
@media print { .sl-zalozky-rada { display: none; } }

/* D9 (Z29): u obecné otázky tři rozbalovací bloky z pevné báze (pohled z druhé strany stolu, experti, časté chyby).
   D9 (Z31): díl 5 ve čtyřech skupinách (nadpis skupiny s popisem, opora z briefingu, pevné otázky z báze). */
.sl-obecna { margin: 0.75rem 0; }
.sl-obecna > h3 { display: flex; align-items: center; gap: 0.25rem; margin: 0 0 0.35rem; }
.sl-obecna__blok { border: 1px solid var(--linka, #c9c9c9); border-radius: 10px; margin: 0.35rem 0; background: var(--plocha, #fff); }
.sl-obecna__blok > summary { display: flex; align-items: center; min-height: 2.75rem; padding: 0.15rem 0.85rem; cursor: pointer;
  list-style: none; font-weight: 700; border-radius: 10px; }
.sl-obecna__blok > summary::-webkit-details-marker { display: none; }
.sl-obecna__blok > summary::after { content: "▸"; margin-left: auto; padding-left: 0.5rem; }
.sl-obecna__blok[open] > summary::after { content: "▾"; }
.sl-obecna__blok > summary:focus-visible { outline: 3px solid var(--produkt-text, #174a40); outline-offset: 2px; }
.sl-obecna__telo { padding: 0 0.85rem 0.75rem; }
.sl-obecna__telo p, .sl-obecna__telo ul { margin: 0.4rem 0; max-width: none; }
.sl-obecna__telo .sl-odznak { display: inline-block; padding: 0 0.4rem; font-size: 0.75rem; font-weight: 600; margin-right: 0.2rem; }
.sl-obecna__zdroj { font-size: 0.85rem; color: var(--tlumeny, #4a4a4a); overflow-wrap: anywhere; }

.sl-vase-vyber { margin: 0.5rem 0 1rem; }
.sl-otazky--vase > .sl-otazky__skupina { list-style: none; margin: 1.5rem 0 0.25rem; padding: 0; }
.sl-otazky--vase > .sl-otazky__skupina h2 { margin: 0 0 0.15rem; font-size: var(--velikost-h4, 1.15rem); line-height: 1.3; }
.sl-otazky--vase > .sl-otazky__skupina p { margin: 0; color: var(--tlumeny, #4a4a4a); font-size: 0.9rem; max-width: none; }
.sl-vase-opora { margin: 0.4rem 0; padding: 0.4rem 0.6rem; border-left: 3px solid var(--produkt-text, #174a40); background: var(--produkt-plocha, #eef5f2);
  font-size: 0.9rem; overflow-wrap: anywhere; }
.sl-vase-opora p { margin: 0.15rem 0; max-width: none; }
.sl-vase-pevne { font-size: 0.85rem; color: var(--tlumeny, #4a4a4a); }
@media print {
  .sl-obecna__blok { border: 0; border-left: 2px solid #999; border-radius: 0; }
  .sl-obecna__blok > summary::after { content: ""; }
}