/**
 * Мобильный модуль — раздел «Арт мастерская» (/workshops/)
 * Подключается дополнительно к workshops.css и catalog-v2-mobile.css
 */

@media (max-width: 768px) {
    .ws-body {
        -webkit-tap-highlight-color: transparent;
        padding-bottom: 0;
    }

    .ws-page {
        padding: 12px 14px calc(24px + env(safe-area-inset-bottom));
    }

    /* ===== Hero ===== */
    .ws-hero {
        grid-template-columns: 1fr;
        margin: 0 0 12px;
        padding: 16px;
        gap: 14px;
        border-radius: 18px;
        overflow: visible;
    }

    .ws-hero__title {
        font-size: 22px;
        line-height: 1.32;
        margin-bottom: 2px;
        padding-top: 0;
        padding-right: 0;
    }

    .ws-hero__line {
        display: block;
    }

    .ws-hero__art {
        display: inline;
        margin-right: 0.22em;
        padding-right: 0.1em;
    }

    .ws-hero__subtitle {
        font-size: 13px;
        line-height: 1.45;
    }

    .ws-hero__decor {
        display: none !important;
    }

    .ws-hero__main {
        padding-right: 0;
    }

    .ws-promo {
        padding: 16px;
        border-radius: 14px;
    }

    .ws-promo__text {
        font-size: 13px;
    }

    /* Скрываем десктопную панель фильтров в закрытой шторке */
    .ws-filters-sheet:not(.is-open) .ws-filters-sheet__body {
        display: none !important;
    }

    .ws-filters-sheet.is-open .ws-filters-sheet__body {
        display: block !important;
    }

    .ws-filters-sheet:not(.is-open) .v2-filters-sheet-header,
    .ws-filters-sheet:not(.is-open) .ws-filters-sheet__footer {
        display: none !important;
    }

    .ws-filters-sheet.is-open .v2-filters-sheet-header {
        display: flex !important;
    }

    .ws-filters-sheet.is-open .ws-filters-sheet__footer {
        display: flex !important;
    }

    .ws-filters-sheet.is-open {
        display: flex !important;
        flex-direction: column;
    }

    .ws-filters-sheet__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
    }

    /* ===== Мобильная панель поиска (база — catalog-v2-mobile.css) ===== */
    .ws-mobile-toolbar {
        display: flex;
    }

    .ws-mobile-filter-hint {
        display: block;
    }

    .ws-filters__search-desktop {
        display: none !important;
    }

    .ws-filter-reset {
        display: none !important;
    }

    /* ===== Шторка фильтров ===== */
    .ws-filters-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 190;
        transform: translateY(105%);
        transition: transform var(--v2-dur) var(--v2-ease);
        max-height: min(88vh, 720px);
        overflow: hidden;
        pointer-events: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .ws-filters-sheet.is-open {
        transform: translateY(0);
        pointer-events: auto;
    }

    .ws-filters-sheet .workshops-filters {
        border-radius: 0;
        max-height: none;
        overflow: visible;
        margin: 0;
        padding: 12px 16px 4px;
        background: #fff;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none;
        border: none;
    }

    .ws-filters-sheet .ws-filters__row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ws-filters-sheet .v2-field .v2-input,
    .ws-filters-sheet .v2-field .v2-select {
        min-height: 44px;
        font-size: 16px;
    }

    .ws-filters-sheet__footer.v2-filter-actions {
        flex-shrink: 0;
        position: static;
        justify-content: stretch;
        gap: 12px;
        margin-top: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--v2-border);
        background: #fff;
    }

    .ws-filters-sheet__footer .v2-btn-reset,
    .ws-filters-sheet__footer .v2-btn-apply {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        justify-content: center;
    }

    body.ws-filters-open {
        overflow: hidden;
    }

    /* ===== Быстрые фильтры (тип + дата) ===== */
    .ws-mobile-quick-filters {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .ws-mobile-quick-filters .v2-select {
        min-height: 44px;
        font-size: 16px;
    }

    .ws-type-mobile-field,
    .ws-date-mobile-field {
        display: block;
    }

    .ws-type-desktop {
        display: none !important;
    }

    .ws-date-desktop {
        display: none !important;
    }

    /* ===== Карточки ===== */
    .workshops-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }

    .workshop-card {
        border-radius: 16px;
        content-visibility: auto;
        contain-intrinsic-size: auto 420px;
    }

    .workshop-card__media {
        aspect-ratio: 16 / 9;
    }

    .workshop-card-content {
        padding: 14px;
    }

    .workshop-card-title {
        font-size: 16px;
    }

    .workshop-card-description {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .workshop-card-footer {
        gap: 10px;
        padding-top: 12px;
    }

    .workshop-card-price .v2-card__price-value {
        font-size: 17px;
    }

    .workshop-card-price .v2-card__price-label {
        font-size: 11px;
    }

    .workshop-card-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .workshop-card-actions .ws-card-btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 44px;
        padding: 12px 14px;
        font-size: 14px;
        white-space: normal;
        line-height: 1.25;
    }

    .workshop-card-title .workshop-title-link {
        display: block;
        padding: 2px 0;
    }

    .workshop-card-footer .ws-card-btn--register,
    .workshop-card-footer .btn-register:not(.closed) {
        background: #7c69ef;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* ===== Сообщения ===== */
    .workshops-payment-message {
        font-size: 14px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .empty-state {
        margin-top: 24px;
        padding: 28px 20px;
    }

    /* ===== Модалка записи ===== */
    .modal-overlay.ws-register-modal {
        padding: 0;
        align-items: flex-end;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(17, 24, 39, 0.5);
    }

    .ws-register-modal__dialog {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 20px 20px 0 0;
        background: #fff;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: wsModalSlideUp 0.28s ease-out;
    }

    .ws-register-modal__header {
        padding: 20px 16px 14px;
    }

    .ws-register-modal__title {
        font-size: 18px;
        padding-right: 32px;
    }

    .ws-register-modal__form {
        padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
    }

    .ws-register-modal__message {
        padding: 0 16px;
    }

    .ws-register-modal__form .form-group input:not([type="checkbox"]),
    .participant-row__name,
    .participant-row__age {
        min-height: 48px;
        font-size: 16px;
    }

    .ws-register-checkbox input[type="checkbox"] {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        max-width: 22px;
        max-height: 22px;
        margin-top: 1px;
    }

    .ws-register-checkbox input[type="checkbox"]:checked::after {
        left: 6px;
        top: 2px;
    }

    .participant-row {
        grid-template-columns: minmax(0, 1fr) 72px 44px;
        gap: 6px;
    }

    .participant-row__remove {
        height: 48px;
        width: 44px;
    }

    .ws-register-modal__actions {
        position: sticky;
        bottom: 0;
        margin-top: 16px;
        padding-top: 12px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 24%);
    }

    .ws-register-modal__actions .btn-primary,
    .ws-register-modal__actions .btn-ghost {
        width: 100%;
        min-height: 48px;
    }

    .ws-register-modal__actions .btn-primary {
        background: #7c69ef;
        border: none;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal-overlay {
        padding: 0;
        align-items: flex-end;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(17, 24, 39, 0.5);
    }

    .modal {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        margin: 0;
        border-radius: 20px 20px 0 0;
        padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
        background: #fff;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: wsModalSlideUp 0.28s ease-out;
    }

    @keyframes wsModalSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0.6;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal h2 {
        font-size: 18px;
    }

    .form-group input,
    .form-group select {
        min-height: 48px;
        font-size: 16px;
    }

    .form-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .form-actions .btn-primary,
    .form-actions .btn-register,
    .form-actions .btn-secondary {
        width: 100%;
        min-height: 48px;
    }

    .btn-primary,
    .btn-register:not(.closed),
    .btn-secondary {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .btn-primary,
    .btn-register:not(.closed) {
        background: #7c69ef;
        border: none;
    }

    .btn-secondary {
        background: #fff;
        border: 1px solid var(--v2-border);
        color: #374151;
    }

    /* ===== Страница просмотра ===== */
    .workshop-view {
        padding: 12px 0 calc(100px + env(safe-area-inset-bottom));
    }

    .back-link {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .workshop-view-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 28px;
        padding-top: 0;
    }

    .workshop-view-image img,
    .workshop-view-image-placeholder {
        max-height: 260px;
        border-radius: 16px;
    }

    .workshop-view-content h1 {
        font-size: 24px;
    }

    .workshop-view-subtitle {
        font-size: 14px;
    }

    .workshop-view-footer {
        padding: 16px;
        border-radius: 16px;
    }

    .workshop-view-facts {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 24px 0 28px;
    }

    .fact-card {
        padding: 14px;
    }

    .fact-value {
        font-size: 14px;
    }

    .workshop-view-section {
        margin-top: 24px;
        padding: 18px 16px;
        border-radius: 16px;
    }

    .workshop-view-section h2 {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .workshop-view-description {
        font-size: 15px;
        line-height: 1.65;
    }

    .workshop-view-cta-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--v2-border);
        box-shadow: 0 -4px 20px rgba(17, 24, 39, 0.08);
        z-index: 100;
    }

    .workshop-view-cta-bottom .ws-card-btn {
        max-width: none;
    }

    /* Скрываем дублирующую кнопку в шапке карточки на мобильных */
    .workshop-view-actions .ws-card-btn {
        display: none;
    }

    /* ===== Kanikuly banner ===== */
    .kanikuly-banner {
        padding: 10px 0;
    }

    .kanikuly-banner-content {
        padding: 0 12px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .kanikuly-banner-title {
        font-size: 14px;
    }

    .kanikuly-banner-desc {
        font-size: 12px;
    }

    .kanikuly-banner-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .ws-hero__title {
        font-size: 22px;
    }

    .workshop-view-facts {
        grid-template-columns: 1fr;
    }
}