@charset "utf-8";
/* ============================================================================
   DUP 2026 — brand vrstva
   Zdroj pravdy: DUP_Brand_manual_2026.pdf (07/2026) + microsite b2b.dup.cz/rehacare
   Načítá se v system/head.php JAKO POSLEDNÍ, takže přebíjí styly.css.
   Původní styly.css se needituje — kdyby se brand vracel, stačí odebrat tenhle soubor.
   ========================================================================= */

/* ---------------------------------------------------------------- tokeny -- */
:root{
  /* mateřská značka */
  --dup-teal:        #3f7773;   /* primární, logo, nadpisy            */
  --dup-teal-dark:   #1f4547;   /* hover, tmavé plochy                */
  --dup-ink:         #0b1d1f;   /* nejtmavší — patička, tlačítka      */
  --dup-mint:        #81b794;   /* sekundární akcent                  */
  --dup-sage:        #7ea0a0;   /* steh jehly, decentní linky         */
  --dup-rose:        #f39b9b;   /* sekundární, výjimečně              */

  /* pozadí */
  --dup-bg:          #dddfdd;   /* plocha stránky                     */
  --dup-bg-2:        #bab8b8;   /* tmavší pruh                        */
  --dup-white:       #ffffff;
  --dup-line:        rgba(11,29,31,.12);

  /* divize */
  --dup-kovo:        #2c405e;
  --dup-kovo-dark:   #121c2e;
  --dup-kovo-bg:     #e0e3dc;
  --dup-pivovar:     #616827;   /* premium  */
  --dup-pivovar-alt: #c6b32d;   /* výčepní  */
  --dup-pivovar-red: #a81925;   /* 14°      */
  --dup-pivovar-bg:  #e5dfda;

  /* text */
  --dup-text:        #1f1b1c;
  --dup-text-muted:  rgba(31,27,28,.68);
  --dup-text-invert: #ffffff;

  /* tvar
     Microsite nezaobluje panely dokola — dává jeden velký roh (3vw) a zbytek
     nechává ostrý. Střídání rohů je to, co jejím layoutům dává rytmus. */
  --dup-radius:      28px;      /* karty, panely   */
  --dup-radius-sm:   16px;      /* menší prvky     */
  --dup-radius-velky: clamp(30px, 3vw, 58px);   /* ten jeden výrazný roh */
  --dup-radius-pill: 999px;     /* tlačítka        */
  --dup-shadow:      0 18px 40px -28px rgba(11,29,31,.45);

  /* písmo */
  --dup-font:        "Barlow", "Helvetica Neue", Arial, sans-serif;
  --dup-font-display:"Playfair Display", Georgia, "Times New Roman", serif;

  /* rytmus */
  --dup-section-y:   clamp(48px, 6vw, 104px);

  /* hlavička — pevná, při scrollu se sníží a dostane stín
     (stejné chování i časování jako pozemkyOtovice) */
  --dup-header-h:        104px;
  --dup-header-h-scroll:  74px;
  --dup-shadow-header:   0 2px 2px rgba(11,29,31,.10);
  --dup-ease:            cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------- barevnost divizí ------
   Manuál dává každé divizi vlastní paletu a pivovaru dokonce vlastní
   vizualitu. Stránka divize proto přebarví tokeny značky — zbytek webu
   (karty, tlačítka, jehla) se přizpůsobí sám, bez duplicitních pravidel.
   Značku nese <header> v template/menu/general.php, proto :has().        */
body:has(.dup-divize--kovo){
  --dup-teal:      #2c405e;      /* Kovo, primární  */
  --dup-teal-dark: #121c2e;
  --dup-mint:      #7f8078;
  --dup-sage:      #7f8078;
  --dup-bg:        #e0e3dc;
  --dup-ink:       #121c2e;
}
body:has(.dup-divize--gala){
  --dup-teal:      #3f7773;      /* Gala drží mateřskou teal řadu */
  --dup-teal-dark: #1f4547;
  --dup-mint:      #81b794;
  --dup-sage:      #7ea0a0;
  --dup-bg:        #dddfdd;
  --dup-ink:       #0b1d1f;
}
body:has(.dup-divize--pivovar){
  --dup-teal:      #616827;      /* Pivovar: premium / výčepní / 14° */
  --dup-teal-dark: #4b5020;
  --dup-mint:      #c6b32d;
  --dup-sage:      #9e9829;
  --dup-rose:      #a81925;
  --dup-bg:        #e5dfda;
  --dup-ink:       #171719;
}

/* ------------------------------------------------------------------ base -- */
body,
body.body_sirka_webu{
  font-family: var(--dup-font);
  color: var(--dup-text);
  background-color: var(--dup-bg);
  -webkit-font-smoothing: antialiased;
}

body a{ color: var(--dup-teal); }
body a:hover{ color: var(--dup-teal-dark); }

::selection{ background: var(--dup-mint); color: var(--dup-ink); }

:where(a, button, .tl_eshop_hlavicka, .polozka_menu):focus-visible{
  outline: 2px solid var(--dup-teal-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------- typografie -- */
/* Displejové nadpisy jedou Playfair Display Italic — tak je má microsite
   i katalog v manuálu. Běžný text a mikrotypografie zůstávají v Barlow. */
h1, .h1_home,
h2, .h2_home,
h3, .h3_home{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--dup-teal);
  letter-spacing: -.01em;
  line-height: 1.16;
}

h1, .h1_home{ font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }
h2, .h2_home{ font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.8rem); }
h3, .h3_home{ font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); }

/* Nadpisy uvnitř textu článku (TinyMCE) — držíme čitelnost, ne dekoraci */
.obsah h4, .obsah h5, .obsah h6{
  font-family: var(--dup-font);
  font-style: normal;
  font-weight: 600;
  color: var(--dup-ink);
}

.obsah p, .obsah li, .obsah td{
  font-size: clamp(1rem, .97rem + .12vw, 1.08rem);
  line-height: 1.62;
}

strong, b{ font-weight: 600; }

/* --------------------------------------------------- jehla & steh (thread) -
   Převzato 1:1 z microsite: steh = SVG path (dasharray 4 2, #7ea0a0),
   jehla = needle.svg na konci. Křivku i pozici jehly dopočítá funkce/brand.js
   podle skutečné šířky nadpisu — proto je tu jen vzhled a animace.          */
.dup-thread{
  display: block;
  position: relative;
  width: 100%;
  height: 34px;
  margin-top: .35rem;
  pointer-events: none;
  overflow: visible;
}
.dup-thread__art{
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dup-thread__stitch{
  fill: none;
  stroke: var(--dup-sage);
  stroke-width: 1.8;
  stroke-dasharray: 4 2;
}

@media (prefers-reduced-motion: no-preference){
  .dup-thread[data-thread-motion] .dup-thread__stitch{
    animation: dup-thread-draw .75s cubic-bezier(.22,.61,.36,1) both;
  }
  .dup-thread[data-thread-motion] .dup-thread__needle{
    animation: dup-needle-sew .75s cubic-bezier(.22,.61,.36,1) both;
  }
}
@keyframes dup-thread-draw{
  from{ clip-path: inset(0 100% 0 0); }
  to  { clip-path: inset(0 0 0 0); }
}
@keyframes dup-needle-sew{
  from{ transform: translateX(var(--dup-needle-offset, -8vw)); }
  to  { transform: translateX(0); }
}

/* Na tmavém podkladu je steh světlejší, aby byl vidět */
.dup-on-dark .dup-thread__stitch{ stroke: rgba(255,255,255,.55); }

/* --------------------------------------------------------------- tlačítka -- */
.dup-btn,
.tl_dulezita_informace,
.tl_divize_vysuv_obal,
.tl_zobrazit_vse,
.tl_odeslat,
input[type="submit"],
button.tl_odeslat{
  display: inline-block;
  border: 0;
  border-radius: var(--dup-radius-pill);
  padding: .62em 1.45em;
  background: var(--dup-ink);
  color: var(--dup-text-invert);
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(.98rem, .93rem + .25vw, 1.18rem);
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s ease, transform .22s ease;
}
.dup-btn:hover,
.tl_dulezita_informace:hover,
.tl_divize_vysuv_obal:hover,
.tl_zobrazit_vse:hover,
.tl_odeslat:hover,
input[type="submit"]:hover{
  background: var(--dup-teal);
  color: var(--dup-text-invert);
  transform: translateY(-1px);
}

/* `a:link` má vyšší specificitu než samotná třída, takže barvu textu
   tlačítka je potřeba zapsat i pro stavy odkazu. */
a.dup-btn:link,
a.dup-btn:visited,
a:link .dup-btn,
a .tl_divize_vysuv_obal,
a .tl_dalsi,
a .tl_dulezita_informace{
  color: var(--dup-text-invert);
}
a.dup-btn:hover,
a:hover .tl_divize_vysuv_obal{
  color: var(--dup-text-invert);
}
a .tl_divize_vysuv_obal{
  color: var(--dup-ink);
}
a:hover .tl_divize_vysuv_obal{
  color: var(--dup-ink);
}

.dup-btn--ghost{
  background: transparent;
  color: var(--dup-ink);
  box-shadow: inset 0 0 0 1.5px var(--dup-ink);
}
.dup-btn--ghost:hover{
  background: var(--dup-ink);
  color: var(--dup-text-invert);
}

/* Šipka není znak vedle textu — je to nit vedená POD textem a zakončená
   hrotem, přesně jak to má microsite. Drží to motiv jehly i v tlačítku. */
.dup-btn{
  position: relative;
  padding-bottom: 1.15em;
}
.dup-btn__arrow{
  position: absolute;
  left: 1.45em;
  right: 1.45em;
  bottom: .52em;
  height: .6em;
  color: transparent;
  overflow: visible;
  transition: transform .22s ease;
}
.dup-btn__arrow::before{          /* nit */
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 2px solid currentColor;
  color: var(--dup-text-invert);
}
.dup-btn__arrow::after{           /* hrot */
  content: "";
  position: absolute;
  top: calc(50% - .26em);
  right: 0;
  width: .5em;
  height: .5em;
  border-top: 2px solid var(--dup-text-invert);
  border-right: 2px solid var(--dup-text-invert);
  transform: rotate(45deg);
}
.dup-btn:hover .dup-btn__arrow{ transform: translateX(4px); }

.dup-btn--ghost .dup-btn__arrow::before{ color: var(--dup-ink); }
.dup-btn--ghost .dup-btn__arrow::after{
  border-top-color: var(--dup-ink);
  border-right-color: var(--dup-ink);
}

/* ------------------------------------------------------------------ karty -- */
.dup-card{
  background: var(--dup-white);
  border-radius: var(--dup-radius);
  padding: clamp(22px, 2.4vw, 42px);
}

/* Fotky a obrazové bloky dostávají stejné zaoblení jako karty */
.dup-media,
.polozka_divize_home,
.blok_foto_clanek img,
.polozka_foto_clanek img{
  border-radius: var(--dup-radius);
  overflow: hidden;
}

/* -------------------------------------------------------------- hlavička --
   Dvouřádkové menu podle schváleného návrhu 2_1366. Horní řádek je firemní
   rozcestník, dolní tři střediska. Burger se zapíná na 1230 px — stejný
   breakpoint jako má styly.css, ať se chování nerozjede.                    */
.hlavicka{
  position: fixed;                 /* původně absolute → hlavička odjížděla */
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--dup-ease), border-color .25s var(--dup-ease);
}
.hlavicka.is-scrolled{
  box-shadow: var(--dup-shadow-header);
  border-bottom-color: var(--dup-line);
}
.hlavicka,
.hlavicka_in{
  background-color: var(--dup-white);
}
.hlavicka_in{
  display: flex;
  align-items: center;
  height: var(--dup-header-h);
  padding: 0;
  box-shadow: none;
  transition: height .25s var(--dup-ease);
}
.hlavicka.is-scrolled .hlavicka_in{
  height: var(--dup-header-h-scroll);
}
/* Obsah hlavičky drží floaty ze staré šablony — pro svislé vystředění při
   zmenšování je přepínáme na flex. Pořadí řídí `order`, protože v HTML je
   tlačítko Eshopu dřív než navigace. */
