/* Vzhled soutěže Davidoff Café × Kaufland (SK, 10/2026) — VŠECHNO, co
 * šablona neumí přes tokeny tématu, je tady, ne v jádru šablony.
 *
 * Načítá se přes urls.brand_css ve fixture/seederu. Píše se proti
 * struktuře šablony (třídy komponent), proto ID selektory: přebijí
 * scoped styly komponent bez ohledu na pořadí stylů v hlavičce stránky.
 *
 * Křehkost je vědomá: když se šablona změní, tenhle přepis se může tiše
 * rozbít. U téhle soutěže to nevadí — produkce je zamrzlá větev. Kdyby
 * stejný vzhled chtěla další Davidoff kampaň, patří to jako rozšíření
 * do šablony, ne kopírovat tenhle soubor.
 *
 * Předloha: brandový moodboard (logo v ose, obraz nahoře, sdělení
 * s pomlčkou pod ním) a klíčový vizuál DAV_KAUF_Soutez_KV_Fin.pdf.
 */

@import url('/brands/tchibo-sk-davidoff/brand.css');

/* ---------------------------------------------------------- hlavička
 * Logo uprostřed, menu rozdělené: Súťažiť · Ako sa zapojiť vlevo,
 * Výhry · Výhercovia · Pravidlá vpravo. Logo je vyňaté z toku a
 * vycentrované absolutně, menu zabírá celou šířku a třetí položka se
 * odrazí doprava. Velikost loga zůstává výchozí (50 px). */
#header .header-content {
  position: relative;
}

#header .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#header .nav-menu {
  flex: 1 1 auto;
}

#header .nav-menu a:nth-child(3) {
  margin-left: auto;
}

/* Mobil: menu je schované, hamburger má sedět vpravo — bez toku loga by
 * zůstal vlevo. */
#header .hamburger {
  margin-left: auto;
}

/* --------------------------------------------------------------- hero
 * Fotka páru jako blok nahoře, 1200 px široká — jediný prvek, který
 * přesahuje hranici obsahu (1110 px) o 45 px na každou stranu; pomlčka
 * a nadpis zůstávají na hraně obsahu. Oříznuto dole těsně pod hodinkami
 * (poměr výška/šířka 0,5068), jinak bez ořezu.
 * Šablona fotku umí jen jako pozadí přes celou sekci, tak se pozadí
 * posadí nahoru a obsah odsune o výšku fotky (šířka × 2/3) + mezeru. */
#contest.hero-section {
  --davidoff-photo-w: min(100% - 30px, 1200px);
  --davidoff-photo-gap: 40px;
  background-size: var(--davidoff-photo-w) auto;
  background-position: center 24px;
  padding-top: calc(var(--davidoff-photo-w) * 0.5068 + 24px + var(--davidoff-photo-gap));
}

/* Nadpis začíná hned pod pomlčkou, ne ve svislém středu vedle formuláře. */
#contest .hero-grid {
  align-items: start;
}

/* Brandová pomlčka na spodní levé hraně fotky — půl na obrázku, půl pod
 * ním (moodboard). Šířka jako na KV: 2,5 × D-height loga při logu na 40 %
 * formátu = 11,5 % šířky obsahu (u nadpisů sekcí je pomlčka vázaná na
 * malé logo v hlavičce, tady na kompozici vizuálu). */
#contest .hero-left::before {
  content: '';
  display: block;
  width: min(128px, 11.5vw);
  aspect-ratio: 96.7 / 12.6;
  background: url('/brands/tchibo-sk-davidoff/hyphen.svg') no-repeat center / contain;
  margin-top: calc(-1 * var(--davidoff-photo-gap) - 8px);
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {
  #contest.hero-section {
    --davidoff-photo-gap: 28px;
    background-position: center 16px;
    padding-top: calc(var(--davidoff-photo-w) * 0.5068 + 16px + var(--davidoff-photo-gap));
  }

  #contest .hero-left::before {
    width: 22vw;
    margin-top: calc(-1 * var(--davidoff-photo-gap) - 6px);
    margin-bottom: 18px;
  }
}

/* Termín bez animované šipky — jen oranžový text (barva z tokenu
 * hero_date_color). Šipka je součást varianty hero_date_style: plain,
 * kterou jinak chceme kvůli holému textu bez pilulky. */
#contest .hero-date-arrow {
  display: none;
}

/* ---------------------------------------------------- čitelnost textů
 * Celkově větší písmo. Co má token, je ve fixture (text_body_size,
 * rules_text_size, menu_size, …); tady jen to, co šablona má natvrdo:
 * formulář, karty výher, patička. */
