:root { --bg-color: #ffffff;
        --top-panel-height: 64px;
}


body {
  font-family: 'Winky Sans', sans-serif;
  background-color: var(--bg-color);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }

/* HERO */
.hero {
  height: 100vh;
  width: 100%;
  /*background: url('images/background.jpg') center center no-repeat; 
  background-size: cover;    */
  background-color: #ffffff; 
  display: flex;
  flex-direction: column; /* vertical layout */
 /* justify-content: center; */ /* centers headline */
  align-items: center;
 /* padding-top: 3rem; *//* push headline down a little */
 /* padding-bottom: 3rem; *//* space between carousel and hero buttons */
}

/* Headline text */
.hero h1 {
  color: #000000; /* black headline */
  text-align: center;
  padding-top: 5vh;
  padding-bottom: 5vh;

  /* Responsive font size: min 2rem, preferred 5vw, max 5rem */
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1.2;
}

/* ================================ */
/* HERO CAROUSEL */
/* ================================ */

.hero-carousel {
  position: relative;
  width: 90%;
  height: 60vh; /* main image height */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  margin-top: 0;
  margin-bottom: 3rem;
}

.hero-carousel img {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  object-fit: cover;
}

/* Base image */
.hero-carousel img.carousel-img {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
  cursor: default;
  z-index: 1;
}

/* Main image */
.hero-carousel img.main-img {
  height: 60vh;
  left: 50%;
  z-index: 5;
}

/* First layer */
.hero-carousel img.first-layer {
  height: 50vh;
  z-index: 4;
}

.hero-carousel img.left {
  left: 30%;
  cursor: pointer;
}

.hero-carousel img.right {
  left: 70%;
  cursor: pointer;
}

/* Hover effect */
.hero-carousel img.first-layer:hover {
  transform: translate(-50%, -50%) scale(1.05);
}


/* Mobile arrows */
.mobile-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  user-select: none;
}

.mobile-arrow: {
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  transform: translateY(-50%) scale(1.2);
}

.left-arrow {
  left: 5%;
}

.right-arrow {
  right: 5%;
}

/* Only show arrows on mobile */
@media (min-width: 769px) {
  .mobile-arrow {
    display: none;
  }
}


.hero-buttons {
  position: absolute;
  bottom: 3vh;
  display: flex;
  flex-wrap: wrap; /* allow buttons to move to next row */
  gap: 10px;
 /* padding: 10px; */
  background: rgba(0,0,0,0);
 /* border-radius: 10px; */
  z-index: 10;       /* above the hero image */
  justify-content: center;
   transition: opacity 0.4s ease, transform 0.4s ease; /* to hide hero buttons seamlessly*/

  /* Responsive padding */
  padding: clamp(5px, 1vw, 12px) clamp(10px, 2vw, 20px);
}

.hero-buttons.hidden-hero {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}


/* ================================ */
/* GALLERY APP LAYOUT */
/* ================================ */

#gallery-app {
  width: 100%;
  background: #ffffff;
  color: #000;
}

/* ---------- TOP PANEL ---------- */
.top-panel {
  width: 100%;
  align-items: center;  /* vertical alignment */
  position: sticky;
  top:0;
  padding: 8px 24px;
  background: #ffffff;
  border-bottom: 1px solid #000;
  z-index: 3000;
  gap:10px; /*spacing between buttons */
  display: flex;
}

/* ---------- MAIN LAYOUT ---------- */
.gallery-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* ---------- SIDE MENU ---------- */
.side-menu {
  width: 220px;
  position: sticky;
  top: 40px; /* adjust if your top panel is taller */
  height: calc(100vh - 40px);
  overflow-y: auto;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid #000;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12x;
}

