/* =============================================================================
   Mobile / Tablet Premium Polish (Faza 11)
   =============================================================================
   Single-file mobile-first polish layer that enhances all existing pages
   without touching their component CSS. Loads AFTER greben-polish.css so it
   overrides where needed.

   Breakpoints (mobile-first cascade):
     - default     → ≥ 1280px  (desktop)
     - max 1279.98 → laptops
     - max 1023.98 → tablets landscape
     - max 767.98  → tablets portrait / large phones
     - max 575.98  → phones
     - max 379.98  → small phones (iPhone SE)

   Industry references:
     - WCAG 2.5.5 AAA — touch targets ≥ 44×44 CSS px
     - Apple HIG     — 44×44 minimum tap target
     - Material 3    — 48dp minimum tap target
     - iOS Safari    — safe-area-inset-* for notch / home indicator
     - Booking.com   — sticky bottom CTA on tour detail
     - Viator        — drawer pattern for filters
     - GetYourGuide  — bottom sheet for booking on mobile
   ============================================================================= */

/* =============================================================================
   0. Global mobile baseline
   ============================================================================= */

/* Smooth scrolling but respect prefers-reduced-motion (already in greben-polish). */
html {
    /* Prevent iOS Safari font auto-resize on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* iOS momentum scroll */
    -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal overflow — common mobile bug. Single declaration on body
   instead of overflow-x: hidden on html (which breaks position: sticky). */
body {
    overflow-x: clip;
}

/* Safe area insets — iPhone notch / Android nav bar. Apply to fixed-position
   elements that go to the edge (header, sticky CTAs). */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* =============================================================================
   1. Touch targets — WCAG 2.5.5 AAA (44×44 minimum)
   =============================================================================
   Industry: Apple HIG 44pt, Material 3 48dp, WCAG AAA 44×44 CSS px.
   Apply on phones and tablets where finger input is primary. */

@media (max-width: 1023.98px) {
    /* Universal min tap target — all clickable controls. min-* so it doesn't
       break smaller decorative icons; padding bumps content to fill the box.

       NOTE: excluded from inline links inside .prose paragraphs (text content)
       and from chips/badges which have own sizing.  */
    .btn,
    .site-nav__link,
    .site-header__cta,
    .site-header__burger,
    .lang-switch__toggle,
    .site-footer__social a,
    .site-footer__legal-links a,
    .site-footer__links a,
    .home-hero__actions .btn,
    .home-hero__actions a,
    .td-booking-fab__btn,
    .td-tab__btn,
    .ce-payment-method label,
    .breadcrumb__list a,
    .pagination a,
    .pagination button,
    .lang-switch__menu a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Icon-only buttons — square tap area */
    .action-btn,
    .icon-btn,
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination-bullet,
    [data-action="close"],
    [aria-label="Close"],
    [aria-label="Open menu"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Form controls — inputs/selects/textareas need bigger tap area than
       desktop. iOS auto-zooms on focus if font-size < 16px — force 16px to
       prevent that frustration (industry standard).  */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="url"],
    select,
    textarea,
    .form-control,
    .tr-search__input,
    .tr-sort__select {
        min-height: 48px;
        font-size: 16px !important;
        padding: 0.75rem 1rem;
    }
    textarea,
    textarea.form-control {
        min-height: 96px;  /* 2x base — avoid tiny textareas */
    }

    /* Checkbox / radio — bigger hit area without growing the visual control */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
        cursor: pointer;
    }
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        cursor: pointer;
    }
}

/* =============================================================================
   2. Typography fluid scaling — mobile readability
   ============================================================================= */

@media (max-width: 767.98px) {
    /* Body text — ne ide ispod 15px (čitljivost) */
    body {
        font-size: 15px;
        line-height: 1.55;
    }
    /* Prose paragraphs imaju veći lh za lakše čitanje */
    .prose p,
    .page-body p,
    article p {
        line-height: 1.65;
    }
    /* Headings na mobile — kompaktniji line-height (display fontovi inače
       deluju "uvučeni" sa 1.6 koje je base) */
    h1, h2, h3 {
        line-height: 1.15;
    }
    h4, h5, h6 {
        line-height: 1.25;
    }
}

/* =============================================================================
   3. Container padding — mobile gutters
   =============================================================================
   Industry: 16px gutters na phone, 24px tablet, 32px desktop. */

