/* ========================================================================= */
/* Obecné styly pro body */
/* ========================================================================= */
body {
    font-family: 'Inter', sans-serif;
    background: #f7f3ee url('/images/REST01.png') no-repeat center center / cover;
  background-attachment: fixed;
    /* Krémová */
    color: #2D2D2D;
    /* Tmavě šedá */
    margin: 0;
    /* Odstranění výchozího marginu */
}

/* ========================================================================= */
/* Styly pro nadpisy (h1, h2, h3, h4) */
/* ========================================================================= */
h1,
h2,
h3,
h4 {
    font-family: 'Playfair Display', serif;
}

/* Video jako pozadí celé stránky */
#bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;           /* důležité: ne záporné */
  pointer-events: none;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.20);
  z-index: 1;
  pointer-events: none;
}

/* Veškerý obsah nad overlayem a videem */
.page {
  position: relative;
  z-index: 2;
}

/* Pokud má uživatel omezené animace, video skryjeme 
@media (prefers-reduced-motion: reduce) {
  #bg-video, .bg-overlay { display: none; }
}
  */  

/* ========================================================================= */
/* Styly pro seznamy (ul li) */
/* ========================================================================= */
ul li span:first-child {
    font-weight: 600;
    min-width: 90px;
    /* zajistí stejnou šířku pro den, aby se to hezky srovnalo */
}

/* ========================================================================= */
/* Styly pro sekce (section-container) */
/* ========================================================================= */
.section-container {
    background-color: #FFFFFF;
    /* Bílé pozadí sekcí */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

/* ========================================================================= */
/* Hero sekce */
/* ========================================================================= */
/* wrapper pro hero s pozadím */
/*.hero-wrapper {
    position: relative;
    width: 100%;
    min-height: 90vh;
    background: url('/images/REST01.png') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
} */

.hero {
    width: 90%;
    margin-top: 50px;
    height: 80vh;
    /* Celá výška obrazovky */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dva sloupce stejné šířky */
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.hero-image img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: translateX(20px);
    animation: heroFadeIn 1s ease forwards;
}

.hero-content {
    padding: 2rem;
    text-align: left;
    opacity: 0;
    transform: translateX(20px);
    animation: heroFadeIn 1s ease forwards;
}

@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================================================= */
/* Hlavní obsah (#main) */
/* ========================================================================= */
#main {
    margin-top: 10vh;
  
}

/* ========================================================================= */
/* Sekce O nás (about) */
/* ========================================================================= */
.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* height: 600px;  <- smaž nebo zakomentuj */
    min-height: 600px; /* volitelné, pokud chceš zachovat výšku min. 600px */
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 16px;
    background-color: white;
}

.about-image img {
    width: 75%;
    height: 80vh;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

.about-content {
        display: flex;
    flex-direction: column;
    justify-content: flex-start; /* místo centrování nahoru */
    padding: 2rem;
    text-align: left;
    opacity: 0;
    transform: translateX(20px);
    animation: aboutFadeIn 1s ease forwards;
}

@keyframes aboutFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================================================= */
/* Navigační lišta (navbar a nav-link) */
/* ========================================================================= */
.nav-link {
    color: #2D2D2D;
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

/* Navigační lišta */
.nav-logo img {
    height: 50px;
    width: 50px;
    display: block;
}

.nav-link:hover {
    color: #3B4D2A;
    /* tmavě zelená */
}

.nav-link::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #A94438;
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: #A94438;
    font-weight: 750;
}

.nav-link-mobile {
    padding: 0.75rem 1rem;
    color: #333;
    transition: background 0.2s;
}

.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
}

/* ========================================================================= */
/* Taby pro menu */
/* ========================================================================= */
.tab {
    background-color: #FFFFFF;
    color: #2D2D2D;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-right: 0.5rem;
}

.tab.active {
    background-color: #A94438;
    /* Cihlová */
    color: white;
}

.tab:hover {
    background-color: #8A372F;
    /* Tmavší cihlová */
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Pizza note – jemná animace auta */
.car-icon {
  transition: transform 200ms ease;
  will-change: transform;
}
.pizza-delivery-note:hover .car-icon {
  transform: translateX(4px);
}

/* Respekt k omezeným animacím */
@media (prefers-reduced-motion: reduce) {
  .car-icon {
    transition: none;
    transform: none !important;
  }
}
.box-icon {
  transition: transform 200ms ease;
  will-change: transform;
}
.takeaway-note:hover .box-icon {
  transform: translateY(-3px); /* jemný pohyb nahoru */
}
@media (prefers-reduced-motion: reduce) {
  .box-icon {
    transition: none;
    transform: none !important;
  }
}
.warning-icon {
  animation: pulseWarning 1.5s infinite;
}

@keyframes pulseWarning {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .warning-icon {
    animation: none;
  }
}

/* ========================================================================= */
/* Carousel (#photoCarousel) */
/* ========================================================================= */
/* ==== Carousel – základ ==== */
#photoCarousel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#photoCarousel::-webkit-scrollbar { display: none; }

#photoTrack { /* desktop: posouváme po 100% šířkách stránek */
  display: flex;
  will-change: transform;
}