#contest .form-label {
  font-size: 16px;
}

#contest .form-input {
  font-size: 18px;
}

#contest .checkbox-text,
#contest .form-hint {
  font-size: 16px;
}

#prizes .coupon-name,
#prizes .coupon-value {
  font-size: 19px;
}

#prizes .coupon-cta {
  font-size: 18px;
}

.site-footer,
.site-footer .footer-company,
.site-footer .partner-link {
  font-size: 17px;
}

.site-footer .footer-tech,
.site-footer .partner-label {
  font-size: 16px;
}

/* ------------------------------------------------------- ostré hrany
 * Formulář (panel, pole, tlačítko) má nulový rádius z tokenů; tady
 * ostatní tlačítka a prvky, které šablona zaobluje natvrdo. Prefix html
 * zvedá specificitu nad třídy v main.css — jinak rozhoduje pořadí stylů. */
html .button-magenta,
html .button-magenta-outline,
html .button-gold,
html .button-gold-outline,
html .button-crema,
html .button-white,
html .submit-btn,
html .step-modal-btn,
#rules .rules-pdf-link,
#prizes .coupon-cta,
#contest .form-input,
#contest .checkbox-input,
#contest .phone-prefix,
#contest .form-competition,
#contest .upload-area,
#contest .upload-preview,
.app-alert,
.app-alert__btn,
.winner-item,
.pw-modal {
  border-radius: 0;
}

/* Tlačítko odeslání v panelu má vlastní rádius z tokenu — token je 0,
   tohle jen pojistka pro případ, že by ho šablona přebila. */
#contest .hero-form-wrapper .submit-btn {
  border-radius: 0;
}

/* ------------------------------------------------ rovné přechody sekcí
 * Šablona kreslí mezi sekcemi vlnitý pás (pseudo-prvky .wave-top/.wave-bottom
 * na krocích a pravidlech). Davidoff je rovný — pásy se nevykreslí. */
#steps.wave-top::before,
#steps.wave-bottom::after,
#rules.wave-top::before {
  display: none;
}

/* ---------------------------------------------------- výhry jako na KV
 * Šablona kreslí tři kupónové karty vedle sebe. KV má tři různě velké
 * kruhy přes sebe (Siena velký, kufry střední vlevo dole, káva menší
 * vpravo níž) a vedle nich seznam „3× poznávací zájazd v hodnote 3 000 €".
 *
 * Karta se rozpustí (display: contents) a její části se rozmístí do
 * mřížky: obrázky do levého sloupce, počet a text do řádků vpravo.
 * Velikosti i polohy jsou změřené na KV (fit kružnic na lemy) jako násobky
 * průměru Sieny (--d, v jednotkách šířky sekce): kufry 0,58, káva 0,49;
 * kufry překrývají Sienu o 0,28 jejího poloměru, káva se Sieny nedotýká
 * a kufry překrývá jen lehce (0,07 R). Kruh v obrázku zabírá 80 % šířky. */
#prizes .prize-coupons {
  --d: 42;                    /* průměr obrázku Sieny v % šířky sekce */
  --x: 0;                     /* posun shluku zleva (mobil ho centruje) */
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--d) * 1.00cqw) 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 4cqw;
  row-gap: 22px;
  align-items: baseline;
  /* Seznam začíná 56 px pod nadpisem (stejná mezera jako mezi nadpisem
     kroků a „1 Nakúpte"); nadpis je absolutně vpravo, ~90 px vysoký, a mřížka
     je o 10 % d vytažená nahoru — odtud 192 px. Kruhy vlevo od horní hrany. */
  align-content: start;
  padding-top: 192px;
  /* Obrázek má kolem kruhu 10 % průhledného okraje — o něj se shluk
     přitáhne k nadpisu, jinak by mezera vypadala větší, než je. */
  margin-top: calc(var(--d) * -0.1cqw);
  min-height: calc(var(--d) * 1.39cqw);
}

#prizes .prize-coupon {
  display: contents;
}

#prizes .coupon-perforation,
#prizes .coupon-cta {
  display: none;
}

/* Siena drží místo pro celý shluk (výška 1,2 × d), ostatní dva kruhy se
   kladou absolutně vůči sekci. Pořadí vrstev jako na KV: kufry navrchu. */
#prizes .coupon-image {
  margin: 0;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
}

#prizes .coupon-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
}

#prizes .prize-coupon:nth-child(1) .coupon-image {
  position: absolute;
  width: calc(var(--d) * 1cqw);
  left: calc(var(--x) * 1cqw);
  top: 0;
  z-index: 1;
}

