/* ==========================================================================
   1. PROMĚNNÉ A ZÁKLADNÍ NASTAVENÍ
   ========================================================================== */
:root {
  --primary: #00bd00;
  --secondary: #111827;
  --radius: 12px;
}

/* Aplikuje se na prvek, na který kotva míří (má to ID) */
[id] {
  scroll-margin-top: 80px; /* Nastavte podle výšky vašeho menu */
}

/* Oprava výpočtů šířky (aby padding nerozšiřoval prvky) */
* { box-sizing: border-box; }

section {
  padding-block: clamp(20px, 6vh, 60px);
}

section h2{margin-top:0;padding-top:0}

section.highlighted { 
  padding-block: 0; 
}

img { 
  border-radius: var(--radius); 
}

p + p { 
  margin-top: 0.75rem; 
}
.main ul,main ol {
  /* Ponecháno vaše vertikální margin, padding-left přidává odsazení celé struktury */
  margin: 40px 0;
  padding: 0 0 0 40px; 
}

.main ol li{
    list-style-type: decimal !important;
    list-style-position: outside;
}

.main ul li {
  /* 'square' nastaví čtvereček, 'outside' zajistí správné zarovnání textu při zalomení */
  list-style-type: square;
  list-style-position: outside;
}

.main li{margin-bottom:20px}

/* ==========================================================================
   2. POMOCNÉ TŘÍDY (UTILITIES)
   ========================================================================== */
.tcenter { text-align: center; }
.tright  { text-align: right; }
.tleft   { text-align: left; }
.margauto { margin: 0 auto; }

/* Odsazení (Padding) */
.pad40   { padding: 40px; }
.pad0-40 { padding: 0 40px; }
.pad40-0 { padding: 40px 0; }
.padbot  { padding-bottom: 40px; }
.pad5    { padding: 5%; }
.pad0-5    { padding: 0 5%; }
.vertspacer{height:40px;display:block;clear:both}

