/* =====================================================================
   ПОТОМЦИ НАСТАВЉАЈУ КОРАЦИМА ХЕРОЈА — responsive.css
   Media query-ji od najšireg ka najužem ekranu (desktop-first).
===================================================================== */


/* ---------------------------------------------------------------------
   TABLET LANDSCAPE / MANJI DESKTOP (<= 1200px)
--------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root {
    --container-padding: 1.25rem;
  }
}


/* ---------------------------------------------------------------------
   TABLET (<= 1024px)
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--space-lg);
    padding-top: calc(var(--header-height) + var(--space-md));
    padding-bottom: var(--space-lg);
  }

  .hero__text {
    max-width: 100%;
  }

  /* 7 kartica → 3 + 3 + 1 */
  .lokaliteti__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Sadržaj ostaje levo/centralno, ne sme da pređe preko krsta desno */
  .ruta-iz-vazduha__content {
    width: min(560px, 60vw);
    margin-left: 6%;
  }

  .ruta-iz-vazduha__play {
    width: 120px;
    height: 120px;
  }

  .ruta-iz-vazduha__play-icon {
    border-width: 12px 0 12px 19px;
  }

  /* ПОТОМЦИ — samo blago smanjenje fontova, raspored ostaje 60/40;
     bočni pomeraj blokova se smanjuje da ne izađu van užeg ekrana */
  .potomci-final {
    --potomci-shift-left: -30px;
    --potomci-shift-right: 25px;
    min-height: 760px;
  }

  .potomci-final__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
  }

  .potomci-final__description {
    font-size: 1.05rem;
  }

  .potomci-final__value-title {
    font-size: 1.15rem;
  }

  /* О ПРОЈЕКТУ — raspored ostaje 65/35, samo manji fontovi i uži panel */
  .o-projektu-final {
    min-height: auto;
  }

  .o-projektu-final__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
  }

  .o-projektu-final__text p {
    font-size: 1rem;
  }

  .o-projektu-final__quote p {
    font-size: 1.25rem;
  }

  .o-projektu-final__panel {
    padding: 2rem 1.75rem;
  }

  .o-projektu-final__closing-title {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  }
}


