/*
  srv-mobile-cards.css  ·  PorovnejFondy.cz
  Na mobilu (do 680 px) překlopí širokou tabulku srovnávače (.srv-table, 980 px) do kompaktních karet
  místo vodorovného posouvání. Čistě CSS: přežije jakýkoli re-render (řazení, filtry, hledání,
  stránkování), protože buňky se rozmisťují podle pozice sloupce (nth-child), ne podle atributů.

  PŘEPSÁNO 17. 10. 2026 (majitel: „oprav chyby na mobilu, ať to vypadá dokonale“). Do té doby se soubor
  nikde nenačítal a počítal s 12 sloupci (sloupec „15 až 20 let“ je od 4. 10. 2026 pryč). Na mobilu tak
  zůstala tabulka 980 px: název fondu v úzkém sloupci na 4 řádky s výškou řádku 13 px při písmu 14,5 px
  (řádky se slévaly) a sloupce za správcem useknuté za okrajem.

  KARTA: název přes celou šířku (zaškrtávátko vpravo nahoře), správce a kategorie, pod tím mřížka 3 × 2
  (TER, 1 rok, 3 roky, 5 let, 10 let, proti kategorii) a hodnocení. Celá karta je klikací jako dřív řádek.
  Řádky bez fondu (stránkování, prázdný výsledek, výzva poradce) zůstávají přes celou šířku.

  POŘADÍ SLOUPCŮ (rowHtml v src/pages/srovnavac-fondu.astro; změní-li se, upravit nth-child):
    1 výběr · 2 Fond · 3 Správce · 4 Kategorie · 5 TER · 6 1 rok · 7 3 roky · 8 5 let · 9 10 let
    · 10 vs. kategorie · 11 Hodnocení
  Načítá se v <head> srovnávače za jeho styly. Hyphen-minus v CSS je v pořádku, žádné em/en pomlčky.
*/
@media (max-width: 680px) {
  .srv-table-wrap { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  .srv-table { display: block; width: 100% !important; min-width: 0 !important; border: 0; background: transparent; }
  .srv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .srv-table tbody { display: block; }
  .srv-table tbody tr { display: block; }
  .srv-table tbody tr > td[colspan] { display: block; width: auto; }

  /* KARTA FONDU */
  .srv-table tbody tr[data-id] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    position: relative;
    margin: 0 0 10px;
    padding: 14px 12px 12px;
    background: #fff;
    border: 1px solid #e3d8cc;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(3, 34, 70, .06);
    cursor: pointer;
  }
  .srv-table tbody tr[data-id]:hover { background: #fff; }
  .srv-table tbody tr[data-id].selected { border: 2px solid #b8862a; background: #fffaf0; padding: 13px 11px 11px; }
  .srv-table tbody tr[data-id] > td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left;
    white-space: normal;
    line-height: 1.3;
  }

  /* 1: zaškrtávátko vpravo nahoře */
  .srv-table tbody tr[data-id] > td:nth-child(1) { position: absolute; top: 12px; right: 12px; width: auto; }
  /* 2: název a ISIN přes celou šířku, místo na zaškrtávátko */
  .srv-table tbody tr[data-id] > td:nth-child(2) { grid-column: 1 / -1; padding-right: 40px !important; }
  .srv-table tbody tr[data-id] .srv-table-name { font-size: 16.5px; line-height: 1.28; color: #032246; margin: 0 0 4px; }
  .srv-table tbody tr[data-id] .srv-table-isin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; line-height: 1.4; }
  /* 3 a 4: správce a kategorie jako jeden řádek pod názvem */
  .srv-table tbody tr[data-id] > td:nth-child(3),
  .srv-table tbody tr[data-id] > td:nth-child(4) { font-size: 13.5px; color: #5f453e; }
  .srv-table tbody tr[data-id] > td:nth-child(3) { grid-column: 1 / 3; }
  .srv-table tbody tr[data-id] > td:nth-child(4) { grid-column: 3; text-align: right; }
  /* 5 až 10: dlaždice s popiskem nad číslem */
  .srv-table tbody tr[data-id] > td:nth-child(n+5):nth-child(-n+10) {
    padding: 7px 8px !important;
    background: #f8f3ee !important;
    border-radius: 6px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #032246;
  }
  .srv-table tbody tr[data-id] > td:nth-child(n+5):nth-child(-n+10)::before {
    display: block;
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #8a7068;
  }
  .srv-table tbody tr[data-id] > td:nth-child(5)::before  { content: "Poplatek"; }
  .srv-table tbody tr[data-id] > td:nth-child(6)::before  { content: "Za 1 rok"; }
  .srv-table tbody tr[data-id] > td:nth-child(7)::before  { content: "Za 3 roky"; }
  .srv-table tbody tr[data-id] > td:nth-child(8)::before  { content: "Za 5 let"; }
  .srv-table tbody tr[data-id] > td:nth-child(9)::before  { content: "Za 10 let"; }
  .srv-table tbody tr[data-id] > td:nth-child(10)::before { content: "Proti kat."; }
  /* popisek „za 3 roky“ pod číslem dlaždice by se opakoval, nechává se jen „p.a.“ u kategorie */
  .srv-table tbody tr[data-id] > td:nth-child(n+6):nth-child(-n+9) .srv-cum { display: none; }
  .srv-table tbody tr[data-id] > td:nth-child(10) .srv-cum { font-size: 11px; font-weight: 400; color: #8a7068; margin-top: 2px; }
  .srv-table tbody tr[data-id] > td.pos { color: #1f7a4d; }
  .srv-table tbody tr[data-id] > td.neg { color: #b03a3a; }
  /* 11: hodnocení přes celou šířku */
  .srv-table tbody tr[data-id] > td:nth-child(11) { grid-column: 1 / -1; padding-top: 2px !important; }
}