.hlavicka_in > .blok_sirky_webu{
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  width: min(1516px, calc(100% - 2 * clamp(20px, 3vw, 48px)));
  max-width: 1516px;
  margin-inline: auto;
}
/* Na úvodu je logo samotný <span>, na podstránkách ho obaluje odkaz na
   domů — položkou flexu je pokaždé něco jiného, proto obě varianty. */
.hlavicka_in > .blok_sirky_webu > .logo,
.hlavicka_in > .blok_sirky_webu > a:has(.logo){
  order: 1;
  margin-right: auto;
  flex: none;
}
.hlavicka_in .logo{
  float: none;
  display: block;
}
.hlavicka_in nav{
  order: 2;
}
/* Eshop je <span> uvnitř <a> — pořadí se musí nastavit na tom odkazu,
   protože položkou flexu je odkaz, ne span uvnitř. */
.hlavicka_in > .blok_sirky_webu > a:has(.tl_eshop_hlavicka){
  order: 3;
  flex: none;
  margin: 0;
}
.hlavicka_in .tl_eshop_hlavicka{
  float: none;
  margin: 0;
}
.hlavicka_in .spacer,
.hlavicka_in .stin_pro_menu{
  display: none;              /* zákryt původního Monina menu nepoužíváme */
}
.horni_menu{
  float: none;
  margin-top: 0;
}
/* obsah začíná pod hlavičkou v její plné výšce */
.obsah{
  margin-top: var(--dup-header-h);
}

.logo{
  width: 168px;
  height: 58px;
  background-image: url("../../img/brand/dup-logo-teal.svg");
  transition: width .25s var(--dup-ease), height .25s var(--dup-ease);
}
.hlavicka.is-scrolled .logo{
  width: 130px;
  height: 45px;
}

/* menu jako dva řádky zarovnané doprava */
.horni_menu{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: 4px;
}
.menu_radek{
  display: flex;
  align-items: center;
}
.obal_polozky_menu{
  float: none;
}

.polozka_menu{
  float: none;
  display: block;
  font-family: var(--dup-font);
  font-weight: 500;
  font-size: 15px;
  height: auto;
  line-height: 1.3;
  padding: 5px 14px;
  color: var(--dup-text-muted);
  transition: color .18s ease;
}
.obal_polozky_menu:hover .polozka_menu,
.polozka_menu:hover{
  color: var(--dup-teal);
}

/* dolní řádek — střediska nesou váhu */
.polozka_menu_stredisko{
  font-size: 19px;
  font-weight: 600;
  color: var(--dup-teal);
  padding: 4px 14px 6px;
}
.obal_polozky_menu:hover .polozka_menu_stredisko,
.polozka_menu_stredisko:hover{
  color: var(--dup-teal-dark);
}

/* Linka pod položkou — stejný efekt jako na ostatních našich webech
   (pozemkyOtovice): vyjíždí zleva, aktivní stránku drží roztaženou. */
.polozka_menu,
.polozka_menu_stredisko{
  position: relative;
}
.polozka_menu::after,
.polozka_menu_stredisko::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--dup-ease);
}
.obal_polozky_menu:hover .polozka_menu::after,
.polozka_menu:hover::after,
.obal_polozky_menu:hover .polozka_menu_stredisko::after,
.polozka_menu_stredisko:hover::after,
.aktivni_menu::after{
  transform: scaleX(1);
}
.aktivni_menu,
.aktivni_menu:hover{
  color: var(--dup-teal-dark);
}

/* Eshop — pill v brandu, ikona je inline SVG v šabloně (žádné PNG ani emoji) */
.tl_eshop_hlavicka{
  display: inline-flex;
}
.tl_eshop_hlavicka_resp{
  display: none;            /* varianta do burger panelu, zapíná se až v @media */
}
.tl_eshop_hlavicka,
.tl_eshop_hlavicka_resp{
  align-items: center;
  gap: 9px;
  height: auto;
  line-height: 1.3;
  padding: 11px 24px;
  margin-top: 10px;
  border: 0;
  border-radius: var(--dup-radius-pill);
  background-color: var(--dup-ink);
  background-image: none;
  color: var(--dup-text-invert);
  font-family: var(--dup-font);
  font-size: 16px;
  font-weight: 600;
  transition: background-color .2s ease, transform .2s ease;
}
.tl_eshop_hlavicka:hover,
.tl_eshop_hlavicka_resp:hover{
  background-color: var(--dup-teal);
  background-image: none;
  color: var(--dup-text-invert);
  border: 0;
  transform: translateY(-1px);
}
.tl_eshop_hlavicka svg,
.tl_eshop_hlavicka_resp svg{
  width: 18px;
  height: 18px;
  flex: none;
}

/* Rozbalené menu zamkne stránku pod sebou — jinak se pod panelem roluje
   obsah a po zavření se člověk vrátí jinam, než odkud odcházel. */
html.dup-bez-scrollu,
html.dup-bez-scrollu body{
  overflow: hidden;
}

/* ------------------------------------------------------------- hamburger --
   Vlastní tlačítko místo Monina `.resp_menu`. Ikony jsou inline Lucide
   (menu / x) položené přes sebe do jedné buňky gridu a prolnuté — žádné
   unicode glyfy a žádný hamburger poskládaný ze čtyř <span>ů.             */