#prizes .prize-coupon:nth-child(2) .coupon-image {
  position: absolute;
  width: calc(var(--d) * 0.58cqw);
  left: calc((var(--x) + var(--d) * 0.000) * 1cqw);
  top: calc(var(--d) * 0.678cqw);
  z-index: 3;
}

#prizes .prize-coupon:nth-child(3) .coupon-image {
  position: absolute;
  width: calc(var(--d) * 0.49cqw);
  left: calc((var(--x) + var(--d) * 0.395) * 1cqw);
  top: calc(var(--d) * 0.899cqw);
  z-index: 2;
}

/* Kolečko s počtem ze šablony se nevykreslí; počet je předpona názvu,
   aby celý řádek „3× poznávací zájazd v hodnote 3 000 €" šel zarovnat
   doprava jako na KV. Počty jsou pevné pro tři výhry z KV — při změně
   výher upravit i tady. */
#prizes .coupon-badge {
  display: none;
}

#prizes .coupon-name::before {
  color: #ff6a13;
  font-weight: 900;
  margin-right: 0.3em;
}

#prizes .prize-coupon:nth-child(1) .coupon-name::before { content: '3×'; }
#prizes .prize-coupon:nth-child(2) .coupon-name::before { content: '10×'; }
#prizes .prize-coupon:nth-child(3) .coupon-name::before { content: '30×'; }

#prizes .prize-coupon:nth-child(1) .coupon-body { grid-row: 1; }
#prizes .prize-coupon:nth-child(2) .coupon-body { grid-row: 2; }
#prizes .prize-coupon:nth-child(3) .coupon-body { grid-row: 3; }

/* Název tučně, hodnota běžně, na jednom řádku. */
#prizes .coupon-body {
  grid-column: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35em;
  justify-content: flex-end;
  text-align: right;
  min-height: 0;
  color: #ffffff;
}

#prizes .coupon-name,
#prizes .coupon-value {
  font-size: 24px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

#prizes .coupon-name {
  font-weight: 900;
}

#prizes .coupon-value {
  font-weight: 400;
}

/* Mobil: shluk kruhů nahoře přes celou šířku, seznam pod ním. */
@media (max-width: 767px) {
  #prizes .prize-coupons {
    --d: 68;
    --x: 16;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 14px;
    min-height: 0;
    padding-top: calc(var(--d) * 1.39cqw + 24px);
    align-content: start;
  }

  #prizes .coupon-body {
    grid-column: 1 / 3;
    justify-content: flex-start;
    text-align: left;
  }

  #prizes .coupon-name,
  #prizes .coupon-value {
    font-size: 20px;
  }
}

/* Bez věty nad tlačítkem „Chcem súťažiť" — prázdný text ve fixture by
 * šablona nahradila výchozí větou, proto se skrývá tady. */
#prizes .prizes-cta-text {
  display: none;
}

/* Tlačítko „Chcem súťažiť" vpravo pod seznamem výher, ne uprostřed pod
 * shlukem. Není v mřížce, tak se odsune o šířku shluku a vytáhne nahoru
 * pod seznam (ten je svisle uprostřed výšky shluku). */
#prizes .container {
  --d: 42;
  container-type: inline-size;
}

#prizes .prizes-cta {
  display: flex;
  justify-content: flex-end;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: calc(var(--d) * 1cqw + 4cqw);
  /* Seznam končí ~330 px pod horní hranou mřížky (výška 1,39 d); tlačítko
     sedí 74 px pod ním — stejná mezera jako mezi texty kroků a jejich
     tlačítkem. */
  margin-top: calc(403px - var(--d) * 1.39cqw);
  /* Co záporný okraj ubral toku, vrátí spodní okraj — kruhy jsou kladené
     absolutně a jinak by přečnívaly do spodního odsazení sekce. */
  margin-bottom: calc(var(--d) * 1.39cqw - 403px);
  position: relative;
  z-index: 4;
}

@media (max-width: 767px) {
  #prizes .prizes-cta {
    justify-content: flex-start;
    padding-left: 0;
    margin-top: 28px;
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  #prizes .prizes-cta a {
    white-space: nowrap;
  }
}

/* Kruhy blíž k nadpisu (podnadpis je vypnutý prázdným prizes_subtitle),
 * pod nimi vzduch — spodní odsazení sekce jde z tokenu
 * prizes_padding_bottom (168 px). */
#prizes .prizes-heading {
  margin-bottom: 24px;
}

/* ------------------------------------------------ kroky: čísla v kolečkách
 * Šablona kreslí čísla 1–3 ve velkých nepravidelných „blobech" (124 px,
 * organický rádius). Davidoff je geometrický: menší pravidelné kruhy. */
