/*
 * KaNa Travels & Holidays
 * Mobile + Tablet Premium Responsive Polish
 *
 * SCOPE:
 * 320px - 1024px only
 *
 * IMPORTANT:
 * This file intentionally does NOT modify desktop layout.
 */

@media (max-width: 1024px) {

    /* =========================================================
       1. GLOBAL MOBILE / TABLET RESET
       ========================================================= */

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    img,
    video,
    iframe {
        max-width: 100%;
    }

    img {
        height: auto;
    }

    /* Prevent accidental horizontal overflow */
    .wp-site-blocks,
    .site,
    .site-content,
    .wp-block-group,
    .wp-block-cover,
    .wp-block-columns,
    .wp-block-column {
        max-width: 100%;
    }


    /* =========================================================
       2. MAIN CONTENT WIDTH
       ========================================================= */

    .wp-site-blocks > *,
    .site-main,
    .content-area,
    .entry-content {
        max-width: 100%;
    }

    .wp-block-group,
    .wp-block-cover,
    .wp-block-columns {
        min-width: 0;
    }


    /* =========================================================
       3. KUBIO / WORDPRESS DEFAULT SPACING CONTROL
       ========================================================= */

    [data-kubio] .wp-block-group,
    [data-kubio] .wp-block-cover,
    [data-kubio] .wp-block-columns {
        min-height: auto;
    }

    [data-kubio] .wp-block-spacer {
        max-height: 70px;
    }

    /* Remove extremely large generated spacing */
    [data-kubio] [style*="padding-top: 100px"],
    [data-kubio] [style*="padding-top:100px"],
    [data-kubio] [style*="padding-bottom: 100px"],
    [data-kubio] [style*="padding-bottom:100px"] {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    [data-kubio] [style*="margin-top: 100px"],
    [data-kubio] [style*="margin-top:100px"],
    [data-kubio] [style*="margin-bottom: 100px"],
    [data-kubio] [style*="margin-bottom:100px"] {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }


    /* =========================================================
       4. SECTION RHYTHM
       ========================================================= */

    .wp-block-group,
    section {
        scroll-margin-top: 90px;
    }

    .kana-section,
    .kana-count-section,
    .kana-booking-section,
    .kana-why-section,
    .kana-explore-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    /* =========================================================
       5. HEADINGS
       ========================================================= */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    h1 {
        font-size: clamp(30px, 7vw, 46px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em;
    }

    h2 {
        font-size: clamp(26px, 5.8vw, 38px) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.02em;
    }

    h3 {
        font-size: clamp(21px, 4.8vw, 30px) !important;
        line-height: 1.2 !important;
    }

    h4 {
        font-size: clamp(18px, 4vw, 24px) !important;
        line-height: 1.25 !important;
    }

    h5 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    h6 {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }


    /* =========================================================
       6. BODY TEXT
       ========================================================= */

    p {
        font-size: clamp(14px, 1.8vw, 16px);
        line-height: 1.65;
        overflow-wrap: break-word;
    }

    .wp-block-paragraph {
        margin-bottom: 1em;
    }


    /* =========================================================
       7. MAIN CONTAINER PADDING
       ========================================================= */

    .wp-block-group > .wp-block-group__inner-container,
    .wp-block-cover__inner-container,
    .container,
    .site-container {
        width: 100%;
        max-width: 100%;
    }


    /* =========================================================
       8. COLUMNS
       ========================================================= */

    .wp-block-columns {
        gap: 24px !important;
        margin-bottom: 0 !important;
    }

    .wp-block-column {
        min-width: 0;
    }


    /* =========================================================
       9. BUTTONS
       ========================================================= */

    .wp-element-button,
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .btn {
        min-height: 46px;
        border-radius: 10px;
        line-height: 1.2;
        white-space: normal;
    }

    .wp-block-buttons {
        gap: 10px !important;
    }

    .wp-block-button {
        max-width: 100%;
    }


    /* =========================================================
       10. IMAGES
       ========================================================= */

    img {
        display: block;
        max-width: 100%;
    }

    .wp-block-image {
        margin-left: 0;
        margin-right: 0;
    }

    .wp-block-image img {
        width: 100%;
        height: auto;
    }


    /* =========================================================
       11. HERO / BANNER
       ========================================================= */

    .wp-block-cover {
        overflow: hidden;
    }

    .wp-block-cover__inner-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .wp-block-cover h1,
    .wp-block-cover h2,
    .wp-block-cover h3 {
        max-width: 720px;
    }


    /* =========================================================
       12. KANA BOOKING MODULES
       ========================================================= */

    #embark-bus-search-box.kbu-hero,
    #embark-bus-search-box,
    .embark-bus-search,
    .embark-flight-search,
    .embark-hotel-search,
    .embark-search-box {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    #embark-bus-search-box.kbu-hero {
        margin-left: 0;
        margin-right: 0;
    }

    .embark-search-box input,
    .embark-search-box select,
    .embark-search-box button,
    .embark-bus-search input,
    .embark-bus-search select,
    .embark-flight-search input,
    .embark-flight-search select,
    .embark-hotel-search input,
    .embark-hotel-search select {
        max-width: 100%;
    }


    /* =========================================================
       13. FORM ELEMENTS
       ========================================================= */

    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px !important;
    }

    textarea {
        min-height: 120px;
    }

    input,
    select {
        min-height: 46px;
    }


    /* =========================================================
       14. COUNT / ACHIEVEMENT SECTION
       ========================================================= */

    .kana-count-section {
        width: 100%;
        overflow: hidden;
    }

    .kana-count-container {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .kana-count-item {
        min-width: 0;
        padding: 20px 12px;
        text-align: center;
    }

    .kana-count-number {
        font-size: clamp(28px, 7vw, 42px);
        line-height: 1;
    }

    .kana-count-label {
        font-size: 13px;
        line-height: 1.4;
    }


    /* =========================================================
       15. TOUR / PACKAGE CARDS
       ========================================================= */

    .tour-packages-grid,
    .kana-tour-grid,
    .tour-package-grid {
        width: 100%;
        max-width: 100%;
    }

    .tour-package-card,
    .kana-tour-card {
        min-width: 0;
        overflow: hidden;
    }

    .tour-package-card img,
    .kana-tour-card img {
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }


    /* =========================================================
       16. CARD TEXT
       ========================================================= */

    .tour-package-card h3,
    .kana-tour-card h3 {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    .tour-package-card p,
    .kana-tour-card p {
        font-size: 14px;
        line-height: 1.55;
    }


    /* =========================================================
       17. BOOKING CTA
       ========================================================= */

    .kana-booking-cta {
        width: 100%;
        overflow: hidden;
    }

    .kana-booking-cta h2 {
        margin-bottom: 12px;
    }

    .kana-booking-cta p {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }


    /* =========================================================
       18. FOOTER
       ========================================================= */

    footer,
    .site-footer {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    footer .wp-block-columns,
    .site-footer .wp-block-columns {
        gap: 26px !important;
    }

    footer p,
    footer li,
    footer a {
        font-size: 14px;
        line-height: 1.55;
    }


    /* =========================================================
       19. LINKS
       ========================================================= */

    [data-kubio] a {
        overflow-wrap: break-word;
    }


    /* =========================================================
       20. PREVENT LONG CONTENT OVERFLOW
       ========================================================= */

    table {
        max-width: 100%;
    }

    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
    }
}


/* =============================================================
   MOBILE ONLY
   320px - 767px
   ============================================================= */

@media (max-width: 767px) {

    /* Main page horizontal breathing room */
    .wp-site-blocks > *,
    .entry-content > * {
        max-width: 100%;
    }

    /* Compact section spacing */
    section {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Premium mobile spacing */
    .wp-block-group {
        padding-left: 0;
        padding-right: 0;
    }

    /* Headings */
    h1 {
        font-size: clamp(28px, 9vw, 38px) !important;
    }

    h2 {
        font-size: clamp(24px, 7vw, 32px) !important;
    }

    h3 {
        font-size: clamp(20px, 5.5vw, 26px) !important;
    }

    /* Paragraph */
    p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Columns */
    .wp-block-columns {
        display: flex;
        flex-direction: column;
        gap: 20px !important;
    }

    .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Buttons */
    .wp-block-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .wp-block-button,
    .wp-block-button__link {
        width: 100%;
    }

    /* Count */
    .kana-count-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .kana-count-item {
        padding: 18px 8px;
    }

    /* Booking */
    #embark-bus-search-box.kbu-hero {
        border-radius: 16px;
    }

    /* Footer */
    footer .wp-block-columns,
    .site-footer .wp-block-columns {
        display: flex;
        flex-direction: column;
        gap: 22px !important;
    }

    /* Remove accidental empty visual blocks */
    .wp-block-spacer {
        max-height: 40px;
    }
}


/* =============================================================
   SMALL PHONES
   320px - 479px
   ============================================================= */

@media (max-width: 479px) {

    h1 {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    p {
        font-size: 14px;
        line-height: 1.55;
    }

    .kana-count-container {
        gap: 10px;
    }

    .kana-count-item {
        padding: 16px 6px;
    }

    .kana-count-number {
        font-size: 28px;
    }

    .kana-count-label {
        font-size: 12px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* =============================================================
   TABLET / iPAD
   768px - 1024px
   ============================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    h1 {
        font-size: clamp(34px, 5vw, 48px) !important;
    }

    h2 {
        font-size: clamp(28px, 4vw, 40px) !important;
    }

    h3 {
        font-size: clamp(22px, 3vw, 30px) !important;
    }

    p {
        font-size: 15px;
        line-height: 1.65;
    }

    .wp-block-columns {
        gap: 24px !important;
    }

    .kana-count-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .kana-count-item {
        padding: 22px 12px;
    }

    /* Keep booking forms from touching screen edges */
    #embark-bus-search-box.kbu-hero,
    .embark-flight-search,
    .embark-hotel-search,
    .embark-search-box {
        width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
    }
}


/* =============================================================
   iPAD LANDSCAPE
   ============================================================= */

@media (min-width: 900px) and (max-width: 1024px) {

    .wp-block-columns {
        gap: 28px !important;
    }

    .wp-block-cover__inner-container {
        padding-left: 28px;
        padding-right: 28px;
    }
}


/* =============================================================
   ACCESSIBILITY
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}