.dup-burger{
  display: none;                  /* zapíná se až pod 1230 px */
  place-items: center;
  order: 4;
  width: 48px;
  height: 48px;
  margin: 0 -8px 0 2px;
  padding: 0;
  border: 0;
  border-radius: var(--dup-radius-sm);
  background-color: transparent;
  color: var(--dup-teal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease;
}
.dup-burger:hover{
  background-color: rgba(11,29,31,.06);
}
.dup-burger__ikona{
  grid-area: 1 / 1;               /* obě ikony na stejném místě */
  width: 28px;
  height: 28px;
  transition: opacity .22s var(--dup-ease), transform .3s var(--dup-ease);
}
.dup-burger__ikona--krizek{
  opacity: 0;
  transform: rotate(-90deg) scale(.6);
}
.je-otevrene .dup-burger__ikona--menu{
  opacity: 0;
  transform: rotate(90deg) scale(.6);
}
.je-otevrene .dup-burger__ikona--krizek{
  opacity: 1;
  transform: none;
}

/* Zákryt pod panelem. Sedí uvnitř fixní hlavičky (ta má z-index, tedy i
   vlastní stacking context), takže stačí absolutní pozice od její spodní
   hrany — při zmenšení hlavičky se posune sám, bez dopočítávání v JS. */
.dup-kryt{
  display: none;
  position: absolute;
  top: 100%;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 100dvh;
  z-index: 3;
  background-color: rgba(11,29,31,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--dup-ease), visibility .26s;
}

@media only screen and (max-width: 1230px){
  .logo{ width: 120px; }
  .hlavicka.is-scrolled .logo{ width: 104px; height: 38px; }

  .dup-burger{ display: grid; }
  .dup-kryt{ display: block; }
  .dup-hlavicka.je-otevrene .dup-kryt{
    opacity: 1;
    visibility: visible;
  }

  /* Panel s menu — vyjede pod hlavičkou přes celou šířku, ne jako úzký
     sloupec přilepený vpravo. Tvarem je to bílá karta s jedním velkým
     spodním rohem, stejně jako karty v obsahu. */
  .dup-panel{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 4;
    max-height: calc(100dvh - var(--dup-header-h));
    overflow-x: hidden;   /* větvička v rohu jinak vyrobí vodorovnou lištu */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background-color: var(--dup-white);
    border-radius: 0 0 var(--dup-radius-velky) var(--dup-radius-velky);
    box-shadow: 0 30px 60px -26px rgba(11,29,31,.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .26s var(--dup-ease), transform .3s var(--dup-ease), visibility .3s;
  }
  .dup-panel::-webkit-scrollbar{ display: none; }
  .dup-hlavicka.je-otevrene .dup-panel{
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* větvička z manuálu jako podpis v rohu panelu */
  .dup-panel::after{
    content: "";
    position: absolute;
    right: -18px;
    bottom: -12px;
    z-index: -1;
    width: 168px;
    height: 168px;
    opacity: .13;
    pointer-events: none;
    background: url("../../img/brand/vetvicka.png") no-repeat right bottom / contain;
  }

  .horni_menu{
    display: flex;
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    margin: 0;
    /* 6 % = stejný okraj, jaký drží .blok_sirky_webu → položky menu
       začínají přesně pod logem, ne o kus vlevo */
    padding: 4px 6% 26px;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
    text-align: left;
  }
  .odsazeni_horni_menu_h,
  .odsazeni_horni_menu_d{ display: none; }
  .menu_radek{
    flex-direction: column;
    align-items: stretch;
  }
  .menu_radek_strediska{
    margin-top: 12px;
  }
  .obal_polozky_menu{ display: block; }

  .polozka_menu{
    color: var(--dup-text);
    font-size: 17px;
    font-weight: 500;
    padding: 15px 2px;
    text-align: left;
    border-bottom: 1px solid var(--dup-line);
  }
  /* střediska nesou váhu i tady — kurzíva Playfair jako u nadpisů */
  .polozka_menu_stredisko{
    font-family: var(--dup-font-display);
    font-style: italic;
    font-size: 26px;
    font-weight: 400;
    color: var(--dup-teal);
    padding: 12px 2px;
  }
  .menu_radek_strediska .obal_polozky_menu:last-child .polozka_menu{
    border-bottom: 0;
  }
  .obal_polozky_menu:hover .polozka_menu,
  .polozka_menu:hover,
  .obal_polozky_menu:hover .polozka_menu_stredisko,
  .polozka_menu_stredisko:hover{
    color: var(--dup-teal-dark);
  }

  /* Ve sloupci dává smysl krátká značka u levé hrany — linka přes celou
     položku by splynula s oddělovači. */
  .polozka_menu::after,
  .polozka_menu_stredisko::after{
    left: 2px;
    right: auto;
    width: 22px;
    bottom: 8px;
  }
  .aktivni_menu,
  .aktivni_menu:hover{
    color: var(--dup-teal);
  }

  .tl_eshop_hlavicka{
    padding: 9px 18px;
    font-size: 15px;
  }
  .tl_eshop_hlavicka_resp{ display: none; }
}

/* Pod 560 px se logo + Eshop + burger do řádku nevejdou pohodlně, takže se
   Eshop stěhuje na konec rozbaleného panelu. */
@media only screen and (max-width: 560px){
  :root{
    --dup-header-h:        80px;
    --dup-header-h-scroll: 66px;
  }
  .logo{ width: 104px; }
  .hlavicka.is-scrolled .logo{ width: 96px; height: 34px; }
  .hlavicka_in > .blok_sirky_webu > a:has(.tl_eshop_hlavicka){ display: none; }
  .tl_eshop_hlavicka_resp{
    display: inline-flex;
    margin-top: 22px;
  }
  .horni_menu > a:has(.tl_eshop_hlavicka_resp){
    align-self: flex-start;
  }
}

@media only screen and (max-width: 900px){
  /* spodní řádek patičky se na užších displejích rozpadne pod sebe */
  .paticka_in_d{
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .paticka_in_d .dup-odkazy-pata{ margin-inline: 0; order: 1; }
  .paticka_in_d .copyright_pata{ order: 2; }
  .paticka_in_d > a{ order: 3; }
}

@media only screen and (max-width: 650px){
  .dup-clanek-karta{
    padding: 22px 18px;
    border-radius: var(--dup-radius-sm);
  }
  .blok_obr_nad_vypis{
    background-position: center center;
  }
  .polozka_divize_home{
    border-radius: var(--dup-radius-sm);
  }
  /* Na telefonu ubírá desktopové odsazení karet přes 130 px textové plochy. */
  .polozka_vypis_in{
    padding: 26px 22px 34px;
  }
}

/* ---------------------------------------------------- nadpis s jehlou -----
   Jehla se kreslí pod nadpis a přesahuje ho doprava — jako na microsite.
   Obal drží šířku podle nadpisu, proto inline-block.                        */
.dup-heading{
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin-bottom: 40px;
}
.dup-heading .h2_home,
.dup-heading h2{
  margin-bottom: 0;
}
.dup-heading .dup-thread{
  height: 30px;
}
/* u článku je nadpis na střed, takže i jehla musí být vycentrovaná */
.dup-heading--clanek{
  margin-bottom: 0;
  text-align: left;
}

/* pečeť divize nad nadpisem (dnes Pivovar Pelhřimov) */
.dup-znak-divize{
  display: block;
  width: auto;
  height: clamp(74px, 7vw, 104px);
  margin: 0 auto 22px;
}

/* ----------------------------------------------------------------- hero ---
   Text v úvodním slideru jde z administrace (modul Slider), stylujeme jen
   vzhled. Stín drží čitelnost na světlé fotce, ať se nemusí tmavit sama.   */
/* Fotka areálu je světlá, bílý text na ní sám o sobě nedrží. Jemné
   ztmavení zleva ji nebarví, jen dá textu podklad. */
.blok_slider_home .swiper-slide{
  position: relative;
}
/* Větvička a text v úvodu jsou pryč (23. 9. 2026, korektura klientky) —
   místo textu stojí pečeť kvality, viz `.blok_slider_home::before` níž.
   Text úvodu přešel do sekce „Kdo jsme“ (modul 2, text_mini). */
@media screen and (max-width: 900px){
  /* Úvodní fotka je široká panoramata — na telefonu by z ní zbyl proužek
     vysoký přes 120 px, tak se ořízne na rozumnou výšku. */
  .blok_slider_home .swiper-slide{
    position: relative;
    min-height: 58vh;
  }
  .blok_slider_home .swiper-slide > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ohnisko na strom vlevo — pod textem tak není světlá zeď */
    object-position: 24% center;
  }
  /* na užší ploše text leží na fotce hůř než na desktopu, glow proto sílí */
  .nadpis_swiper_z_admin{
    text-shadow: 0 2px 12px rgba(11,29,31,.95), 0 1px 34px rgba(11,29,31,.8);
  }
  .podnadpis_swiper_z_admin{
    text-shadow: 0 1px 9px rgba(11,29,31,.95), 0 1px 26px rgba(11,29,31,.85);
  }
  /* stará sazba perex na telefonu schovávala, protože se do nízkého pruhu
     nevešel — teď má hero výšku, tak se vrací */
  .podnadpis_swiper_z_admin{
    display: block;
    max-width: 30ch;
  }
}
.blok_slider_home .obal_nadpisu_home{
  z-index: 2;
}
/* Značka v pravé části úvodní fotky — protiváha textu vlevo. Sedí na stejné
   ose jako obsah webu (blok_sirky_webu) a drží se stínem, ne dalším
   ztmavením fotky. Na úzkém displeji by tlačila text, tak se skrývá.      */
.blok_slider_home{
  position: relative;
}
/* Hero s jediným snímkem se vykresluje bez Swiperu (viz template/modul/slider.php),
   takže si šířku i výšku musí srovnat samo — Swiper je jinak nastavuje skriptem. */
.dup-hero-staticky{
  position: relative;
  overflow: hidden;
}
.dup-hero-staticky .swiper-wrapper{
  display: block;
}
.dup-hero-staticky .swiper-slide{
  display: block;
  width: 100%;
}
.dup-hero-staticky .swiper-pagination{
  display: none;
}
/* Logo kvality („pečeť“) z manuálu, str. 10. Od 23. 9. 2026 stojí na místě,
   kde byl text úvodu (korektura klientky) — vlevo na ose obsahu webu,
   svisle na střed fotky. Kreslí se maskou v bílé a drží se stínem, ať ji
   neztratí světlé nebe ani koruna stromu. */
.blok_slider_home::before{
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: max(calc((100% - 1516px) / 2 + 40px), 24px);
  width: clamp(120px, 13vw, 240px);
  height: clamp(120px, 13vw, 240px);
  transform: translateY(-50%);
  background-color: var(--dup-text-invert);
  -webkit-mask: url("../../img/brand/pecet-kvality.svg") no-repeat center / contain;
          mask: url("../../img/brand/pecet-kvality.svg") no-repeat center / contain;
  filter: drop-shadow(0 2px 18px rgba(11,29,31,.6));
  pointer-events: none;
}
/* Značka DUP v hero je pryč (21. 9. 2026) — hlavička je sticky a logo v ní
   je vidět pořád, takže v úvodu bylo podruhé. */

.nadpis_swiper_z_admin{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgba(11,29,31,.85), 0 1px 30px rgba(11,29,31,.65);
}
.podnadpis_swiper_z_admin{
  font-family: var(--dup-font);
  font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(11,29,31,.9), 0 1px 22px rgba(11,29,31,.7);
}

/* ------------------------------------------------------------- homepage --- */
.blok_rozdelovnik_home{
  background-color: var(--dup-white);   /* střídá se s šedou sekcí „Kdo jsme" */
  border-top: 0;
}
.blok_aktuality_home,
.obsah_vypis_obal{
  background-color: var(--dup-bg);
  border-top: 0;
}
.blok_rozdelovnik_home{
  padding: var(--dup-section-y) 0;
  text-align: center;
}

.h2_home{
  margin-bottom: 0;
  font-size: clamp(1.8rem, 1.1rem + 2.1vw, 3rem);
}

/* --- Kdo jsme: text v kartě + mřížka fotek --------------------------------
   Rozvržení i tvarosloví podle microsite: bílá karta s jedním velkým rohem,
   vedle ní mřížka fotek, kde každá má zaoblený jiný roh.                    */
.blok_kdo_jsme_home{
  display: block;
  clear: both;
  padding: var(--dup-section-y) 0;
  background-color: var(--dup-bg);   /* šedá základna, bílé karty — jako microsite */
  text-align: left;
}
.blok_kdo_jsme_home .dup-heading{
  margin-bottom: clamp(24px, 2.6vw, 44px);
}
.dup-dvojice{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 2.4vw, 46px);
  align-items: start;
  text-align: left;
}
.dup-karta-text{
  background: var(--dup-white);
  border-radius: var(--dup-radius-velky) 0 var(--dup-radius-velky) 0;
  padding: clamp(26px, 2.8vw, 52px);
}
.dup-karta-text p{
  font-size: clamp(1.05rem, 1rem + .4vw, 1.32rem);
  line-height: 1.55;
  color: var(--dup-teal-dark);
  margin-bottom: 1em;
}
.dup-karta-text .dup-btn{
  margin-top: 10px;
}

.dup-mrizka{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 22px);
}
.dup-mrizka__polozka{
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--dup-bg-2);
}
.dup-mrizka__polozka img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.dup-mrizka__polozka:hover img{ transform: scale(1.04); }
/* zaoblení jen na vnějších rozích mřížky — stejný trik jako u karet divizí */
.dup-mrizka__polozka:nth-child(1){ border-radius: var(--dup-radius-velky) 0 0 0; }
.dup-mrizka__polozka:nth-child(2){ border-radius: 0 var(--dup-radius-velky) 0 0; }
.dup-mrizka__polozka:nth-child(3){ border-radius: 0 0 0 var(--dup-radius-velky); }
.dup-mrizka__polozka:nth-child(4){ border-radius: 0 0 var(--dup-radius-velky) 0; }

@media only screen and (max-width: 900px){
  .dup-dvojice{ grid-template-columns: minmax(0, 1fr); }
}

/* --- karty středisek ------------------------------------------------------
   Zelený přeliv přes fotky je pryč (přání klientky z 15. 9. 2026: "už na
   fotky nepoužíváme zelený filtr"). Místo něj drží text spodní ztmavení,
   které fotku nebarví, jen ji pod popiskem utlumí.                          */