/* menu structure */
.menu {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-main {
  background: white;
  border: none;
  border-bottom: 1px solid black;
  padding: 10px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.menu-sub {
  display: none;
  flex-direction: column;
  margin-left: 10px;
  gap: 6px;
}

.menu-sub button {
  background: white;
  border: none;
  padding: 6px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
}

.menu-sub button: {
  background: #f0f0f0;
}

/* visible state */
.menu-group.open .menu-sub {
  display: flex;
}



/* Hamburger button */
.hamburger {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  display: none; /* default hidden on large screens */
  margin-right: 10px;
}

/*back to hero button */
#back-to-hero {
  z-index: 3000;
  display: none;
  padding: 8px 12px;
  height: 40px;
  background: white;
  cursor: pointer;
  position: fixed;
  top: 20px;      /* adjust where you want it */
  right: 20px;
}

.znam-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;      /* light border by default */
  background: white;
  color: black;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover state */
.znam-btn:hover {
  border: 1px solid #000;      /* black border on hover */
}

/* Active state */
.znam-btn.active {
  background: #e0e0e0;         /* slightly grey background */
  border: 1px solid #000;      /* keep black border */
}




/* show on small/mobile */
@media (max-width: 768px) {
  .hamburger {
    display: inline-block;
  }
}

/* overlay menu */
.menu-overlay {
  position: fixed;
  top: 0;
  left: -75%; /* hidden by default */
  width: 75%;
  height: 100%;
  background: white;
  z-index: 2000; /* above everything */
  padding: 1rem;
  overflow-y: auto;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* dimmed gallery background */
.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 1500; /* below menu overlay */
  display: none; /* hidden by default */
}

/* when menu is active */
.menu-overlay.open {
  left: 0;
}

.menu-backdrop.active {
  display: block;
}

/*small screens and mobile*/

@media (max-width: 768px) {
  /* make menu overlay occupy full height, 75% width */
  .side-menu {
  position: fixed;
  top: var(--top-panel-height);
  left: 0;

  width: 75vw;
  height: calc(100vh - var(--top-panel-height));

  background: white;
  z-index: 3000;

  transform: translateX(-100%);
  transition: transform 0.3s ease;

  overflow-y: auto;
}

.side-menu.open {
  transform: translateX(0);
}

  /* optional: hide main menu scrolling scrollbar on desktop */
  .side-menu::-webkit-scrollbar {
    width: 6px;
  }

  .side-menu::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }
}

/*video count configuration button*/
#grid-btn {
  min-width: 40px;
  padding: 0 10px;
  background: white;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.grid-menu {
  position: absolute;
  top: calc(100% + 6px);   /* directly below button */
  left: 50%;
  transform: translateX(-50%);

  background: white;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;

  z-index: 4000;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.grid-menu.hidden {
  display: none;
}


/* grid cell */
.grid-cell {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
  border: 1px solid black;
  box-sizing: border-box;
}

/* filled (active) */
.grid-cell.filled {
  background: #000;
  opacity:1;
}

/*  preview */
.grid-cell.preview {
  background: black;
}

/*  reduce preview (turn off extra grids) */
.grid-cell.unpreview {
  background: white;
}


.grid-wrapper {
  position: relative;   /* anchor for dropdown */
  display: inline-flex;
  align-items: center;
}


.top-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid black;
  background: white;
  cursor: pointer;
  font-size: 0.9rem;
}

.top-btn.active {
  background: #eee;
}

.hidden {
  display: none;
}





/* ---------- GALLERY CONTENT ---------- */
.gallery-content {
  flex: 1;
  /*padding: 24px;*/
  overflow: visible;
  background: #ffffff;
}

.filter-btn {
  flex: 0 1 auto;  /* allow buttons to move to next row */
  padding: clamp(6px, 1vw, 12px) clamp(10px, 2vw, 20px);
  margin: 5px;
  border: none;
  border-radius: 8px;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s;

  /* Responsive font size */
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
}

.filter-btn.active {
  background: #333;
  color: white;
}


/* VIDEO GALLERY */
.video-block {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 2rem;
}

