/**
 * Hawaii Boat Tours — Mobile / Tablet Responsive Overrides
 * =============================================================================
 *
 * Centralizovani CSS koji rešava sva mobile/tablet pitanja na ČITAVOM sajtu.
 * Učitava se POSLE hawaii.css i hawaii-tailwind.css, pa override-uje sve
 * fixed pixel vrednosti iz Hawaii templejta.
 *
 * Breakpoint-i (industry standard):
 *   - 1024px  → tablet landscape / small laptop
 *   - 768px   → tablet portrait
 *   - 640px   → large mobile
 *   - 480px   → standard mobile
 *   - 375px   → small mobile (iPhone SE)
 *
 * Pokriva:
 *   1. Globalni layout container (px-[90px] preveliko za mobile)
 *   2. Hero sekcije (h-[275px], naslov 45px)
 *   3. Section padding (py-[75px], py-[97px])
 *   4. Tipografija — h1/h2/h3 sizes
 *   5. Grid layouts (3-col → 2-col → 1-col)
 *   6. Footer (4-col → 2-col → 1-col)
 *   7. Tour cards (kompaktni padding, fluid visine)
 *   8. Booking widget i checkout
 *   9. Buttons i form input touch targets (min 44px)
 *  10. Tabovi (Detail page) → scroll horizontal
 *  11. Modali i lightbox
 *
 * @author Web Center
 * @version 1.0.0 — 2026-06-01 (sveobuhvatna mobile optimizacija)
 */

/* =============================================================================
   1. GLOBALNI CONTAINER PADDINGI
   Hawaii koristi `px-[90px]` na max-w-[1440px] kontejnerima što je preveliko
   za uske ekrane. Override-ujemo na 20px → 16px → 12px po breakpoint-u.
   ============================================================================= */