/* Každá karta má zaoblený jiný roh — stejný princip jako na microsite.
   Trojice pak nedrží nudnou symetrii a blok dostane spád zleva doprava. */
.polozka_divize_home{
  border-radius: var(--dup-radius-sm);
  overflow: hidden;
  box-shadow: var(--dup-shadow);
}
.dup-karta--kovo{    border-radius: var(--dup-radius-velky) 0 0 0; }
.dup-karta--gala{    border-radius: 0 0 var(--dup-radius-velky) 0; }
.dup-karta--pivovar{ border-radius: 0 var(--dup-radius-velky) 0 0; }
.polozka_divize_home_in{
  background-color: var(--dup-bg-2);
}
/* fotka má vyplnit celou kartu — jinak po stranách prosvítá pozadí */
.polozka_divize_home img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.polozka_divize_home:hover img{
  transform: scale(1.04);
}

/* Neutrální ztmavení, ne barevný přeliv — viz poznámka u karet divizí níž. */
.polozka_divize_vysuv{
  background: linear-gradient(to top,
              rgba(10,10,12,.88) 0%,
              rgba(10,10,12,.55) 42%,
              rgba(10,10,12,0) 100%);
}
.divize_vysunuty{
  background-image: none;                    /* ← tady byl zelený filtr */
  background-color: rgba(10,10,12,.90);
}

.h3_divize_vysuv{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem);
  color: var(--dup-text-invert);
  padding-bottom: 20px;
}
/* Proužek pod názvem střediska nese barvu té divize (manuál: barevnost
   divizí). Karta navíc drží svůj odstín ve spodním ztmavení. */
.h3_divize_vysuv_link{
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--dup-mint);
}
.dup-karta--kovo .h3_divize_vysuv_link{ background-color: #8fa3c4; }
.dup-karta--gala .h3_divize_vysuv_link{ background-color: #81b794; }
.dup-karta--pivovar .h3_divize_vysuv_link{ background-color: #c6b32d; }

/* Ztmavení pod popiskem je ZÁMĚRNĚ neutrální (černá s průhledností).
   Klientka 15. 9. 2026: "na fotky už nepoužíváme zelený filtr" — barevný
   přeliv přes fotku by byl totéž znovu, jen v jiném odstínu. Divizi proto
   nese jen proužek pod názvem a barevnost samotné stránky střediska. */
.dup-karta--kovo .divize_vysunuty,
.dup-karta--gala .divize_vysunuty,
.dup-karta--pivovar .divize_vysunuty{
  background-color: rgba(10,10,12,.90);
}

.dup-karta--kovo .tl_divize_vysuv_obal:hover{ background-color: #8fa3c4; }
.dup-karta--pivovar .tl_divize_vysuv_obal:hover{ background-color: #c6b32d; }

/* Na dotykovém displeji žádný hover není, takže popis divize by se nedal
   zobrazit vůbec — původní šablona ho tam dokonce schovávala natvrdo.
   Panel proto zůstává rozbalený: název, dvě řádky popisu a tlačítko.       */
@media only screen and (max-width: 900px){
  .polozka_divize_vysuv{
    height: auto !important;   /* jQuery si sem při doteku zapíše výšku animace */
    padding: 26px 22px 24px;
    background: linear-gradient(to top,
                rgba(10,10,12,.92)  0%,
                rgba(10,10,12,.74) 58%,
                rgba(10,10,12,0)  100%);
  }
  .divize_vysuv_obal,
  .divize_vysuv_obal_in{
    display: block;
    margin-top: 16px;
  }
  .divize_vysuv_obal_in p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.88);
  }
  .divize_vysuv_obal .tl_divize_vysuv_obal{
    margin-top: 16px;
  }
  .h3_divize_vysuv{
    padding-bottom: 14px;
  }
}

.tl_divize_vysuv_obal{
  height: auto;
  line-height: 1.35;
  padding: .62em 1.45em;
  margin-top: 28px;
  border-radius: var(--dup-radius-pill);
  background-color: var(--dup-white);
  background-image: none;
  color: var(--dup-ink);
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: none;
  transition: background-color .2s ease, color .2s ease;
}
.tl_divize_vysuv_obal:hover{
  background-color: var(--dup-mint);
  color: var(--dup-ink);
}
/* stejná nit s hrotem jako u .dup-btn, jen bez extra značky v HTML */
.tl_divize_vysuv_obal,
.tl_dalsi{
  position: relative;
  padding-bottom: 1.15em;
}
.tl_divize_vysuv_obal::before,
.tl_dalsi::before{
  content: "";
  position: absolute;
  left: 1.45em;
  right: 1.45em;
  bottom: .78em;
  border-top: 2px solid currentColor;
}
.tl_divize_vysuv_obal::after,
.tl_dalsi::after{
  content: "";
  position: absolute;
  right: 1.45em;
  bottom: .52em;
  width: .5em;
  height: .5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------- výpisy --- */
.polozka_vypis_in{
  border-radius: var(--dup-radius);
  transition: transform .25s ease, box-shadow .25s ease;
}
.polozka_vypis:hover .polozka_vypis_in{
  transform: translateY(-3px);
  box-shadow: var(--dup-shadow);
}

/* Perex se ořezává, aby karty držely podobnou výšku. `-webkit-line-clamp` tu
   nefunguje — perex z administrace je <p>/<ul>, tedy blokový obsah, a Chrome
   pak řez nechá na max-height. Proto se ořez počítá z řádkování: výška je
   přesný násobek řádku a nikdy nekončí uprostřed písmen.
   ⚠ Řádkování se musí vynutit i na potomcích, jinak si <p> přinese vlastní
   (16 px × 1,62 = 25,92) a výpočet přestane sedět.                          */
.obal_p_vypis{
  position: relative;
  height: auto;
  /* stejná velikost i řádkování jako `.obsah p` — `em` níž se počítá z nich */
  font-size: clamp(1rem, .97rem + .12vw, 1.08rem);
  line-height: 1.62;
  max-height: calc(3 * 1.62em);
  overflow: hidden;
}
.obal_p_vypis p,
.obal_p_vypis ul,
.obal_p_vypis ol,
.obal_p_vypis li{
  font-size: inherit;
  line-height: inherit;
}
/* Článek bez perexu má obal prázdný (jen bílé znaky, takže na `:empty`
   nedosáhneme) a ten si i tak držel 30px spodního odsazení — na kartě to
   vypadalo jako díra mezi nadpisem a odkazem. */
.obal_p_vypis:not(:has(*)){
  display: none;
}
.tl_vypis{
  color: var(--dup-teal);
  font-family: var(--dup-font);
}
.tl_dalsi{
  border: 0;
  border-radius: var(--dup-radius-pill);
  background-color: var(--dup-ink);
  color: var(--dup-text-invert);
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
  padding: .62em 1.45em;
  text-transform: none;
  transition: background-color .2s ease;
}
.tl_dalsi:hover{
  background-color: var(--dup-teal);
  color: var(--dup-text-invert);
}

/* ---------------------------------------------------- pruh nad výpisem ---
   Původní aktuality-image-new2.jpg má přes sebe zelený přeliv. Protože se
   v ní zelená mísí se zelení stromu, nešel by odečíst spolehlivě — pruh
   proto jede na čistém výřezu ze stejné fotky areálu, jaká je na úvodu.   */
.blok_obr_nad_vypis{
  background-image: url("../../img/obr_nad_clanky/banner-dup-2026.jpg");
  background-size: cover;
  background-position: center 38%;
  position: relative;
}
.blok_obr_nad_vypis::after{          /* ztmavení kvůli čitelnosti nadpisu */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              rgba(11,29,31,.62) 0%, rgba(11,29,31,.34) 55%, rgba(11,29,31,.18) 100%);
  pointer-events: none;
}
.blok_obr_nad_vypis > *{
  position: relative;
  z-index: 1;
}
.h1_vypis{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--dup-text-invert);
  text-shadow: 0 2px 20px rgba(11,29,31,.5);
}

/* -------------------------------------------------------- detail článku ---
   Text článku byl šedý (#AAAAAA) — na světlém podkladu to nesplní ani
   základní kontrast a text vypadá vybledle. Jede na běžné textové barvě.
   Obsah navíc sedí v bílé kartě, jak to má vizuální styl DUP.              */
.blok_detail_h{
  background-color: var(--dup-bg);
  padding-top: var(--dup-section-y);
}
.blok_detail_h.detail_h_bez_fotky{
  padding: var(--dup-section-y) 0 calc(var(--dup-section-y) * .6);
}
.blok_detail_d{
  padding-top: 0;
}

.obal_h1_h2_clanek{
  text-align: center;
}

/* --- hlavička stránky střediska s vlastní fotkou ------------------------- */
.dup-detail-hero{
  position: relative;
  background-size: cover;
  background-position: center 62%;
  padding-top: calc(var(--dup-section-y) * 1.15);
  padding-bottom: calc(var(--dup-section-y) * 1.5);
}
.dup-detail-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(10,10,12,.34) 0%, rgba(10,10,12,.12) 38%, rgba(10,10,12,.52) 100%);
  pointer-events: none;
}
.dup-detail-hero > *{
  position: relative;
  z-index: 1;
}
.dup-detail-hero .h1_clanek,
.dup-detail-hero .h2_clanek{
  color: var(--dup-text-invert);
  text-shadow: 0 2px 22px rgba(10,10,12,.55);
}
.dup-detail-hero .dup-thread__stitch{
  stroke: rgba(255,255,255,.75);
}
.dup-detail-hero .dup-znak-divize{
  filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(10,10,12,.5));
}
.dup-detail-hero--pivovar{
  background-image: url("../../img/brand/pivovar-hero.jpg");
}
/* Pivovar: logo nesmí ležet přímo na fotce (korektura 23. 9. 2026) — sedí
   na tvaru etikety a podtácků pivovaru (korektura 24. 9. 2026). Obrys je
   vektorizovaný z Martinovy masky dup_podtacek (Affinity, 385 × 449):
   plošší oblouk, rovné boky mírně sbíhavé dolů. Rozmístění obsahu přeměřené tamtéž v jednotkách
   šířky tvaru (cqw): logo 83 % šířky a 9 % od vrcholu, linka 63 %.
   Pevný poměr stran, ať se obrys nedeformuje; stín přes drop-shadow. */