/* ---------------------------------------------------------------------
   MOBILNI MENI PRELOM (<= 900px) — hamburger preuzima navigaciju
--------------------------------------------------------------------- */
@media (max-width: 900px) {
  .navbar__menu {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Kompozicija pozadine (portret levo / kartica desno) se na užim
     ekranima ne uklapa sa uskim praznim prostorom — vraćamo se na cover
     sa razumnom min-visinom, tekst ide preko svetlijeg centralnog dela */
  .karadjordje {
    aspect-ratio: auto;
    min-height: auto;
    padding: 90px 24px;
    background-size: cover;
    background-position: 35% center;
  }

  .karadjordje__layout {
    display: block;
    height: auto;
  }

  .karadjordje__content {
    grid-column: auto;
    width: min(100%, 620px);
    margin: 0 auto;
  }

  .karadjordje-modal__dialog {
    grid-template-columns: 1fr;
    max-height: 90vh;
    overflow-y: auto;
  }

  .karadjordje-modal__image {
    min-height: 360px;
  }
}


/* ---------------------------------------------------------------------
   MOBILE (<= 768px)
--------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-2xl: 5rem;
    --space-xl: 3rem;
    --header-height: 72px;
  }

  .section-transition {
    height: clamp(70px, 12vw, 90px);
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  /* Slika je fiksne desktop kompozicije (pergament levo / šuma desno) —
     na uskim ekranima ukidamo aspect-ratio i dajemo tekstu čitljivu
     podlogu, umesto da rizikujemo da tekst padne preko tamne šume. */
  .ruta {
    aspect-ratio: auto;
    min-height: auto;
    padding-block: var(--space-2xl) var(--space-xl);
    align-items: flex-start;
  }

  .ruta__content {
    max-width: 100%;
    background-color: rgba(244, 239, 228, 0.88);
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  .lokaliteti__photo {
    min-height: 420px;
  }

  .lokaliteti__hero-inner {
    max-width: 100%;
  }

  .lokaliteti__inner {
    width: min(100% - 2.5rem, 1560px);
  }

  /* Kartice lokaliteta postaju horizontalni slider */
  .lokaliteti__cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
  }

  .loc-card {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  .mobile-menu__link {
    font-size: 1.5rem;
  }

  .karadjordje__title {
    font-size: clamp(2.25rem, 10vw, 3.25rem);
  }

  .karadjordje__subtitle {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }

  .karadjordje__description {
    font-size: 1.05rem;
  }

  .karadjordje__button {
    min-width: 0;
    width: 100%;
  }

  .karadjordje-modal__content {
    padding: 40px 28px;
  }

  /* Fotografija je fiksne desktop kompozicije — na uskim ekranima ukidamo
     bočnu poziciju sadržaja i dajemo mu čitljivu tamnu podlogu, crkva i
     krst ostaju makar delimično vidljivi kroz pozadinu */
  .ruta-iz-vazduha {
    min-height: 850px;
    background-position: 55% center;
  }

  .ruta-iz-vazduha__inner {
    width: min(100% - 36px, 620px);
  }

  .ruta-iz-vazduha__content {
    width: 100%;
    margin: 0 auto;
    padding: 40px 24px;
    background: rgba(3, 8, 5, 0.42);
    backdrop-filter: blur(2px);
  }

  .ruta-iz-vazduha__title {
    font-size: clamp(2.75rem, 11vw, 4rem);
  }

  .ruta-iz-vazduha__subtitle {
    font-size: clamp(1.15rem, 5vw, 1.5rem);
  }

  .ruta-iz-vazduha__description {
    font-size: 1rem;
  }

  .ruta-iz-vazduha__play {
    width: 112px;
    height: 112px;
  }

  .ruta-iz-vazduha__play-icon {
    border-width: 11px 0 11px 18px;
  }

  .video-modal {
    padding: 16px;
  }

  .video-modal__dialog {
    width: 100%;
    max-height: 90svh;
  }

  .video-modal__close {
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
  }

  /* ПОТОМЦИ — jedna kolona, tekst pa vrednosti, sve centrirano;
     bočni pomeraj se ukida jer se blokovi slažu jedan ispod drugog */
  .potomci-final {
    --potomci-shift-left: 0px;
    --potomci-shift-right: 0px;
    min-height: auto;
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .potomci-final__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .potomci-final__text {
    max-width: 100%;
  }

  .potomci-final__description {
    max-width: 100%;
    margin-inline: auto;
  }

  .potomci-final__divider {
    margin-inline: auto;
  }

  .potomci-final__values {
    align-items: center;
    text-align: center;
  }

  .potomci-final__value-divider {
    margin-inline: auto;
  }

  .potomci-final__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  /* О ПРОЈЕКТУ — jedna kolona: prvo tekst, zatim panel, pa slogan na dnu
     (slogan je već van grida u DOM redosledu, prirodno ide poslednji) */
  .o-projektu-final {
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .o-projektu-final__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .o-projektu-final__divider {
    margin-inline: auto;
  }

  .o-projektu-final__text,
  .o-projektu-final__quote {
    max-width: 100%;
    margin-inline: auto;
  }

  .o-projektu-final__quote {
    border-left: none;
    border-top: 1px solid #C79B4B;
    border-bottom: 1px solid #C79B4B;
    padding: 1.25rem 0;
  }

  .o-projektu-final__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .o-projektu-final__closing-title {
    font-size: clamp(1.6rem, 8vw, 2.25rem);
  }
}


/* ---------------------------------------------------------------------
   MALI MOBILNI EKRANI (<= 480px)
--------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --container-padding: 1rem;
  }

  .hero__title {
    font-size: clamp(2.25rem, 9vw, 3rem);
  }

  .loc-card {
    flex-basis: 75%;
  }
}