/**
 * 2026-003 Atelier - homepage (sekce uvod; jadro linkuje css/sekce/uvod.css samo). Navrh 01-Homepage desktop / mobil.
 * Jadrovy css/uvod.css zustava (mechanika karuselu), tady jen vzhled Atelieru. Sekce oddeluje --tpl-section-gap.
 */
.tpl-uvod.at-uvod { gap: var(--tpl-section-gap); margin-bottom: 0; }
.at-uvod .at-sekce { margin-top: 0; }
#sekce .at-uvod-h1 { margin: 0; font-size: calc(40px - var(--tpl-head-shrink)); }

/* ---------- hero A (plocha): fotka pres sirku, bily panel 480 vlevo dole ---------- */
.at-uvod .at-hero {
    position: relative;
    margin: -24px calc(-1 * var(--tpl-gutter)) 0;
    background: var(--tpl-surface-2);
}
.at-hero--plocha { min-height: 680px; }
.at-hero--plocha .at-hero-media { position: absolute; inset: 0; overflow: hidden; }
.at-hero-foto,
.at-hero-foto img,
.at-hero-video { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.at-hero--plocha .at-hero-panel {
    position: absolute;
    left: var(--tpl-gutter);
    bottom: 40px;
    width: 480px;
    max-width: calc(100% - 2 * var(--tpl-gutter));
    padding: 40px;
    background: var(--tpl-surface);
    color: var(--tpl-text);
}
.at-hero--bez-foto.at-hero--plocha { min-height: 0; padding: 64px var(--tpl-gutter); }
.at-hero--bez-foto.at-hero--plocha .at-hero-panel { position: static; }
.at-hero-eyebrow { margin: 0 0 16px; }
#sekce .at-hero-h {
    margin: 0 0 16px;
    font-family: var(--tpl-font-head);
    font-weight: var(--tpl-head-weight);
    font-size: calc(44px - var(--tpl-head-shrink));
    line-height: 1.1;
    letter-spacing: var(--tpl-head-ls);
    color: var(--tpl-primary);
}
.at-hero-perex { margin: 0 0 28px; font-size: 16px; line-height: 1.6; }
.at-hero-tlacitka { display: flex; flex-wrap: wrap; gap: 12px; }
.at-hero-hledani { display: flex; gap: 8px; margin-bottom: 20px; }
.at-hero-hledani input { flex: 1 1 auto; min-width: 0; }

/* ---------- hero B (sloupce): fotka 3:4 vlevo 50 % | text na secondary ---------- */
.at-uvod .at-hero--sloupce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -24px;
    margin-left: 0;
    margin-right: 0;
    background: var(--tpl-secondary);
}
.at-hero--sloupce .at-hero-media { aspect-ratio: 3 / 4; max-height: 760px; width: 100%; overflow: hidden; background: var(--tpl-surface-2); }
.at-hero--sloupce .at-hero-panel { display: flex; flex-direction: column; justify-content: center; padding: 64px; color: var(--tpl-secondary-text); }
.at-hero--sloupce.at-hero--bez-foto { grid-template-columns: 1fr; }

/* ---------- dlazdice kolekci 3:4 ---------- */
.at-dlazdice-seznam { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tpl-grid-gap); margin: 0; padding: 0; list-style: none; }
.at-dlazdice-a,
a.at-dlazdice-a { display: flex; flex-direction: column; gap: 14px; color: var(--tpl-text); text-decoration: none; }
.at-dlazdice-foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tpl-surface-2); }
.at-dlazdice-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.at-dlazdice-a:hover .at-dlazdice-foto img { transform: scale(1.02); }
.at-dlazdice-nazev { font: 600 14px/1.3 var(--tpl-font); letter-spacing: .14em; text-transform: uppercase; }
.at-dlazdice-a:hover .at-dlazdice-nazev { text-decoration: underline; text-underline-offset: 4px; }
a.at-dlazdice-a--akcent { color: var(--tpl-sale-price); }
a.at-dlazdice-a--akcent:hover { color: var(--tpl-sale-price); }

