/* Mobile + tablet optimization layer for Pesula site.
   This file only overrides layout/spacing, it does not change PHP/Twig logic. */

:root {
    --mobile-pad: 16px;
}

/* Prevent horizontal page overflow from wide cards/tables/iframes */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

/* Tablet */
@media (max-width: 1100px) {
    .container,
    .wrap,
    .section-inner,
    .hero-inner {
        width: min(100% - 32px, 980px) !important;
    }

    .hero,
    section {
        scroll-margin-top: 80px;
    }

    .hero-grid,
    .contact-section,
    .prices-section .tables,
    .tables {
        gap: 18px !important;
    }

    .hero-card,
    .booking-card,
    .contact-card,
    .map-card,
    .table-card,
    .card {
        border-radius: 16px !important;
    }
}

/* Main mobile layout */
@media (max-width: 820px) {
    body {
        font-size: 15px;
        line-height: 1.45;
    }

    .container,
    .wrap,
    .section-inner,
    .hero-inner {
        width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    header,
    .site-header,
    .header {
        position: relative !important;
        padding: 12px var(--mobile-pad) !important;
    }

    header nav,
    .site-header nav,
    .header nav,
    .nav {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    header nav a,
    .site-header nav a,
    .header nav a,
    .nav a {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.68);
        font-size: 13px !important;
        line-height: 1;
        white-space: nowrap;
    }

    .hero {
        padding-top: 24px !important;
        padding-bottom: 28px !important;
    }

    .hero-grid,
    .contact-section,
    .prices-section .tables,
    .tables,
    .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    h1 {
        font-size: clamp(30px, 9vw, 44px) !important;
        line-height: .98 !important;
        letter-spacing: -0.05em !important;
    }

    h2 {
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1.05 !important;
    }

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

    p,
    .muted,
    .lead {
        font-size: 15px !important;
    }

    .hero-actions,
    .actions,
    .buttons,
    .button-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .btn,
    button,
    .button,
    .action-btn,
    input[type="submit"] {
        min-height: 46px !important;
        width: 100%;
        justify-content: center;
        touch-action: manipulation;
    }

    .hero-card,
    .booking-card,
    .contact-card,
    .map-card,
    .table-card,
    .card {
        padding: 18px !important;
        border-radius: 16px !important;
    }

    /* Booking stepper/forms */
    .step-booking-card {
        margin-top: 18px !important;
    }

    .booking-form,
    form {
        max-width: 100%;
    }

    label {
        font-size: 14px;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100%;
        min-height: 46px !important;
        font-size: 16px !important; /* prevents iOS zoom */
        border-radius: 10px !important;
    }

    textarea {
        min-height: 86px !important;
    }

    .booking-steps,
    .steps,
    .step-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .booking-step,
    .step-tab,
    .step {
        min-width: 0 !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        text-align: center;
    }

    /* Calendar */
    .calendar,
    .booking-calendar,
    .calendar-grid {
        max-width: 100%;
        overflow: hidden;
    }

    .calendar-grid {
        gap: 5px !important;
    }

    .calendar-day,
    .day-button,
    .date-button {
        min-height: 40px !important;
        padding: 6px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }

    .time-grid,
    .times-grid,
    .available-times {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .time-grid button,
    .times-grid button,
    .available-times button,
    .time-button {
        min-height: 42px !important;
        padding: 0 6px !important;
        font-size: 13px !important;
    }

    /* Price cards and tables */
    .prices-section .table-card,
    .table-card {
        overflow: hidden !important;
    }

    .prices-section .table-wrap,
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    table {
        width: 100%;
        min-width: 620px;
        font-size: 14px;
    }

    th,
    td {
        padding: 10px 8px !important;
    }

    /* Contact + map */
    .contact-card,
    .map-card.map-card-google,
    .map-card {
        min-height: auto !important;
        height: auto !important;
    }

    .google-map-frame {
        height: 320px !important;
        min-height: 320px !important;
    }

    /* Language globe: keep it usable but less intrusive on mobile */
    .language-switcher {
        right: 10px !important;
        bottom: 10px !important;
        top: auto !important;
        z-index: 980 !important;
    }
}

/* Small phones */
@media (max-width: 520px) {
    :root {
        --mobile-pad: 12px;
    }

    .container,
    .wrap,
    .section-inner,
    .hero-inner {
        width: calc(100% - 20px) !important;
    }

    header,
    .site-header,
    .header {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    header nav,
    .site-header nav,
    .header nav,
    .nav {
        gap: 6px !important;
    }

    header nav a,
    .site-header nav a,
    .header nav a,
    .nav a {
        min-height: 32px;
        padding: 0 8px;
        font-size: 12px !important;
    }

    .hero-card,
    .booking-card,
    .contact-card,
    .map-card,
    .table-card,
    .card {
        padding: 15px !important;
    }

    .booking-steps,
    .steps,
    .step-tabs {
        grid-template-columns: 1fr 1fr !important;
    }

    .time-grid,
    .times-grid,
    .available-times {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .payment-choice span {
        padding: 12px !important;
    }

    .payment-choice strong {
        font-size: 14px !important;
    }

    .payment-choice em {
        font-size: 12px !important;
    }

    .google-map-frame {
        height: 280px !important;
        min-height: 280px !important;
    }

    table {
        min-width: 560px;
    }

    th,
    td {
        font-size: 13px !important;
    }
}

/* Very narrow phones */
@media (max-width: 380px) {
    h1 {
        font-size: 30px !important;
    }

    .time-grid,
    .times-grid,
    .available-times {
        grid-template-columns: 1fr 1fr !important;
    }

    .calendar-day,
    .day-button,
    .date-button {
        min-height: 36px !important;
        font-size: 12px !important;
    }

    .language-switcher::before {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }
}

/* Tablet landscape: two columns where it makes sense */
@media (min-width: 821px) and (max-width: 1180px) {
    .hero-grid,
    .contact-section {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .prices-section .tables,
    .tables {
        grid-template-columns: 1fr !important;
    }

    .booking-card {
        max-width: 100%;
    }

    .google-map-frame {
        min-height: 390px !important;
        height: 390px !important;
    }
}