/*
 * templates/_core/css/uvod.css - homepage jako knihovna sekci (sablony 2026).
 * Linkuje se jen na homepage z sekce/uvod.latte (tplSoubor), tj. jen pri opt-in
 * jadro.uvod_latte. Zadne barvy natvrdo - jen tokeny --tpl-* (promenne.css / customizer).
 * Pozor na kaskadu: sablona.css sablony se nacita v hlavicce, tento soubor az v tele,
 * takze pri stejne specificite vyhrava uvod.css. Sablona at prebiji vyssi specificitou
 * (napr. ".tpl-uvod .tpl-uvod-...") nebo vlastnim css/uvod.css (najde se drive v retezu).
 */

.tpl-uvod {
    /* masky ikon a hvezdicky (SVG, jen alfa kanal - barvu dava currentColor / tokeny) */
    --tpl-uvod-ico-doprava: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%204h14v12H1z'/%3E%3Cpath%20d='M15%208h4l3%203v5h-7z'/%3E%3Ccircle%20cx='5.5'%20cy='18.5'%20r='2.5'/%3E%3Ccircle%20cx='18.5'%20cy='18.5'%20r='2.5'/%3E%3C/svg%3E");
    --tpl-uvod-ico-vraceni: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%204v6h6'/%3E%3Cpath%20d='M3.5%2015a9%209%200%201%200%202.1-9.4L1%2010'/%3E%3C/svg%3E");
    --tpl-uvod-ico-bezpecne: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpath%20d='M9%2012l2%202%204-4'/%3E%3C/svg%3E");
    --tpl-uvod-ico-cas: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E");
    --tpl-uvod-ico-telefon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1%201%20.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.8.7a2%202%200%200%201%201.7%202z'/%3E%3C/svg%3E");
    --tpl-uvod-ico-prodejna: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%209l1.5-5h15L21%209'/%3E%3Cpath%20d='M4%209v11h16V9'/%3E%3Cpath%20d='M9%2020v-6h6v6'/%3E%3C/svg%3E");
    --tpl-uvod-ico-hvezda: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.8L12%2017.8%205.8%2021l1.2-6.8-5-4.9%206.9-1z'/%3E%3C/svg%3E");
    --tpl-uvod-ico-fajfka: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206L9%2017l-5-5'/%3E%3C/svg%3E");
    --tpl-uvod-ico-darek: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012v10H4V12'/%3E%3Cpath%20d='M2%207h20v5H2z'/%3E%3Cpath%20d='M12%2022V7'/%3E%3Cpath%20d='M12%207H7.5a2.5%202.5%200%201%201%200-5C11%202%2012%207%2012%207zM12%207h4.5a2.5%202.5%200%201%200%200-5C13%202%2012%207%2012%207z'/%3E%3C/svg%3E");
    --tpl-uvod-ico-list: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11%2020A7%207%200%200%201%204%2013c0-6%205-10%2016-10%200%2011-4%2016-10%2016z'/%3E%3Cpath%20d='M2%2022c3-5%206-8%2011-11'/%3E%3C/svg%3E");
    --tpl-uvod-ico-srdce: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1-1.1a5.5%205.5%200%200%200-7.8%207.8l1%201L12%2021l7.8-7.6%201-1a5.5%205.5%200%200%200%200-7.8z'/%3E%3C/svg%3E");
    --tpl-uvod-ico-karta: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='1'%20y='4'%20width='22'%20height='16'%20rx='2'/%3E%3Cpath%20d='M1%2010h22'/%3E%3C/svg%3E");
    --tpl-uvod-hvezda: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.8L12%2017.8%205.8%2021l1.2-6.8-5-4.9%206.9-1z'/%3E%3C/svg%3E");
    --tpl-uvod-mezera: 40px;
    --tpl-uvod-gap: 16px;
    display: flex;
    flex-direction: column;
    gap: var(--tpl-uvod-mezera);
    margin: 0 0 var(--tpl-uvod-mezera);
}

.tpl-uvod-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#sekce .tpl-uvod-h1 {
    margin: 0;
    font-family: var(--tpl-font-head);
    font-weight: var(--tpl-head-weight, 700);
    letter-spacing: var(--tpl-head-tracking, normal);
}

.tpl-uvod-sekce { margin: 0; min-width: 0; }