/* ---------- karusel Novinky: hlavicka, sipky ctverce 40, carky misto tecek ---------- */
.at-karusel { --tpl-uvod-karet: var(--at-sloupce, 4); --tpl-uvod-gap: var(--tpl-grid-gap); }
.at-karusel-ovl { display: flex; align-items: center; gap: 24px; }
.at-karusel .tpl-uvod-karusel-pas { padding: 0 0 8px; }
.at-uvod .tpl-uvod-karusel-sipka { border-radius: 0; border-color: var(--tpl-border); background: transparent; color: var(--tpl-primary); }
.at-uvod .tpl-uvod-karusel-sipka:hover:not(:disabled) { border-color: var(--tpl-primary); }
.at-uvod .tpl-uvod-karusel-tecky { margin-top: 24px; gap: 0; }
.at-uvod .tpl-uvod-karusel-tecka { width: 28px; height: 24px; }
.at-uvod .tpl-uvod-karusel-tecka::before { width: 24px; height: 2px; border-radius: 0; background: var(--tpl-border); }
.at-uvod .tpl-uvod-karusel-tecka[aria-current="true"]::before { background: var(--tpl-primary); transform: none; }

/* ---------- lookbook: foto 4:5 (7/12) + obsah ---------- */
.at-lookbook { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.at-lookbook-obsah { min-width: 0; }
.at-lookbook--bez-foto { grid-template-columns: 1fr; }
.at-lookbook-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tpl-surface-2); }
.at-lookbook-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-lookbook-hotspot {
    position: absolute;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.at-lookbook-hotspot span { width: 24px; height: 24px; border-radius: 50%; background: var(--tpl-surface); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tpl-surface) 45%, transparent); }
.at-lookbook-hotspot:hover span { box-shadow: 0 0 0 8px color-mix(in srgb, var(--tpl-surface) 60%, transparent); }
.at-lookbook-obsah > .at-eyebrow { margin-bottom: 14px; }
#sekce .at-lookbook-h { margin: 0 0 14px; }
.at-lookbook-perex { margin: 0 0 24px; color: var(--tpl-text); }
.at-lookbook-produkty { margin: 0 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--tpl-line); }
.at-lookbook-produkt { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--tpl-line); }
.at-lookbook-produkt-foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tpl-surface-2); }
.at-lookbook-produkt-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-lookbook-produkt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.at-lookbook-znacka { font: 600 12px/1.3 var(--tpl-font); letter-spacing: .14em; text-transform: uppercase; color: var(--tpl-text-light); }
a.at-lookbook-nazev { color: var(--tpl-text); font-size: 15px; }
.at-lookbook-cena { font-weight: 700; font-size: 15px; }
.at-lookbook-cena s { margin-left: 6px; font-weight: 400; color: var(--tpl-strike); }
a.at-lookbook-rychly { min-height: 44px; padding: 0 16px; font-size: 12px; }

/* ---------- O nas na stred ---------- */
.at-onas { max-width: 680px; margin: 0 auto; text-align: center; }
.at-onas .at-eyebrow { margin-bottom: 12px; }
#sekce .at-onas-h { margin: 0 0 16px; }
.at-onas-p { margin: 0 auto 24px; max-width: 640px; font-size: 16px; }

/* ---------- znacky: loga v sedi ---------- */
.at-znacky .at-eyebrow { margin-bottom: 20px; }
.at-znacky-seznam { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.at-znacky-seznam a { display: block; }
.at-znacky-seznam img { display: block; width: 120px; height: 48px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.at-znacky-seznam a:hover img { filter: none; opacity: 1; }

/* ---------- bannery / Instagram 6 × 1:1 ---------- */
.at-bannery-seznam { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.at-bannery--instagram .at-bannery-seznam { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.at-bannery-polozka img { display: block; width: 100%; height: auto; }
.at-bannery--instagram .at-bannery-polozka img { aspect-ratio: 1 / 1; object-fit: cover; background: var(--tpl-surface-2); }
.at-bannery-text { display: block; padding: 24px; background: var(--tpl-secondary); color: var(--tpl-secondary-text); }

/* ---------- Magazin ---------- */
.at-clanky-mrizka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tpl-grid-gap); margin: 0; padding: 0; list-style: none; }

/* ---------- USP mezi linkami ---------- */
.at-usp-seznam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tpl-line); border-bottom: 1px solid var(--tpl-line); }
.at-usp-polozka { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 88px; padding: 12px 20px; font-size: 14px; text-align: left; }
.at-usp-polozka + .at-usp-polozka { border-left: 1px solid var(--tpl-line); }
.at-usp-text strong { font-weight: 600; }
.at-usp-popis { color: var(--tpl-text-light); font-weight: 400; }

