/*
 * Úvodní stránka ve stylu Lotos (16. 10. 2026) — výběr skupiny v první obrazovce, rámeček „naklikejte si to“,
 * „Přijedeme k vám“ zvlášť, řemesla s cenami, vínový pruh, firma. Společné věci (barvy, písma, hlavička, patička,
 * tlačítka) jsou v lotos.css. Podle makety docs/2026-10-13-design/makety-2/lotos/styl.css.
 */

.uvod { position: relative; padding: 8px 0 72px; overflow: hidden; }
.uvod-oblouky { position: absolute; right: -60px; top: -40px; width: 940px; max-width: 72%; height: auto; pointer-events: none; z-index: 0; }
.uvod-mrizka {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  grid-template-areas: "text karta" "perex karta" "kroky karta"; grid-template-rows: auto auto 1fr;
  column-gap: 56px; align-items: start;
}
.uvod-text { grid-area: text; padding-top: 28px; }
.kicker { font: 600 13px/1.4 var(--telo); letter-spacing: .14em; text-transform: uppercase; color: var(--zlata-text); }
.lotos .uvod-text .kicker { margin-bottom: 18px; }
.lotos .uvod h1 { font-size: clamp(44px, 4.9vw, 70px); line-height: 1.01; letter-spacing: .01em; text-transform: uppercase; margin-bottom: 26px; }
.uvod h1 span { display: block; }
.lotos .uvod-perex { grid-area: perex; font-size: 19px; line-height: 1.6; max-width: 31em; }

.uvod-kroky { grid-area: kroky; margin-top: 30px; max-width: 30em; }
.lotos .mala-h { font-size: 20px; margin-bottom: 16px; }
.lotos .mala-h--stred { text-align: center; margin-bottom: 26px; }
.kroky { list-style: none; margin: 0; padding: 0; counter-reset: k; }
.kroky li { position: relative; padding: 5px 0 16px 54px; counter-increment: k; color: var(--tlumeny); }
.kroky li strong { color: var(--text); }
.kroky li::before {
  content: counter(k); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font: 700 17px/1 var(--nadpis); color: var(--vino);
  background: var(--karta); border: 1.5px solid var(--zlata);
}
.kroky li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 38px; bottom: 0; width: 1px; background: linear-gradient(var(--zlata), rgba(195, 146, 66, .25)); }