/* Kontejner pro text (aby nešel ke krajům) */
.sirkapad {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* HOMEPAGE */
.fotorv{position:relative}
.fotorv .pic{position:relative}
.fotorv .title{position:absolute;bottom:40px;left:40px;width:40%}
.fotorv .nejblizsi{position:absolute;bottom:40px;right:40px;width:40%;text-align:right;}
/* Základní stav */
.fotorv .nejblizsi img {
  opacity: 0.8 !important; /* !important jen pro test, zda se to chytne */
  transform: scale(1);
  transition: transform .5s ease, opacity .5s ease;
  height:80px;width:auto;
}
.fotorv .nejblizsi .views-row{margin-top:10px}

/* Stav při najetí */
.fotorv .nejblizsi img:hover {
  opacity: 1 !important;
  transform: scale(1.05); /* Zvětšení o 5 % */
}
.fotorv .title h2{font-size:4vw}
.fotorv .desktop{display:block}
.fotorv .mobile{display:none}

.newsletter form{margin:40px 0}
.newsletter .form-item{margin:20px 0}

/* pager */
/* Kontejner pageru - vycentrování */
.pager {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* Seznam položek */
.pager__items {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px; /* Mezera mezi kroužky */
}

/* Společný styl pro všechny položky (čísla i šipky) */
.pager__item {
  display: inline-flex;
}

/* Samotné odkazy a aktivní položky (kolečka) */
.pager__item a,
.pager__item.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 50%; /* Udělá dokonalý kruh */
  color: #000;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}

/* Styl pro aktivní stránku */
/* .pager__item.is-active {
 border: 3px solid #000;
} */

/* Hover efekt pro odkazy */
.pager__item a:hover {
  background-color: #f0f0f0;
}

/* Tenké šipky (předpokládá text "Následující" nebo symboly v HTML) */
.pager__item--next a, 
.pager__item--previous a,
.pager__item--first a,
.pager__item--last a {
  font-weight: 300; /* Tenčí písmo pro text šipek */
  padding: 0 15px; /* Trochu širší pro text, pokud není jen šipka */
  border-radius: 20px; /* Oválný tvar pro textové šipky */
}

/* Pokud chcete v šipkách jen symboly a ne text, 
   můžete použít pseudo-elementy, nebo nechat vykreslit jen ty span s aria-hidden */



/* ==========================================================================
   3. BREADCRUMB (DROBEČKOVÁ NAVIGACE)
   ========================================================================== */
nav[aria-labelledby="system-breadcrumb"] {
  margin: 0 0 14px 0;
}

nav[aria-labelledby="system-breadcrumb"] > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: #666;
}

nav[aria-labelledby="system-breadcrumb"] > ol > li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

nav[aria-labelledby="system-breadcrumb"] > ol > li + li::before {
  content: "›";
  color: #9a9a9a;
}

nav[aria-labelledby="system-breadcrumb"] > ol a {
  text-decoration: none;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 8px;
  transition: all .15s ease;
}

nav[aria-labelledby="system-breadcrumb"] > ol a:hover {
  background: #eef4ff;
}

/* ==========================================================================
   4. CHAT A AI AGENT (BUBLINY)
   ========================================================================== */
.ai-agent-chat-intro { margin: 20px 0; }

.ai-agent-chat-session-meta > div { margin: 20px 0; }

.ai-agent-bubble {
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
  text-align: left;
}

.ai-agent-bubble--user {
  color: #000;
  border: 1px solid #ddd;
}

.ai-agent-bubble--assistant {
  background: #eee;
  color: #000;
}

.ai-agent-terms__greeting, 
.ai-agent-terms__done { 
  margin-bottom: 20px; 
}

/* ==========================================================================
   5. TABULKY
   ========================================================================== */
table { 
  width: 100%; 
  border: 1px solid #999; 
  border-collapse: collapse; 
  margin: 20px 0; 
}

td, th { 
  border: 1px solid #999; 
  padding: 15px; 
  text-align: center; 
}

td:first-child, th:first-child { text-align: left; }
td:last-child, th:last-child   { text-align: right; }

/* ==========================================================================
   6. OSTATNÍ SPECIFICKÉ PRVKY (REFERENCE, HOST)
   ========================================================================== */
#reference p,.reference p{ display: inline; }

/* strának /reference */
.reference.grid3 header {
  /* Hlavička začne na 1. lince a skončí na 4. lince (přes 3 sloupce) */
  grid-column: 1 / 4;
}
.reference{width:100%;max-width:100%}
.reference header p{display:block;width:50%;margin:20px auto;}
.reference .reference-row{
  /* Vynucení resetu šířky, aby prvek nepřetékal */
  width: auto !important; 
  min-width: 0; /* Důležité: zabrání gridu, aby se natahoval podle obsahu */
  margin:0 !important; 
  /* Zajistí, že padding a border se počítají DO šířky, ne k ní */
  box-sizing: border-box; 
  /* Pokud prvek dědí float, zrušíme ho */
  float: none !important;
  
  /* Pokud dědí marginy, které by ho mohly vystrčit */
  margin: 0;
}

#host img { max-width: 100%; height: auto; }

#host .views-row { 
  width: 40%; 
  margin: 0 auto; 
}

/* 1. KARTA UCITELE - Příprava pro text přes obrázek */
#hlavniucitel .views-row {
  position: relative;
  height: 800px; /* Nastav si výšku podle potřeby */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Text bude dole */
  padding: 0 !important; /* Padding zrušíme, aby obrázek lícoval s okraji */
}

/* 2. OBRÁZEK LEKTORA - Musí být v pozadí */
#hlavniucitel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* Vyplní celou plochu bez deformace */
  z-index: 1;
}

/* 3. TEXT PŘES OBRÁZEK */
#hlavniucitel .views-field-title,
#hlavniucitel .views-field-field-anotace {
  position: relative;
  z-index: 2;
  color: #ffffff;
  padding-left:40px;
  width:60%;
}