/* ---------- newsletter pas na secondary (pres celou sirku) ---------- */
.at-newsletter {
    padding: 72px 0;
    background: var(--tpl-secondary);
    box-shadow: 0 0 0 100vmax var(--tpl-secondary);
    clip-path: inset(0 -100vmax);
    color: var(--tpl-secondary-text);
    text-align: center;
}
.at-newsletter-in { max-width: 560px; margin: 0 auto; }
#sekce .at-newsletter h2 { margin: 0 0 12px; }
.at-newsletter-text { margin: 0 0 24px; color: var(--tpl-text-light); }
.at-newsletter-formular form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0; }
#prostredek .at-newsletter-formular input[type="email"],
#prostredek .at-newsletter-formular input[type="text"]:not([name="nl_web"]) { flex: 1 1 280px; max-width: 400px; min-height: 48px; border-right: 0; }
#prostredek .at-newsletter-formular input[type="submit"],
#prostredek .at-newsletter-formular button[type="submit"] { min-height: 48px; }
.at-newsletter-formular label,
.at-newsletter-formular p,
.at-newsletter-formular .novinky_mailem_poznamka { flex-basis: 100%; margin-top: 12px; font-size: 13px; color: var(--tpl-text-light); }

/* ---------- SEO text ---------- */
.at-seo { max-width: 760px; }
#sekce .at-seo-text h1,
#sekce .at-seo-text h2,
#sekce .at-seo-text h3 { font-family: var(--tpl-font); font-weight: 600; font-size: 18px; letter-spacing: 0; margin: 0 0 8px; }
.at-seo-text p { margin: 0 0 .8em; color: var(--tpl-text); }
.at-sbalit .at-sbalit-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.at-sbalit--otevreno .at-sbalit-text { display: block; overflow: visible; }
button.at-sbalit-tl { margin-top: 12px; }

/* ================================================================ */
@media (max-width: 1024px) {
    .at-hero--plocha { min-height: 520px; }
    .at-lookbook { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
    .at-bannery--instagram .at-bannery-seznam { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .at-lookbook { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    #sekce .at-uvod-h1 { font-size: calc(28px - var(--tpl-head-shrink)); }
    .at-uvod .at-hero,
    .at-uvod .at-hero--plocha,
    .at-uvod .at-hero--sloupce { display: block; min-height: 0; margin: -16px calc(-1 * var(--tpl-gutter)) 0; background: none; }
    .at-hero--plocha .at-hero-media,
    .at-hero--sloupce .at-hero-media { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: none; }
    .at-hero--plocha .at-hero-panel,
    .at-hero--sloupce .at-hero-panel { position: static; width: auto; max-width: none; padding: 24px var(--tpl-gutter) 0; background: none; color: var(--tpl-text); }
    #sekce .at-hero-h { font-size: calc(30px - var(--tpl-head-shrink)); }
    .at-hero-perex { font-size: 15px; margin-bottom: 20px; }
    .at-hero-tlacitka { flex-direction: column; }
    .at-hero-tlacitka .at-btn { width: 100%; }
    .at-dlazdice-seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
    .at-dlazdice-a { gap: 10px; }
    .at-dlazdice-nazev { font-size: 13px; }
    .at-karusel-ovl { gap: 0; }
    .at-uvod .at-karusel-sipky { display: none; }
    .at-karusel { --tpl-uvod-karet: 2.25; }
    .at-lookbook { gap: 24px; }
    .at-lookbook-foto { margin: 0 calc(-1 * var(--tpl-gutter)); }
    .at-lookbook-produkty { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--tpl-gutter)); padding-right: var(--tpl-gutter); border: 0; scrollbar-width: none; }
    .at-lookbook-produkt { flex: 0 0 250px; grid-template-columns: 72px minmax(0, 1fr); padding: 12px; border: 1px solid var(--tpl-line); scroll-snap-align: start; }
    a.at-lookbook-rychly { grid-column: 1 / -1; width: 100%; }
    .at-znacky-seznam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .at-znacky-seznam img { width: 100%; }
    .at-bannery--instagram .at-bannery-seznam { gap: 4px; }
    .at-clanky-mrizka { grid-template-columns: 1fr; gap: 0; }
    .at-clanky-mrizka > li { border-bottom: 1px solid var(--tpl-line); }
    .at-clanky-mrizka .at-clanek-karta { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
    .at-clanky-mrizka .at-clanek-karta-perex { display: none; }
    .at-usp-seznam { grid-template-columns: 1fr; }
    .at-usp-polozka { justify-content: flex-start; min-height: 56px; padding: 8px 0; }
    .at-usp-polozka + .at-usp-polozka { border-left: 0; border-top: 1px solid var(--tpl-line); }
    .at-newsletter { padding: 48px 0; }
    #prostredek .at-newsletter-formular input[type="email"] { flex-basis: 100%; max-width: none; border-right: 1px solid var(--tpl-border); }
    #prostredek .at-newsletter-formular input[type="submit"],
    #prostredek .at-newsletter-formular button[type="submit"] { flex-basis: 100%; margin-top: 8px; }
}