/* Oceněná vína na homepage a Další vína na detailu vína.
   Předloha: sekce `vyber` v prototyp/v22/index.html */

.vyber { padding: 0 2rem 6rem; }
/* na detailu leží pod barevnou sekcí doplňků — horní mezeru tu nedělá sekce nad ní */
.doplnky + .vyber { padding-top: 6rem; }
.vyber__obal { max-width: var(--sirka-obalu, 78rem); margin: 0 auto; }
/* Hlava: vlevo nadpis a pod ním případný drobný text, vpravo odkaz na všechna vína.
   Zarovnání na účaří nadpisu (první řádek levé části). */
.vyber__hlava { display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap; margin: 0 0 3rem; }
.vyber__hlava-prava { margin-left: auto; }
.vyber__nadpis {
  font-family: var(--font-nadpis, Newsreader, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin: 0;
}
.vyber__vse {
  font-size: 1rem;
  color: var(--c-bordo, hsl(334 45% 26%));
  text-decoration: none;
  border-bottom: 1px solid hsl(334 22% 78%);
  transition: border-color 0.15s ease;
}
.vyber__vse:hover, .vyber__vse:focus-visible { border-bottom-color: var(--c-bordo, hsl(334 45% 26%)); }

.vyber__mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2rem; }
.vyber__kus {
  background: var(--bg-karta, hsl(0 0% 100%));
  border-radius: var(--r-karta, 16px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--stin-karta, 0 2px 8px hsl(334 20% 30% / 0.05));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.vyber__kus:hover { box-shadow: var(--stin-zvednuta, 0 12px 32px hsl(334 20% 30% / 0.1)); transform: translateY(-2px); }
.vyber__kus--vkosiku { box-shadow: 0 0 0 2px hsl(334 45% 26% / 0.22), var(--stin-karta, 0 2px 8px hsl(334 20% 30% / 0.05)); }

.vyber__obrazek { position: relative; margin: 0 0 1.5rem; }
/* Přímý potomek — uvnitř je ještě <img> odznaku ocenění. */
/* Fotky vín jsou 2:3 s lahví na 90 % výšky (bin/fotky_vin.py). Rámeček 3:4 je nižší, takže lahev
   vyjde asi o 11 % menší a nepůsobí mohutně; contain ji ukáže celou. */
.vyber__obrazek > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }

.vyber__medaile {
  position: absolute; top: -0.25rem; right: -0.25rem;
  display: block; width: 4.25rem; line-height: 0;
  filter: drop-shadow(0 2px 5px hsl(334 25% 25% / 0.28));
  pointer-events: none;
}
.vyber__medaile img { display: block; width: 100%; height: auto; }
.vyber__nazev { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-weight: 500; font-size: 1.25rem; margin: 0 0 0.25rem; }
.vyber__nazev a { color: inherit; text-decoration: none; }
.vyber__nazev a:hover, .vyber__nazev a:focus-visible { color: var(--c-akce, hsl(345 62% 36%)); }
.vyber__meta { font-size: 0.875rem; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 1.5rem; }
.vyber__cena {
  font-family: var(--font-nadpis, Newsreader, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 500;
  margin: auto 0 1rem;
  font-variant-numeric: tabular-nums;
}
.vyber__cena span { font-family: var(--font-text, "DM Sans", sans-serif); font-size: 0.75rem; color: var(--fg-muted, hsl(334 12% 42%)); }

.vyber__akce { display: grid; }
.vyber__pridat { font: inherit; font-size: 0.9375rem; font-weight: 500; height: var(--v-ovladani, 2.75rem); padding: 0 0.75rem; border: none; border-radius: var(--r-ovladani, 10px); cursor: pointer; background: var(--c-akce, hsl(345 62% 36%)); color: hsl(36 40% 97%); transition: background-color 0.15s ease; }
.vyber__pridat:hover, .vyber__pridat:focus-visible { background: var(--c-akce-tmava, hsl(345 62% 30%)); }
.vyber__pocitadlo { display: flex; align-items: center; height: var(--v-ovladani, 2.75rem); border-radius: var(--r-ovladani, 10px); background: hsl(340 24% 93%); }
.vyber__krok { font: inherit; font-size: 1.0625rem; line-height: 1; width: var(--s-krok, 2.5rem); height: var(--v-ovladani, 2.75rem); border: none; background: none; color: var(--c-bordo, hsl(334 45% 26%)); cursor: pointer; border-radius: var(--r-ovladani, 10px); transition: background-color 0.15s ease; }
.vyber__krok:hover, .vyber__krok:focus-visible { background: hsl(340 30% 87%); }
.vyber__ks { font: inherit; font-size: 0.9375rem; font-weight: 500; flex: 1; min-width: 0; width: 100%; text-align: center; border: none; background: none; color: var(--c-bordo, hsl(334 45% 26%)); font-variant-numeric: tabular-nums; padding: 0; }
.vyber__jednotka { font-size: 0.6875rem; color: var(--fg-muted, hsl(334 12% 42%)); padding-right: 0.75rem; }

/* Dávky jsou vidět i u vína, které v košíku ještě není — nakupuje se
   po desítkách lahví, ne po jedné. */
.vyber__davky { display: flex; gap: 0.3125rem; margin-top: 0.5rem; }
.vyber__davka { flex: 1; font: inherit; font-size: 0.75rem; padding: 0.375rem 0; border: 1px solid var(--c-linka, hsl(334 12% 89%)); border-radius: var(--r-drobny, 8px); background: none; color: var(--fg-muted, hsl(334 12% 42%)); cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; }
.vyber__davka:hover, .vyber__davka:focus-visible { border-color: var(--c-obrys, hsl(334 22% 70%)); color: var(--c-bordo, hsl(334 45% 26%)); background: hsl(36 40% 97%); }

/* Drobný text pod nadpisem (homepage, v48): „šeptaná“ druhá úroveň — patkové písmo
   jako nadpis, bez tučnosti, v bordó. */
.vyber__sepot {
  font-family: var(--font-nadpis, Newsreader, Georgia, "Times New Roman", serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--c-bordo, hsl(334 45% 26%));
  margin: 0.5rem 0 0;
  max-width: 40ch;
}

@media (max-width: 900px) { .vyber { padding: 0 1.5rem 3rem; } .doplnky + .vyber { padding-top: 3rem; } .vyber__mrizka { gap: 1.5rem; } }

/* --- Úzké displeje — viz stejný blok v 20-katalog.css -------------------- */

@media (max-width: 600px) {
  .vyber__sepot { font-size: 1.125rem; }
  .vyber__hlava:has(.vyber__sepot) { margin-bottom: 2rem; }
  .vyber { padding: 0 1rem 2.5rem; }
  .doplnky + .vyber { padding-top: 2.5rem; }
  .vyber__mrizka { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
  .vyber__kus { padding: 1rem; }
  .vyber__obrazek { margin-bottom: 0.875rem; }
  .vyber__nazev { font-size: 1.0625rem; }
  .vyber__meta { font-size: 0.75rem; }
  .vyber__cena { font-size: 1.125rem; }
  .vyber__medaile { width: 3rem; }
}

@media (max-width: 400px) {
  .vyber { padding: 0 0.75rem 2rem; }
  .doplnky + .vyber { padding-top: 2rem; }
  .vyber__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .vyber__kus { padding: 0.75rem; border-radius: 12px; }
  .vyber__davky { gap: 0.25rem; }
  .vyber__davka { font-size: 0.6875rem; padding: 0.3125rem 0; }
  .vyber__jednotka { display: none; }
  .vyber__medaile { width: 2.5rem; }
}