.video-card video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 1600px) { .video-block { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1300px) { .video-block { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .video-block { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .video-block { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .video-block { grid-template-columns: 1fr; } }


/* Knowledge color borders */
.know-green {
  border: 4px solid #2ecc71;   /* green */
  border-radius: 10px;
}

.know-yellow {
  border: 4px solid #f1c40f;   /* yellow */
  border-radius: 10px;
}

.know-red {
  border: 4px solid #e74c3c;   /* red */
  border-radius: 10px;
}

/* SPEED ICON */
.speed-icon {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.8rem;
  border-radius: 4px;
  z-index: 5;
  cursor: default;
  display: none;
  pointer-events: auto; /* IMPORTANT – allow wheel events */
}

.speed-icon:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* FULLSCREEN ICON */
.fullscreen-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 1.5rem;
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  display: none;
  z-index: 10;
}

.fullscreen-icon:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* HIDE TOGGLE BUTTON */
.hide-toggle {
  position: absolute;
  top: 36px;                 /* slightly below speed icon (speed is at 6px) */
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 6;                /* above video, same layer as icons */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border: 2px solid black;
  background-color: white;   /* 🔥 always white */
  display: none; /*hidden by default*/
}

.hide-toggle.hidden {
  background-color: black;
}


/* Color states 
.hide-toggle.green { background: #2ecc71; }
.hide-toggle.yellow { background: #f1c40f; }
.hide-toggle.red { background: #e74c3c; }
*/
/* Hover feedback */
.hide-toggle:hover {
  transform: scale(1.1);
}

.video-placeholder {
  position: absolute;
  inset: 0;                         /* cover entire card */
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  z-index: 4;                       /* below icons, above video */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional text hint */
.video-placeholder::after {
  content: "Klikni pro zobrazení videa";
  color: #555;
  font-size: 0.9rem;
}

.video-card[data-hidden="true"] .speed-icon,
.video-card[data-hidden="true"] .fullscreen-icon {
  pointer-events: none;
}

/* end of toggle button*/

/* FULLSCREEN OVERLAY */
.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4000;
}

.video-overlay video {
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
}

.video-overlay button {
  background-color: #ffffff;        /* white background */
  color: #000000;                   /* black text */
  border: none;                     /* remove default border */
  border-radius: 8px;               /* soft corners */
  padding: 0.5rem 1rem;             /* comfortable size */
  cursor: pointer;                  /* pointer cursor on hover */
  font-weight: 500;                 /* slightly bolder text */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* subtle shadow for depth */
  transition: all 0.2s ease-in-out; /* smooth hover animation */
}

.video-overlay button:hover {
  background-color: #f0f0f0;        /* light gray hover */
  transform: translateY(-2px);      /* small lift on hover */
}

.video-overlay button:active {
  transform: translateY(0);         /* reset on click */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


/*youtube*/
.video-thumb {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}

/* Make YT iframe behave like local HD video */
.yt-hd-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* Ensure overlay container matches local video layout */
.video-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16/9;
  margin: auto;
}

/* ================================ */
/* FACEBOOK OVERLAY FIX */
/* ================================ */


/* to make sure outside video is clickable*/
.video-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.fb-video-wrapper {
  position:relative;
  z-index:2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fb-iframe {
  width: 30%;
  min-width: 480px;
  max-width: 480px;
  aspect-ratio: 9 / 16;
  border: none;
}

/* Mobile override */
@media (max-width: 768px) {
  .fb-iframe {
    width: 30%;
    max-width: 400px;
  }
}


/* Mobile layout for overlay */
@media (max-width: 768px) {
  /* Stack videos vertically in dual view */
  .video-overlay.dual-view > div {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Dual view videos (smaller stacked) */
  .video-overlay.dual-view video {
    max-width: 90vw;
    max-height: 35vh;
  }

  /* Single HD view (larger, near fullscreen) */
  .video-overlay:not(.dual-view) video {
    max-width: 90vw;
    max-height: 80vh;
  }

  .video-overlay button {
    font-size: 0.9rem;
  }
}