/* Hover efekt obrázků konzistentně */
#photoCarousel img {
  transition: transform 0.3s ease;
}
#photoCarousel img:hover { transform: scale(1.05); }

/* ==== Jen desktop (>=1025px) – stránkovaný grid 4×2 a šipky viditelné ==== */
@media (min-width: 1025px) {
  /* desktop-only třída jen ukazuje šipky na velkých displejích */
  .desktop-only { display: inline-flex; }
  
  /* výška náhledů na desktopu o trochu větší, ať to líp „sedí“ */
  #photoCarousel img { height: 220px; }
}

/* ==== Mobil/tablet (<=1024px) – necháváme původní chování (horizontální scroll) ==== */
/* Skryj obě kolejnice defaultně, ať si je přepneme media query */
#photoTrackDesktop, #photoTrackMobile { display: none; }

/* === Desktop (>=1025px) – používá desktop track (8 fotek / stránka) === */
@media (min-width: 1025px) {
  #photoTrackDesktop { display: flex; }       /* stránky vedle sebe */
  #photoTrackMobile { display: none; }

  /* výška náhledů na desktopu */
  #photoTrackDesktop img { height: 220px; object-fit: cover; }
}

/* === Mobil (<=768px) – používá mobile track (4 fotky / stránka) === */
@media (max-width: 768px) {
  #photoTrackDesktop { display: none; }
  #photoTrackMobile { display: flex; }        /* stránky vedle sebe */

  /* 2 řady × 2 sloupce, bez deformace – držíme poměr 4:3 */
  #photoTrackMobile img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* Hover efekt (zůstává společný) */
#photoCarousel img { transition: transform 0.3s ease; }
#photoCarousel img:hover { transform: scale(1.05); }

/* ========================================================================= */
/* Animace při načítání (fade-in) */
/* ========================================================================= */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================================= */
/* Tlačítka (btn) */
/* ========================================================================= */
.btn {
    background-color: #A94438;
    /* Cihlová */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #8A372F;
}

/* ========================================================================= */
/* Navigační šipky (carousel-arrow) */
/* ========================================================================= */
.carousel-arrow {
    background-color: #A94438;
    color: white;
    padding: 1rem;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.carousel-arrow:hover {
    background-color: #8A372F;
}

/* ========================================================================= */
/* Media Queries (responsivita) */
/* ========================================================================= */

/* Media Query pro zařízení s minimální šířkou 640px */
@media (min-width: 640px) {
    #photoCarousel img {
        height: 250px;
    }
}

/* Media Query pro zařízení s maximální šířkou 1024px */
@media (max-width: 1024px) {

    /* Sekce O nás na menších zařízeních */
    .about {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-content {
        padding: 1rem 0;
    }
}

/* Media Query pro zařízení s maximální šířkou 768px */
@media (max-width: 768px) {
    body{
         background-position: center top;
           background-attachment: fixed;
    }
    /* Hero sekce na mobilech */
    .hero-wrapper {
        background-position: right; /* nebo center center podle toho co sedí nejlépe */
        padding: 0.5rem;
    }

    .hero {
        grid-template-columns: 1fr;
        /* Jeden sloupec na mobilech */
        grid-template-rows: auto 1fr;
        /* Obrázek nahoře, obsah dole */
        height: auto;
    }

    .hero-image img {
        height: 40vh;
        /* Menší výška obrázku na mobilech */
    }

    .hero-content {
        padding: 1.5rem;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2.5rem;
        /* Menší nadpis */
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
        /* Menší podnadpis */
    }

    /* Skrytí sekce O nás na mobilech */
    .about {
        display: none;
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .about-image {
        display: none;
    }

    /* Navigační lišta na mobilech */
    .navbar {
        padding: 0.5rem 0;
    }

    .navbar a {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    /* Carousel na mobilech */
    #photoCarousel {
        display: flex;
        /* Přepnutí na flexbox pro mobilní zobrazení */
        flex-wrap: nowrap;
        /* Zabrání zalamování na nové řádky */
        overflow-x: auto;
        /* Horizontální posouvání */
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 16px;
        gap: 12px;
    }

    #photoCarousel>div {
        flex: 0 0 280px;
        /* Pevná šířka pro každý prvek */
        width: 280px;
        flex: 0 0 250px;
    }

    #photoCarousel img {
        width: 100%;
        height: 200px;
        height: 180px;
    }

    /* Další úpravy pro iframe */
    iframe {
        width: 100% !important;
        height: 250px !important;
    }
}