/* ---------- karta objednávky (výběr skupiny) ---------- */
.uvod-nabidka { grid-area: karta; margin-top: 66px; }
.objednat {
  position: relative;
  background: var(--karta); border: 1px solid #e5d1b6; border-radius: 20px;
  padding: 60px 30px 24px; box-shadow: var(--stin-karta);
}
.objednat::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(195, 146, 66, .45); border-radius: 14px; pointer-events: none; }
.objednat:focus { outline: none; }
.objednat-erb {
  position: absolute; left: 50%; top: -62px; transform: translateX(-50%);
  width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center;
  background: var(--karta); border: 1px solid #e5d1b6; box-shadow: 0 0 0 7px var(--papir), 0 0 0 8px rgba(195, 146, 66, .55);
}
.objednat-logo { display: block; width: 92px; height: auto; margin-top: 4px; }
.lotos .objednat h2 { text-align: center; font-size: 34px; margin-bottom: 6px; }
.lotos .objednat-navod { text-align: center; margin: 0 auto 20px; max-width: 30em; color: var(--tlumeny); }
.objednat-navod strong { color: var(--cervena); font-size: 19px; }
.lotos .landing-notice { position: relative; z-index: 1; margin: 0 0 18px; padding: 12px 16px; border-left: 4px solid var(--cervena); background: #fff1ef; border-radius: 8px; color: #5c0b11; font-weight: 600; }

/* rámeček „naklikejte si to“ zabere místo pod kratším sloupcem dětí; na mobilu až pod všemi tlačítky */
.vyber-obal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "deti dospeli" "naklikejte dospeli"; gap: 20px; position: relative; z-index: 1; align-items: start; }
.vyber-sloupec--deti { grid-area: deti; }
.vyber-sloupec--dospeli { grid-area: dospeli; }
.naklikejte { grid-area: naklikejte; }
.lotos .vyber-h { font-size: 19px; margin: 0 0 10px; display: flex; flex-direction: column; }
.lotos .vyber-sloupec--deti .vyber-h { color: #7e0f18; }
.lotos .vyber-sloupec--dospeli .vyber-h { color: #16304f; }
.vyber-h span { font: 400 14px/1.4 var(--telo); color: var(--tlumeny); margin-top: 2px; }
.vyber-seznam { display: grid; gap: 9px; }

/* Děti jedna barva (červená), dospělí druhá (modrá); každé tlačítko jiný odstín své barvy (Pavlínka, úkol 0e291c4d).
   Odstín přiřazuje index.php podle pořadí ve sloupci (odstin-N; dětí 5, dospělých 7 — pak se opakují). Najetí myší tlačítko ztmaví. Bílé písmo — kontrast AA hlídá tests/public_lotos_uvod_test.php. */
.lotos .volba-skupiny--deti.odstin-1 { --barva: #7e0f18; }
.lotos .volba-skupiny--deti.odstin-2 { --barva: #a8121e; }
.lotos .volba-skupiny--deti.odstin-3 { --barva: #c2362a; }
.lotos .volba-skupiny--deti.odstin-4 { --barva: #931a32; }
.lotos .volba-skupiny--deti.odstin-5 { --barva: #b5302a; }
.lotos .volba-skupiny--dospeli.odstin-1 { --barva: #16304f; }
.lotos .volba-skupiny--dospeli.odstin-2 { --barva: #1d4470; }
.lotos .volba-skupiny--dospeli.odstin-3 { --barva: #245890; }
.lotos .volba-skupiny--dospeli.odstin-4 { --barva: #2c66a3; }
.lotos .volba-skupiny--dospeli.odstin-5 { --barva: #3a74b0; }
.lotos .volba-skupiny--dospeli.odstin-6 { --barva: #204a7a; }
.lotos .volba-skupiny--dospeli.odstin-7 { --barva: #305f8f; }
.button-with-help { position: relative; }
.lotos .volba-skupiny {
  --barva: var(--cervena);
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px 32px; align-items: center; gap: 10px;
  min-height: 66px; padding: 10px 12px; text-decoration: none; color: #fff;
  background: var(--barva); border: 1.5px solid var(--barva); border-radius: 12px;
  box-shadow: 0 8px 18px -12px rgba(42, 28, 22, .55);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.vs-ikona { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; }
.vs-ikona .ik { width: 22px; height: 22px; }
.vs-text { display: flex; flex-direction: column; min-width: 0; }
.vs-nazev { font: 700 18px/1.2 var(--nadpis); color: #fff; }
.vs-meta { font-size: 14px; line-height: 1.4; color: #fff; }
.vs-meta strong { color: #fff; white-space: nowrap; }
.vs-minimum { display: block; font-size: 13px; line-height: 1.3; }
.vs-sipka { grid-column: 4; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--barva); transition: transform .15s; }
.vs-sipka .ik { width: 18px; height: 18px; }
.lotos .volba-skupiny:hover, .lotos .volba-skupiny:focus-visible { color: #fff; filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(42, 28, 22, .6); }
.volba-skupiny:hover .vs-sipka, .volba-skupiny:focus-visible .vs-sipka { transform: translateX(3px); }
.lotos .volba-skupiny:focus-visible { outline-color: var(--barva); outline-offset: 3px; border-radius: 12px; }

/* (i) vysvětlivka skupiny — samostatné tlačítko (v odkazu být nesmí), opticky ve volném sloupci karty před šipkou */
.school-selection-help-trigger {
  position: absolute; right: 54px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: italic 700 16px/1 var(--nadpis); color: #fff;
  background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .75);
}
.school-selection-help-trigger:hover, .school-selection-help-trigger[aria-expanded="true"] { background: #fff; color: var(--vino); }
.lotos .school-selection-help-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 5px var(--text); }
.school-selection-help-popover {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1000;
  padding: 10px 14px; background: var(--karta); border: 1.5px solid var(--zlata); border-radius: 10px;
  box-shadow: 0 14px 28px -12px rgba(42, 28, 22, .45); font-size: 15px; line-height: 1.5; color: var(--text);
}
.school-selection-help-popover[hidden] { display: none; }
.lotos .school-selection-help-popover p { margin: 0; }

/* rámeček „naklikejte si to“: nejdřív konfigurátor, pak poptávka, telefon až nakonec (Berry 14. 10. 2026) */
.naklikejte { position: relative; z-index: 1; padding: 14px 16px 6px; background: #fdf5e4; border: 2px solid var(--zlata); border-radius: 12px; }
.lotos .naklikejte h3 { font-size: 20px; margin: 0 0 10px; }
.naklikejte-kroky { list-style: none; margin: 0; padding: 0; counter-reset: n; font-size: 15px; line-height: 1.5; }
.naklikejte-kroky li { position: relative; padding: 0 0 10px 36px; counter-increment: n; color: var(--tlumeny); }
.naklikejte-kroky li strong { color: var(--text); }
.naklikejte-kroky li::before {
  content: counter(n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 700 14px/1 var(--nadpis); color: #fff; background: var(--vino);
}
.naklikejte-kroky a { font-weight: 700; overflow-wrap: anywhere; }
.naklikejte-kroky a[href^="tel:"] { white-space: nowrap; }

/* „Přijedeme k vám“ — jiná nabídka (u zákazníka), proto zvlášť pod kartou objednávky */
.vyjezd {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px 18px;
  margin-top: 26px; padding: 18px 22px; background: var(--papir-2); border: 1px solid #e5d1b6; border-radius: 16px;
}
.vyjezd-ikona { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--karta); border: 1.5px solid var(--zlata); color: var(--vino); }
.vyjezd-ikona .ik { width: 28px; height: 28px; }
.lotos .vyjezd-kicker { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--zlata-text); }
.lotos .vyjezd h2 { font-size: 24px; margin: 0 0 4px; }
.lotos .vyjezd-text p:last-child { margin: 0; font-size: 15.5px; color: var(--tlumeny); }

/* ---------- řemesla ---------- */
.remesla { padding: 40px 0 72px; }
.lotos .sekce-h { font-size: clamp(32px, 3.4vw, 44px); text-align: center; }
.lotos .sekce-h--vlevo { text-align: left; }
.lotos .sekce-pod { text-align: center; color: var(--tlumeny); margin: 10px auto 40px; }
.remesla-seznam { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.remeslo { text-align: center; display: flex; flex-direction: column; }
.remeslo-obr { position: relative; width: 168px; height: 168px; margin: 0 auto 14px; }
.skvrna { position: absolute; inset: 0; width: 100%; height: 100%; }
.kresba { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; transform: translate(-50%, -50%); }
.remeslo--svicka .kresba { color: #a8121e; }
.remeslo--mydlo .kresba { color: #2f5d22; }
.remeslo--sul .kresba { color: #1f4f7d; }
.remeslo--mince .kresba { color: #7a4f0e; }
.remeslo--lotos .kresba { color: var(--vino); }
.lotos .remeslo-h { font-size: 25px; }
.lotos .remeslo-pod { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--zlata-text); margin: 4px 0 8px; font-weight: 600; }
.lotos .remeslo-popis { font-size: 15.5px; color: var(--tlumeny); flex: 1; }
.remeslo-ceny { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--cara-tmava); text-align: left; }
.lotos .remeslo-ceny a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--cara); color: var(--text); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.rc-cena { font-weight: 700; color: var(--vino); text-align: right; white-space: nowrap; }
.rc-cena small { display: block; font-weight: 400; font-size: 12.5px; color: var(--tlumeny); white-space: normal; }
.remeslo-ceny a:hover .rc-kdo, .remeslo-ceny a:focus-visible .rc-kdo { color: var(--cervena); text-decoration: underline; }

/* ---------- vínový pruh (výjezd) ---------- */
.pruh { position: relative; padding: 92px 0 96px; color: #fff; isolation: isolate; overflow: hidden; }
.pruh-stetec { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.pruh-list { position: absolute; right: 5%; bottom: 18px; width: 300px; height: auto; z-index: -1; opacity: .9; }
.pruh-obsah { position: relative; }
.lotos .pruh h2 { color: #fff; font-size: clamp(28px, 3vw, 38px); max-width: 20em; margin-bottom: 10px; }
.lotos .pruh p { font-size: 19px; color: #fbe7e3; max-width: 34em; }
.pruh-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.lotos .pruh :focus-visible { outline-color: #fff; }

/* ---------- firma ---------- */
.firma { padding: 72px 0 40px; }
.firma-mrizka { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-bottom: 56px; }
.lotos .firma-text p { font-size: 18px; max-width: 36em; }
.lotos .firma-text h2 { margin-bottom: 18px; }
.lotos .firma-heslo { color: var(--zlata-text); }
.firma-logo { display: block; width: 240px; height: auto; justify-self: center; }
.casti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.lotos .casti a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--text); text-decoration: none; }
.casti-kruh { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid #e6bdb7; color: var(--cervena); margin-bottom: 8px; transition: background-color .15s, transform .15s; }
.casti-kruh .ik { width: 40px; height: 40px; stroke-width: 1.3; }
.casti strong { font: 700 19px/1.2 var(--nadpis); color: var(--vino); }
.casti a > span:last-child { font-size: 14.5px; color: var(--tlumeny); line-height: 1.4; }
.casti a:hover .casti-kruh, .casti a:focus-visible .casti-kruh { background: var(--ruzova-svetla); transform: translateY(-2px); }

.hodnoty { border-top: 1px solid var(--cara-tmava); margin-top: 32px; }
.hodnoty-seznam { list-style: none; margin: 0 auto; padding-top: 26px; padding-bottom: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hodnoty-seznam li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--tlumeny); }
.hodnoty-seznam .ik { width: 32px; height: 32px; color: var(--cervena); stroke-width: 1.4; }

/* ---------- tablet a mobil ---------- */
@media (max-width: 1080px) {
  .uvod-mrizka { column-gap: 36px; }
  .vyber-obal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "deti" "dospeli" "naklikejte"; }
  .remesla-seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hodnoty-seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .uvod { padding-bottom: 48px; }
  .uvod-oblouky { width: 640px; max-width: none; right: -260px; top: 120px; opacity: .8; }
  .uvod-mrizka { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "karta" "perex" "kroky"; }
  .uvod-text { padding-top: 4px; }
  .lotos .uvod-text .kicker { font-size: 12px; margin-bottom: 8px; letter-spacing: .1em; }
  .lotos .uvod h1 { font-size: 34px; margin-bottom: 10px; }
  .uvod h1 span { display: inline; }
  .lotos .uvod-perex { font-size: 17px; margin: 32px 0 0; }
  .uvod-nabidka { margin-top: 46px; }
  .objednat { padding: 42px 14px 16px; border-radius: 16px; }
  .naklikejte { padding: 12px 12px 4px; }
  .lotos .naklikejte h3 { font-size: 18px; }
  .vyjezd { grid-template-columns: 44px minmax(0, 1fr); padding: 16px 14px; }
  .vyjezd-ikona { width: 44px; height: 44px; }
  .lotos .vyjezd .tl { grid-column: 1 / -1; width: 100%; }
  .objednat::before { inset: 6px; border-radius: 11px; }
  .objednat-erb { width: 76px; height: 76px; top: -38px; box-shadow: 0 0 0 5px var(--papir), 0 0 0 6px rgba(195, 146, 66, .55); }
  .objednat-logo { width: 56px; margin-top: 2px; }
  .lotos .objednat h2 { font-size: 26px; }
  .lotos .objednat-navod { font-size: 15.5px; margin-bottom: 14px; }
  .vyber-obal { gap: 16px; }
  .lotos .volba-skupiny { min-height: 62px; padding: 9px 10px; }
  .school-selection-help-trigger { right: 52px; }
  .vs-nazev { font-size: 17px; }
  .uvod-kroky { margin-top: 36px; }

  .remesla { padding: 24px 0 48px; }
  .lotos .sekce-pod { margin-bottom: 28px; }
  .remesla-seznam { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .remeslo-obr { width: 140px; height: 140px; }
  .pruh { padding: 112px 0 112px; }
  .pruh-list { width: 180px; right: -20px; opacity: .55; }
  .lotos .pruh p { font-size: 17px; }
  .firma { padding: 48px 0 24px; }
  .firma-mrizka { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 40px; }
  .firma-logo { width: 170px; }
  .casti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .casti li:first-child { grid-column: 1 / -1; }
  .hodnoty-seznam { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}