/* ==================================================
   AI PATCH – HOME SLIDER (Bootstrap Carousel)
   Purpose:
   - Mobile hero is too low
   - Image should crop horizontally (cover)
   - Text must breathe vertically
   ================================================== */

@media (max-width: 768px){

  /* ===== HERO HEIGHT ===== */
  .bg-slider-option #slider.carousel,
  .bg-slider-option #slider.carousel .carousel-inner,
  .bg-slider-option #slider.carousel .carousel-inner > .item,
  .bg-slider-option #slider.carousel .carousel-inner > .item .slider-item{
    height: 48vh;
    min-height: 300px;
  }

  /* ===== IMAGE AS COVER ===== */
  .bg-slider-option #slider.carousel .carousel-inner > .item .slider-item{
    position: relative;
    overflow: hidden;
  }

  .bg-slider-option #slider.carousel .carousel-inner > .item .slider-item > img{
    width: 100% !important;
    height: 48vh;
    min-height: 300px;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  /* ===== CONTENT OVERLAY ===== */
  .bg-slider-option #slider.carousel .carousel-inner > .item .slider-content-area{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 30vh 0 18px;
  }

  .bg-slider-option #slider.carousel .slider-content{
    max-width: 520px;
  }

  /* ===== TYPOGRAPHY ===== */
  .bg-slider-option #slider.carousel .slider-content h2{
    font-size: 30px;
    line-height: 1.05;
    margin: 0 0 10px;
  }

  .bg-slider-option #slider.carousel .slider-content p{
    font-size: 14px;
    line-height: 1.25;
    margin: 0 0 14px;
  }

  /* ===== BUTTONS ===== */
.bg-slider-option #slider.carousel .slider-btn{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

  .bg-slider-option #slider.carousel .slider-btn a.btn{
    margin: 0 !important;
    white-space: nowrap;
  }
}
/* ==================================================
   AI PATCH – spacing after slider (mobile)
   ================================================== */
@media (max-width: 768px){

  /* zmenši mezeru mezi sliderem a sekcí #poslani */
  #poslani{
    padding-top: 20px !important;
    margin-top: 0 !important;
  }

  /* zmenši případné vnitřní odsazení wrapperů */
  #poslani .about-greenforest,
  #poslani .about-greenforest-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* kdyby to dělaly přímo nadpisy */
  #poslani h1{
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  #poslani h2{
    margin-top: 0 !important;
  }
}
/* ==================================================
   AI PATCH – disable WOW/animate on mobile (SAFE)
   Only affects animated elements, not slider layout
   ================================================== */
@media (max-width: 768px){

  /* WOW často nastaví visibility:hidden a pak animuje */
  .wow{
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Animate.css: zabít animaci jen tam, kde je opravdu animace */
  .animated,
  .wow.animated,
  .fadeIn, .fadeInDown, .fadeInUp, .fadeInLeft, .fadeInRight,
  .zoomIn, .zoomInDown, .zoomInUp,
  .slideInUp, .slideInDown, .slideInLeft, .slideInRight{
    animation: none !important;
    transition: none !important;
  }

  /* Extra: když slider přidává animace přímo na textové prvky */
  .bg-slider-option #slider .slider-content h2,
  .bg-slider-option #slider .slider-content p,
  .bg-slider-option #slider .slider-btn,
  .bg-slider-option #slider .slider-btn a{
    animation: none !important;
    transition: none !important;
  }

  /* DŮLEŽITÉ: NESAHÁME na transform, ať nerozhodíme centrování */
}
/* Kotvy: aby cíl nebyl schovaný pod (fixed) headerem */
#kdojsme, #codelame{
  scroll-margin-top: 90px; /* uprav podle výšky headeru */
}
/* ==================================================
   AI PATCH – mobile spacing: #codelame + #kdojsme
   ================================================== */
@media (max-width: 768px){

  /* sekce samotné – zmenšit horní padding/margin */
  #codelame,
  #kdojsme{
    padding-top: 18px !important;  /* zkus 12–24px */
    margin-top: 0 !important;
  }

  /* když je velká mezera z wrapperů uvnitř sekce */
  #codelame .our-services-option,
  #kdojsme .about-greenforest{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* když to dělá hlavička sekce */
  #codelame .section-header{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* jemně přitáhnout nadpisy */
  #codelame .section-header h2,
  #kdojsme .about-greenforest-content h2{
    margin-top: 0 !important;
  }
}
/* ==================================================
   AI PATCH – mobile center: "Kdo jsme" + buttons
   ================================================== */
@media (max-width: 768px){

  /* nadpis "Kdo jsme" na střed */
  #kdojsme .about-greenforest-content h2{
    text-align: center;
  }

  /* buttony na střed */
  #kdojsme .about-greenforest-content .btn{
    display: inline-block;
  }

  /* wrapper pro buttony vycentrovat */
  #kdojsme .about-greenforest-content{
    text-align: center;
  }

}
@media (max-width: 768px){

  /* text pod nadpisem zarovnat vlevo */
  #kdojsme .about-greenforest-content p{
    text-align: left;
  }

}
@media (max-width: 768px){

  /* texty vlevo – sekce CO DĚLÁME */
  #codelame p,
  #codelame .section-header p,
  #codelame .our-services-option p{
    text-align: left;
  }

}
@media (max-width: 768px){

  /* výjimka: boxy služeb zůstanou centrované */
  #codelame .our-services-box,
  #codelame .our-services-box .our-services-content,
  #codelame .our-services-box p{
    text-align: center;
  }

}