.dup-detail-hero--pivovar{
  padding-top: calc(var(--dup-section-y) * .9);
  padding-bottom: calc(var(--dup-section-y) * 1.1);
}
.dup-detail-hero--pivovar .obal_h1_h2_clanek{
  box-sizing: border-box;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(400px, 100%);
  aspect-ratio: 385 / 448.6;
  margin: 0 auto;
  padding: 0 0 6%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 385 448.6' preserveAspectRatio='none'%3E%3Cpath fill='%23e5dfda' d='M4.3 227.7 L4 222 L3.4 216.1 L3 210.1 L2.4 204.1 L2.1 198.1 L1.6 192.1 L1.3 186.1 L0.8 180.1 L0.6 174.1 L0.6 168.1 L0.8 162.1 L1.3 156.1 L1.9 150.1 L2.7 144.1 L3.8 138.1 L5 132.1 L6.5 126.1 L8.2 120.1 L10.1 114.1 L12.3 108.1 L15 102.1 L18 96.1 L21.1 90.1 L24.7 84.2 L28.5 78.4 L32.6 72.9 L36.8 67.4 L41.2 62.1 L45.8 56.9 L50.9 51.8 L56 47.3 L61.3 43.2 L66.8 39.2 L72.4 35.3 L78.4 31.4 L84.4 27.6 L90.4 24.2 L96.4 21.1 L102.5 18.3 L108.5 15.8 L114.5 13.6 L120.5 11.6 L126.5 9.8 L132.5 8.1 L138.5 6.6 L144.5 5.3 L150.5 4.1 L156.5 3.1 L162.5 2.3 L168.5 1.5 L174.5 0.8 L180.5 0.6 L186.5 0.4 L192.5 0.4 L198.5 0.5 L204.5 0.6 L210.5 0.9 L216.5 1.3 L222.5 2 L228.5 2.8 L234.5 3.7 L240.5 4.8 L246.5 6 L252.5 7.3 L258.4 8.7 L263.4 10.3 L268.5 11.9 L273.7 13.8 L279.4 16.3 L285.5 19 L291.5 21.9 L297.5 25.2 L303.4 28.6 L309.4 32.2 L315.1 36.1 L320.7 40 L325.9 44.2 L331 48.5 L336.1 53.1 L340.8 58 L345.4 62.9 L349.5 68 L353.5 73.4 L357.4 79.1 L361.2 85.1 L364.8 91.1 L368.1 97.1 L371 103.1 L373.6 109.1 L375.7 115.1 L377.6 121.1 L379.1 127.1 L380.4 133.1 L381.7 139.1 L382.7 145.1 L383.4 151.1 L383.9 157.1 L384.4 163.1 L384.5 169.1 L384.5 175.1 L384.2 181.1 L383.7 187.1 L383.2 193.1 L382.7 199.1 L382.4 205.1 L382 211.1 L381.6 217.1 L381.1 223.1 L380.6 229.1 L380 235.1 L379.6 241.1 L379.2 247.1 L378.8 253.1 L378.4 259.1 L377.9 265.1 L377.4 271.1 L376.9 277.1 L376.5 283.1 L376.1 289.1 L375.6 295.1 L375.3 301.1 L374.8 307.1 L374.4 313.1 L373.9 319.1 L373.4 325.1 L372.9 331.1 L372.5 337.1 L371.9 343.1 L371.4 349.1 L370.9 355.1 L370.5 361.1 L370.1 367.1 L369.6 373.1 L369.1 379.1 L368.5 385.1 L368 391.1 L367.6 397.1 L367.3 403.1 L366.9 409.1 L366.4 415.1 L365.8 421.1 L364.8 427.1 L363.4 433.1 L360.8 438.8 L356.7 443.4 L351.4 446.4 L345.5 447.7 L339.5 448 L333.5 448.2 L327.5 448.4 L321.5 448.6 L315.5 448.6 L309.5 448.4 L303.5 448.1 L297.5 447.9 L291.5 447.8 L285.5 447.9 L279.5 448 L273.5 448.2 L267.5 448.3 L261.5 448.1 L255.5 448.2 L249.5 448.2 L243.5 448.4 L237.5 448.6 L231.5 448.3 L225.5 448.2 L219.5 448.1 L213.5 448 L207.5 448 L201.5 447.9 L195.5 447.9 L189.5 447.9 L183.5 447.9 L177.5 447.8 L171.5 447.8 L165.5 447.9 L159.5 447.9 L153.5 447.9 L147.5 447.9 L141.5 447.8 L135.5 447.8 L129.5 447.7 L123.5 447.7 L117.5 447.8 L111.5 447.8 L105.5 447.8 L99.5 447.7 L93.5 447.7 L87.5 447.6 L81.5 447.6 L75.5 447.6 L69.5 447.6 L63.5 447.6 L57.5 447.6 L51.5 447.6 L45.5 447.6 L39.5 447.1 L33.5 445.4 L28.1 442 L23.9 437 L21.2 431.2 L19.9 425.1 L19.2 419.1 L18.7 413.1 L18.3 407.1 L17.8 401.1 L17.4 395.1 L16.8 389.1 L16.4 383.1 L15.8 377.1 L15.3 371.1 L14.8 365.1 L14.3 359.1 L13.7 353.1 L13.3 347.1 L12.7 341.1 L12.1 335.1 L11.6 329.1 L11.2 323.1 L10.7 317.1 L10.4 311.1 L9.7 305.1 L9.2 299.1 L8.9 293.1 L8.5 287.1 L8.2 281.1 L7.8 275.1 L7.4 269.1 L6.9 263.1 L6.5 257.1 L6.2 251.1 L5.7 245.1 L5.2 239.1 L4.7 233.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 30px rgba(10,10,12,.3));
  color: var(--dup-ink);
}
.dup-detail-hero--pivovar .dup-znak-divize{
  filter: none;
  width: 82.6cqw;
  height: auto;
  margin: 8.9cqw auto 0;
}
.dup-detail-hero--pivovar .dup-heading--clanek{
  display: block;
  width: 100%;
  margin: auto 0 0;
  text-align: center;
}
.dup-detail-hero--pivovar .dup-heading--clanek::before{
  content: "";
  display: block;
  width: 63.3cqw;
  margin: 0 auto 6.5cqw;
  border-top: 1.5px solid var(--dup-ink);
}
/* Název pod logem se neopakuje, logo ho nese (korektura 25. 9. 2026).
   H1 zůstává v kódu kvůli vyhledávačům a čtečkám, jen se nekreslí. */
.dup-detail-hero--pivovar .h1_clanek{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dup-detail-hero--pivovar .h2_clanek{
  color: var(--dup-ink);
  text-shadow: none;
  font-style: normal;
  text-wrap: balance;
  font-size: 7.2cqw;
  line-height: 1.3;
  width: 84cqw;
  margin: 0 auto auto;
}
/* Jehla s nití je prvek DUP — na stránkách pivovaru se nekreslí (klientka). */
body:has(.dup-divize--pivovar) .dup-thread{
  display: none;
}
.h1_clanek{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem);
  line-height: 1.14;
  color: var(--dup-teal);
}
.h2_clanek{
  font-family: var(--dup-font);
  font-weight: 500;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  line-height: 1.45;
  color: var(--dup-text-muted);
  margin-top: 12px;
}
.datum_detail{
  color: var(--dup-text-muted);
}

.zkraceny_vypis,
.text_detail{
  color: var(--dup-text);
}
.zkraceny_vypis{
  font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem);
  line-height: 1.55;
  color: var(--dup-teal-dark);
}
/* TinyMCE v adminu perex obalí do <p> a to si bere menší písmo textu článku —
   perex má držet svou velikost, ať je v <p>, nebo ne. */
.zkraceny_vypis p{
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
/* nadpisy uvnitř textu zarovnat k textu, ne na střed */
.zkraceny_vypis h1, .zkraceny_vypis h2, .zkraceny_vypis h3,
.text_detail h1, .text_detail h2, .text_detail h3{
  text-align: left;
  color: var(--dup-teal);
  margin-top: 1.6em;
  margin-bottom: .5em;
}
/* Odrážky: Mona vkládá do každého <li> bitmapu ic-odrazka.jpg jako pozadí.
   Je to JPG (neprůhledné) ve staré zelené a k tomu ještě svítí běžný
   puntík seznamu — vedle sebe to dělá dvě odrážky. Bitmapu proto vypínáme
   a necháváme puntík v barvě značky. */
.obsah ul li,
.text_detail ul li,
.zkraceny_vypis ul li{
  background-image: none;
  padding-left: 0;
}
.text_detail ul,
.zkraceny_vypis ul{
  padding-left: 1.2em;
}
.text_detail li,
.zkraceny_vypis li{
  margin-bottom: .45em;
}
.text_detail li::marker,
.zkraceny_vypis li::marker{
  color: var(--dup-mint);
}

/* Nad tlačítkem Zpět vedla linka přes celou šířku (pevná #f3f3f3). Na
   barevných podkladech svítila a nic neoddělovala — pryč. */
.blok_zpet{
  border-top: 0;
  border-bottom: 0;
}
.tl_zpet,
.stred_zpet a span{
  border-radius: var(--dup-radius-pill);
  border-color: var(--dup-line);
  color: var(--dup-text-muted);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tl_zpet:hover,
.stred_zpet a:hover span{
  background-color: var(--dup-ink);
  border-color: var(--dup-ink);
  color: var(--dup-text-invert);
}

/* obsah článku v bílé kartě — perex i text jsou v šabloně dva bloky,
   proto je obaluje .dup-clanek-karta a karta se dělá až na ní */
.dup-clanek-karta{
  max-width: 820px;
  margin: calc(var(--dup-section-y) * -.4) auto 0;
  padding: clamp(26px, 3vw, 56px) clamp(22px, 2.6vw, 50px);
  background: var(--dup-white);
  border-radius: var(--dup-radius-velky) 0 var(--dup-radius-velky) 0;
  box-shadow: var(--dup-shadow);
}
.dup-clanek-karta .blok_sirky_webu_uzky{
  width: auto;
  max-width: none;
  margin: 0;
}
.dup-clanek-karta .zkraceny_vypis{
  margin-bottom: 28px;
}
.dup-clanek-karta .text_detail{
  margin-bottom: 0;
}

.dup-cta-blok{
  margin-top: 2em;
}

.obal_obr_clanek img{
  border-radius: var(--dup-radius);
}

/* ------------------------------------------------- výpis výrobků (Kovo/Gala)
   Tyhle dva moduly mají vlastní šablonu (template/vypis_vyrobky.php), takže
   se brandují zvlášť. Barvy jedou z tokenů → přebarví se podle divize.     */
.blok_vypis_vyrobky_h{
  background-color: var(--dup-bg);
}
.h1_vypis_vyrobky{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--dup-text-invert);
  text-shadow: 0 2px 20px rgba(11,29,31,.5);
}
.podnadpis_vypis_vyrobky{
  color: var(--dup-teal);
  font-family: var(--dup-font);
  font-weight: 600;
  letter-spacing: .06em;
}
.h2_vypis_vyrobky{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--dup-teal-dark);
}
.zkraceny_vypis_vyrobky{
  color: var(--dup-text);
}
/* Položky byly postavené na floatu: fotka držela 490 px, text jen ~230 a
   zbytek karty zůstal prázdný. Přestavěné na dva sloupce vedle sebe, každá
   druhá má fotku na opačné straně — stejný rytmus jako microsite. */
