/* =========================
   FK VINČA — MOBILE / RESPONSIVE (CLEAN)
   Ovaj fajl ide POSLE fkvinca-overrides.css
   ========================= */

/* ---------- 0) Safety / Layout guards (bez razbijanja grida) ---------- */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }

/* Ukloni “probijače” umesto da ubijaš .row/.col */
.hero, .section, .container-fluid { overflow-x: clip; }

/* ---------- 1) Header: fix preklapanje na telefonu ---------- */
:root{
  --fkv-header-h: 70px;
}

@media (max-width: 767.98px){
  /* Header fiksan + blur */
  #sisf-page-header{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: rgba(12, 77, 162, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #sisf-page-header-inner{ padding: 8px 0 !important; }

  /* Pomeri ceo sajt ispod headera (više ne “čupaš” hero padding) */
  body.fkv-home{ padding-top: var(--fkv-header-h); }

  /* Logo */
  #sisf-page-header .navbar-brand img{ max-height: 44px !important; width: auto; }
}

/* ---------- 2) NAV: “ОМЛАДИНСКА / ШКОЛА” u 2 reda svuda ---------- */
/* Desktop nav */
.nav-omladinska .nav-2line{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.02;
  gap: 2px;
  white-space: nowrap; /* nikad u 5 redova */
}

.nav-omladinska .nav-2line span{
  display: block;
  white-space: nowrap;
}

/* Poravnanje ikonice uz 2 reda */
.nav-omladinska > a.nav-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-omladinska > a.nav-link .custom-toggle-icon{
  margin-left: 0 !important;
}

/* SlickNav (mobilni meni) — isti 2-line look */
.slicknav_nav .nav-2line{
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  white-space: nowrap;
}

/* ---------- 3) Tablet (<= 991px) ---------- */
@media (max-width: 991.98px){
  #sisf-page-header .sisf-centered-header-wrapper{ padding: 10px 0; }

  /* Desktop navigacija se sakriva (kao što već radiš) */
  #sisf-page-header .main-menu{ display: none !important; }
  #sisf-page-header .sisf-widget-holder{ display: none !important; }

  /* Prikaži “mobile-block” logo, sakrij drugi */
  #sisf-page-header .navbar-brand.mobile-block{ display: block !important; }
  #sisf-page-header .sisf-centered-header-wrapper .navbar-brand{ display: none !important; }

  #sisf-page-header .navbar-brand img{ max-height: 50px; width: auto; }

  /* Sekcije: malo kompaktnije */
  .section{ padding: 70px 0 !important; }
}

