/* ============================================
   RESPONZIVNOST — Una Avant
   Breakpoints:
     Tablet : max-width 940px
     Mobile : max-width 600px
   ============================================ */

/* ============================================
   TABLET — 940px i manje
   ============================================ */
@media (max-width: 940px) {

    /* Sakrij desktop navigaciju */
    .navbar__nav {
        display: none;
    }

    /* Sakrij desktop CTA dugme */
    .navbar__actions .btn-rezervacija {
        display: none;
    }

    /* Prikaži hamburger */
    .hamburger {
        display: flex;
    }

    /* Navbar inner — ukloni gap koji je bio za nav */
    .navbar__inner {
        gap: 0;
        justify-content: space-between;
    }

}

/* ============================================
   MOBILNI — 600px i manje
   ============================================ */
@media (max-width: 600px) {

    :root {
        --navbar-height: 64px;
    }

    .navbar__logo-img {
        width: 36px;
        height: 36px;
    }

    .navbar__logo-text {
        font-size: 0.9375rem;
    }

    /* Lang-switch — ostaje vidljiv, ali manji */
    .navbar__actions .lang-switch {
        display: flex;
        padding: 0.2rem 0.5rem;
        gap: 0.25rem;
    }

    .navbar__actions .lang-switch__btn {
        font-size: 0.6875rem;
    }

    .navbar__actions .lang-switch__sep {
        font-size: 0.6875rem;
    }

    /* Smanji gap između akcija */
    .navbar__actions {
        gap: 0.5rem;
    }

    .mobile-menu__link {
        font-size: 1rem;
        padding: 1rem 1.25rem;
    }

    .mobile-menu__footer {
        padding: 1rem 1.25rem 2rem;
    }

}

/* ============================================
   HERO — TABLET (940px i manje)
   ============================================ */
@media (max-width: 940px) {

    .hero__container {
        padding: 7rem 1.5rem 6rem;
        max-width: 100%;
    }

    .hero__content {
        max-width: 100%;
        margin-left: 0;
    }

}

/* ============================================
   HERO — MOBILNI (600px i manje)
   ============================================ */
@media (max-width: 600px) {

    .hero__container {
        padding: 6rem 1.25rem 5rem;
    }

    .hero__eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
    }

    .hero__subtitle {
        font-size: 1rem;
    }

    .hero__cta-row {
        gap: 0.875rem;
    }

    .btn-hero-primary {
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
    }

    .btn-hero-secondary {
        font-size: 0.9375rem;
    }

    .whatsapp-btn {
        width: 50px;
        height: 50px;
        bottom: 1.25rem;
        right: 1.25rem;
    }

}

/* ============================================
   RUTE SEKCIJA — responzivnost
   Dodati u assets/css/responzivnost.css
   ============================================ */

/* ============================================
   TABLET — 940px i manje
   ============================================ */