@media (max-width: 575.98px) {
    .container,
    .container-fluid,
    .container-lg,
    .container-xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
@media (min-width: 576px) and (max-width: 1023.98px) {
    .container,
    .container-fluid {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* =============================================================================
   4. Tour archive — premium mobile filter pattern
   =============================================================================
   Industry: Viator / GetYourGuide — sticky filter bar + scroll-snap chips +
   bottom sheet for advanced filters. Mobile-first compact layout. */

@media (max-width: 767.98px) {
    /* Filter bar — sticky ispod hero-a sa kompaktnim spacing-om */
    .tr-filter-bar {
        position: sticky;
        top: var(--bc-header-h-mobile, 64px);
        z-index: 50;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(160%) blur(12px);
        -webkit-backdrop-filter: saturate(160%) blur(12px);
        border-bottom: 1px solid rgba(15, 30, 58, 0.06);
        padding: 0.6rem 0;
    }
    @supports not (backdrop-filter: blur(12px)) {
        .tr-filter-bar { background: #fff; }
    }
    .tr-filter-row {
        gap: 0.55rem !important;
    }
    .tr-filter-row--search {
        flex-direction: column;
        align-items: stretch !important;
    }
    .tr-search {
        width: 100%;
    }
    .tr-sort {
        width: 100%;
        justify-content: space-between;
    }
    .tr-sort__select {
        flex: 1;
        max-width: 220px;
    }

    /* Category chips — horizontal scroll sa snap (premium feel, gone-with-the-flow) */
    .tr-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0.25rem 0.1rem;
        margin: 0 -1rem;          /* break out of container gutters */
        padding-left: 1rem;
        padding-right: 1rem;
        scrollbar-width: none;
    }
    .tr-chips::-webkit-scrollbar { display: none; }
    .tr-chip {
        scroll-snap-align: start;
        flex-shrink: 0;
        min-height: 40px;          /* tap-friendly bez previše velikih chip-ova */
        padding: 0.55rem 1rem;
    }

    /* Grid — single column do 768px (industry standard: Booking, Airbnb,
       GetYourGuide, Viator). 2-col na mobile (480-767px) je previše uska
       po kartici — naslovi se truncate-uju, slike su male, meta info
       (pills, opis) se kompresuje. 1 column → veće slike, čitljiv naslov,
       čitljiv opis, jasan CTA, bolji touch targets. */
    .tours-archive .tr-grid,
    .tours-archive .tour-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* =============================================================================
   5. Tour detail — booking widget + tabs polish
   ============================================================================= */

@media (max-width: 767.98px) {
    /* Tabs — scroll-snap horizontal scroll (već imamo desktop bar) */
    .td-tabs__list,
    .td-tabs nav {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.25rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }
    .td-tabs__list::-webkit-scrollbar,
    .td-tabs nav::-webkit-scrollbar { display: none; }
    .td-tab__btn {
        scroll-snap-align: start;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Gallery — full-width, no horizontal margin */
    .td-gallery,
    .td-hero-gallery {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
    }
    .td-gallery .swiper,
    .td-hero-gallery .swiper {
        border-radius: 0 !important;
    }

    /* Hero gallery slide — reduce height na phone */
    .td-hero-gallery .swiper-slide img {
        height: clamp(220px, 50vw, 320px);
        object-fit: cover;
    }
}

/* =============================================================================
   6. Booking checkout — forme i summary
   ============================================================================= */

@media (max-width: 767.98px) {
    /* Checkout step layout — single column */
    .ce-checkout__layout,
    .ce-checkout-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Summary panel — pomijeri ispod forme (ne sticky aside) */
    .ce-summary,
    .ce-summary-card {
        position: static !important;
        margin-bottom: 1.25rem;
    }

    /* Payment method radio cards — bigger, more tappable */
    .ce-payment-method {
        padding: 0.85rem 1rem;
    }
    .ce-payment-method label {
        gap: 0.85rem;
    }

    /* Confirmation page — manje padding-a, krupniji ikona */
    .bk-success {
        padding: 2rem 1rem !important;
    }
    .bk-success__icon {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }
}

/* =============================================================================
   7. Sticky bottom CTA — tour detail mobile (Booking.com pattern)
   =============================================================================
   Postojeci `.td-booking-fab` ima fixed FAB; dopunjavamo:
   - Backdrop blur traka iznad njega za bolji contrast nad bilo kojim sadržajem
   - Safe-area-inset za iPhone home indicator
   - Slide-up animacija (već je u tour-detail.css, samo polish) */

@media (max-width: 767.98px) {
    .td-booking-fab {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(160%) blur(20px);
        -webkit-backdrop-filter: saturate(160%) blur(20px);
        border-top: 1px solid rgba(15, 30, 58, 0.08);
        box-shadow: 0 -8px 24px rgba(15, 30, 58, 0.08);
        z-index: 100;
        display: flex !important;
        align-items: center;
        gap: 0.75rem;
    }
    .td-booking-fab__price {
        flex: 0 0 auto;
        line-height: 1.1;
    }
    .td-booking-fab__btn {
        flex: 1;
        min-height: 48px;
        font-size: 0.95rem;
        font-weight: 700;
    }

    /* Add bottom-padding na main da FAB ne prekriva kraj sadržaja */
    body.has-booking-fab main,
    body.has-booking-fab .td-content,
    main:has(.td-booking-fab) {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

/* =============================================================================
   8. Hero (home + page) — mobile typography polish
   ============================================================================= */

@media (max-width: 767.98px) {
    /* Home hero — kompaktniji content, action area u koloni */
    .home-hero__title {
        font-size: clamp(2rem, 7vw, 2.75rem) !important;
        line-height: 1.1 !important;
    }
    .home-hero__subtitle {
        font-size: clamp(1rem, 3.2vw, 1.15rem) !important;
        line-height: 1.45;
        max-width: 540px;
    }
    .home-hero__actions {
        flex-direction: column;
        gap: 0.6rem;
        width: 100%;
        max-width: 320px;
    }
    .home-hero__actions .btn {
        width: 100%;
        min-height: 48px;
        font-size: 0.95rem;
    }

    /* Page hero (CMS pages) — već je smanjen, manji eyebrow */
    .page-hero__title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    }
    .page-hero__eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.22em !important;
    }
    .page-hero__subtitle {
        font-size: 0.95rem;
    }
}

/* =============================================================================
   9. Trust strip — dodatni polish (već većinu uradili u greben-polish)
   ============================================================================= */

@media (max-width: 379.98px) {
    /* Vrlo mala mobilna verzija (iPhone SE) — kompaktniji card */
    .trust-strip__card {
        padding: 1rem 0.85rem;
    }
    .trust-strip__stat-icon {
        width: 36px;
        height: 36px;
    }
    .trust-strip__stat-value {
        font-size: 1.45rem !important;
    }
    .trust-strip__stat-label {
        font-size: 0.72rem;
    }
}

/* =============================================================================
   10. Home sections — universal grid normalization
   =============================================================================
   Catch-all za sve home sekcije koje koriste grid bez explicit mobile rule-a. */

@media (max-width: 767.98px) {
    .home-services__grid,
    .home-features__grid,
    .home-why__grid,
    .home-stats__grid,
    .home-cards__grid,
    .home-blog__grid,
    .home-news__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}
@media (min-width: 480px) and (max-width: 767.98px) {
    /* Large phone — 2-col za grids koje to podržavaju */
    .home-services__grid,
    .home-features__grid,
    .home-why__grid,
    .home-stats__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================================================
   11. CMS pages (prose) — mobile reading polish
   ============================================================================= */

@media (max-width: 767.98px) {
    /* Premium content card overlap (greben-polish.css:1614) — manje overlap-a
       na mobile da naslov hero-a ostane vidljiv */
    .page-body .container > .prose,
    .page-body > .container {
        margin-top: -2rem !important;
        padding: 1.5rem 1.25rem !important;
        border-radius: 6px !important;
    }
    /* Prose images — full-width sa rounded corners */
    .prose img,
    .page-body img:not(.icon):not(.logo) {
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1rem 0;
    }
    /* Tables — scroll wrapper umjesto overflow (industry pattern) */
    .prose table,
    .page-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================================
   12. Footer — mobile polish
   ============================================================================= */

@media (max-width: 575.98px) {
    /* Kontakt liste — povećan tap area za telefon/email linkove */
    .site-footer__contact li a,
    .site-footer__contact li {
        min-height: 36px;
        padding: 0.25rem 0;
    }
    /* Social icons — već 40x40, dovoljno za touch (border-tap area dovoljan) */
    .site-footer__social {
        gap: 0.6rem;
    }
}

/* =============================================================================
   13. Forms (kontakt, auth, newsletter) — mobile UX
   ============================================================================= */

@media (max-width: 767.98px) {
    /* Form group — vertical spacing, label iznad inputa */
    .form-group,
    .bc-form__group,
    .ce-form-group {
        margin-bottom: 1rem;
    }
    /* Form label — bigger, više contrast */
    .form-label,
    .bc-form__label,
    label.required::after {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.35rem;
        display: inline-block;
    }
    /* Submit button — full-width na mobile */
    .bc-form__submit,
    .form-submit,
    form button[type="submit"]:not(.btn--sm):not(.btn--auto) {
        width: 100%;
        min-height: 50px;
        font-size: 1rem;
    }
    /* Newsletter inline form — postaje column */
    .home-newsletter__form {
        flex-direction: column !important;
        gap: 0.65rem !important;
    }
    .home-newsletter__input,
    .home-newsletter__btn {
        width: 100% !important;
    }
}

/* =============================================================================
   14. Modals & overlays — safe area + scroll
   ============================================================================= */

@media (max-width: 767.98px) {
    /* Generic modal — bottom sheet pattern na mobile */
    .modal.show .modal-dialog,
    .flex-modal,
    .bc-modal__dialog {
        margin: 0;
        max-width: 100% !important;
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 92vh;
        border-radius: 16px 16px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Lang switcher menu — full-width drop-down umjesto floating */
    .lang-switch__menu {
        right: -1rem !important;
        left: -1rem !important;
        min-width: auto !important;
        max-width: none !important;
    }
}

/* =============================================================================
   15. Image lazy-load + aspect-ratio enforce
   =============================================================================
   Reserviše visinu prije nego što se slika učita (sprečava CLS).
   Industry: Lighthouse Core Web Vitals — CLS ispod 0.1. */

img:not([width]):not([height]):not(.icon):not(.logo) {
    /* fallback dimensions to prevent layout shift */
    height: auto;
    max-width: 100%;
}

img[loading="lazy"] {
    content-visibility: auto;  /* skip rendering off-screen images */
}

/* =============================================================================
   16. Reduced-data mode — slow connections
   =============================================================================
   `Save-Data: on` header — disable heavy animations/parallax. */

@media (prefers-reduced-data: reduce) {
    .home-hero__slide-bg,
    .page-hero--image::before {
        animation: none !important;
        transform: none !important;
    }
}

/* =============================================================================
   17. Landscape phones (rare but breaks heroes)
   ============================================================================= */

@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
    .home-hero,
    .page-hero {
        min-height: 280px;
    }
    .home-hero__title {
        font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
    }
    .home-hero__subtitle {
        font-size: 0.95rem;
    }
    .home-hero__scroll {
        display: none;
    }
}

/* =============================================================================
   19. Booking widget v2 (.td-bk2-*) — mobile checkout polish
   =============================================================================
   Already has 2col→1col @ 991.98 and form-grid 2col→1col @ 575.98. Adds:
   - Bigger input padding na mobile za palce
   - Payment cards (radio) jasno odvojeni
   - Stepper kompaktan
   - Sticky summary CTA na dnu mobile screen-a */

@media (max-width: 991.98px) {
    /* Container manje padding-a, više sadržaja vidljivo */
    .td-bk2 .container,
    .td-bk2__container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 767.98px) {
    /* Section heading kompaktniji */
    .td-bk2-card__header {
        margin-bottom: 1rem;
    }
    .td-bk2-card__title {
        font-size: 1.1rem !important;
        line-height: 1.25;
    }
    .td-bk2-card__lead {
        font-size: 0.88rem !important;
        line-height: 1.5;
    }

    /* Form fields — generic padding/spacing override */
    .td-bk2-field {
        margin-bottom: 0.4rem;
    }
    .td-bk2-field label {
        font-size: 0.84rem !important;
        margin-bottom: 0.4rem;
        font-weight: 600;
    }
    .td-bk2-field input,
    .td-bk2-field select,
    .td-bk2-field textarea {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 0.75rem 0.95rem !important;
    }
    .td-bk2-help {
        font-size: 0.78rem !important;
        line-height: 1.4;
    }

    /* Stepper — kompaktan na mobile, broj veći za vidljivost */
    .td-bk2-stepper {
        gap: 0.5rem;
        margin-bottom: 1.25rem !important;
    }
    .td-bk2-stepper__step {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.78rem;
    }
    .td-bk2-stepper__num {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }
    .td-bk2-stepper__label {
        font-size: 0.82rem;
    }
    .td-bk2-stepper__connector {
        min-width: 12px !important;
    }

    /* Payment radio cards — vertikalno (full width) sa jasnijim odabirom */
    .td-bk2-pay-card {
        padding: 0.85rem 1rem !important;
        gap: 0.85rem !important;
    }
    .td-bk2-pay-card__icon {
        font-size: 1.5rem !important;
    }
    .td-bk2-pay-card__title {
        font-size: 0.95rem !important;
    }
    .td-bk2-pay-card__desc {
        font-size: 0.8rem !important;
        line-height: 1.4;
    }

    /* Submit button — full-width, krupna ikona */
    .td-bk2-submit,
    .td-bk2 button[type="submit"] {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    /* Close button (povratak) — kompaktan */
    .td-bk2-close {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }

    /* Urgency banner — kompaktan, vidljivost prioritet */
    .td-bk2-urgency {
        font-size: 0.84rem !important;
        padding: 0.6rem 0.9rem !important;
        gap: 0.5rem !important;
        line-height: 1.35;
    }

    /* Order summary — pomijeren ispod forme, ne sticky aside */
    .td-bk2-summary,
    .td-bk2-aside,
    .td-bk2-grid > aside {
        position: static !important;
        margin-top: 1rem !important;
        padding: 1rem !important;
    }
}

/* =============================================================================
   20. Booking success page (.bk-success-*)
   ============================================================================= */

@media (max-width: 767.98px) {
    .bk-success__container,
    .bk-success__inner {
        padding: 1.25rem 1rem !important;
    }
    .bk-success__hero {
        padding: 2rem 1rem !important;
    }
    .bk-success__check,
    .bk-success__icon {
        width: 72px !important;
        height: 72px !important;
    }
    .bk-success__details {
        padding: 1rem !important;
        font-size: 0.92rem;
    }
    .bk-success__detail-row {
        padding: 0.55rem 0 !important;
        font-size: 0.9rem;
    }
    .bk-success__cta,
    .bk-success__pay {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }
    .bk-success__cta .bk-success__btn,
    .bk-success__btn {
        width: 100% !important;
        min-height: 48px;
    }
    .bk-success__badges {
        gap: 0.4rem !important;
        flex-wrap: wrap;
    }
    .bk-success__badge {
        font-size: 0.78rem !important;
        padding: 0.35rem 0.65rem !important;
    }
}

/* =============================================================================
   21. Home CTA banner — actions column na mobile
   ============================================================================= */

@media (max-width: 767.98px) {
    .home-cta-banner {
        padding: 2rem 1rem !important;
    }
    .home-cta-banner__title {
        font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
        line-height: 1.2 !important;
    }
    .home-cta-banner__desc {
        font-size: 0.95rem !important;
        line-height: 1.5;
    }
    .home-cta-banner__actions {
        flex-direction: column !important;
        gap: 0.6rem !important;
        width: 100%;
    }
    .home-cta-banner__btn,
    .home-cta-banner__btn--primary,
    .home-cta-banner__btn--ghost {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
}

/* =============================================================================
   22. Home About — 2-col grid → 1-col na mobile
   ============================================================================= */

@media (max-width: 767.98px) {
    .home-about__grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .home-about__visual {
        order: -1;  /* slika iznad teksta na mobile (bolja UX) */
        max-height: 320px;
        overflow: hidden;
        border-radius: 8px;
    }
    .home-about__visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .home-about__text h2 {
        font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
        margin-top: 0.5rem;
    }
}

/* =============================================================================
   23. Home Stats — već se preklapa sa Trust Strip; ovaj se vidi samo ako
   admin doda staru stats-counter sekciju. 2-col na mobile, kompaktan.
   ============================================================================= */

@media (max-width: 575.98px) {
    .home-stats__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem 0.75rem !important;
    }
    .home-stats__item h3 {
        font-size: clamp(1.85rem, 7vw, 2.5rem) !important;
    }
    .home-stats__item p {
        font-size: 0.78rem !important;
        line-height: 1.3;
    }
}

/* =============================================================================
   24. Home USP / Why-choose — fluid grid + tap-friendly cards
   ============================================================================= */

@media (max-width: 767.98px) {
    .home-usp__item {
        padding: 1.25rem 1rem !important;
        text-align: center;
    }
    .home-usp__icon {
        margin: 0 auto 0.75rem !important;
        width: 60px !important;
        height: 60px !important;
    }
    .home-usp__icon i,
    .home-usp__icon svg {
        font-size: 2rem !important;
        width: 36px !important;
        height: 36px !important;
    }
    .home-usp__item h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.45rem !important;
    }
    .home-usp__item p {
        font-size: 0.88rem !important;
        line-height: 1.5;
    }
}

/* =============================================================================
   25. Home Featured tours / Blog — single-column gap polish
   ============================================================================= */

@media (max-width: 767.98px) {
    .home-featured,
    .home-blog {
        padding-block: clamp(2.5rem, 6vw, 3.5rem) !important;
    }
    .home-featured__grid,
    .home-blog__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* =============================================================================
   26. Section headings — eyebrow + title (svi home sekcije)
   ============================================================================= */

@media (max-width: 767.98px) {
    .section__eyebrow,
    .section-heading__eyebrow,
    .home-section__eyebrow {
        font-size: 0.7rem !important;
        letter-spacing: 0.2em !important;
    }
    .section__title,
    .section-heading__title,
    .home-section__title,
    .home-featured__title,
    .home-blog__title,
    .home-about__text h2,
    .home-testimonials__title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.15;
    }
    .section__subtitle,
    .home-section__subtitle {
        font-size: 0.95rem !important;
        line-height: 1.5;
    }
}

/* =============================================================================
   27. Testimonials carousel — touch swipe + bigger pagination
   ============================================================================= */

@media (max-width: 767.98px) {
    .home-testimonials {
        padding-block: clamp(2.5rem, 6vw, 3.5rem) !important;
    }
    .home-testimonials .testimonial-card {
        padding: 1.5rem 1.25rem !important;
    }
    .home-testimonials .testimonial-card__quote,
    .home-testimonials .testimonial-card p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    .home-testimonials .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 5px !important;
    }
    /* Hide swiper navigation arrows na phone — swipe je primary input */
    .home-testimonials .swiper-button-next,
    .home-testimonials .swiper-button-prev {
        display: none !important;
    }
}

/* =============================================================================
   28. Cookie consent — bottom sheet pattern (CookieConsent v3 default je OK
   ali padding/font-size treba mobile polish)
   ============================================================================= */

@media (max-width: 575.98px) {
    .cc-window,
    .cm,
    #cc-main {
        font-size: 0.88rem !important;
        line-height: 1.5;
    }
    .cm__btns,
    .cc-window .c-bn,
    #cc-main button {
        min-height: 44px !important;
        width: 100%;
        padding: 0.7rem 1rem !important;
    }
}

/* =============================================================================
   29. Booking calendar (.td-cal-modal*) — fullscreen mobile pattern
   =============================================================================
   Postojeci CSS u tour-detail.css ima mobile @ 480px (samo iPhone SE level).
   Industry standard (Booking.com, Viator): kalendar je FULLSCREEN modal na
   svim mobile uređajima ≤767px — više prostora za prst, jasniji 7-col grid,
   day cells obavezno ≥44×44 (tap target).  */

@media (max-width: 767.98px) {
    /* Modal — fullscreen umjesto floating dialog */
    .td-cal-modal {
        padding: 0 !important;
        align-items: stretch !important;
    }
    .td-cal-modal__dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        height: 100vh;
        height: 100dvh;          /* dynamic viewport — mobile address bar aware */
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .td-cal-modal__header {
        padding: 1rem 1rem 1.25rem !important;
        padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
        flex-shrink: 0;
    }
    .td-cal-modal__title {
        font-size: 1rem !important;
    }
    .td-cal-modal__close,
    .td-cal-modal__nav-btn {
        min-width: 40px;
        min-height: 40px;
    }
    .td-cal-modal__month-label {
        font-size: 1.25rem !important;
    }
    .td-cal-modal__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
    }
    .td-cal-modal__body .td-cal-grid {
        gap: 0.4rem !important;
    }
    .td-cal-modal__body .td-cal-day {
        max-width: 100% !important;  /* full-width unutar grid kolone */
        min-height: 44px;            /* WCAG tap target */
        font-size: 0.95rem !important;
        font-weight: 500;
    }
    .td-cal-modal__footer {
        padding: 0.85rem 1rem !important;
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)) !important;
        flex-shrink: 0;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }
    .td-cal-modal__btn {
        min-height: 48px;
        font-size: 0.95rem !important;
    }
}

/* Inline calendar (kad nije u modal-u — sidebar/widget) — kompaktan na phone */
@media (max-width: 575.98px) {
    #td-calendar:not(.td-cal-modal__body #td-calendar) {
        padding: 0.85rem !important;
    }
    .td-cal-grid {
        gap: 0.3rem !important;
    }
    .td-cal-day {
        min-height: 40px;
        font-size: 0.9rem;
    }
}