#hlavniucitel .views-field-title {
  margin-top: auto; /* Tlačí text dolů */
  font-size:3em;
}
#hlavniucitel .views-field-edit-node{
  position:absolute;
  top:28px;
  right:20px;
  z-index:999;
}
#reference .views-field-edit-node{
  position:absolute;
  bottom:28px;
  right:20px;
  z-index:999;
}
#hlavniucitel .views-field-edit-node a,#reference .views-field-edit-node a{
  background:#000;
  color:#fff;
  padding:10px 12px;
  text-decoration:none;
  border-radius:12px;
  box-sizing:border-box;
}
#hlavniucitel .views-field-edit-node a:hover,#reference .views-field-edit-node a:hover{
  background:#00FF00;
}

#hlavniucitel .views-field-field-anotace, #hlavniucitel .views-field-body {
  padding-bottom: 40px;
}

/* 4. VOLITELNÉ: Ztmavení spodní části, aby text víc svítil */
#hlavniucitel .views-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
  z-index: 1;
}


#hlavniucitel {text-align:left}






/* Speciální úprava pro pozadí v kurzech */
.colorback {
  margin: 40px -40px;
  width: calc(100% + 80px);
  padding: 40px;
}


/* kurzy */
/* 1. Cílíme na DIV, který drží řádky (ten s tím dlouhým ID) */
/* Vybíráme první div uvnitř .views-element-container v sekci #varianty */
#varianty .views-element-container > div {
  display: grid;
  /* Toto zajistí automatický počet sloupců podle šířky */
  /* Karty budou mít min. 280px, pokud je místo, roztáhnou se */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px; /* Mezera mezi kartami */
  width: 100%;
}

/* 2. Stylování samotné karty (řádku) */
#varianty .views-row {
  /* Nastavíme flexbox, aby se karta roztáhla na výšku rodiče */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Roztáhne obsah, tlačítko půjde dolů */
  /* Vizuální styl karty (volitelné) */
  border: 2px solid #000;
  border-radius: 12px;
  padding:40px;
  height: 100%; /* Zajistí, že všechny karty v řadě budou stejně vysoké */
}

/* 3. Volitelné: Zarovnání tlačítka na spodek */
/* Pokud máš tlačítko v poli add-to-cart-link, toto ho přilepí dolů */
#varianty .views-row .views-field-add-to-cart-link{ /* Záleží jak se pole jmenuje */
  margin-top: auto;
  padding-top: 15px;
}
#varianty .views-field-nothing{margin-top:-12px;margin-bottom:-8px;padding:0}

#varianty h3{padding:0;margin:0;}

#externikurs{text-align:center}
#externikurs p{margin-bottom:40px}
/* ai kredity produkt */
/* Vybere formulář, jehož ID začíná tímto řetězcem */
form[id^="commerce-order-item-add-to-cart-form-commerce-product-"] {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 20px !important;
  width: max-content !important;
}

/* První potomek (varianty) přes oba sloupce */
form[id^="commerce-order-item-add-to-cart-form-commerce-product-"] > div:first-of-type {
  grid-column: span 2 !important;
  width: 100% !important;
}

/* Skrytí všech systémových inputů, aby nerozbíjely mřížku */
.aicredits form[id^="commerce-order-item-add-to-cart-form-commerce-product-"] input[type="hidden"] {
  display: none !important;
}

/* Zarovnání položek v buňkách na střed */
.aicredits #edit-quantity-wrapper, 
.aicredits #edit-actions {
  grid-column: span 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}


/* objednavky admin */
.objednavky .red td.views-field-balance__number{background:red;color:#FFF}
/* .objednavky .green td.views-fie  ld-balance__number{background:#00FF00;color:#000} */


/* ==========================================================================
   7. RESPONZIVITA (MOBILNÍ ZAŘÍZENÍ)
   ========================================================================== */
@media (max-width: 767px) {
  .fotorv{margin:-40px; z-index:1;margin-top:0;padding:0;}
  .fotorv img{border-radius:0;line-height:0;display: block;}
  .fotorv .desktop{display:none}
  .fotorv .mobile{display:block}
  .fotorv .title h2{font-size:1.5em}
  .nejblizsi{display:none}
  section {
    padding-block: clamp(20px, 6vh, 40px);
  }

  .sirkapad {
    max-width: 100%;
    padding: 0; /* Vráceno odsazení, aby text nebyl na kraji */
  }

  #host .views-row { 
    width: 100%; 
  }
}