/* =========================================================
   miko-overrides.css
   Custom override-i za Mi.Ko. sajt
   Fokus: INDEX (home) – hero, awards, Instagram, footer spacing
   ========================================================== */

/* -----------------------------------------
   1) GLOBALNO: "ram" za INDEX na manjim ekranima
   ----------------------------------------- */

/* Telefoni – da sadržaj ne lepi za ivicu */
@media (max-width: 575.98px) {
  body.home-index {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Manji tableti / veći telefoni – malo blaži ram */
@media (min-width: 576px) and (max-width: 991.98px) {
  body.home-index {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* -----------------------------------------
   2) HERO (INDEX ONLY)
   Cilj: isti raspored, bez ludovanja po visini,
   da izgleda stabilno na svim uređajima.
   ----------------------------------------- */

/* Osnovno ponašanje na većim ekranima */
body.home-index .tp-hero-area.tp-hero-ptb.main-slider {
  padding-top: 180px;
  padding-bottom: 120px;
}

/* Ograničimo "fluid" širinu da ne beži previše u stranama */
body.home-index .tp-hero-area .container-fluid {
  max-width: 1630px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Naslov – ostaje OGROMAN, samo mu osiguramo pristojan wrap */
body.home-index .tp-hero-title {
  word-break: break-word;
  hyphens: auto;
  line-height: 1.02;
}

/* Tekst ispod – centriran i kontrolisane širine na većim ekranima */
body.home-index .tp-hero-content p {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Laptopi / manji desktopi */
@media (min-width: 992px) and (max-width: 1399.98px) {
  body.home-index .tp-hero-area.tp-hero-ptb.main-slider {
    padding-top: 160px;
    padding-bottom: 100px;
  }
}

/* Tableti (portrait + landscape) */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.home-index .tp-hero-area.tp-hero-ptb.main-slider {
    padding-top: 150px;
    padding-bottom: 90px;
  }

  body.home-index .tp-hero-content p {
    max-width: 700px;
  }
}

/* Telefoni (svi) – hero ostaje velik, ali ne "guta" ceo ekran */
@media (max-width: 767.98px) {
  body.home-index .tp-hero-area.tp-hero-ptb.main-slider {
    padding-top: 140px;
    padding-bottom: 80px;
  }

  body.home-index .tp-hero-title-wrap {
    margin-bottom: 24px;
  }

  body.home-index .tp-hero-content p {
    max-width: 100%;
  }
}

/* Vrlo uski telefoni (npr. stari iPhone SE) – još malo sigurnosti */
@media (max-width: 360px) {
  body.home-index .tp-hero-area.tp-hero-ptb.main-slider {
    padding-top: 130px;
    padding-bottom: 70px;
  }
}

/* -----------------------------------------
   3) AWARDS / "elegant" blokovi
   (koristi se i na indexu i na about-me)
   ----------------------------------------- */

.elegant-text p,
.elegant-text span {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.2px;
}

.elegant-text .tp-award-list-content-left {
  gap: 6px;
}

.elegant-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

/* Malo smanji tipografiju na užim ekranima da ne deluje natrpano */
@media (max-width: 767.98px) {
  .elegant-text p,
  .elegant-text span {
    font-size: 17px;
  }

  .elegant-title {
    font-size: 18px;
  }
}

/* -----------------------------------------
   4) INSTAGRAM SEKCIJA
   - gašenje fiksne visine iz teme (100vh)
   - kontrolisan padding po breakpoint-ima
   - bez max-height egzibicija
   ----------------------------------------- */

/* Desktop default:
   - nema više "zakucane" visine, samo minimalna visina
   - kontrolisan gornji i donji razmak */
.tp-instagram-area {
  height: auto !important;       /* pregazi height: 100vh iz main.css */
  min-height: 80vh;
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Laptopi / manji desktopi:
   - malo manje agresivan minimum, ali i dalje "hero" osećaj */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .tp-instagram-area {
    min-height: 70vh;
    padding-top: 100px;
    padding-bottom: 110px;
  }
}

/* Tableti i širi telefoni u landscape:
   - nema forsirane visine, sve ide prirodno, ali zadržavamo lep buffer */
@media (min-width: 576px) and (max-width: 991.98px) {
  .tp-instagram-area {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 90px;
  }
}

/* Klasični mobilni (portret):
   - kompaktan, ali i dalje “diše” */
@media (max-width: 575.98px) {
  .tp-instagram-area {
    min-height: auto;
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

/* -----------------------------------------
   5) FINE-TUNING INSTAGRAM CONTENTA NA MOBILNOM
   (tema već na <768px prebacuje .tp-instagram-content-wrap u static,
    mi samo malo uglađujemo margine)
   ----------------------------------------- */

@media (max-width: 767.98px) {
  .tp-instagram-content-wrap {
    margin-top: 32px;
    margin-left: 0;
    text-align: left;
  }

  .tp-instagram-content {
    padding-left: 0;
  }

  .tp-instagram-content p {
    margin-bottom: 18px;
  }
}

/* -----------------------------------------
   6) BLAG RAZMAK IZNAD FOOTERA
   (da footer ne naleže direktno na prethodnu sekciju)
   ----------------------------------------- */

@media (max-width: 991.98px) {
  .footer-top {
    margin-top: 80px;
  }
}

@media (min-width: 992px) {
  .footer-top {
    margin-top: 120px;
  }
}