.tpl-uvod-hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 16px;
}
#sekce .tpl-uvod-hlava .tpl-uvod-nadpis { margin: 0; flex: 1 1 auto; }

#sekce .tpl-uvod-nadpis {
    margin: 0 0 16px;
    font-family: var(--tpl-font-head);
    font-weight: var(--tpl-head-weight, 700);
    letter-spacing: var(--tpl-head-tracking, normal);
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
    line-height: 1.2;
    color: var(--tpl-text);
}

.tpl-uvod-vse {
    color: var(--tpl-link);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.tpl-uvod-vse:hover { color: var(--tpl-link-hover); text-decoration: underline; }

.tpl-uvod-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border: 2px solid var(--tpl-cta-bg);
    border-radius: var(--tpl-pill, 999px);
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tpl-transition), color var(--tpl-transition), border-color var(--tpl-transition);
}
.tpl-uvod-btn:hover,
a:hover > .tpl-uvod-btn {
    background: var(--tpl-cta-bg-hover);
    border-color: var(--tpl-cta-bg-hover);
    color: var(--tpl-cta-text-hover, var(--tpl-cta-text));
}
.tpl-uvod-btn--obrys { background: transparent; color: var(--tpl-text); border-color: var(--tpl-card-border); }

/* ---------- ikony (masky, nazvy = UvodModel::IKONY) ---------- */
.tpl-uvod-ico {
    display: inline-block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask: var(--tpl-uvod-ico) center / contain no-repeat;
    mask: var(--tpl-uvod-ico) center / contain no-repeat;
}
.tpl-uvod-ico-img { width: 32px; height: 32px; object-fit: contain; }
.tpl-uvod-ico-text { font-size: 26px; line-height: 1; }
.tpl-uvod-ico--doprava { --tpl-uvod-ico: var(--tpl-uvod-ico-doprava); }
.tpl-uvod-ico--vraceni { --tpl-uvod-ico: var(--tpl-uvod-ico-vraceni); }
.tpl-uvod-ico--bezpecne { --tpl-uvod-ico: var(--tpl-uvod-ico-bezpecne); }
.tpl-uvod-ico--cas { --tpl-uvod-ico: var(--tpl-uvod-ico-cas); }
.tpl-uvod-ico--telefon { --tpl-uvod-ico: var(--tpl-uvod-ico-telefon); }
.tpl-uvod-ico--prodejna { --tpl-uvod-ico: var(--tpl-uvod-ico-prodejna); }
.tpl-uvod-ico--hvezda { --tpl-uvod-ico: var(--tpl-uvod-ico-hvezda); }
.tpl-uvod-ico--fajfka { --tpl-uvod-ico: var(--tpl-uvod-ico-fajfka); }
.tpl-uvod-ico--darek { --tpl-uvod-ico: var(--tpl-uvod-ico-darek); }
.tpl-uvod-ico--list { --tpl-uvod-ico: var(--tpl-uvod-ico-list); }
.tpl-uvod-ico--srdce { --tpl-uvod-ico: var(--tpl-uvod-ico-srdce); }
.tpl-uvod-ico--karta { --tpl-uvod-ico: var(--tpl-uvod-ico-karta); }

/* ---------- hero ---------- */
.tpl-uvod-hero .tpl-slider { margin: 0; }

.tpl-uvod-hero-mrizka {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tpl-uvod-gap);
}
.tpl-uvod-hero-mrizka--s-dlazdicemi { grid-template-columns: 2fr 1fr; }
.tpl-uvod-hero-bok {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--tpl-uvod-gap);
}

.tpl-uvod-hero-dlazdice {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 200px;
    overflow: hidden;
    border-radius: var(--tpl-hero-radius, var(--tpl-border-radius));
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    isolation: isolate;
}
.tpl-uvod-hero-dlazdice--hlavni { min-height: 440px; }
.tpl-uvod-hero-mrizka:not(.tpl-uvod-hero-mrizka--s-dlazdicemi) .tpl-uvod-hero-dlazdice--hlavni { min-height: 380px; }

.tpl-uvod-hero-foto,
.tpl-uvod-hero-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.tpl-uvod-hero-dlazdice:not(.tpl-uvod-hero-dlazdice--bez-foto)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--tpl-primary) 82%, transparent) 0%,
        color-mix(in srgb, var(--tpl-primary) 35%, transparent) 45%,
        transparent 75%);
}