@media (max-width: 940px) {

    .rute {
        padding: 4rem 0 6rem;
    }

    .rute__container {
        padding: 0 1.5rem;
    }

    .rute__header {
        margin-bottom: 2rem;
    }

    /* Kartice jedna ispod druge */
    .rute__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .route-card__body {
        padding: 1.5rem;
    }

    /* Modal */
    .route-modal__meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .route-modal__two-col {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

}

/* ============================================
   MOBILNI — 600px i manje
   ============================================ */
@media (max-width: 600px) {

    .rute {
        padding: 3rem 0 4rem;
    }

    .rute__container {
        padding: 0 1.25rem;
    }

    .rute__header {
        margin-bottom: 1.5rem;
    }

    .route-card__body {
        padding: 1.25rem;
        gap: 0;
    }

    .route-card__title {
        font-size: 1.375rem;
    }

    .route-card__actions {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }

    .btn-route-secondary,
    .btn-route-primary {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }

    /* Modal na mobilnom — full screen */
    .route-modal {
        padding: 0;
        align-items: flex-end;
    }

    .route-modal__panel {
        border-radius: 1.25rem 1.25rem 0 0;
        margin: 0;
        max-height: 95svh;
        overflow-y: auto;
    }

    .route-modal__content {
        padding: 1.5rem 1.25rem 2rem;
    }

    .route-modal__meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .route-modal__title {
        font-size: 1.625rem;
    }

    .route-modal__two-col {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .route-modal__cta {
        margin-top: 1.5rem;
    }

    .btn-route-primary--large {
        width: 100%;
        justify-content: center;
    }

}

/* ============================================
   SKIPERI SEKCIJA — responzivnost
   Dodati na kraj assets/css/responzivnost.css
   ============================================ */

/* ============================================
   TABLET — 940px i manje (2 kolone)
   ============================================ */
@media (max-width: 940px) {

    .skiperi {
        padding: 4rem 0 5rem;
    }

    .skiperi__container {
        padding: 0 1.5rem;
    }

    .skiperi__header {
        margin-bottom: 2.5rem;
    }

    /* 2 kolone — treća kartica ide na sredinu */
    .skiperi__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* Treća kartica centrirana u redu */
    .skiper-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 440px;
        margin: 0 auto;
        width: 100%;
    }

}

/* ============================================
   MOBILNI — 600px i manje (1 kolona)
   ============================================ */
@media (max-width: 600px) {

    .skiperi {
        padding: 3rem 0 4rem;
    }

    .skiperi__container {
        padding: 0 1.25rem;
    }

    .skiperi__header {
        margin-bottom: 2rem;
    }

    .skiperi__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Reset treće kartice na mobilnom */
    .skiper-card:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }

    .skiper-card__img-wrap {
        border-radius: 0.75rem;
    }

    .skiper-card__name {
        font-size: 1.25rem;
    }

    .skiper-card__bio {
        max-width: 100%;
    }

}

/* ============================================
   GALERIJA SEKCIJA — responzivnost
   ============================================ */

/* ============================================
   TABLET 640px–1023px — 2 slike
   ============================================ */
@media (max-width: 1023px) and (min-width: 640px) {

    .galerija__slide {
        flex: 0 0 calc((100% - 1 * 12px) / 2);
    }

}

/* ============================================
   <940px — padding adjust
   ============================================ */
@media (max-width: 940px) {

    .galerija {
        padding: 4rem 0 5rem;
    }

    .galerija__container {
        padding: 0 1.5rem;
    }

    .galerija__header {
        margin-bottom: 2rem;
    }

    .galerija__slider-outer {
        padding: 0 52px;
    }

}

/* ============================================
   MOBILNI <640px — 1 slika, strelice skrivene
   ============================================ */
@media (max-width: 639px) {

    .galerija {
        padding: 3rem 0 4rem;
    }

    .galerija__container {
        padding: 0 1.25rem;
    }

    .galerija__header {
        margin-bottom: 1.75rem;
    }

    .galerija__slider-outer {
        padding: 0; /* bez prostora za strelice */
    }

    .galerija__arrow {
        display: none;
    }

    .galerija__slide {
        flex: 0 0 100%;
    }

}

/* ============================================
   RECENZIJE SEKCIJA — responzivnost
   Dodati na kraj assets/css/responzivnost.css
   ============================================ */

/* ============================================
   TABLET — 940px i manje (2 kartice)
   ============================================ */
@media (max-width: 940px) {

    .recenzije {
        padding: 4rem 0 5rem;
    }

    .recenzije__container {
        padding: 0 1.5rem;
    }

    .recenzije__header {
        margin-bottom: 2.5rem;
    }

    /* 2 kartice */
    .review-card {
        flex: 0 0 calc((100% - 1 * 1rem) / 2);
    }

    .recenzije__rating-pill {
        flex-wrap: wrap;
        justify-content: center;
    }

}

/* ============================================
   MOBILNI — 600px i manje (1 kartica)
   ============================================ */