/* =============================================================================
   30. Time picker (.td-time-picker) — pill row scroll-snap na mobile
   ============================================================================= */

@media (max-width: 767.98px) {
    .td-time-picker {
        margin-top: 0.5rem;
    }
    .td-time-picker__list,
    .td-time-picker .td-time-pills {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }
    .td-time-picker__list::-webkit-scrollbar,
    .td-time-picker .td-time-pills::-webkit-scrollbar { display: none; }
    .td-time-picker__pill,
    .td-time-picker .td-time-pill {
        scroll-snap-align: start;
        flex-shrink: 0;
        min-height: 44px;
        padding: 0.55rem 1rem !important;
        font-size: 0.92rem;
    }
}

/* =============================================================================
   31. Auth modali — bottom-sheet pattern na svim mobilnim ≤767px
   =============================================================================
   Postojeci CSS u auth.css ima mobile @ 480px (samo phone SE). Industry
   standard: auth modali su bottom sheet na svim uređajima ≤767px (Booking,
   Airbnb), full-width sa rounded top, body-lock pri otvorenom. */

@media (max-width: 767.98px) {
    .auth-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .auth-modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 20px 20px 0 0 !important;
        padding: 1.5rem 1.25rem !important;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: authSheetUp 0.3s cubic-bezier(.2,.7,.3,1);
    }
    .auth-modal-title {
        font-size: 1.35rem !important;
    }
    .auth-modal-subtitle {
        font-size: 0.92rem !important;
    }
    .auth-form-row {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .auth-field input,
    .auth-field select {
        min-height: 48px !important;
        font-size: 16px !important;
    }
    .auth-submit-btn {
        width: 100%;
        min-height: 50px;
        font-size: 1rem !important;
    }
    .auth-header-btn {
        min-height: 38px;
        padding: 0.5rem 0.85rem !important;
    }
}
@keyframes authSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* =============================================================================
   32. Contact page (.contact-suite__*) — premium pattern (form + info + map)
   ============================================================================= */