.blok_vypis_vyrobky_d{
  background-color: var(--dup-bg);
  padding: var(--dup-section-y) 0;
}
/* Sekce měla přes celou šířku fotku dílny jako pozadí (`cil_kotva_*`
   v styly.css). Nová sazba staví na brandových plochách, ne na podkladové
   fotce — fotky mají vlastní panely.                                        */
.polozka_vypis_vyrobky,
.cil_kotva_default,
.cil_kotva_vyroba,
.cil_kotva_technologie{
  padding: 0;
  background-color: transparent;
  background-image: none;
}
.polozka_vypis_vyrobky + .polozka_vypis_vyrobky{
  margin-top: clamp(20px, 2.2vw, 40px);
}
.polozka_vypis_vyrobky > .blok_sirky_webu{
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 32px);
  align-items: stretch;
  background: transparent;
}
/* U sudých je fotka vpravo — musí se prohodit i šířky sloupců, ne jen
   pořadí, jinak by fotka dostala široký sloupec a text se srazil. */
.polozka_vypis_vyrobky:nth-child(even) > .blok_sirky_webu{
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
}
.polozka_vypis_vyrobky:nth-child(even) .obal_obr_vyrobky{ order: 2; }
.polozka_vypis_vyrobky:nth-child(even) .obal_text_vyrobky{ order: 1; }

.obal_obr_vyrobky{
  float: none;
  width: auto;
  margin: 0;
  align-self: stretch;
  /* bez poměru si výšku řádku určil obrázek podle svých proporcí (na výšku),
     takže vedle krátkého textu zbývala půlka panelu prázdná. Obrázek proto
     jde z toku ven (absolutně) a o výšce rozhoduje poměr panelu. */
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;        /* stará sazba má natvrdo 490 px */
  /* ⚠ u vyššího řádku (delší text vedle) si aspect-ratio dopočítá ŠÍŘKU
     z výšky a panel přeteče svůj sloupec pod text — šířku proto drží sloupec */
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: var(--dup-white);
  border-radius: var(--dup-radius-velky) 0 0 0;
}
.polozka_vypis_vyrobky:nth-child(even) .obal_obr_vyrobky{
  border-radius: 0 var(--dup-radius-velky) 0 0;
}
.obal_obr_vyrobky img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .5s var(--dup-ease);
}
.obal_obr_vyrobky:hover img{
  transform: scale(1.04);
}
.obal_text_vyrobky{
  float: none;
  width: auto;
  /* stará sazba odsazovala text o šířku fotky (margin-left 520 px) a vpravo
     dělala místo pro kotvy — v mřížce by z toho zbyl úzký sloupec s dírou */
  margin: 0;
  padding: clamp(28px, 3vw, 58px) clamp(26px, 2.8vw, 56px);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--dup-white);
  border-radius: 0 0 var(--dup-radius-velky) 0;
}
.polozka_vypis_vyrobky:nth-child(even) .obal_text_vyrobky{
  border-radius: 0 0 0 var(--dup-radius-velky);
}
.obal_text_vyrobky .zkraceny_vypis_vyrobky{
  max-width: 62ch;
}
.polozka_vypis_vyrobky:nth-child(even) .obal_text_vyrobky{
  padding-left: clamp(24px, 2.6vw, 54px);
}
.polozka_vypis_vyrobky .spacer{ display: none; }

/* Některé položky mají pod textem ještě slider fotek — ten patří přes obě
   sloupce, jinak se natlačí do mřížky a rozhodí výšku celé karty. Pořadí musí
   být vyšší než u fotky a textu: u sudých položek se ty dvě prohazují přes
   `order`, a galerie by se svou výchozí nulou vyšplhala nad kartu. */
.polozka_vypis_vyrobky .obal_swiper_sortiment{
  grid-column: 1 / -1;
  order: 3;
  padding: 0 clamp(24px, 2.6vw, 54px) clamp(24px, 2.6vw, 46px);
  min-width: 0;
}
.polozka_vypis_vyrobky .swiper-container_sortiment{
  max-width: 100%;
}

@media only screen and (max-width: 900px){
  /* :nth-child(even) výš má vyšší specificitu a @media ji nezvyšuje —
     bez druhého selektoru by sudé položky zůstaly dvousloupcové a fotka
     by přetekla obrazovku */
  .polozka_vypis_vyrobky > .blok_sirky_webu,
  .polozka_vypis_vyrobky:nth-child(even) > .blok_sirky_webu{
    grid-template-columns: minmax(0, 1fr);
  }
  .polozka_vypis_vyrobky:nth-child(even) .obal_obr_vyrobky{ order: 1; }
  .polozka_vypis_vyrobky:nth-child(even) .obal_text_vyrobky{ order: 2; }
  .obal_obr_vyrobky img{ min-height: 240px; }
}

/* ⚠ Tenhle blok musí zůstat AŽ ZA pravidly výš — @media specificitu
   nezvyšuje, takže o vítězi rozhoduje pořadí v souboru. Když se přesune
   nahoru k ostatním mobilním blokům, přestane platit. */
@media only screen and (max-width: 650px){
  .polozka_vypis_vyrobky .obal_text_vyrobky,
  .polozka_vypis_vyrobky:nth-child(even) .obal_text_vyrobky{
    padding: 24px 20px 26px;
  }
  .polozka_vypis_vyrobky .obal_swiper_sortiment{
    padding: 0 20px 20px;
  }
}

/* -------------------------------------------------------------- patička ---
   Původní tmavě modrá #041B4A není barva ze značky — v manuálu je modrá
   vyhrazená divizi Kovo. Patička proto jede na nejtmavší brandové barvě.    */
.paticka{
  background-color: var(--dup-ink);
  color: var(--dup-text-invert);
}
.paticka_in_h,
.paticka_in_s{
  border-bottom-color: rgba(255,255,255,.14);
}
.paticka .h2_paticka,
.h2_paticka{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--dup-text-invert);
}
.paticka a:link,
.paticka a:visited{
  color: var(--dup-mint);
}
.paticka a:hover{
  color: var(--dup-text-invert);
}
/* Odkazy v patičce byly podtržené — v brandu 2026 to nechceme, stačí barva. */
.polozka_menu_pata{
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.polozka_menu_pata:hover,
.aktivni_menu_pata,
.aktivni_menu_pata:hover{
  color: var(--dup-mint);
  text-decoration: none;
}

/* --- horní část patičky: mapa vlevo, kontakt vedle ------------------------ */
.paticka_in_h{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 64px);
  text-align: left;
  padding-bottom: clamp(30px, 3vw, 54px);
}
.paticka_in_h > .sloupec_pata_s{
  float: none;
  order: 1;
  flex: 0 1 486px;
  width: auto;
  max-width: 100%;
}
.paticka_in_h > .sloupec_pata_p{
  float: none;
  order: 2;
  flex: 1 1 280px;
  width: auto;
  text-align: left;
}
.paticka_in_h > .sloupec_pata_l{
  float: none;
  order: 3;
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
}

/* Mapa v šedé — barevná Google mapa v tmavé patičce působí jako cizí prvek. */
.dup-mapa-pata{
  border-radius: var(--dup-radius-velky) 0 var(--dup-radius-velky) 0;
  overflow: hidden;
  line-height: 0;
  max-width: 100%;
  filter: grayscale(1) contrast(.92) brightness(.95);
  transition: filter .35s var(--dup-ease);
}
.dup-mapa-pata:hover{
  filter: grayscale(0) contrast(1) brightness(1);
}
.dup-mapa-pata iframe{
  display: block;
  max-width: 100%;
  border: 0;
}

/* --- spodní řádek: copyright | odkazy | McRAI v jedné lince --------------- */
.paticka_in_d{
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  text-align: left;
}
.paticka_in_d > *{ margin-top: 0; margin-bottom: 0; }
/* Výšku 28 px drží .mcrai_pata kvůli logu na pozadí. Copyright i odkazy proto
   mají stejnou výšku řádku, jinak flex srovná boxy, ale texty v nich sedí
   každý jinde (21. 9. 2026: všechny tři kusy mají být v jedné rovině). */
.paticka_in_d .copyright_pata{ order: 1; flex: none; height: 28px; line-height: 28px; }
.paticka_in_d .dup-odkazy-pata{ order: 2; margin-inline: auto; }
.paticka_in_d > a{ order: 3; flex: none; margin-left: 0; }
.paticka_in_d .spacer{ display: none; }

.dup-odkazy-pata{
  display: block;
  margin-bottom: 0;
}
.dup-odkazy-pata .dolni_menu{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px clamp(14px, 1.6vw, 30px);
  /* Mona dává dolnímu menu 40 px pod sebe (bylo pod ním ještě copyright).
     Tady je menu součástí jedné linky, takže by odsazení jen posunulo odkazy
     nad copyright i značku McRAI. */
  margin-bottom: 0;
}
.dup-odkazy-pata .polozka_menu_pata{
  display: inline-block;
  margin: 0;
  font-size: 15px;
  line-height: 28px;
}

/* ------------------------------------------- předstrany divizí (dlaždice) ---
   Rozcestník "Výrobky a služby" u Kovovýroby a Galanterie. Původní dlaždice
   měly název vysázený přes fotku a držel ho vypálený barevný přeliv — ten je
   z bitmap odečtený (klientka: barevné filtry na fotkách už nepoužívají),
   takže název jde pod fotku na světlý pruh a fotka zůstává fotkou.
   Poměr dlaždice řídí .pomer_fotek_vypis_podmenu — skripty.js z něj počítá
   výšku bloku, takže se mění tady, ne inline.                              */
.obsah_podmenu{
  background-color: var(--dup-bg);
}
.blok_nadpis_vypis_podmenu{
  padding: var(--dup-section-y) 0 0 0;
}
.obsah_in_vypis_podmenu{
  padding: clamp(28px, 3vw, 46px) 0 var(--dup-section-y) 0;
}
.obsah_in_vypis_podmenu > .blok_sirky_webu{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 34px);
  align-items: stretch;
}
.obsah_in_vypis_podmenu > .blok_sirky_webu > .spacer{ display: none; }
.pomer_fotek_vypis_podmenu{      /* poměr dlaždice = 3:2, název je pod fotkou */
  width: 600px;
  height: 400px;
}
.obsah_in_vypis_podmenu > .blok_sirky_webu > a{
  display: block;
  height: 100%;
}
.obsah_in_vypis_podmenu > .blok_sirky_webu > a:link,
.obsah_in_vypis_podmenu > .blok_sirky_webu > a:visited{
  color: var(--dup-text);
  text-decoration: none;
}