@media (max-width: 600px) {

    .recenzije {
        padding: 3rem 0 4rem;
    }

    .recenzije__container {
        padding: 0 1.25rem;
    }

    .recenzije__header {
        margin-bottom: 2rem;
    }

    /* 1 kartica */
    .review-card {
        flex: 0 0 100%;
    }

    .recenzije__rating-text {
        white-space: normal;
        text-align: center;
    }

    .recenzije__controls {
        gap: 0.75rem;
    }

    .recenzije__google-btn {
        font-size: 0.875rem;
        padding: 0.75rem 1.5rem;
    }

}

/* ============================================
   SMJEŠTAJ SEKCIJA — responzivnost
   Dodati na kraj assets/css/responzivnost.css
   ============================================ */

/* ============================================
   TABLET — 940px i manje
   ============================================ */
@media (max-width: 940px) {

    .smjestaj {
        padding: 4rem 0 5rem;
    }

    .smjestaj__container {
        padding: 0 1.5rem;
    }

    .smjestaj__header {
        margin-bottom: 2rem;
        max-width: 100%;
    }

    /* Stack: carousel gore, kartica dolje */
    .smjestaj__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .smjestaj__card {
        padding: 1.5rem;
    }

}

/* ============================================
   MOBILNI — 600px i manje
   ============================================ */
@media (max-width: 600px) {

    .smjestaj {
        padding: 3rem 0 4rem;
    }

    .smjestaj__container {
        padding: 0 1.25rem;
    }

    .smjestaj__header {
        margin-bottom: 1.75rem;
    }

    .smjestaj__title {
        font-size: 1.75rem;
    }

    .smjestaj__carousel-wrap {
        border-radius: 0.875rem;
        /* aspect-ratio ostaje 4/3 — funkcioniše na mobilnom */
    }

    .smjestaj__img-caption {
        font-size: 0.875rem;
    }

    .smjestaj__card {
        padding: 1.25rem;
    }

    .smjestaj__card-title {
        font-size: 1.25rem;
    }

    .smjestaj__amenity {
        font-size: 0.875rem;
    }

    /* Kontakt dugmad — puni width na mobilnom */
    .smjestaj__contact-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .smjestaj__btn-tel,
    .smjestaj__btn-wa {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Pills — mogu se prelamati */
    .smjestaj__pills {
        gap: 0.375rem;
    }

    .smjestaj__pill {
        font-size: 0.75rem;
        padding: 0.3rem 0.75rem;
    }

}

/* ============================================
   O NAMA SEKCIJA — responzivnost
   Dodati na kraj assets/css/responzivnost.css
   ============================================ */

/* ============================================
   TABLET — 940px i manje
   ============================================ */
@media (max-width: 940px) {

    .o-nama {
        padding: 4rem 0 5rem;
    }

    .o-nama__container {
        padding: 0 1.5rem;
    }

    .o-nama__grid {
        gap: 3rem;
    }

    .o-nama__img-wrap {
        max-width: 100%;
    }

}

/* ============================================
   MOBILNI — 600px i manje (1 kolona, slika ispod)
   ============================================ */
@media (max-width: 600px) {

    .o-nama {
        padding: 3rem 0 4rem;
    }

    .o-nama__container {
        padding: 0 1.25rem;
    }

    /* Stack — tekst gore, slika dolje */
    .o-nama__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Slika ide na dno — order */
    .o-nama__right {
        order: 2;
        justify-content: center;
    }

    .o-nama__left {
        order: 1;
    }

    .o-nama__title {
        font-size: 2rem;
    }

    .o-nama__body {
        font-size: 1rem;
        margin-bottom: 2rem;
        max-width: 100%;
    }

    .o-nama__contact {
        max-width: 100%;
    }

    .o-nama__img-wrap {
        max-width: 100%;
        aspect-ratio: 4 / 3; /* Na mobilnom malo šira slika */
        border-radius: 0.875rem;
    }

}

/* ============================================
   FOOTER — responzivnost
   Dodati na kraj assets/css/responzivnost.css
   ============================================ */

/* ============================================
   TABLET — 940px i manje (2 kolone)
   ============================================ */
@media (max-width: 940px) {

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 3rem 0;
    }

    .footer__container {
        padding: 0 1.5rem;
    }

    /* Brand kolona zauzima punu širinu */
    .footer__col--brand {
        grid-column: 1 / -1;
    }

}