@media (max-width: 1023.98px) {
    /* Tablet: 2-col → 1-col (form preko cijele širine, map sledi) */
    .contact-suite__grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .contact-suite__map-aside {
        order: 2;  /* karta ispod forme na manjim ekranima */
    }
}
@media (max-width: 767.98px) {
    .contact-suite {
        padding-block: clamp(2rem, 5vw, 3rem) !important;
    }
    .contact-suite__intro {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .contact-suite__eyebrow {
        font-size: 0.7rem !important;
        letter-spacing: 0.22em !important;
    }
    .contact-suite__h {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
        line-height: 1.15 !important;
    }
    .contact-suite__form,
    .contact-suite__info,
    .contact-suite__map-card {
        padding: 1.25rem 1rem !important;
        border-radius: 12px !important;
    }
    .contact-suite__form-head,
    .contact-suite__info-head {
        font-size: 1.05rem !important;
    }
    .contact-suite__form-lead,
    .contact-suite__info-lead {
        font-size: 0.88rem !important;
        line-height: 1.5;
    }
    .contact-suite__form-row {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    .contact-suite__field input,
    .contact-suite__field select,
    .contact-suite__field textarea {
        min-height: 48px;
        font-size: 16px !important;
        padding: 0.75rem 0.95rem !important;
    }
    .contact-suite__field textarea {
        min-height: 110px;
    }
    /* Quick action chips (WhatsApp, Phone, Email) — full width, stack */
    .contact-suite__quick {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }
    .contact-suite__chip {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        padding: 0.75rem 1rem !important;
        font-size: 0.92rem !important;
    }
    /* Map iframe — uniform height (industry: 280-320px) */
    .contact-suite__map-frame {
        aspect-ratio: 16 / 12 !important;
        max-height: 320px !important;
    }
    .contact-suite__privacy {
        font-size: 0.78rem !important;
        line-height: 1.5;
    }
    /* Submit button — full-width */
    .contact-suite__form button[type="submit"] {
        width: 100%;
        min-height: 50px !important;
        font-size: 1rem !important;
    }
}

/* =============================================================================
   33. Team page (.team-page__grid, .team-card__*)
   ============================================================================= */

@media (max-width: 767.98px) {
    .team-page__grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .team-card {
        text-align: center;
        padding: 1.25rem !important;
    }
    .team-card__photo {
        width: 110px !important;
        height: 110px !important;
        margin: 0 auto 0.85rem !important;
    }
    .team-card__name {
        font-size: 1.1rem !important;
    }
    .team-card__role {
        font-size: 0.85rem !important;
    }
    .team-card__body {
        font-size: 0.92rem !important;
        line-height: 1.55;
    }
}
@media (min-width: 480px) and (max-width: 767.98px) {
    .team-page__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    .team-card__photo {
        width: 96px !important;
        height: 96px !important;
    }
}

/* =============================================================================
   34. Blog index (.blog-page__grid, .blog-card__*)
   ============================================================================= */

@media (max-width: 767.98px) {
    .blog-page {
        padding-block: clamp(2rem, 5vw, 3rem) !important;
    }
    .blog-page__grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .blog-card__img-wrap {
        aspect-ratio: 16 / 10 !important;
    }
    .blog-card__body {
        padding: 1rem !important;
    }
    .blog-card__title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }
    .blog-card__excerpt {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
    }
    .blog-card__meta {
        font-size: 0.78rem !important;
        gap: 0.5rem !important;
    }
}
@media (min-width: 480px) and (max-width: 767.98px) {
    .blog-page__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

/* =============================================================================
   35. Blog detail (.blog-detail__*) — long-form polish
   ============================================================================= */

@media (max-width: 767.98px) {
    .blog-detail__hero {
        padding-block: clamp(1.5rem, 4vw, 2.5rem) !important;
    }
    .blog-detail__title {
        font-size: clamp(1.65rem, 5.5vw, 2.25rem) !important;
        line-height: 1.2 !important;
    }
    .blog-detail__meta {
        font-size: 0.82rem !important;
        gap: 0.4rem !important;
        flex-wrap: wrap;
    }
    .blog-detail__inner {
        padding: 1.25rem 1rem !important;
    }
    /* Share section — wrap na više linija, full-width buttons */
    .blog-detail__share {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-top: 1.5rem;
    }
    .blog-detail__share-label {
        font-size: 0.82rem !important;
        flex-basis: 100%;
        margin-bottom: 0.4rem;
    }
    .blog-detail__share a {
        min-width: 40px;
        min-height: 40px;
    }
}

/* =============================================================================
   36. Testimonials CMS page (.testimonials-page__grid, .testimonial-card__*)
   ============================================================================= */

@media (max-width: 767.98px) {
    .testimonials-page__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .testimonial-card {
        padding: 1.25rem 1rem !important;
    }
    .testimonial-card__quote {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.85rem;
    }
    .testimonial-card__meta {
        gap: 0.65rem !important;
    }
    .testimonial-card__avatar {
        width: 44px !important;
        height: 44px !important;
    }
    .testimonial-card__name {
        font-size: 0.92rem !important;
    }
    .testimonial-card__author {
        font-size: 0.82rem !important;
    }
    .testimonial-card__rating {
        font-size: 0.85rem !important;
    }
}

/* =============================================================================
   37. FAQ akordion (.faq-page) — kompaktan, tap-friendly headers
   ============================================================================= */

@media (max-width: 767.98px) {
    .faq-page {
        padding-block: clamp(2rem, 5vw, 3rem) !important;
    }
    /* Generic accordion patterns — pokriva details/summary i custom akordione */
    .faq-page details,
    .faq-page .faq-item,
    .faq-page .accordion-item {
        margin-bottom: 0.65rem;
        border-radius: 10px;
    }
    .faq-page details summary,
    .faq-page .faq-item__question,
    .faq-page .accordion-button {
        min-height: 56px;
        padding: 0.85rem 1rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        line-height: 1.35;
        cursor: pointer;
    }
    .faq-page details > div,
    .faq-page .faq-item__answer,
    .faq-page .accordion-body {
        padding: 0.5rem 1rem 1rem !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
}

/* =============================================================================
   38. Gallery page (.gallery-grid, .gallery-item)
   =============================================================================
   Industry: 3-2-1 col fluid grid, tap-friendly thumbnails. */

@media (max-width: 767.98px) {
    .gallery-page {
        padding-block: clamp(2rem, 5vw, 3rem) !important;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .gallery-item {
        aspect-ratio: 1 !important;
        border-radius: 6px;
        overflow: hidden;
    }
    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
@media (max-width: 379.98px) {
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }
    .gallery-item {
        aspect-ratio: 16 / 10 !important;
    }
}

/* =============================================================================
   39. Tour card — touch-device polish (hover effects neutralni)
   =============================================================================
   Hover transformacije se ne triger-uju na touch, ali transition zaostane.
   Disable hover transformacije na touch-primary uređajima. */

@media (hover: none) {
    .tc-card:hover,
    .tc-card:hover .tc-card__img,
    .tc-card:hover .tc-card__cta,
    .tc-card:hover .tc-card__cta i {
        transform: none !important;
    }
    /* Active state umjesto hover — feedback za touch */
    .tc-card:active {
        transform: scale(0.99);
        transition: transform 0.1s ease;
    }
}

/* =============================================================================
   40. Toast notifications — mobile bottom-center
   =============================================================================
   Postojeci toast je verovatno top-right (desktop). Industry: na mobile-u
   bottom-center sa safe-area-inset padding. */

@media (max-width: 767.98px) {
    .flex-toast-container,
    .toast-container,
    #toast-root {
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
        left: 1rem !important;
        right: 1rem !important;
        top: auto !important;
        align-items: stretch !important;
    }
    .flex-toast,
    .toast {
        width: 100% !important;
        max-width: none !important;
        font-size: 0.9rem !important;
    }
}

/* =============================================================================
   41. Body scroll-lock helper — kad je modal/drawer open
   =============================================================================
   Postoji već body.menu-open i body.td-sheet-open. Dodajemo univerzalni
   helper za bilo koji full-screen overlay (auth, calendar, gallery lightbox). */

body.no-scroll,
body.modal-open,
html.modal-open {
    overflow: hidden;
    touch-action: none;
}

/* =============================================================================
   42. Image gallery lightbox (ako se otvori GLightbox / Fancybox / custom)
   ============================================================================= */

@media (max-width: 767.98px) {
    .glightbox-container,
    .lightbox-overlay,
    .lb-overlay {
        padding: 0 !important;
    }
    .glightbox-container .gslide-image img,
    .lightbox img,
    .lb-image {
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        object-fit: contain !important;
    }
    .gnav,
    .lightbox-nav {
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* =============================================================================
   43. Print — clean output (sve sticky/floating skinuto)
   ============================================================================= */

@media print {
    .site-header,
    .site-footer,
    .home-hero,
    .page-hero,
    .tr-filter-bar,
    .td-booking-fab,
    .trust-strip,
    .cookieconsent,
    .home-newsletter,
    [data-no-print] {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
}