/* =========================================================
   PlanGO — мобильная адаптация.
   Подключается после style.css и переопределяет только то,
   что мешает на узких экранах. Десктоп не затрагивается.
   Точки: 900px (планшет), 720px (крупный телефон), 560px (телефон).
   ========================================================= */

/* ---------- 900px: планшеты и ниже ---------- */
@media (max-width: 900px) {
    html, body { max-width: 100%; }
    body { overflow-x: hidden; }

    .container { padding: 0 16px; }
    .nav-container { padding: 0 14px; }
    .navbar { height: 58px; }
    .logo-text { font-size: 20px; }
    .section { padding: 44px 0; }

    /* Поля ввода: 16px, иначе iOS сам зумит страницу */
    .form-control, input, select, textarea { font-size: 16px; }
    .btn, .trip-btn-secondary, .form-control { min-height: 44px; }

    /* Главная */
    .hero-slider { height: 88vh; }
    .hero-content h1 { font-size: clamp(26px, 8.4vw, 38px); line-height: 1.15; }
    .hero-content p { font-size: 15px; margin-bottom: 22px; }
    .hero-buttons { margin-top: 24vh; gap: 10px; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
    .templates-section { padding: 24px 0 36px; }
    .about-grid { gap: 18px; }

    /* Вход/регистрация и модалки */
    .auth-card {
        max-width: 100%;
        margin: 76px 0 32px;
        padding: 24px 20px;
        border-radius: 20px;
    }
    .auth-card h2 { font-size: 24px; }
    .modal-content { width: calc(100vw - 28px); max-width: 440px; padding: 20px; }

    /* Дашборд */
    .dashboard-header { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
    .dashboard-header h1 { font-size: 28px; }
    .trips-grid { grid-template-columns: 1fr; }
    .trip-card { padding: 18px; }

    /* Форма создания поездки */
    .trip-form-card {
        margin: 16px 12px !important;
        padding: 22px 16px !important;
        border-radius: 20px !important;
    }

    /* ---------- Поездка ---------- */
    .trip-header { grid-template-columns: 1fr; gap: 14px; }
    .trip-heading h2 { font-size: 24px !important; }
    .route-workspace { gap: 14px; }
    .day-panel { min-height: 0; }
    .map-box { height: 320px !important; padding: 6px; }
    .map-box #map, #map { height: 100% !important; min-height: 280px; }

    .days-ribbon { scroll-snap-type: x proximity; }
    .day-tab { min-width: 112px; scroll-snap-align: start; }

    .day-toolbar { padding: 16px 16px 12px !important; gap: 10px; }
    .day-heading h3 { font-size: 20px !important; }
    .day-toolbar-actions { align-items: flex-start; width: 100%; }
    .day-rebuild-button { width: 100%; justify-content: center; }

    .timeline-list { padding: 14px 14px 18px !important; }
    .timeline-item { padding: 12px !important; gap: 12px !important; }
    .timeline-time { width: 46px !important; }
    .timeline-content h4 { font-size: 15px; }

    .flights-block { margin: 16px 0 18px !important; padding: 16px !important; }
    .flights-body { grid-template-columns: 1fr; }

    /* ---------- Бюджет ---------- */
    .budget-layout { gap: 16px; }
    .budget-card { padding: 16px; overflow-x: auto; }
    .budget-header { gap: 8px; }
    .budget-header h2 { font-size: 22px !important; }
    .expense-table { font-size: 13px; }
    .expense-table th { padding: 10px 8px; }
    .expense-table td { padding: 12px 8px; }
    .expense-table th, .expense-table td { word-break: break-word; }

    /* ---------- Планер ---------- */
    .planner-card { padding: 16px; }
    .planner-hero h2 { font-size: 22px; }
    .travel-info-section { padding: 16px; }

    /* ---------- Полный план поездки ---------- */
    .pl-wrap { padding: 78px 14px 40px; }
    .pl-title { font-size: 22px; }
    .pl-head { gap: 12px; }
    .pl-actions { width: 100%; }
    .pl-actions .pl-btn { flex: 1; text-align: center; justify-content: center; min-height: 44px; }
    .pl-card { padding: 16px; border-radius: 16px; }
    .pl-summary { grid-template-columns: 1fr 1fr; }
    .pl-table { font-size: 11.5px; }
    .pl-table th, .pl-table td { padding: 7px 4px; }
    .pl-table td:nth-child(2), .pl-table td:nth-child(4) { white-space: nowrap; }
    .pl-table td:first-child { word-break: normal; overflow-wrap: break-word; }
    .pl-slot { grid-template-columns: 66px 1fr; gap: 8px; }
    .pl-day { padding: 12px; }

    /* Страницы без .container (поделиться, бюджет) — поля по краям */
    .share-card {
        margin: 16px 14px !important;
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }
    .share-link-row { display: flex; flex-direction: column; gap: 8px; }
    .share-link-row input { font-size: 13px; }
    .share-link-row .btn { width: 100%; }
    .budget-header, .budget-layout, .pro-lock { padding-left: 14px; padding-right: 14px; }
    body > div[style*="margin-bottom: 16px"] { padding: 0 14px; }
}

/* ---------- 720px: крупные телефоны ---------- */
@media (max-width: 720px) {
    .pl-summary { grid-template-columns: 1fr; }
    .pl-metric strong { font-size: 20px; }

    .expense-table { font-size: 12.5px; }
    .expense-table th { font-size: 10.5px; letter-spacing: 0.3px; }
    .expense-table th, .expense-table td { padding: 10px 6px; }

    .planner-hero h2 { font-size: 20px; }
    .travel-info-grid { grid-template-columns: 1fr; }
}

/* ---------- 560px: телефоны ---------- */
@media (max-width: 560px) {
    .container { padding: 0 14px; }

    /* Кнопки поездки: сетка 2×N, генерация и билеты на всю ширину */
    .trip-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        width: 100%;
        align-items: stretch !important;
    }
    .trip-actions > * { width: 100%; }
    #generateRouteButton { grid-column: 1 / -1; }
    .trip-actions > *:nth-child(2) { grid-column: 1 / -1; } /* Авиабилеты — длинная подпись */
    .trip-btn-secondary {
        padding: 10px 12px !important;
        font-size: 13px !important;
        justify-content: center;
        text-align: center;
        line-height: 1.25;
    }

    .trip-heading h2 { font-size: 22px !important; }
    .map-box { height: 280px !important; }

    .day-tab { min-width: 104px; }

    .budget-header h2 { font-size: 20px !important; }
    .budget-stats { flex-direction: column; align-items: flex-start; gap: 4px; }
    .budget-amount { font-size: 24px; }

    .pl-wrap { padding: 70px 12px 32px; }
    .pl-title { font-size: 20px; }
    .pl-head { flex-direction: column; align-items: flex-start; }
    .pl-checklist { columns: 1; }
    .pl-hotel { font-size: 14px; }

    .trip-form-card { padding: 18px 14px !important; }
    .step-content h2 { font-size: 21px !important; }
    /* Футер формы: три кнопки в ряд, без переносов слов */
    .trip-form-footer {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 22px !important;
        padding-top: 16px !important;
    }
    .trip-form-footer > div { display: flex; gap: 8px; flex: 1 1 100%; }
    .trip-form-footer .btn,
    .trip-form-footer > .btn {
        flex: 1 1 auto;
        min-height: 44px;
        white-space: nowrap;
        font-size: 14px;
        padding: 10px 14px;
    }
    .trip-form-footer > .btn { flex: 1 1 100%; margin-left: 0 !important; }

    /* Последняя кнопка в сетке — на всю ширину, чтобы не было «сироты» */
    .trip-actions > *:last-child { grid-column: 1 / -1; }

    /* Лента дней: компенсируем padding контейнера ровно на 14px */
    .days-ribbon {
        margin-left: -14px !important;
        margin-right: -14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ---------- Мелкие правки для всех мобильных ---------- */
@media (max-width: 900px) {
    /* Длинные слова в заголовках не должны расширять страницу */
    h1, h2, h3, .pl-title, .trip-heading h2 { overflow-wrap: anywhere; }

    /* Горизонтальные скроллбары внутри карточек не нужны */
    .budget-card::-webkit-scrollbar, .days-ribbon::-webkit-scrollbar { height: 0; }
}