/* =========================================================
   FK VINČA – MOBILE FIX (posle fkvinca-mobile.css)
   Fokus: hero, put igrača, logo sekcija, galerija, grid fix
   ========================================================= */

/* 0) NE diraj bootstrap grid globalno (ovo je glavni krivac)
   Ako si u fkvinca-mobile.css imao:
   .row { margin-left:0; margin-right:0 }
   [class*="col-"] { padding-left:10px; padding-right:10px }
   -> to ubija layout.
   Ovim ispod vraćamo default ponašanje (samo na mobilnom). */
@media (max-width: 767.98px) {
  .row {
    margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
    margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
  }
  .row > * {
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
  }
}

/* 1) Header: 2 reda za "ОМЛАДИНСКА / ШКОЛА" i da izgleda uredno */
.nav-2line{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  text-align:center;
}
.nav-2line span{
  display:block;
  white-space:nowrap;
  font-size:0.82em; /* malo manji da stane */
  letter-spacing:0.02em;
}

/* 2) HERO – da se ne sabija/prehvata i da slika ne “pojede” sve */
@media (max-width: 767.98px) {
  /* više prostora zbog fixed header-a */
  .hero-slide .container{
    padding-top: 100px !important;
    padding-bottom: 28px !important;
  }

  .hero .hero-content{
    padding: 0 6px !important;
  }

  .fkv-hero-title{
    font-size: clamp(1.55rem, 6.2vw, 2.05rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
    margin-bottom: 12px !important;
  }

  /* checklist linije – da se normalno lome i budu centrirane */
  .hero .sisf-list-item-text{
    display:flex;
    align-items:flex-start;
    justify-content:center !important;
    gap:10px;
    text-align:left !important;
    max-width: 520px;
    margin-left:auto;
    margin-right:auto;
  }
  .hero .sisf-list-item-text .text-white{
    display:block;
    line-height:1.45;
    font-size: 0.95rem !important;
  }

  /* CTA dugme da bude normalne širine */
  .hero .sisf-m-button{
    display:flex;
    justify-content:center !important;
  }
  .hero .sisf-m-button .btn-default{
    width: min(320px, 92vw);
    justify-content:center;
  }

  /* igrač slika – manje i centrirano */
  .hero .sisf-player-image{
    margin: 10px auto 18px !important;
    max-width: 320px;
  }
  .hero .sisf-player-image img{
    width:100% !important;
    height:auto !important;
    display:block;
  }
}

/* 3) "ПУТ ЈЕДНОГ ИГРАЧА" – fix preklapanja progress bar / slike */
@media (max-width: 767.98px) {
  .why-choose-us-section .col-md-6{
    width:100% !important;
    max-width:100% !important;
    flex: 0 0 100% !important;
  }

  /* tekst da bude uredno */
  .why-choose-us-section .sisf-m-text p{
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
  }

  /* progressbar da ima razmak ispod */
  .why-choose-us-section .progressbar{
    margin-bottom: 22px !important;
  }

  /* slika da NE upada u progressbar */
  .why-choose-us-section .chos-us-image{
    position: static !important;
    margin-top: 10px !important;
    text-align:center;
  }
  .why-choose-us-section .chos-us-image figure{
    margin: 0 auto !important;
  }
  .why-choose-us-section .chos-us-image img{
    max-width: min(360px, 92vw) !important;
    height:auto !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* 4) "ХВАЛА ВАМ" / LOGO sekcija – grid 2 kolone + centriranje */
@media (max-width: 767.98px) {
  .client-logo-section .row{
    align-items: stretch;
  }

  .client-logo-section .sisf-sis--wrapper-layout.gallery-items{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding: 14px 10px 0;
  }

  .client-logo-section .client-logo-image{
    width:100% !important;
    margin:0 !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .client-logo-section .client-logo-image img{
    max-width: 120px !important;
    height:auto !important;
    opacity: 0.95;
  }
}

/* 5) GALERIJA – 2 kolone na malom, 3 na većem mobilnom */
@media (max-width: 767.98px) {
  .gallery-section .sisf-sis--wrapper-layout.gallery-items{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .gallery-section .page-gallery--item{
    width:100% !important;
    margin:0 !important;
  }
}
@media (max-width: 480px) {
  .gallery-section .sisf-sis--wrapper-layout.gallery-items{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* 6) Sitni polish – da sekcije ne budu “prezategnute” */
@media (max-width: 767.98px) {
  .section{
    padding: 46px 0 !important;
  }
  .section-title h2,
  .sisf-m-title{
    font-size: clamp(1.35rem, 5.4vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }
}

/* 7) Horizontal scroll safety net (bez lomljenja grid-a) */
html, body{
  overflow-x:hidden;
}
img, svg, video{
  max-width:100%;
  height:auto;
}
/* Smanji DESNOG igrača (drugi img u figuri) */
@media (max-width: 767.98px) {
  .why-choose-us-section .chos-us-image figure {
    position: relative;
  }

  /* ako je desni igrač drugi <img> */
  .why-choose-us-section .chos-us-image figure img:nth-of-type(2) {
    transform: scale(0.45) !important;   /* SMANJI maksimalno */
    transform-origin: bottom right !important;
    right: 6px !important;
    bottom: 0 !important;
    opacity: 0.95;
  }
}
@media (max-width: 767.98px) {
  .fkv-player-right{
    transform: scale(0.45) !important;  /* jos manje */
    transform-origin: bottom right !important;
    position: absolute !important;
    right: 6px !important;
    bottom: 0 !important;
  }
}