/* 1. GLOBÁLNÍ GEOMETRIE */
:root {
  --slider-gap: 40px;
  --slider-card-width: calc((100vw - 100px) / 2.5);
  --slider-card-mobile: 66vw;
  --slider-padding: 40px;
}

/* POJISTKA PROTI UJÍŽDĚNÍ WEBU */
html {
  overflow-x: hidden;
}

/* 2. SPOLEČNÉ PRO OKNA & SNAP */
.slide, #reference, #lectors, #faq {
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  display: block !important;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 40px;
  scroll-behavior: smooth; /* Zajišťuje plynulý pohyb */
}
.slide::-webkit-scrollbar { display: none; }

/* 3. KARTY - SJEDNOCENÝ VZHLED (Šířka, Snap, Radius) */
.program-card, 
.reference-row, 
.lektor-item .views-row, 
#faq .slide > div > div {
  width: var(--slider-card-width) !important;
  flex-shrink: 0 !important;
  margin-right: var(--slider-gap) !important;
  padding: var(--slider-padding) !important;
  box-sizing: border-box !important;
  border-radius: 12px;
  scroll-snap-align: start;
  position: relative;
}

/* Rámečky */
.reference-row, #faq .slide > div > div { border: 1px solid #ffffff !important; }
.program-card, .lektor-item .views-row { border: 0 !important; }

/* 4. LEKTOŘI - DESIGN KARTY */
#lectors .views-row {
  height: 600px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 !important;
}

#lectors img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 1;
}

#lectors .views-field-title,
#lectors .views-field-field-anotace, 
#lectors .views-field-body, 
#lectors .views-field-field-seo-popis {
  position: relative;
  z-index: 2;
  color: #ffffff;
  padding-left: var(--slider-padding) !important;
  padding-right: var(--slider-padding) !important;
}

#lectors .views-field-title { margin-top: auto; }
#lectors .views-field-field-anotace, 
#lectors .views-field-body, 
#lectors .views-field-field-seo-popis { padding-bottom: 40px; }

#lectors .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;
}

/* 5. ADMIN EDIT TLAČÍTKA */
.views-field-edit-node { position: absolute; z-index:2; right: 20px; }
#lectors .views-field-edit-node { top: 28px; }
#reference .views-field-edit-node { bottom: 28px; }

.views-field-edit-node a {
  background: #000;
  color: #fff !important;
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 12px;
}
.views-field-edit-node a:hover { background: #00FF00; }

/* 6. DEFINICE TRACKŮ (OPRAVA SCROLLU) */
/* Každý track definujeme samostatně podle tvého funkčního originálu */

#reference [class*="js-view-dom-id-"] { 
  display: flex !important; 
  width: max-content !important; 
  padding: 40px; 
}

/* Lektors musí být flex, aby položky byly v řadě, ale nesmí mít width: 100vw (to má obal v bodě 2) */
#lectors { 
  display: flex !important; 
  width: max-content; 
  padding: 20px 40px; 
}

#faq .slide > div { 
  display: flex !important; 
  width: max-content !important; 
  padding: 20px 40px; 
}

/* Obaly Drupalu */
#reference .views-element-container, 
#lectors .lektor-item, 
#lectors .views-element-container, 
#lectors [class*="js-view-dom-id-"] {
  display: contents !important;
}

.slide h2, .slide h3 { margin: 0 0 20px 0; }
#lectors a { color: #FFF; }

/* slider navigace */
/* Kontejner pro nadpis a šipky */
/* Obal, který drží šipky na místě */
.slider-relative-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Společný styl pro velké šipky */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Vertikální vycentrování */
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.6); /* Černé poloprůhledné pozadí */
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 100000; /* Musí být nad kartami */
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pozice vlevo a vpravo */
.nav-btn.prev {
  left: 20px;
}

.nav-btn.next {
  right: 20px;
}

/* Hover efekt - neonově zelená */
.nav-btn:hover {
  background: #00FF00;
  color: #000;
  border-color: #00FF00;
  /* box-shadow: 0 0 15px rgba(0, 255, 0, 0.7); */
  transform: translateY(-50%) scale(1.1); /* Mírné zvětšení při najetí */
}

/* Výchozí stav - šipky jsou neviditelné */
.nav-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

/* Třída, kterou budeme přidávat pomocí JS */
.nav-btn.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Skrytí šipek na mobilu, pokud by překážely (nepovinné) */
@media (max-width: 768px) {
  .nav-btn {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}


/* 7. RESPONZIVITA */
@media (max-width: 768px) {
  .program-card, .reference-row, #lectors .views-row, #faq .slide > div > div {
    width: var(--slider-card-mobile) !important;
  }
  #lectors .views-row { height: 600px !important; }
}