/* ============================================
   MOBILNI — 600px i manje (1 kolona)
   ============================================ */
@media (max-width: 600px) {
    .footer__container {
        padding: 0 1.25rem;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem 0;
    }

    .footer__col--brand {
        grid-column: auto;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: center;
        gap: 0.375rem;
        padding: 1rem 0;
    }

    .footer__social {
        gap: 0.5rem;
    }

}



/* P R A V N E --- I N F O R M A C I J E */
/* ============================================
   RESPONZIVNOST
   ============================================ */
@media (max-width: 940px) {
    .legal-page__container {
        padding: 2.5rem 1.5rem 4rem;
    }
}

@media (max-width: 600px) {
    .legal-page__container {
        padding: 2rem 1.25rem 3rem;
    }

    .legal-title {
        font-size: 1.75rem;
    }

    .legal-content__h2 {
        font-size: 1.25rem;
        margin-top: 1.75rem;
    }

    .legal-content__intro,
    .legal-content__p,
    .legal-content__list li {
        font-size: 0.9375rem;
    }
}
/* ============================================
   NAVBAR — RESPONZIVNOST POPRAVKE
   ============================================ */

/* Breakpoint za navbar — povećan na 1100px jer linkovi ne staju */
@media (max-width: 1100px) {
    .navbar__nav {
        display: none;
    }
    .navbar__actions .btn-rezervacija {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    .navbar__inner {
        gap: 0;
        justify-content: space-between;
    }
}

/* Na wide screenu — smanji gap i font da stanu svi linkovi */
@media (min-width: 1101px) {
    .navbar__list {
        gap: 0.05rem;
    }
    .navbar__link {
        font-size: 1rem;
        padding: 0.35rem 0.5rem;
    }
}

/* ============================================
   SKIPERI — SVE KARTICE ISTA VISINA
   ============================================ */

/* Desktop — sve kartice iste visine u gridu */
@media (min-width: 941px) {
    .skiperi__grid {
        align-items: start;
    }
    .skiper-card {
        height: 100%;
    }
    .skiper-card__img-wrap {
        aspect-ratio: 3 / 4;
        width: 100%;
    }
}

/* Tablet — 2 kolone, treća centrirana */
@media (max-width: 940px) {
    .skiperi__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        align-items: start;
    }
    .skiper-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 380px;
        margin: 0 auto;
        width: 100%;
    }
    .skiper-card__img-wrap {
        aspect-ratio: 3 / 4;
    }
}

/* Mobilni — 1 kolona */
@media (max-width: 600px) {
    .skiperi__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .skiper-card:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }
    .skiper-card__img-wrap {
        aspect-ratio: 4 / 5;
    }
}

/* ============================================
   SMJEŠTAJ — DUGMAD RESPONZIVNOST
   ============================================ */

/* Na manjim desktop/tablet ekranima — dugmad u kolonu */
@media (max-width: 1100px) and (min-width: 601px) {
    .smjestaj__contact-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .smjestaj__btn-tel,
    .smjestaj__btn-wa {
        width: 100%;
        justify-content: center;
        font-size: 0.8125rem;
        padding: 0.7rem 0.75rem;
        white-space: normal;
        text-align: center;
        min-width: 0;
    }
}

/* Mobilni — već definisano, samo osiguraj */
@media (max-width: 600px) {
    .smjestaj__contact-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .smjestaj__btn-tel,
    .smjestaj__btn-wa {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
        min-width: 0;
    }
}

/* ============================================
   GENERAL — Sprječi overflow na svim elementima
   ============================================ */
@media (max-width: 1100px) {
    * {
        min-width: 0;
    }
    .smjestaj__card {
        overflow: hidden;
    }
    .smjestaj__grid {
        grid-template-columns: 1fr;
    }
}