@media (max-width: 1024px) {
    .max-w-\[1440px\].mx-auto.px-\[90px\],
    [class*="max-w-[1440px]"][class*="px-[90px]"] {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 768px) {
    .max-w-\[1440px\].mx-auto.px-\[90px\],
    [class*="max-w-[1440px]"][class*="px-[90px]"] {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 480px) {
    .max-w-\[1440px\].mx-auto.px-\[90px\],
    [class*="max-w-[1440px]"][class*="px-[90px]"] {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =============================================================================
   2. HERO SEKCIJE (h-[275px] + h1 text-[45px])
   Hero ima fixed visinu i veliki naslov koji preteže na uske ekrane.
   ============================================================================= */
@media (max-width: 768px) {
    section.relative.h-\[275px\],
    section[class*="h-[275px]"] {
        height: 200px;
        margin-top: 80px;
    }

    section[class*="h-[275px]"] h1 {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 480px) {
    section.relative.h-\[275px\],
    section[class*="h-[275px]"] {
        height: 180px;
        margin-top: 70px;
    }

    section[class*="h-[275px]"] h1 {
        font-size: 24px;
        line-height: 32px;
    }
}

/* =============================================================================
   3. SECTION PADDING (py-[75px], py-[97px] → kompaktnije)
   ============================================================================= */
@media (max-width: 1024px) {
    section[class*="py-[75px]"]:not([class*="max-md:"]) { padding-top: 56px; padding-bottom: 56px; }
    section[class*="py-[97px]"]:not([class*="max-md:"]) { padding-top: 70px; padding-bottom: 70px; }
    section[class*="py-[100px]"]:not([class*="max-md:"]) { padding-top: 70px; padding-bottom: 70px; }
    section[class*="py-[120px]"]:not([class*="max-md:"]) { padding-top: 80px; padding-bottom: 80px; }
}

@media (max-width: 768px) {
    section[class*="py-[75px]"]:not([class*="max-md:"]) { padding-top: 40px; padding-bottom: 40px; }
    section[class*="py-[97px]"]:not([class*="max-md:"]) { padding-top: 50px; padding-bottom: 50px; }
    section[class*="py-[100px]"]:not([class*="max-md:"]) { padding-top: 50px; padding-bottom: 50px; }
    section[class*="py-[120px]"]:not([class*="max-md:"]) { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 480px) {
    section[class*="py-[75px]"]:not([class*="max-md:"]) { padding-top: 32px; padding-bottom: 32px; }
    section[class*="py-[97px]"]:not([class*="max-md:"]) { padding-top: 40px; padding-bottom: 40px; }
    section[class*="py-[100px]"]:not([class*="max-md:"]) { padding-top: 40px; padding-bottom: 40px; }
    section[class*="py-[120px]"]:not([class*="max-md:"]) { padding-top: 48px; padding-bottom: 48px; }
}

/* =============================================================================
   4. TIPOGRAFIJA — h2 (text-[45px]) i ostali naslovi
   ============================================================================= */
@media (max-width: 1024px) {
    h2[class*="text-[45px]"]:not([class*="max-md:"]) {
        font-size: 36px;
        line-height: 42px;
    }
    h2[class*="text-[40px]"]:not([class*="max-md:"]) {
        font-size: 32px;
        line-height: 40px;
    }
    h3[class*="text-[32px]"]:not([class*="max-md:"]) {
        font-size: 26px;
        line-height: 34px;
    }
}

@media (max-width: 768px) {
    h2[class*="text-[45px]"]:not([class*="max-md:"]) {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: 0.5px;
    }
    h2[class*="text-[40px]"]:not([class*="max-md:"]) {
        font-size: 26px;
        line-height: 34px;
    }
    h3[class*="text-[32px]"]:not([class*="max-md:"]),
    h3[class*="text-[24px]"]:not([class*="max-md:"]) {
        font-size: 20px;
        line-height: 28px;
    }
    p[class*="text-[16px]"]:not([class*="max-md:"]) {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    h2[class*="text-[45px]"]:not([class*="max-md:"]) {
        font-size: 24px;
        line-height: 32px;
    }
}

/* =============================================================================
   5. FOOTER — 4-kolone na desktop → 2-col tablet → 1-col mobile
   ============================================================================= */
@media (max-width: 1024px) {
    footer .grid.grid-cols-4,
    footer [class*="grid-cols-4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 40px !important;
    }
}

@media (max-width: 640px) {
    footer .grid.grid-cols-4,
    footer [class*="grid-cols-4"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    footer .logo-wrap,
    footer img[alt*="logo" i] {
        margin-bottom: 16px;
    }
}

/* =============================================================================
   6. TOUR-CARD — kompaktnija unutar grid-a, fluid slike
   ============================================================================= */
@media (max-width: 768px) {
    .tour-card .h-\[247px\] { height: 200px !important; }
    .tour-card img[class*="h-[247px]"] { height: 200px !important; }
    .tour-card a[class*="text-[24px]"] {
        font-size: 18px !important;
        line-height: 24px !important;
    }
    .tour-card .card-start-time {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    .tour-card .px-4 { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 480px) {
    .tour-card .h-\[247px\] { height: 180px !important; }
    .tour-card img[class*="h-[247px]"] { height: 180px !important; }
    .tour-card a[class*="text-[24px]"] {
        font-size: 17px !important;
        line-height: 23px !important;
    }
    /* Fire badge i "Booked X" - kraći padding */
    .tour-card .absolute.top-0.left-0 {
        padding: 4px 8px !important;
    }
    .tour-card .absolute.top-0.left-0 span {
        font-size: 11px !important;
    }
}

/* =============================================================================
   7. BUTTONS — touch-friendly min 44px height (WCAG / Apple HIG)
   ============================================================================= */
@media (max-width: 768px) {
    a[class*="px-[40px]"][class*="py-[18px]"],
    a[class*="px-[36px]"][class*="py-[16px]"],
    button[class*="px-[40px]"],
    .btn-primary,
    .tour-card a[class*="bg-[#d4af37]"],
    .tour-card a[class*="bg-[#25D366]"] {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 24px;
        padding-right: 24px;
        font-size: 14px;
    }

    /* Tour card BOOK NOW / CHAT WITH US — fluid 2-col gridd */
    .tour-card .grid.grid-cols-2 {
        gap: 8px;
    }
    .tour-card .grid.grid-cols-2 a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
        letter-spacing: 0.3px;
    }
}

/* =============================================================================
   8. FORM INPUTS — touch-friendly visine + sigurna širina
   ============================================================================= */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px !important; /* preventire iOS Safari zoom-in na focus */
    }
    textarea {
        min-height: 100px;
    }
    .form-field,
    .field {
        margin-bottom: 16px;
    }
}

/* =============================================================================
   9. BOOKING WIDGET (Hawaii inline na detail page)
   ============================================================================= */
@media (max-width: 1024px) {
    .hawaii-booking-inline,
    .hawaii-booking-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .hawaii-booking-inline .grid.grid-cols-2,
    .hawaii-booking-inline .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .hawaii-booking-inline .step-title,
    .hawaii-booking-wrap .step-title {
        font-size: 20px !important;
        line-height: 26px !important;
    }
    .hawaii-booking-inline .pax-stepper input,
    .hawaii-booking-wrap .pax-stepper input {
        width: 60px !important;
    }
    .hawaii-booking-inline .pax-stepper button {
        min-width: 40px;
        min-height: 40px;
    }
}

/* =============================================================================
   10. BOOKING CHECKOUT (checkout.php — Stepper + form panels)
   ============================================================================= */
@media (max-width: 1024px) {
    .booking-checkout .grid.grid-cols-\[1fr_400px\],
    .booking-checkout [class*="grid-cols-[1fr_"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .booking-summary-card {
        position: static !important;
        margin-top: 24px;
    }
}

@media (max-width: 768px) {
    .booking-stepper {
        flex-wrap: wrap;
        gap: 8px;
    }
    .booking-stepper .step {
        font-size: 12px;
    }
    .booking-stepper .step-number {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
}

/* =============================================================================
   11. TABBED NAVIGATION (Tour Detail page tabovi)
   ============================================================================= */
@media (max-width: 768px) {
    [data-tabs] .tab-buttons-wrap {
        display: flex !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    [data-tabs] .tab-buttons-wrap::-webkit-scrollbar { display: none; }
    [data-tabs] .tab-button {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* =============================================================================
   12. BLOG DETAIL — paragraph + headings mobile spacing
   ----------------------------------------------------------------------------
   2026-06-01: Stari `.blog-share-float` i date badge overrides uklonjeni jer
   blog-detail.php više ne koristi te klase (refaktorisan u `.blog-article-grid`
   + `.blog-share-aside` + `.blog-date-badge` koji su definisani u hawaii.css
   sa pravilnim media query-jima). Zadržavamo samo prose typography overrides.
   ============================================================================= */
@media (max-width: 768px) {
    /* Article paragraph + list font-size shrink za mobile */
    .hawaii-blog-prose p,
    .hawaii-blog-prose ul,
    .hawaii-blog-prose ol {
        font-size: 15px !important;
        line-height: 24px !important;
    }
    .hawaii-blog-prose h2 {
        font-size: 22px !important;
        line-height: 30px !important;
        margin-top: 32px !important;
        margin-bottom: 16px !important;
    }
}

/* =============================================================================
   13. GALLERY (asymmetric grid → 1 column na mobile)
   ============================================================================= */
@media (max-width: 1024px) {
    .gallery-asymmetric-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .gallery-asymmetric-grid > * {
        height: auto !important;
        min-height: 240px;
    }
}

@media (max-width: 640px) {
    .gallery-asymmetric-grid {
        grid-template-columns: 1fr !important;
    }
    .gallery-asymmetric-grid > * {
        min-height: 220px;
    }
}

/* =============================================================================
   14. DESTINATIONS + DESTINATION DETAIL
   `.destinations-grid` se koristi u destinations.php — definicija je samo u
   hawaii-template inline, pa je donosimo ovde sa per-breakpoint kolonama.
   ============================================================================= */
.destinations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.destination-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}
.destination-card-link:hover {
    transform: translateY(-4px);
}

@media (max-width: 1024px) {
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .destinations-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .destination {
        min-height: auto !important;
    }
}

/* =============================================================================
   15. CONTACT page — info grid + form layout
   ============================================================================= */
@media (max-width: 1024px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    .contact-form-wrap {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .contact-info-grid {
        grid-template-columns: 1fr !important;
    }
    .contact-social-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* =============================================================================
   16. TESTIMONIALS — reviews grid
   ============================================================================= */
@media (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }
    .testimonial-card {
        padding: 24px !important;
    }
}

/* =============================================================================
   17. PLOVILA — gallery sa lightbox
   ----------------------------------------------------------------------------
   2026-06-01: Stari mobile override forsirao `grid-template-columns: 2 1fr`
   i fixed `height: 140px !important` na slikama — to je razbijalo aspect-
   ratio koji sad upravlja layoutom u `pages/plovila.php` inline `<style>`.
   Override je uklonjen jer per-page CSS sad pravilno handle-uje sve break-
   point-e (1024 → stack columns, 575.98 → 1 column small grid). Sivi back-
   ground oko slika je takođe nestao jer `aspect-ratio` osigurava da slike
   uvijek fill-uju container (object-fit: cover).
   ============================================================================= */

/* =============================================================================
   18. ABOUT page — two-section image+text layout
   ============================================================================= */
@media (max-width: 1024px) {
    .about-section-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .about-section-grid img {
        width: 100% !important;
        max-height: 360px;
        object-fit: cover;
    }
}

/* =============================================================================
   19. HOME page — featured tours, about, gallery, map sections
   ============================================================================= */
@media (max-width: 1024px) {
    .home-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    .home-tours-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    /* Hero slideshow visine — tablet */
    .home-hero-hawaii,
    section[class*="h-[750px]"]:not([class*="max-md:"]),
    section[class*="h-[768px]"]:not([class*="max-md:"]) {
        height: 600px !important;
    }
}

@media (max-width: 768px) {
    .home-hero-hawaii,
    section[class*="h-[750px]"]:not([class*="max-md:"]),
    section[class*="h-[768px]"]:not([class*="max-md:"]) {
        height: 520px !important;
    }
    /* Hero h1 + buttons mobile */
    .home-hero-hawaii h1 {
        font-size: 32px !important;
        line-height: 42px !important;
    }
    .home-hero-hawaii .gold-gradient,
    .home-hero-hawaii a[class*="h-[60px]"] {
        height: 48px !important;
        font-size: 16px !important;
        width: 100% !important;
        max-width: 320px;
    }
}

@media (max-width: 640px) {
    .home-features-grid,
    .home-tours-grid {
        grid-template-columns: 1fr !important;
    }
    .home-hero-hawaii,
    section[class*="h-[750px]"]:not([class*="max-md:"]),
    section[class*="h-[768px]"]:not([class*="max-md:"]) {
        height: 480px !important;
    }
    .home-hero-hawaii h1 {
        font-size: 26px !important;
        line-height: 34px !important;
    }
}

/* =============================================================================
   20. HEADER / NAV — mobile menu polish + logo centering
   Header logo `<a>` koristi `absolute left-[90px] top-[15px]` u markup-u.
   Na mobile-u logo treba da bude vertikalno centriran u nav-u (h: auto)
   i sa kompaktnijom lijevom marginom (20px umesto 90px). Hamburger meni
   već je vertikalno centriran preko `top:50% translateY(-50%)` u hawaii.css.
   ============================================================================= */
@media (max-width: 1024px) {
    nav.fixed.top-0 {
        height: 80px !important;
        min-height: 80px;
        padding-top: 0;
        padding-bottom: 0;
    }
    /* Logo wrapper — vertikalno centriran sa finom levom marginom */
    nav a.absolute.left-\[90px\].top-\[15px\],
    nav a.absolute.left-\[90px\] {
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    /* Logo img dimensions — prepravljen scaling iz hawaii.css */
    nav .w-\[112px\] {
        width: 56px !important;
        height: 56px !important;
    }
    /* Hamburger meni — fino pomeren bliže ivici sa centrnim alignment-om */
    .mobile-menu-button {
        right: 20px !important;
    }
    /* Hero overlap pomeren */
    section.mt-\[143px\] {
        margin-top: 80px !important;
    }
}

@media (max-width: 480px) {
    nav.fixed.top-0 {
        height: 70px !important;
        min-height: 70px;
    }
    nav a.absolute.left-\[90px\].top-\[15px\],
    nav a.absolute.left-\[90px\] {
        left: 16px !important;
    }
    nav .w-\[112px\] {
        width: 48px !important;
        height: 48px !important;
    }
    .mobile-menu-button {
        right: 16px !important;
    }
    section.mt-\[143px\] {
        margin-top: 70px !important;
    }
}

@media (max-width: 768px) {
    .mobile-menu {
        padding: 24px 20px;
    }
    .mobile-menu a {
        font-size: 16px;
        padding: 12px 0;
    }
    .mobile-menu-close {
        top: 16px;
        right: 16px;
    }
}

/* =============================================================================
   MOBILE MENU CTA — BOOK NOW + WhatsApp dugmad sa proper paddings.
   Pair sa `app/views/partials/header.php` mobile-contact-info CTA row.
   `.mobile-cta-row` ograničava ukupnu širinu i centrira; `.mobile-cta-btn`
   daje generous padding-y i padding-x za touch-friendly target (~52px height,
   28px horizontal). Tekst dobija "vazduh" sa svih strana.
   ============================================================================= */
.mobile-cta-row {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.mobile-cta-btn {
    flex: 1 1 0;
    min-width: 140px;
    min-height: 52px;
    padding: 14px 24px;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.15s ease;
}
.mobile-cta-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.mobile-cta-btn:active {
    transform: translateY(0);
}
@media (max-width: 480px) {
    .mobile-cta-row {
        flex-direction: column;
        gap: 12px !important;
        max-width: 320px;
    }
    .mobile-cta-btn {
        flex: 1 1 100%;
        width: 100%;
        min-height: 56px;
        padding: 16px 28px;
    }
}

/* =============================================================================
   21. BREADCRUMB — wrap na mobile, kompaktan font
   ============================================================================= */
@media (max-width: 768px) {
    .breadcrumb,
    nav[aria-label="breadcrumb"] {
        font-size: 12px;
        line-height: 18px;
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* =============================================================================
   22. BOOKING SUCCESS page (booking-success.php)
   ============================================================================= */
@media (max-width: 1024px) {
    .booking-success-wrap {
        grid-template-columns: 1fr !important;
    }
    .booking-success-card {
        padding: 24px !important;
    }
}

@media (max-width: 768px) {
    .booking-success-actions {
        flex-direction: column;
        gap: 12px;
    }
    .booking-success-actions a {
        width: 100%;
        text-align: center;
    }
}

/* =============================================================================
   23. LIGHTBOX (Hawaii vanilla) — bolja kontrola na touch
   ============================================================================= */
@media (max-width: 768px) {
    .hawaii-lightbox__counter {
        font-size: 13px !important;
    }
    .hawaii-lightbox__caption {
        font-size: 13px !important;
        padding: 12px 16px !important;
    }
    .hawaii-lightbox__prev,
    .hawaii-lightbox__next {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }
    .hawaii-lightbox__close {
        width: 44px !important;
        height: 44px !important;
        top: 12px !important;
        right: 12px !important;
    }
}

/* =============================================================================
   24. UTILITY — body i bottom-safe za mobile keyboard / notch
   ============================================================================= */
@media (max-width: 768px) {
    /* Sprečiti horizontal scroll */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    /* Safe-area-inset za iPhone notch */
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* =============================================================================
   25. PRINT — booking voucher print
   ============================================================================= */
@media print {
    nav, footer, .mobile-menu, .booking-stepper, .blog-share-aside {
        display: none !important;
    }
    body {
        background: white !important;
    }
}

/* =============================================================================
   26. NAV INITIAL-FRAME ANIM SKIP — sprečava flash-shrink animacije
   pri prvom paint-u stranice. Klasa `nav.no-initial-anim` je dodana inline
   u markup (HTML render) i uklonjena nakon prvog `requestAnimationFrame` u
   hawaii-ui.js. Tako:
     1) initial-load: ako je page scrollovan (> 50px), .scrolled se primeni
        ODMAH bez animacije — header se renderuje već u shrink-state-u.
     2) sve naknadne scroll promene → SMOOTH transition (0.6s cubic-bezier).

   Bez ovog flag-a, scroll-down na page load triggera vizibilan "expand →
   shrink" animaciju koja izgleda neuredno. Pair sa `hawaii-ui.js` →
   `initNavInitialAnimFlag()` koji uklanja klasu posle 1 RAF.
   ============================================================================= */
nav.no-initial-anim,
nav.no-initial-anim *,
nav.no-initial-anim *::before,
nav.no-initial-anim *::after {
    transition: none !important;
    animation: none !important;
}

/* =============================================================================
   27. TOURS LIST PAGE — paddings na sekcijama
   Tailwind v3 arbitrary klase (`pt-[60px]`, `pb-[80px]`, `pb-[100px]`) nisu
   uvijek pre-generisane u `hawaii-tailwind.css` bundle-u ako Tailwind build
   nije re-pokrenut nakon dodavanja novih klasa u .php fajlove. Da ne ovisimo
   o re-buildu, definišemo paddings ovde direktno na ID-evima sekcija.
   Pair sa `app/views/tours/list.php` — Tour archive Hawaii templejt.
   ============================================================================= */
#groupTours {
    padding-bottom: 80px;
}
#privateTours {
    padding-top: 60px;
    padding-bottom: 100px;
}
@media (max-width: 768px) {
    #groupTours {
        padding-bottom: 40px;
    }
    #privateTours {
        padding-top: 40px;
        padding-bottom: 60px;
    }
}

/* =============================================================================
   28. DESKTOP SKALIRANJE (≥1025px) — proporcionalno za 1200px container
   ---------------------------------------------------------------------------
   Dizajn je crtan pixel-perfect za 1440px canvas, a kasnije je content container
   sveden na 1200px (paritet sa grebenboattours.com — vidi hawaii.css "CONTENT
   WIDTH"). Pošto je container SADA fiksiran na 1200px na SVIM desktop širinama,
   display fontovi (naslovi, cijene, naslovi kartica) crtani za 1440px djeluju
   "preglomazno" — naročito u užim 3/4-col gridovima (ture, blog, destinacije).

   Zato ovdje skaliramo display tipografiju proporcionalno (~×0.83) i kompaktnije
   section paddinge — KONZISTENTNO na cijelom desktopu (≥1025px), bez gornje
   granice 1440 (container je svuda 1200px, pa veličine moraju biti iste na
   laptopu i na 27" monitoru). Body tekst (14–16px) se NE dira (čitljivost).

   VRIJEDNOSTI (desktop → ≤1024 global tier u sekcijama 1/3/4):
     h2 text-[45px]: 45 → [38] → 28 ;  card naslov 24 → [20] ;  cijena 32 → [26]

   Selektori namjerno NE koriste `:not([class*="max-md:"])` (heroji/sekcije imaju
   inline max-md: klase koje vrijede tek ≤767px, pa ih moramo obuhvatiti); attr
   specifičnost (npr. h2[class*="text-[45px]"] = 0,1,1) pobjeđuje .text-[45px].
   ============================================================================= */
@media (min-width: 1025px) {
    /* Hero naslovi (inner stranice: section.h-[275px] h1, text-[45px]/[52px]) */
    section[class*="h-[275px]"] h1 {
        font-size: 40px;
        line-height: 48px;
    }
    /* Home hero h1 (text-[35px]) */
    section[class*="h-[750px]"] h1[class*="text-[35px]"] {
        font-size: 30px;
        line-height: 42px;
    }

    /* Section naslovi */
    h2[class*="text-[45px]"],
    h3[class*="text-[45px]"] {
        font-size: 38px;
        line-height: 46px;
    }
    h2[class*="text-[40px]"] {
        font-size: 34px;
        line-height: 42px;
    }
    h2[class*="text-[32px]"],
    h3[class*="text-[32px]"] {
        font-size: 28px;
        line-height: 36px;
    }
    /* Section pod-naslovi / labele (grupne/privatne ture, blog/destinacije h3) */
    h2[class*="text-[24px]"],
    h3[class*="text-[24px]"] {
        font-size: 20px;
        line-height: 27px;
    }
    /* Stats brojevi (text-[48px]) */
    [class*="text-[48px]"] {
        font-size: 38px;
        line-height: 38px;
    }

    /* Page-title h1 (text-[45px]) VAN heroja — npr. tour detail naslov
       (div.mt-[143px], ne section.h-[275px]) i booking hero (section.h-[343px],
       koji ne hvata `section[class*="h-[275px]"] h1` gore). Ujednačava se sa
       h2[text-[45px]]→38. Za h-[275px] heroje (jednaka specifičnost 0,1,1)
       source-order pravilo ispod pobjeđuje pa i oni padaju 40→38 (zanemarivo). */
    h1[class*="text-[45px]"] {
        font-size: 38px;
        line-height: 46px;
    }
    /* Tour detail "Reviews" naslov (text-[49px]) */
    h2[class*="text-[49px]"] {
        font-size: 40px;
        line-height: 48px;
    }
    /* Tour detail "Related tours" / pod-sekcije (text-[36px]) */
    h2[class*="text-[36px]"] {
        font-size: 30px;
        line-height: 38px;
    }

    /* ---- CARD display fontovi (1200px container → uži 3/4-col gridovi) ---- */
    /* Tour card: naslov 24→20, cijena 32→26 */
    .tour-card a[class*="text-[24px]"] {
        font-size: 20px;
        line-height: 26px;
    }
    .tour-card [class*="text-[32px]"] {
        font-size: 26px;
        line-height: 28px;
    }
    /* Destination card naslov (4-col, vrlo uske kartice): 32→24.
       Veća specifičnost od generičkog h3[text-[32px]]→28 gore. */
    h3.destination-title[class*="text-[32px]"] {
        font-size: 24px;
        line-height: 30px;
    }

    /* Section vertikalni padding — kompaktniji */
    section[class*="py-[75px]"]:not([class*="max-md:"])  { padding-top: 60px; padding-bottom: 60px; }
    section[class*="py-[97px]"]:not([class*="max-md:"])  { padding-top: 76px; padding-bottom: 76px; }
    section[class*="py-[100px]"]:not([class*="max-md:"]) { padding-top: 78px; padding-bottom: 78px; }
    section[class*="py-[120px]"]:not([class*="max-md:"]) { padding-top: 92px; padding-bottom: 92px; }
}

/* Nav kompaktnost SAMO gdje se prikazuje desktop nav (>1200px). Ispod 1200px
   hawaii.css već prebacuje na hamburger. NB: container bočni padding NE diramo
   ovdje — globalni 32px gutter (hawaii.css "CONTENT WIDTH" sekcija, paritet sa
   grebenboattours.com) vrijedi na cijelom desktopu, pa bi 64px override ovdje
   napravio nekonzistentnu širinu sadržaja na laptopima vs >1440px. Nema gornje
   granice (1440) — container je svuda 1200px, pa nav visina mora biti ista na
   svim desktop širinama (inače 128px laptop vs 143px >1440px). */
@media (min-width: 1201px) {
    /* Kompaktniji nav: 143 → 128px. Logo (112px, top-[15px]) staje u 128px
       (donji rub 127px), pa ga samo re-centriramo (top 15 → 8). Sav sadržaj
       čisti nav preko `mt-[143px]` (inner stranice/tour/booking) ILI `.margin-top`
       klase (home hero, base 143px) → oba spuštamo na 128 da nav i sadržaj
       ostanu poravnati (inače 15px bijeli razmak ispod nava). */
    nav[class*="h-[143px]"] {
        height: 128px;
    }
    nav a[class*="top-[15px]"] {
        top: 8px;
    }
    [class*="mt-[143px]"],
    .margin-top {
        margin-top: 128px;
    }
}