.tpl-uvod-hero-obsah {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 28px;
    max-width: 640px;
}
#sekce .tpl-uvod-hero-nadpis {
    margin: 0;
    font-family: var(--tpl-font-head);
    font-weight: var(--tpl-head-weight, 700);
    font-size: 1.25rem;
    line-height: 1.2;
    color: inherit;
}
#sekce .tpl-uvod-hero-dlazdice--hlavni .tpl-uvod-hero-nadpis,
#sekce .tpl-uvod-hero-video .tpl-uvod-hero-nadpis,
#sekce .tpl-uvod-hero-formular .tpl-uvod-hero-nadpis { font-size: var(--tpl-hero-title-size, 2rem); }
#sekce .tpl-uvod-hero-podnadpis { margin: 0; font-size: 1.05rem; color: inherit; }

/* odkaz pres celou dlazdici (stretched link) */
.tpl-uvod-hero-dlazdice .tpl-uvod-hero-obsah { position: static; }
.tpl-uvod-hero-odkaz { color: inherit; text-decoration: none; }
.tpl-uvod-hero-odkaz::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tpl-uvod-hero-dlazdice:focus-within { outline: 3px solid var(--tpl-cta-bg); outline-offset: 2px; }

.tpl-uvod-hero-video,
.tpl-uvod-hero-formular {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--tpl-hero-radius, var(--tpl-border-radius));
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
    isolation: isolate;
}
.tpl-uvod-hero-formular { align-items: center; }
.tpl-uvod-hero-video-medium {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    z-index: -2;
    pointer-events: none;
}
.tpl-uvod-hero-video::before,
.tpl-uvod-hero-formular--s-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--tpl-primary) 55%, transparent);
}
.tpl-uvod-hero-hledani {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 560px;
}
.tpl-uvod-hero-hledani input[type="search"] {
    flex: 1 1 240px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-pill, 999px);
    background: var(--tpl-content-bg);
    color: var(--tpl-text);
    font: inherit;
}

/* ---------- dlazdice kategorii ---------- */
.tpl-uvod-kategorie-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.tpl-uvod-kategorie-polozka { margin: 0; padding: 0; }
.tpl-uvod-kategorie-odkaz {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 72px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-card-radius, var(--tpl-border-radius));
    background: var(--tpl-card-bg, var(--tpl-content-bg));
    color: var(--tpl-text);
    text-decoration: none;
    transition: border-color var(--tpl-transition), box-shadow var(--tpl-transition);
}
.tpl-uvod-kategorie-odkaz:hover { border-color: var(--tpl-primary); box-shadow: var(--tpl-shadow); color: var(--tpl-text); }
.tpl-uvod-kategorie-media {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--tpl-radius-sm, 8px);
    background: var(--tpl-surface-2);
    color: var(--tpl-primary);
}
.tpl-uvod-kategorie-media img { width: 100%; height: 100%; object-fit: cover; }
.tpl-uvod-kategorie-nazev { flex: 1 1 auto; font-weight: 600; line-height: 1.25; }
.tpl-uvod-kategorie-pocet {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--tpl-pill, 999px);
    background: var(--tpl-surface-2);
    color: var(--tpl-text-light);
    font-size: 0.8rem;
}