/* Kolečko drobné, těsně kolem číslice, a v řádku před nadpisem kroku —
 * jako pokračování textu. Krok je mřížka: kolečko | nadpis, pod tím text
 * přes celou šířku sloupce. */
#steps .step-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
}

#steps .step-item .step-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  /* K prvnímu řádku nadpisu i když se zalomí: (řádek 34 px − 30 px) / 2 */
  margin: 2px 0 0;
  grid-column: 1;
  grid-row: 1;
}

#steps .step-item .step-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

#steps .step-item .step-desc {
  grid-column: 1 / 3;
  grid-row: 2;
  margin-top: 12px;
}

/* ------------------------------------------ nadpisy sekcí s pomlčkou
 * Nadpisy Ako sa zapojiť / Výhry / Výhercovia / Pravidlá zleva, nad
 * každým brandová pomlčka. Šířka podle manuálu: 2,5 × výška „D" z loga
 * ve stejné oblasti — na stránce je to logo v hlavičce (50 px vysoké,
 * D = 47 % výšky ≈ 24 px), tedy pomlčka 60 px. Poměr stran pomlčky
 * je 96,7 : 12,6. */
#steps .section-heading,
#prizes .section-heading,
#winners .section-heading,
#rules .section-heading {
  text-align: left;
}

#steps .section-heading::before,
#prizes .section-heading::before,
#winners .section-heading::before,
#rules .section-heading::before {
  content: '';
  display: block;
  width: 60px;
  aspect-ratio: 96.7 / 12.6;
  background: url('/brands/tchibo-sk-davidoff/hyphen.svg') no-repeat center / contain;
  margin-bottom: 14px;
}

/* Panel výherců (i řádky v něm) s ostrými hranami. */
#winners .winners-panel,
#winners .winner-item {
  border-radius: 0;
}

/* Pravidla: dva sloupce přes celou šířku obsahu — od levé hranice stránky
 * po pravou (šablona blok omezuje na 860 px a centruje). */
#rules .rules-columns {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  column-gap: 64px;
}

/* Sekce výher má v šabloně širší kontejner (1200 px) než zbytek stránky
 * (1140 px) — doprava zarovnaný seznam a tlačítko pak přečnívaly za
 * hranici ostatních sekcí. Jediný širší prvek má být fotka v hero. */
#prizes .container {
  max-width: 1140px;
}

/* Kroky 1–3: tři sloupce zůstávají, ale obsah každého (kolečko s číslem,
 * nadpis, text) je zarovnaný k levému okraji sloupce místo na střed;
 * řada sloupců sedí u levé hrany obsahu pod nadpisem sekce. */
#steps .steps-row {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}

#steps .step-item {
  text-align: left;
}

/* Tři sloupce kroků přes celou šířku obsahu (1110 px): bez stropu 360 px
 * na sloupec a bez centrování řady, mezery tak, aby pravý sloupec končil
 * na pravé hranici obsahu. */
#steps .steps-row {
  gap: 56px;
  max-width: none;
  width: 100%;
}

#steps .step-item {
  max-width: none;
  flex: 1 1 0;
}


/* Nadpis VÝHRY s pomlčkou v pravé polovině sekce, zarovnaný k jejímu
 * levému okraji, a vyňatý z toku: shluk kruhů vlevo tak začíná na stejné
 * výšce jako nadpis a seznam výher sedí hned pod nadpisem. */
@media (min-width: 768px) {
  #prizes .container {
    position: relative;
  }

  #prizes .prizes-heading {
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0;
  }
}

/* ------------------------------------------- doskok tlačítek na formulář
 * „Chcem súťažiť" i menu „Súťažiť" míří na #contest, což je celá hero
 * sekce — u nás začíná fotkou, takže se doscrollovalo na obrázek.
 * Záporný scroll-margin posune doskok pod fotku a zpět nahoru jen
 * o lištu menu, ať formulář není pod ní.
 *
 * Výška fotky se počítá znovu ve viewport jednotkách: scroll-margin
 * procenta nepřijímá, takže `--davidoff-photo-w` (obsahuje 100%) by
 * celý calc zneplatnil a spadl by na nulu. */
#contest.hero-section {
  --davidoff-photo-h: calc(min(100vw - 30px, 1200px) * 0.5068);
  scroll-margin-top: calc(94px - (var(--davidoff-photo-h) + 24px + var(--davidoff-photo-gap)));
}

@media (max-width: 767px) {
  #contest.hero-section {
    scroll-margin-top: calc(88px - (var(--davidoff-photo-h) + 16px + var(--davidoff-photo-gap)));
  }
}