/* Karta vína — blok `karta` (echo_karta_vina() v tpl/product/karta.php).
 * Předloha: WineCard v lovable/src/routes/obchod.tsx — rounded-3xl, fotka na papírovém
 * pozadí se stínem pod lahví, medaile „Víno s medailí“ (css/23-medaile.css), pilulka barvy, cena a tlačítko.
 *
 * Ovládání košíku je z v3: „Do košíku“, po přidání počítadlo (stejný markup skládá js/kosik.js
 * podle data-blok="karta") a pod tím dávky +6 +18 +30 (DAVKY_VINA v define.php).
 * „Do košíku“ je černé, aby bylo na papírové kartě nejvýraznějším prvkem. Cena je nad ním
 * a tlačítko i počítadlo jdou přes celou šířku — po přidání do košíku se karta nepřeskládá.
 *
 * `karta--mala` — menší karta v šesti sloupcích (oceněná vína na homepage): stejné prvky ve stejném
 * pořadí, názvy a popis mají pevnou výšku dvou řádků, aby tlačítka všech karet byla v jedné řadě.
 */

.karta {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--c-linka);
    border-radius: var(--r-karta);
    background: var(--c-papir);
    transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.karta:hover {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--c-cerna) 40%, transparent);
    box-shadow: var(--stin-karta);
}
.karta__kus--vkosiku { border-color: color-mix(in oklab, var(--c-cerna) 50%, transparent); }
.karta__obrazek {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 18rem;
    overflow: hidden;
    background: var(--c-papir-tmavsi);
}
.karta__stin {
    position: absolute;
    inset: auto 2.5rem 1rem;
    height: 1.5rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--c-grafit) 15%, transparent);
    filter: blur(8px);
    transition: transform 0.5s ease;
}
.karta:hover .karta__stin { transform: scale(0.9); }
.karta__obrazek img {
    position: relative;
    width: auto;
    height: 17rem;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.7s ease;
}
.karta:hover .karta__obrazek img { transform: translateY(-8px) rotate(-2deg); }
.karta__medaile { position: absolute; left: 0.875rem; top: 0.875rem; --medaile: 3.5rem; }
.karta__typ {
    position: absolute;
    right: 1rem;
    top: 1rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--c-linka);
    border-radius: var(--r-pilulka);
    background: color-mix(in oklab, var(--c-papir) 80%, transparent);
    color: color-mix(in oklab, var(--c-grafit) 70%, transparent);
    font-size: 0.66rem;
}
.karta__telo { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.karta__meta { margin: 0; color: var(--c-cerna-mekka); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.karta__nazev { margin: 0.375rem 0 0; font-size: 1.35rem; font-weight: 600; line-height: 1.3; }
.karta__nazev a { color: var(--fg-normal); text-decoration: none; }
.karta__nazev a:hover { text-decoration: underline; text-underline-offset: 4px; }
.karta__popis { margin: 0.25rem 0 0; color: var(--fg-muted); font-size: 0.8rem; }
.karta__spodek {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--c-linka);
}
.karta__cena { margin: 0; color: var(--c-cerna); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.karta__cena span { margin-left: 0.375rem; color: var(--fg-muted); font-size: 0.68rem; font-weight: 400; }
.karta__akce { min-height: var(--v-ovladani); display: flex; align-items: center; }
.karta__pridat {
    width: 100%;
    min-height: var(--v-ovladani);
    padding: 0.625rem 1.25rem;
    border: 0;
    border-radius: var(--r-pilulka);
    background: var(--c-cerna);
    color: var(--c-sampan-svetla);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.karta__pridat:hover { background: var(--c-sampan); color: var(--c-cerna-hluboka); }
.karta__pocitadlo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--v-ovladani);
    padding: 0 0.375rem;
    border: 1px solid var(--c-cerna);
    border-radius: var(--r-pilulka);
    background: var(--c-cerna);
    color: var(--c-sampan-svetla);
}
.karta__krok {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}
.karta__krok:hover { background: color-mix(in oklab, var(--c-papir) 15%, transparent); }
.karta__ks { width: 2.75rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: 0.86rem; font-weight: 600; text-align: center; }
.karta__jednotka { margin-right: 0.25rem; font-size: 0.72rem; opacity: 0.75; }
.karta__davky { display: flex; gap: 0.375rem; margin-top: 0.75rem; }
.karta__davka {
    flex: 1;
    padding: 0.375rem 0;
    border: 1px solid var(--c-linka);
    border-radius: var(--r-pilulka);
    background: transparent;
    color: var(--fg-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.karta__davka:hover { border-color: var(--c-cerna); color: var(--c-cerna); }

/* --- menší karta (oceněná vína na homepage) --- */
.karta--mala { border-radius: var(--r-velky); }
.karta--mala .karta__obrazek { height: 13rem; }
.karta--mala .karta__obrazek img { height: 12rem; }
.karta--mala .karta__stin { inset: auto 1.5rem 0.75rem; }
.karta--mala .karta__medaile { left: 0.5rem; top: 0.5rem; --medaile: 2.875rem; }
.karta--mala .karta__typ { display: none; }   /* barva je v řádku nad názvem; v úzké kartě by se překrývala s medailí */
.karta--mala .karta__telo { padding: 0.875rem; }
.karta--mala .karta__meta { overflow: hidden; font-size: 0.66rem; letter-spacing: 0.1em; text-overflow: ellipsis; white-space: nowrap; }
.karta--mala .karta__nazev,
.karta--mala .karta__popis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.karta--mala .karta__nazev { min-height: calc(2 * 1.25em); font-size: 1.05rem; line-height: 1.25; }
.karta--mala .karta__popis { min-height: calc(2 * 1.35em); margin-bottom: 0.75rem; font-size: 0.75rem; line-height: 1.35; }
.karta--mala .karta__spodek { gap: 0.625rem; padding-top: 0.75rem; }
.karta--mala .karta__cena { font-size: 1.2rem; }
.karta--mala .karta__cena span { margin-left: 0.25rem; }
.karta--mala .karta__davky { gap: 0.25rem; margin-top: 0.5rem; }
.karta--mala .karta__davka { font-size: 0.7rem; }

/* --- karta doplňku (echo_karta_doplnku) ---
 * Fotky doplňků mají bílé pozadí a různý tvar (samolepky čtverec, tašky a krabice na výšku) →
 * celá fotka uvnitř čtverce (contain) na bílé, nic se neořízne. */
.karta--doplnek .karta__obrazek { height: auto; aspect-ratio: 1; align-items: stretch; background: #fff; }
.karta--doplnek .karta__obrazek img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.karta--doplnek:hover .karta__obrazek img { transform: scale(1.035); }
.karta__povinne {
    position: absolute;
    left: 1rem;
    top: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pilulka);
    background: var(--c-cerna);
    color: var(--c-sampan-svetla);
    font-size: 0.66rem;
    font-weight: 600;
}
.karta--doplnek .karta__nazev { font-size: 1.15rem; }
.karta--doplnek .karta__popis { margin-top: 0.5rem; }
.karta--doplnek .karta__spodek { margin-top: 1rem; }
.karta__dopocet {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1px dashed var(--c-linka);
    border-radius: var(--r-pilulka);
    background: none;
    color: var(--fg-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.karta__dopocet:hover { border-color: var(--c-cerna); color: var(--c-cerna); }
.karta__dopocet:disabled { opacity: 0.6; cursor: progress; }
.karta__dopocethlaska { margin: 0.375rem 0 0; color: var(--c-ok); font-size: 0.75rem; }
.karta__dopocethlaska:empty { display: none; }