/* ---------- karusel zbozi ---------- */
.tpl-uvod-karusel { --tpl-uvod-karet: 4; }
.tpl-uvod-karusel-okno { position: relative; }
.tpl-uvod-karusel-pas {
    list-style: none;
    margin: 0;
    padding: 4px 2px 12px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--tpl-uvod-karet) - 1) * var(--tpl-uvod-gap)) / var(--tpl-uvod-karet));
    gap: var(--tpl-uvod-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 2px;
    -webkit-overflow-scrolling: touch;
}
.tpl-uvod-karusel--posuvny .tpl-uvod-karusel-pas { scrollbar-width: none; }
.tpl-uvod-karusel--posuvny .tpl-uvod-karusel-pas::-webkit-scrollbar { display: none; }
.tpl-uvod-karusel-polozka {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}
.tpl-uvod-karusel-polozka > div.polozka {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    float: none;
}
.tpl-uvod-karusel-sipky { display: flex; gap: 8px; }
.tpl-uvod-karusel-sipky[hidden],
.tpl-uvod-karusel-tecky[hidden] { display: none; }
.tpl-uvod-karusel-sipka {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--tpl-card-border);
    border-radius: 50%;
    background: var(--tpl-content-bg);
    color: var(--tpl-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tpl-uvod-karusel-sipka::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--tpl-ico-angleright) center / contain no-repeat;
    mask: var(--tpl-ico-angleright) center / contain no-repeat;
}
.tpl-uvod-karusel-sipka--zpet::before {
    -webkit-mask-image: var(--tpl-ico-angleleft);
    mask-image: var(--tpl-ico-angleleft);
}
.tpl-uvod-karusel-sipka:hover:not(:disabled) { border-color: var(--tpl-primary); color: var(--tpl-primary); }
.tpl-uvod-karusel-sipka:disabled { opacity: .4; cursor: default; }
.tpl-uvod-karusel-tecky { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.tpl-uvod-karusel-tecka {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tpl-uvod-karusel-tecka::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tpl-card-border);
    transition: background var(--tpl-transition), transform var(--tpl-transition);
}
.tpl-uvod-karusel-tecka[aria-current="true"]::before { background: var(--tpl-primary); transform: scale(1.25); }

/* J-T14: karusel s taby (zdroje: [...]) */
.tpl-uvod-taby { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.tpl-uvod-tab {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--tpl-radius, 8px);
    background: transparent;
    color: var(--tpl-text-light, var(--tpl-text));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tpl-uvod-tab:hover { color: var(--tpl-text); }
.tpl-uvod-tab--aktivni,
.tpl-uvod-tab[aria-selected="true"] { color: var(--tpl-text); border-color: var(--tpl-card-border, currentColor); background: var(--tpl-card-bg, transparent); }
.tpl-uvod-tab:focus-visible { outline: 2px solid var(--tpl-primary); outline-offset: 2px; }
.tpl-uvod-karusel-panel[hidden],
.tpl-uvod-vse[hidden] { display: none; }
.tpl-uvod-karusel--taby .tpl-uvod-karusel-sipky { justify-content: flex-end; margin-bottom: 8px; }

/* ---------- USP ---------- */
.tpl-uvod-usp-seznam {
    list-style: none;
    margin: 0;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 24px;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-surface-2);
}
.tpl-uvod-usp-polozka { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--tpl-primary); }
.tpl-uvod-usp-text { display: flex; flex-direction: column; gap: 2px; color: var(--tpl-text); }
.tpl-uvod-usp-popis { color: var(--tpl-text-light); font-size: 0.9rem; }

/* ---------- znacky ---------- */
.tpl-uvod-znacky-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.tpl-uvod-znacky-polozka { margin: 0; }
.tpl-uvod-znacky-polozka a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    padding: 12px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-content-bg);
}
.tpl-uvod-znacky-polozka img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- clanky ---------- */
.tpl-uvod-clanky-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--tpl-uvod-gap);
}
.tpl-uvod-clanky-polozka { margin: 0; }
.tpl-uvod-clanek {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-card-radius, var(--tpl-border-radius));
    background: var(--tpl-card-bg, var(--tpl-content-bg));
}
#sekce .tpl-uvod-clanek > :not(.tpl-uvod-clanek-foto) { margin-left: 16px; margin-right: 16px; }
.tpl-uvod-clanek-foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tpl-surface-2); }
.tpl-uvod-clanek-foto img { width: 100%; height: 100%; object-fit: cover; }
#sekce .tpl-uvod-clanek-nadpis { margin-top: 8px; margin-bottom: 0; font-size: 1.1rem; line-height: 1.3; }
.tpl-uvod-clanek-nadpis a { color: var(--tpl-text); text-decoration: none; }
.tpl-uvod-clanek-nadpis a:hover { color: var(--tpl-link-hover); }
.tpl-uvod-clanek-datum { color: var(--tpl-text-light); font-size: 0.85rem; }
#sekce .tpl-uvod-clanek-perex { margin-top: 0; margin-bottom: 0; color: var(--tpl-text-light); }