.polozka_vypis_podmenu{
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--dup-white);
  transition: transform .25s var(--dup-ease), box-shadow .25s var(--dup-ease);
}
.obsah_in_vypis_podmenu a:nth-of-type(3n+1) .polozka_vypis_podmenu{
  border-radius: var(--dup-radius-velky) 0 0 0;
}
.obsah_in_vypis_podmenu a:nth-of-type(3n+2) .polozka_vypis_podmenu{
  border-radius: 0 0 var(--dup-radius-velky) 0;
}
.obsah_in_vypis_podmenu a:nth-of-type(3n) .polozka_vypis_podmenu{
  border-radius: 0 var(--dup-radius-velky) 0 0;
}
.obsah_in_vypis_podmenu a:hover .polozka_vypis_podmenu{
  transform: translateY(-4px);
  box-shadow: var(--dup-shadow);
}
/* Fotku dosud dostřeďoval skripty_pro_upravu_fotek.js dopočítaným záporným
   marginem — po změně poměru dlaždice počítal s neaktuální výškou a nechával
   pod fotkou pruh. object-fit to zvládne sám, proto se jeho inline hodnoty
   přebíjejí (jediné místo, kde je !important na místě).                     */
.obr_vypis_podmenu_in{
  background-color: var(--dup-bg-2);
  line-height: 0 !important;
}
.obr_vypis_podmenu_in img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
  vertical-align: top;
}
.polozka_vypis_podmenu:hover .obr_vypis_podmenu_in img{
  transform: scale(1.06);
}

/* pruh s názvem pod fotkou */
.nazev_vypis_podmenu{
  position: static;
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 92px;
  flex: 1 0 auto;
  padding: 20px 68px 20px clamp(20px, 1.8vw, 30px);
  overflow: visible;
}
.nazev_vypis_podmenu_in{
  display: block;
  vertical-align: middle;
}
.nazev_vypis_podmenu_in h2{
  margin: 0;
  max-height: none;
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.25vw, 1.45rem);
  line-height: 1.25;
  color: var(--dup-ink);
  overflow: visible;
}
.obsah_in_vypis_podmenu a:hover .nazev_vypis_podmenu_in h2{
  color: var(--dup-teal);
}

/* šipka — stejná nit s hrotem jako u tlačítek, ne oranžové PNG.
   Kotví se k dolnímu pruhu, ne ke kartě, aby zůstala v jedné ose s názvem
   i u dvouřádkových titulků.                                              */
.sipka_vypis_podmenu{
  top: auto;
  bottom: 0;
  right: clamp(20px, 1.8vw, 30px);
  display: flex;
  align-items: center;
  width: 34px;
  height: 92px;
  background-image: none;
  color: var(--dup-teal);
  transition: width .25s var(--dup-ease);
}
.sipka_vypis_podmenu::before{        /* nit */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid currentColor;
}
.sipka_vypis_podmenu::after{         /* hrot */
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.obsah_in_vypis_podmenu a:hover .sipka_vypis_podmenu{
  width: 46px;
}

@media screen and (max-width: 1100px){
  .obsah_in_vypis_podmenu > .blok_sirky_webu{
    grid-template-columns: repeat(2, 1fr);
  }
  .obsah_in_vypis_podmenu a:nth-of-type(2n+1) .polozka_vypis_podmenu{
    border-radius: var(--dup-radius-velky) 0 0 0;
  }
  .obsah_in_vypis_podmenu a:nth-of-type(2n) .polozka_vypis_podmenu{
    border-radius: 0 var(--dup-radius-velky) 0 0;
  }
}
@media screen and (max-width: 680px){
  .obsah_in_vypis_podmenu > .blok_sirky_webu{
    grid-template-columns: 1fr;
  }
  .obsah_in_vypis_podmenu a:nth-of-type(n) .polozka_vypis_podmenu{
    border-radius: var(--dup-radius-velky) 0 var(--dup-radius-velky) 0;
  }
  .nazev_vypis_podmenu{ min-height: 78px; }
}

/* ---------------------------------------------------- drobečková navigace ---
   Oranžová #F56F46 v manuálu 2026 není a podtržení odkazů jsme na webu zrušili. */
.obal_navigace{
  background-color: transparent;
}
.obal_navigace a:hover{
  color: var(--dup-teal);
  text-decoration: none;
}
.polozka_navigace:hover{
  text-decoration: none;
}
.aktivni_navigace,
.aktivni_navigace:hover{
  color: var(--dup-teal);
}

/* -------------------------------------------- dotazník nad patičkou (formulář) ---
   Sekce měla natvrdo modrou #041B4A ze starého webu KOVO a bílou linku dole.
   Barvu teď drží token divize (Kovo tmavě modrá, Galanterie teal, Pivovar
   olivová), formulář sedí v bílé kartě s jedním velkým rohem jako na microsite. */
.blok_formular_nad_patickou{
  background-color: var(--dup-teal-dark);
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  border-bottom: 0;
  padding: var(--dup-section-y) 0;
}
.blok_formular_nad_patickou > .blok_sirky_webu{
  position: relative;
  z-index: 1;
}
.formular_nad_patickou_table{
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3vw, 64px);
  align-items: center;
}
.formular_nad_patickou_l,
.formular_nad_patickou_p{
  display: block;
  width: auto;
  height: auto;
  padding: 0;
}
.mensi_nazev_formular{
  font-family: var(--dup-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--dup-mint);
  margin-bottom: 14px;
}
.h2_formular{
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 18px;
}
.obal_p_formular{
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255,255,255,.86);
}

/* karta s poli */
.obal_dotaznik_def{
  background-color: var(--dup-white);
  border-radius: var(--dup-radius-velky) 0 var(--dup-radius-velky) 0;
  padding: clamp(24px, 2.4vw, 44px);
  color: var(--dup-text);
}
.obal_dotaznik_def .form_popisek{
  display: block;
  font-family: var(--dup-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--dup-text-muted);
  margin-bottom: 6px;
}
.obal_dotaznik_def .form_input_def,
.obal_dotaznik_def .form_area_def{
  width: 100%;
  border: 1px solid var(--dup-line);
  border-radius: var(--dup-radius-sm);
  background-color: var(--dup-white);
  padding: 12px 14px;
  font-family: var(--dup-font);
  font-size: 1rem;
  color: var(--dup-text);
  transition: border-color .2s var(--dup-ease), box-shadow .2s var(--dup-ease);
}
.obal_dotaznik_def .form_area_def{
  min-height: 118px;
  resize: vertical;
}
.obal_dotaznik_def .form_input_def:focus,
.obal_dotaznik_def .form_area_def:focus{
  outline: 0;
  border-color: var(--dup-teal);
  box-shadow: 0 0 0 3px rgba(63,119,115,.16);
}
.obal_dotaznik_def .form_blok_cely,
.obal_dotaznik_def .form_area_blok{
  margin-bottom: 16px;
}
.obal_dotaznik_def .obal_souhlas_form{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
}
.obal_dotaznik_def .form_popisek_check_radio{
  margin: 0;
  color: var(--dup-text-muted);
}
.obal_dotaznik_def .znacka_povinne_polozky{
  color: var(--dup-rose);
}
.obal_dotaznik_def .info_formular{
  font-size: 13px;
  color: var(--dup-text-muted);
}
.form_tl_def{
  border: 0;
  border-radius: var(--dup-radius-pill);
  background-color: var(--dup-ink);
  color: var(--dup-text-invert);
  font-family: var(--dup-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  padding: .7em 1.7em;
  text-transform: none;
  cursor: pointer;
  transition: background-color .2s var(--dup-ease);
}
.form_tl_def:hover{
  background-color: var(--dup-teal);
}
@media screen and (max-width: 900px){
  .formular_nad_patickou_table{
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- loader ---
   Než skripty_pro_upravu_fotek.js dostředí fotku (800 ms), drží místo překryv.
   Původní `loader_oranzova.gif` je animovaná bitmapa v barvě, která ve značce
   2026 není. Nahrazuje ho znak z loga, který se jemně zhoupne — vykreslený
   maskou, takže si bere barvu divize ze stejného tokenu jako zbytek webu.   */
.loader{
  background-image: none;
  background-color: rgba(255,255,255,.7);
}
.loader::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 30px;
  margin: -15px 0 0 -13px;
  background-color: var(--dup-teal);
  -webkit-mask: url("../../img/brand/znak.svg") no-repeat center / contain;
          mask: url("../../img/brand/znak.svg") no-repeat center / contain;
  transform-origin: 50% 88%;      /* houpe se kolem stopky, ne kolem středu */
  animation: dup-zhoupnuti 1.5s var(--dup-ease) infinite;
}
@keyframes dup-zhoupnuti{
   0%   { transform: rotate(0deg)   translateY(0);     opacity: .55; }
  22%   { transform: rotate(-9deg)  translateY(-3px);  opacity: 1;   }
  50%   { transform: rotate(0deg)   translateY(0);     opacity: .8;  }
  72%   { transform: rotate(9deg)   translateY(-3px);  opacity: 1;   }
 100%   { transform: rotate(0deg)   translateY(0);     opacity: .55; }
}
@media (prefers-reduced-motion: reduce){
  .loader::after{
    animation: none;
    opacity: .7;
  }
}

/* --------------------------------------------- karusel sortimentu (galerie) ---
   Vlastní posuvník místo Swiperu: native scroll se snapem, pod ním tečky,
   z nichž se aktivní protáhne. Chování řídí funkce/brand.js.                */
.dup-karusel{
  position: relative;
  padding: clamp(20px, 2vw, 34px) 0 0;
  min-width: 0;
}
.dup-karusel__okno{
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;            /* lišta je nahrazená tečkami */
  -ms-overflow-style: none;
  cursor: grab;
}
.dup-karusel__okno::-webkit-scrollbar{ display: none; }
.dup-karusel__okno img{
  /* jinak prohlížeč začne táhnout obrázek místo posunu galerie */
  -webkit-user-drag: none;
  user-select: none;
}
.dup-karusel__okno.je-tazeny{
  cursor: grabbing;
  scroll-snap-type: none;           /* při tažení ať to neškube */
  scroll-behavior: auto;
}
.dup-karusel__stopa{
  display: flex;
  gap: clamp(12px, 1.2vw, 22px);
  align-items: stretch;
}
.dup-karusel__polozka{
  flex: 0 0 auto;
  width: clamp(190px, 22%, 260px);
  scroll-snap-align: start;
}
.dup-karusel--bez-posuvu .dup-karusel__okno{ cursor: default; }
.dup-karusel--bez-posuvu .dup-karusel__tecky{ display: none; }

/* dlaždice uvnitř — art vyplní vlastní panel (vzor: galerie pozemkyOtovice),
   popisek je pod ním čistým textem, ne v rámečku                            */
.dup-karusel .polozka_slider_sortiment{
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
}
.dup-karusel .polozka_slider_sortiment_obr{
  display: block;
  padding: 0;
  border-radius: var(--dup-radius-sm);
  overflow: hidden;
  background-color: var(--dup-white);
}
.dup-karusel .polozka_slider_sortiment_obr_in{
  display: block;
  height: auto;
  aspect-ratio: 4 / 3;
  line-height: normal;
  overflow: hidden;
}
.dup-karusel .polozka_slider_sortiment_obr img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--dup-ease);
}
.dup-karusel .polozka_slider_sortiment:hover .polozka_slider_sortiment_obr img{
  transform: scale(1.06);
}
/* Bez popisku zbyl pod fotkou prázdný pruh s linkou — vypadalo to jako chyba.
   Popisky doplňuje klient v administraci, do té doby se pruh nevykresluje.  */