/* ---------- 4) Mobile (<= 767px) ---------- */
@media (max-width: 767.98px){
  /* Global spacing */
  .section{ padding: 56px 0 !important; }
  .container{ padding-left: 16px !important; padding-right: 16px !important; }

  /* Hamburger / SlickNav dugme */
  .navbar-toggle,
  .slicknav_btn{
    display: block !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
  }

  .slicknav_menu{ background: transparent !important; }
  .slicknav_btn{
    border-radius: 10px;
    padding: 9px 12px;
  }

  /* Mobilni dropdown */
  .slicknav_nav{
    background: rgba(12, 77, 162, 0.98) !important;
    border-radius: 0 0 16px 16px;
    margin-top: 10px;
    padding: 10px 0;
  }

  .slicknav_nav a{
    color: #fff !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
    line-height: 1.2;
  }

  .slicknav_nav a:hover{
    background: rgba(210, 172, 103, 0.18) !important;
  }

  /* HERO — bez ručnog 90px paddinga, jer body već ima offset */
  .hero{ min-height: auto !important; padding: 0 0 20px !important; }
  .hero-slide .container{ padding-top: 18px !important; padding-bottom: 14px !important; }

  .hero .row{ flex-direction: column-reverse; }
  .hero .col-md-7,
  .hero .col-md-5{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

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

  /* Naslov: responsive bez pucanja */
  .fkv-hero-title{
    font-size: clamp(28px, 7.2vw, 44px) !important;
    line-height: 1.07 !important;
    text-align: center !important;
    letter-spacing: -0.02em;
  }

  .hero .section-title h3{
    font-size: 0.95rem !important;
    text-align: center !important;
  }

  .hero .sisf-list-item-text{
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.92rem !important;
    margin-bottom: 10px !important;
  }

  .hero .sisf-m-button{ text-align: center !important; padding-top: 14px !important; }

  .hero .sisf-player-image{
    transform: none !important;
    margin: 0 0 10px !important;
  }

  .hero .sisf-player-image img{
    max-width: 280px !important;
    margin: 0 auto;
    display: block;
  }

  /* Jači overlay na mobilnom (da tekst čitljiv) */
  .hero-slide::before{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.70) 0%,
      rgba(0,0,0,0.50) 55%,
      rgba(0,0,0,0.28) 100%
    ) !important;
  }

  /* ABOUT */
  .about-us-section .col-lg-5,
  .about-us-section .col-lg-7{ text-align: center; }

  .about-us-section .section-title{ text-align: center !important; }
  .about-us-section .section-title h2{
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
  }

  .about-us-section .sisf-m-text p{
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
  }

  /* Badge */
  .fkv-club-badge svg{ width: 140px !important; height: 140px !important; }

  /* “Vinča danas” kartice */
  .service-list-section .col-lg-4,
  .service-list-section .col-md-6{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }

  .sisf--sis-service{ margin-bottom: 0 !important; }
  .sisf-e-title{ font-size: 1.25rem !important; }

  .fkv-kicker{ font-size: 0.75rem !important; }
  .fkv-mini-points{ display: flex; flex-wrap: wrap; gap: 8px; }
  .fkv-mini-points span{ font-size: 0.78rem !important; }

  /* “Who can join” */
  .who-can-join-section .row{ row-gap: 18px; }
  .who-can-join-counter{ gap: 18px; flex-wrap: wrap; justify-content: center !important; }
  .who-can-join-counter .counter-item{ min-width: 140px; }

  /* Partnership (prvi tim) */
  .partnership-section .row{ row-gap: 18px; }
  .partnership-image.right{ margin-top: 14px; }

  /* “Kako radimo” */
  .what-we-offer-section{ padding: 56px 0 !important; }
  .what-we-offer-section .col-md-6{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }

  /* “Put jednog igrača” */
  .why-choose-us-section .row{ row-gap: 20px; }
  .why-choose-us-section .skill-title{ font-size: 0.95rem; }

  /* Trenerski slider: ne diramo swiper width! samo centriramo sadržaj */
  .our-team-slider .swiper-slide{ display: flex; justify-content: center; }
  .our-team-slider .swiper-slide .sisf-e-inner{ max-width: 280px; width: 100%; }

  /* Vinča TV slider */
  .key-highlight-section .swiper-slide{ padding: 0 6px; }

  /* Sponsor logos — neka budu fleksibilni */
  .client-logo-section .gallery-items{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .client-logo-section .client-logo-image{ margin: 0 !important; }

  /* Vesti */
  .letest-blog-news .row{ row-gap: 14px; }
  #fkv-news-root .col-12{ text-align: center; }

  /* Contact */
  .contact-us-section .container{ padding-left: 16px !important; }
  .contact-us-section .row{ row-gap: 18px; }
  .contact-us-section .form-control{ font-size: 16px; } /* sprečava iOS zoom */

  /* Gallery */
  .gallery-section .gallery-items{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gallery-section .page-gallery--item{ margin: 0 !important; }

  /* Footer: newsletter form u kolonu */
  .main-footer .sisf-page-footer-top-area-inner .form-group{
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  .main-footer .subscribe-btn{ width: 100% !important; }
  .main-footer input.form-control{ width: 100% !important; }

  /* Footer kolone u centru */
  .main-footer .footer-links{ text-align: center; margin-bottom: 22px; }
  .main-footer .footer-about-links .sisf-details{ justify-content: center; }
  .main-footer .footer-social-links ul{ justify-content: center; }

  /* Back to top */
  .back-to-top-button{ right: 14px !important; bottom: 14px !important; }
  .back-to-top{ width: 44px !important; height: 44px !important; }

  /* Dugmad */
  .btn-default{ padding: 12px 18px !important; font-size: 0.92rem !important; }
}

/* ---------- 5) Small mobile (<= 480px) ---------- */
@media (max-width: 480px){
  .fkv-hero-title{ font-size: clamp(24px, 7.8vw, 38px) !important; }
  .hero .sisf-player-image img{ max-width: 230px !important; }

  .client-logo-section .gallery-items{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .gallery-section .gallery-items{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 6) Landscape mobile (telefon okrenut) ---------- */
@media (max-width: 767.98px) and (orientation: landscape){
  :root{ --fkv-header-h: 64px; }
  body.fkv-home{ padding-top: var(--fkv-header-h); }
  .hero-slide .container{ padding-top: 10px !important; }
  .hero .row{ flex-direction: row !important; }
  .hero .col-md-7{ width: 60% !important; flex: 0 0 60% !important; max-width: 60% !important; }
  .hero .col-md-5{ width: 40% !important; flex: 0 0 40% !important; max-width: 40% !important; }
  .hero .hero-content{ text-align: left !important; }
  .fkv-hero-title{ text-align: left !important; }
}

/* ---------- 7) Touch uređaji: veći touch targets ---------- */
@media (hover: none) and (pointer: coarse){
  .nav-link, .slicknav_nav a{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .btn-default{ min-height: 48px; }
}

/* ---------- 8) Safe area (notch) ---------- */
@supports (padding: env(safe-area-inset-top)){
  @media (max-width: 767.98px){
    #sisf-page-header{ padding-top: env(safe-area-inset-top); }
    body.fkv-home{ padding-top: calc(var(--fkv-header-h) + env(safe-area-inset-top)); }
    .back-to-top-button{ bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  }
}
/* =========================
   HOTFIX — vrati hero na stanje "pre" + ukloni body offset
   Nalepi na SAM KRAJ fkvinca-mobile.css
   ========================= */

@media (max-width: 767.98px){

  /* 1) Ne guramo ceo sajt body padding-top (to ti je napravilo haos) */
  body.fkv-home{ padding-top: 0 !important; }

  /* 2) Header neka bude sticky (ne fixed) — rešava sečenje hero-a */
  #sisf-page-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(12, 77, 162, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* 3) Vrati hero spacing kao pre (da naslov ne ode pod header) */
  .hero-slide .container{
    padding-top: 90px !important;
    padding-bottom: 20px !important;
  }

  /* 4) Vrati tipografiju (previše je sada “stisnuto” i sečeno) */
  .fkv-hero-title{
    font-size: 1.85rem !important;
    line-height: 1.12 !important;
    text-align: left !important;
    margin-top: 8px !important;
  }

  .hero .section-title h3{
    text-align: left !important;
    font-size: 0.9rem !important;
  }

  .hero .hero-content{
    text-align: left !important;
    padding: 0 !important;
  }

  .hero .sisf-list-item-text{
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 0.85rem !important;
  }

  .hero .sisf-m-button{
    text-align: left !important;
    padding-top: 12px !important;
  }

  /* 5) Igrač slika da ne gura layout čudno */
  .hero .sisf-player-image img{
    max-width: 260px !important;
  }
}

/* Ako si dodao body class samo zbog onog offseta, sad ti nije bitna,
   ali može da ostane – ne smeta. */