/* ---------- recenze ---------- */
.tpl-uvod-recenze-souhrn { margin: 0; color: var(--tpl-text-light); }
.tpl-uvod-recenze-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--tpl-uvod-gap);
}
.tpl-uvod-recenze-polozka {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-card-radius, var(--tpl-border-radius));
    background: var(--tpl-card-bg, var(--tpl-content-bg));
}
.tpl-uvod-recenze-text { margin: 0; flex: 1 1 auto; }
.tpl-uvod-recenze-text p { margin: 0 0 6px; }
.tpl-uvod-recenze-plus { color: var(--tpl-stav-skladem); }
.tpl-uvod-recenze-autor { margin: 0; color: var(--tpl-text-light); font-size: 0.9rem; }
.tpl-uvod-hvezdy {
    display: block;
    width: 100px;
    height: 20px;
    background: linear-gradient(90deg, var(--tpl-cta-bg) calc(var(--tpl-uvod-hodnoceni, 5) * 20%), var(--tpl-card-border) 0);
    -webkit-mask: var(--tpl-uvod-hvezda) left center / 20% 100% repeat-x;
    mask: var(--tpl-uvod-hvezda) left center / 20% 100% repeat-x;
}

/* ---------- o nas ---------- */
.tpl-uvod-o-nas { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.tpl-uvod-o-nas--s-foto { grid-template-columns: 1fr 1fr; }
.tpl-uvod-o-nas-foto img { display: block; width: 100%; height: auto; border-radius: var(--tpl-border-radius); }
.tpl-uvod-o-nas-text { margin: 0 0 16px; }

/* ---------- newsletter ---------- */
.tpl-uvod-newsletter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    align-items: center;
    padding: 28px;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-primary);
    color: var(--tpl-primary-text);
}
#sekce .tpl-uvod-newsletter .tpl-uvod-nadpis { color: inherit; margin-bottom: 6px; }
.tpl-uvod-newsletter-text p { margin: 0; }
.tpl-uvod-newsletter form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tpl-uvod-newsletter .nl-radek { flex: 1 1 220px; }
.tpl-uvod-newsletter input[type="email"] {
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-pill, 999px);
    background: var(--tpl-content-bg);
    color: var(--tpl-text);
    font: inherit;
}
.tpl-uvod-newsletter input[type="submit"] {
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--tpl-pill, 999px);
    background: var(--tpl-cta-bg);
    color: var(--tpl-cta-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tpl-uvod-newsletter .nl-poznamka { flex: 1 1 100%; opacity: .85; }

/* ---------- SEO text, bannery, FAQ, anketa ---------- */
.tpl-uvod-seo-text > :first-child { margin-top: 0; }
.tpl-uvod-seo-text > :last-child { margin-bottom: 0; }
.tpl-uvod-seo--dole .tpl-uvod-seo-text { color: var(--tpl-text-light); }

.tpl-uvod-bannery-seznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--tpl-uvod-gap);
}
.tpl-uvod-bannery-polozka { margin: 0; }
.tpl-uvod-bannery-polozka img { display: block; width: 100%; height: auto; border-radius: var(--tpl-border-radius); }
.tpl-uvod-bannery-text {
    display: block;
    padding: 18px 20px;
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-surface-2);
    color: var(--tpl-text);
    font-weight: 600;
    text-decoration: none;
}

.tpl-uvod-faq-seznam { display: flex; flex-direction: column; gap: 8px; }
.tpl-uvod-faq-polozka {
    border: 1px solid var(--tpl-card-border);
    border-radius: var(--tpl-border-radius);
    background: var(--tpl-content-bg);
}
.tpl-uvod-faq-polozka summary { padding: 14px 18px; font-weight: 600; cursor: pointer; }
.tpl-uvod-faq-odpoved { padding: 0 18px 14px; }

.tpl-uvod-anketa-obsah ul { list-style: none; margin: 8px 0 0; padding: 0; }

/* ---------- kolo 3 cast 4: hero eyebrow + 2. tlacitko (J-A6), inspirace (J-D7), lookbook (J-A5), recenze produktu (J-D7) ---------- */
.tpl-uvod-hero-eyebrow { margin: 0 0 6px; font-size: 0.8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tpl-uvod-hero-odkaz2 { position: relative; z-index: 2; margin-left: 8px; }

.tpl-uvod-inspirace-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--tpl-uvod-gap); }
.tpl-uvod-inspirace-polozka { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.tpl-uvod-inspirace-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tpl-border-radius); background: var(--tpl-surface-2); }
.tpl-uvod-inspirace-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
#sekce .tpl-uvod-inspirace-nadpis { margin: 0 0 6px; }
.tpl-uvod-inspirace-text { margin: 0 0 8px; color: var(--tpl-text-light); }
.tpl-uvod-inspirace-odkaz { font-weight: 600; }