.dup-karusel .polozka_slider_sortiment_nazev:has(.h3_polozka_slider_sortiment:empty){
  display: none;
}
.dup-karusel .polozka_slider_sortiment_nazev{
  display: block;
  padding: 12px 2px 0;
  border-top: 0;
}
.dup-karusel .h3_polozka_slider_sortiment{
  font-family: var(--dup-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  height: auto;
  max-height: 2.7em;
  color: var(--dup-text-muted);
}

/* tečky — aktivní se protáhne do fazolky */
.dup-karusel__tecky{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: clamp(16px, 1.6vw, 26px);
}
.dup-karusel__tecka{
  appearance: none;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--dup-radius-pill);
  background-color: var(--dup-line);
  cursor: pointer;
  transition: width .28s var(--dup-ease), background-color .28s var(--dup-ease);
}
.dup-karusel__tecka:hover{
  background-color: var(--dup-sage);
}
.dup-karusel__tecka.is-aktivni{
  width: 26px;
  background-color: var(--dup-teal);
}
/* hodně stránek — tečky by tvořily řadu, tak po pruhu jezdí táž fazolka */
.dup-karusel__pruh{
  display: block;
  position: relative;
  width: clamp(110px, 16vw, 168px);
  height: 4px;
  border-radius: var(--dup-radius-pill);
  background-color: var(--dup-line);
  overflow: hidden;
}
.dup-karusel__beh{
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 18px;
  border-radius: var(--dup-radius-pill);
  background-color: var(--dup-teal);
  transition: transform .28s var(--dup-ease), width .28s var(--dup-ease);
}
@media (prefers-reduced-motion: reduce){
  .dup-karusel__tecka,
  .dup-karusel__beh{ transition: none; }
}
@media screen and (max-width: 900px){
  .dup-karusel__polozka{ width: clamp(168px, 60%, 220px); }
}

/* ---------------------------------------- organické body u nadpisů ---------
   Manuál str. 11: soustava kruhů různých velikostí a odstínů jako podpůrný
   prvek, „aniž by konkuroval hlavnímu sdělení". V katalogu (str. 16) sedí
   hned za nadpisem, pod ním podnadpis a nit s jehlou — stejná skladba je tady. */
.dup-heading > h1,
.dup-heading > h2,
.h1_vypis_podmenu{
  position: relative;
  display: inline-block;
  /* Body visí za pravou hranou nadpisu (left: 100 %). Když nadpis vyplní
     celou šířku — na telefonu skoro vždycky — vylezly by mimo stránku,
     proto si na ně nadpis šetří místo dopředu. */
  max-width: calc(100% - 1.4em);
}
.dup-heading > h1::after,
.dup-heading > h2::after,
.h1_vypis_podmenu::after{
  content: "";
  position: absolute;
  left: 100%;
  top: .04em;
  /* verze 2 (bez spodního kruhu), poměr 1,161 — viz img/brand/body-nadpis.svg */
  width: .99em;
  height: .85em;
  margin-left: .3em;
  background: url("../../img/brand/body-nadpis.svg") no-repeat left top / contain;
  pointer-events: none;
}
/* Na stránce divize se tokeny přebarvují, ale body jsou bitmapově dané —
   u Kova a Pivovaru by zelená do palety nesedla, tak se tam nedávají. */
body:has(.dup-divize--kovo) .dup-heading > h1::after,
body:has(.dup-divize--kovo) .dup-heading > h2::after,
body:has(.dup-divize--kovo) .h1_vypis_podmenu::after,
body:has(.dup-divize--pivovar) .dup-heading > h1::after,
body:has(.dup-divize--pivovar) .dup-heading > h2::after,
body:has(.dup-divize--pivovar) .h1_vypis_podmenu::after{
  display: none;
}
@media screen and (max-width: 680px){
  .dup-heading > h1::after,
  .dup-heading > h2::after,
  .h1_vypis_podmenu::after{
    width: .81em;
    height: .7em;
  }
}

/* ------------------------------------------------- odkazy mimo patičku ---
   Oranžová #F56F46 v manuálu 2026 není; odkazy jedou v mateřské teal.      */
a:link,
a:visited{
  color: var(--dup-teal);
}
a:hover{
  color: var(--dup-teal-dark);
  /* default.css podtrhává každý odkaz na hover — v menu se to potkávalo
     s naší linkou a byly vidět dvě čáry pod sebou. Odkazy se odlišují
     barvou, podtržení na webu nikde nepoužíváme. */
  text-decoration: none;
}

/* ----------------------------------------------------------- scroll reveal -- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1),
                transform .6s cubic-bezier(.22,.61,.36,1);
  }
  [data-reveal].is-revealed{
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------- sazba z editoru ---
   Texty vložené v administraci nesou inline `text-align: justify` ze starého
   webu. V úzkých sloupcích nové sazby to trhá mezery uprostřed řádku, proto
   se zarovnání vrací doleva. Jediná cesta přes inline styl je !important.   */
.obal_text_vyrobky p,
.zkraceny_vypis_vyrobky p,
.obal_p_vypis p,
.dup-clanek-karta p,
.blok_text_nad_clanky p{
  text-align: left !important;
}

/* ------------------------------------------- fotogalerie v článku (brand) ---
   Galerie z administrace se vykreslovala v syrovém stylu Mony — ostré rohy,
   žádná reakce na najetí. Dostává proto totéž, co dlaždice předstran: jeden
   výrazný roh střídavě po trojicích a nadzvednutí se stínem.
   Zaoblení ořezává fotku přes `overflow` na vnější dlaždici, protože `img`
   sedí až v `.polozka_fotogalerie_pomerove_in`.                             */
.obal_fotogalerie_pomerove .polozka_fotogalerie_pomerove{
  overflow: hidden;
  background-color: var(--dup-bg-2);
  transition: transform .25s var(--dup-ease), box-shadow .25s var(--dup-ease);
}
/* `nth-of-type` počítá jen odkazy, takže `<span class="pomer_fotek_v_galerii">`
   před nimi pořadí neposouvá. */
.obal_fotogalerie_pomerove a:nth-of-type(3n+1) .polozka_fotogalerie_pomerove{
  border-radius: var(--dup-radius-velky) 0 0 0;
}
.obal_fotogalerie_pomerove a:nth-of-type(3n+2) .polozka_fotogalerie_pomerove{
  border-radius: 0 0 var(--dup-radius-velky) 0;
}
.obal_fotogalerie_pomerove a:nth-of-type(3n) .polozka_fotogalerie_pomerove{
  border-radius: 0 var(--dup-radius-velky) 0 0;
}
.obal_fotogalerie_pomerove a:hover .polozka_fotogalerie_pomerove{
  transform: translateY(-4px);
  box-shadow: var(--dup-shadow);
}
.obal_fotogalerie_pomerove .polozka_fotogalerie_pomerove_in img{
  transition: transform .45s var(--dup-ease);
}
.obal_fotogalerie_pomerove a:hover .polozka_fotogalerie_pomerove_in img{
  transform: scale(1.06);
}
@media screen and (max-width: 900px){
  /* ve dvou sloupcích by trojkový vzor rohy rozházel */
  .obal_fotogalerie_pomerove a:nth-of-type(2n+1) .polozka_fotogalerie_pomerove{
    border-radius: var(--dup-radius-velky) 0 0 0;
  }
  .obal_fotogalerie_pomerove a:nth-of-type(2n) .polozka_fotogalerie_pomerove{
    border-radius: 0 var(--dup-radius-velky) 0 0;
  }
}
@media screen and (max-width: 560px){
  .obal_fotogalerie_pomerove a:nth-of-type(n) .polozka_fotogalerie_pomerove{
    border-radius: var(--dup-radius-velky) 0 var(--dup-radius-velky) 0;
  }
}

/* ------------------------------------------ karty divizí v responzivitě ---
   Mona pod 900 px přepíná karty na dva sloupce (`width: 48 %`), takže třetí
   divize zůstala sama na dalším řádku — 2 + 1. Pod 900 px proto jdou rovnou
   pod sebe, jako to dělá mobilní verze.

   Výšku karty počítá `skripty.js` z poměru pomocné třídy `.pomer_divize_home`
   (v základu 492 × 600, tedy na výšku). Přes celou šířku by z toho byl obří
   čtverec, proto se poměr v obou stupních mění na ležatý obdélník — mění se
   tady, ne inline, stejně jako u dlaždic předstran.                         */
@media screen and (max-width: 900px){
  .polozka_divize_home{
    width: 100%;
    margin: 0 0 16px 0;
  }
  /* ležatý pás — výška vyjde na 42 % šířky karty */
  .pomer_divize_home{
    width: 1000px;
    height: 420px;
  }
  /* přes celou šířku dává smysl jeden výrazný roh pro všechny stejně */
  .dup-karta--kovo,
  .dup-karta--gala,
  .dup-karta--pivovar{
    border-radius: var(--dup-radius-velky) 0 var(--dup-radius-velky) 0;
  }
}
@media screen and (max-width: 550px){
  /* na telefonu je karta úzká, takže pás 42 % by na text nestačil —
     poměr se zvedne, ale pořád zůstává obdélník na šířku, ne čtverec */
  .pomer_divize_home{
    width: 1000px;
    height: 640px;
  }
}