.tpl-uvod-lookbook { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: center; }
.tpl-uvod-lookbook--bez-foto { grid-template-columns: 1fr; }
.tpl-uvod-lookbook-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--tpl-border-radius); background: var(--tpl-surface-2); }
.tpl-uvod-lookbook-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpl-uvod-lookbook-hotspot {
    position: absolute; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -16px 0 0 -16px;
    border-radius: 50%; background: var(--tpl-card-bg, var(--tpl-content-bg)); color: var(--tpl-text); font-weight: 700; text-decoration: none;
    box-shadow: var(--tpl-shadow-pop);
}
.tpl-uvod-lookbook-eyebrow { margin: 0 0 6px; color: var(--tpl-text-light); font-size: 0.8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tpl-uvod-lookbook-perex { margin: 0 0 16px; color: var(--tpl-text-light); }
.tpl-uvod-lookbook-produkty { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tpl-uvod-lookbook-produkt { margin: 0; }
.tpl-uvod-lookbook-produkt-odkaz { display: flex; gap: 12px; align-items: center; color: var(--tpl-text); text-decoration: none; }
.tpl-uvod-lookbook-produkt-odkaz img { flex: 0 0 80px; width: 80px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--tpl-thumb-radius, var(--tpl-border-radius)); }
.tpl-uvod-lookbook-produkt-info { display: flex; flex-direction: column; gap: 2px; }
.tpl-uvod-lookbook-znacka { color: var(--tpl-text-light); font-size: 0.85rem; }
.tpl-uvod-lookbook-cena { font-weight: 700; }
.tpl-uvod-lookbook-cena s { color: var(--tpl-text-light); font-weight: 400; }

.tpl-uvod-recenze-produkt { margin: 0; font-size: 0.9rem; }
.tpl-uvod-recenze-overeno { color: var(--tpl-stav-skladem); }

/* ---------- responzivita ---------- */
@media (max-width: 1024px) {
    .tpl-uvod-karusel { --tpl-uvod-karet: 3; }
    .tpl-uvod-hero-dlazdice--hlavni { min-height: 380px; }
}
@media (max-width: 767px) {
    .tpl-uvod { --tpl-uvod-mezera: 28px; --tpl-uvod-gap: 12px; }
    .tpl-uvod-hero-mrizka--s-dlazdicemi { grid-template-columns: 1fr; }
    .tpl-uvod-hero-bok { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .tpl-uvod-hero-dlazdice { min-height: 170px; }
    .tpl-uvod-hero-dlazdice--hlavni,
    .tpl-uvod-hero-mrizka:not(.tpl-uvod-hero-mrizka--s-dlazdicemi) .tpl-uvod-hero-dlazdice--hlavni { min-height: 320px; }
    .tpl-uvod-hero-obsah { padding: 20px; }
    .tpl-uvod-hero-bok .tpl-uvod-hero-obsah { padding: 14px; }
    #sekce .tpl-uvod-hero-bok .tpl-uvod-hero-nadpis { font-size: 1rem; }
    .tpl-uvod-hero-bok .tpl-uvod-btn { min-height: 40px; padding: 8px 14px; font-size: 0.9rem; }
    #sekce .tpl-uvod-hero-dlazdice--hlavni .tpl-uvod-hero-nadpis,
    #sekce .tpl-uvod-hero-video .tpl-uvod-hero-nadpis,
    #sekce .tpl-uvod-hero-formular .tpl-uvod-hero-nadpis { font-size: 1.6rem; }
    .tpl-uvod-karusel { --tpl-uvod-karet: 1.6; }
    .tpl-uvod-kategorie-seznam { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tpl-uvod-kategorie-odkaz { gap: 8px; padding: 6px 8px 6px 6px; min-height: 56px; font-size: 0.9rem; }
    .tpl-uvod-kategorie-media { flex-basis: 40px; width: 40px; height: 40px; }
    .tpl-uvod-kategorie-pocet { display: none; }
    .tpl-uvod-o-nas--s-foto,
    .tpl-uvod-newsletter,
    .tpl-uvod-lookbook { grid-template-columns: 1fr; }
    .tpl-uvod-newsletter { padding: 20px; }
}