/* DeliveryPerson Mobile UX V10.13
   Mobile-first refinements for the unified header and the production homepage. */

@media (max-width: 767px) {
    html {
        max-width: 100%;
        overflow-x: hidden;
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
    }

    body,
    body.home-preview-page {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.home-preview-page *,
    body.home-preview-page *::before,
    body.home-preview-page *::after {
        box-sizing: border-box;
    }

    body.home-preview-page img,
    body.home-preview-page svg,
    body.home-preview-page video,
    body.home-preview-page canvas {
        max-width: 100%;
    }

    body.home-preview-page main,
    body.home-preview-page section,
    body.home-preview-page .container,
    body.home-preview-page .hero-grid,
    body.home-preview-page .hero-copy,
    body.home-preview-page .section-heading,
    body.home-preview-page .vacancy-filter,
    body.home-preview-page .calculator-panel,
    body.home-preview-page .reviews-layout,
    body.home-preview-page .cta-panel {
        min-width: 0;
        max-width: 100%;
    }

    body.home-preview-page .container {
        width: calc(100% - 32px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body.home-preview-page .section {
        padding: 52px 0 !important;
    }

    body.home-preview-page .section-heading,
    body.home-preview-page .section-heading.split,
    body.home-preview-page .blog-heading,
    body.home-preview-page .reviews-heading-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
    }

    body.home-preview-page .section-kicker {
        margin: 0 0 8px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: .09em !important;
    }

    body.home-preview-page .section-heading h2,
    body.home-preview-page .blog-heading h2,
    body.home-preview-page .reviews-heading-actions h2 {
        margin: 0 !important;
        font-size: clamp(28px, 8.5vw, 38px) !important;
        line-height: 1.06 !important;
        letter-spacing: -.045em !important;
    }

    body.home-preview-page .section-subtitle {
        max-width: 100% !important;
        margin: 8px 0 0 !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    body.home-preview-page .section-link,
    body.home-preview-page .section-link.outline,
    body.home-preview-page .blog-all {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 0 16px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 750 !important;
    }

    /* Hero */
    body.home-preview-page .hero {
        padding: 24px 0 20px !important;
        overflow: hidden !important;
    }

    body.home-preview-page .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
    }

    body.home-preview-page .hero-copy {
        order: 1;
        width: 100% !important;
        overflow: visible !important;
    }

    body.home-preview-page .eyebrow-pill {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
        margin: 0 0 18px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    body.home-preview-page .eyebrow-pill i {
        width: 8px !important;
        height: 8px !important;
        flex: 0 0 8px !important;
    }

    body.home-preview-page .preview-hero-title,
    body.home-preview-page .preview-hero-title--category {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
        font-size: clamp(36px, 10.6vw, 52px) !important;
        line-height: .99 !important;
        letter-spacing: -.06em !important;
    }

    body.home-preview-page .preview-hero-category,
    body.home-preview-page .preview-hero-city-line {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
    }

    body.home-preview-page .preview-hero-city-line {
        margin-top: 4px !important;
        line-height: 1.04 !important;
    }

    body.home-preview-page .hero-city-native-select {
        display: inline-flex !important;
        width: auto !important;
        max-width: calc(100vw - 58px) !important;
        vertical-align: baseline !important;
    }

    body.home-preview-page .hero-city-native-select select {
        width: auto !important;
        max-width: calc(100vw - 58px) !important;
        padding-right: 1.05em !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    body.home-preview-page .hero-copy > p {
        max-width: 100% !important;
        margin: 18px 0 0 !important;
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    body.home-preview-page .hero-copy > p br {
        display: none;
    }

    body.home-preview-page .hero-visual {
        order: 2;
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
        border-radius: 24px !important;
        box-shadow: 0 22px 48px rgba(50, 45, 117, .14) !important;
    }

    body.home-preview-page .hero-visual img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Stats become a thumb-friendly carousel. */
    body.home-preview-page .hero-stats {
        display: flex !important;
        gap: 12px !important;
        width: calc(100vw - 16px) !important;
        margin: 22px -16px 0 0 !important;
        padding: 0 16px 8px 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.home-preview-page .hero-stats::-webkit-scrollbar {
        display: none;
    }

    body.home-preview-page .hero-stat {
        display: flex !important;
        align-items: center !important;
        min-width: 176px !important;
        min-height: 86px !important;
        flex: 0 0 176px !important;
        padding: 16px !important;
        border-radius: 18px !important;
        scroll-snap-align: start;
    }

    body.home-preview-page .hero-stat .stat-icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 12px !important;
    }

    body.home-preview-page .hero-stat .stat-icon svg {
        width: 21px !important;
        height: 21px !important;
    }

    body.home-preview-page .hero-stat strong {
        font-size: 23px !important;
        line-height: 1 !important;
    }

    body.home-preview-page .hero-stat small {
        margin-top: 6px !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    /* Search/filter card */
    body.home-preview-page .vacancy-filter,
    body.home-preview-page .preview-filter {
        position: relative !important;
        z-index: 4 !important;
        width: calc(100% - 32px) !important;
        margin: 8px auto 0 !important;
        padding: 14px !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 46px rgba(35, 34, 85, .12) !important;
    }

    body.home-preview-page .filter-main-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.home-preview-page .filter-search {
        grid-column: 1 / -1 !important;
        min-height: 54px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
    }

    body.home-preview-page .filter-search svg {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }

    body.home-preview-page .filter-search input {
        min-width: 0 !important;
        font-size: 15px !important;
    }

    body.home-preview-page .preview-native-select,
    body.home-preview-page .filter-select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 9px 36px 8px 12px !important;
        border-radius: 14px !important;
    }

    body.home-preview-page .preview-native-select small {
        margin-bottom: 4px !important;
        font-size: 10px !important;
    }

    body.home-preview-page .preview-native-select select {
        min-width: 0 !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    body.home-preview-page .preview-native-select > svg {
        right: 12px !important;
        width: 11px !important;
        height: 8px !important;
    }

    body.home-preview-page .filter-submit {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 54px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
    }

    body.home-preview-page .preview-filter-tools {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    body.home-preview-page .all-filters {
        min-height: 42px !important;
        padding: 0 13px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
    }

    body.home-preview-page .preview-filter-tools > span {
        font-size: 12px !important;
    }

    body.home-preview-page .filter-bottom-row,
    body.home-preview-page .quick-filters {
        min-width: 0 !important;
    }

    body.home-preview-page .quick-filters {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: calc(100vw - 30px) !important;
        margin: 12px -14px -2px !important;
        padding: 0 14px 6px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.home-preview-page .quick-filters::-webkit-scrollbar {
        display: none;
    }

    body.home-preview-page .quick-filters > span,
    body.home-preview-page .quick-filters a {
        flex: 0 0 auto !important;
        font-size: 12px !important;
    }

    body.home-preview-page .quick-filters a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #f4f2ff !important;
    }

    body.home-preview-page .preview-advanced-window {
        position: fixed !important;
        top: auto !important;
        right: 12px !important;
        bottom: 12px !important;
        left: 12px !important;
        z-index: 1800 !important;
        width: auto !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 16px !important;
        overflow-y: auto !important;
        border-radius: 24px !important;
    }

    body.home-preview-page .preview-advanced-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.home-preview-page .preview-advanced-grid select,
    body.home-preview-page .review-form select,
    body.home-preview-page .review-form input,
    body.home-preview-page .review-form textarea {
        width: 100% !important;
        min-height: 50px !important;
        border-radius: 13px !important;
        font-size: 16px !important;
    }

    /* Mobile card carousels on the homepage. */
    body.home-preview-page:not(.category-as-home-preview-page) .vacancy-grid,
    body.home-preview-page:not(.category-as-home-preview-page) .category-grid,
    body.home-preview-page:not(.category-as-home-preview-page) .blog-side,
    body.home-preview-page:not(.category-as-home-preview-page) .review-list,
    body.home-preview-page:not(.category-as-home-preview-page) .employer-track {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        width: calc(100vw - 16px) !important;
        margin-right: -16px !important;
        padding: 2px 16px 14px 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.home-preview-page:not(.category-as-home-preview-page) .vacancy-grid::-webkit-scrollbar,
    body.home-preview-page:not(.category-as-home-preview-page) .category-grid::-webkit-scrollbar,
    body.home-preview-page:not(.category-as-home-preview-page) .blog-side::-webkit-scrollbar,
    body.home-preview-page:not(.category-as-home-preview-page) .review-list::-webkit-scrollbar,
    body.home-preview-page:not(.category-as-home-preview-page) .employer-track::-webkit-scrollbar {
        display: none;
    }

    body.home-preview-page:not(.category-as-home-preview-page) .vacancy-card,
    body.home-preview-page:not(.category-as-home-preview-page) .category-card,
    body.home-preview-page:not(.category-as-home-preview-page) .review-card,
    body.home-preview-page:not(.category-as-home-preview-page) .employer-card,
    body.home-preview-page:not(.category-as-home-preview-page) .blog-side > article,
    body.home-preview-page:not(.category-as-home-preview-page) .blog-card {
        width: min(86vw, 370px) !important;
        min-width: min(86vw, 370px) !important;
        max-width: min(86vw, 370px) !important;
        flex: 0 0 min(86vw, 370px) !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    body.home-preview-page .vacancy-card,
    body.home-preview-page .category-card,
    body.home-preview-page .review-card,
    body.home-preview-page .employer-card,
    body.home-preview-page .blog-main-card,
    body.home-preview-page .blog-side > article {
        border-radius: 20px !important;
    }

    body.home-preview-page .vacancy-card {
        padding: 18px !important;
    }

    body.home-preview-page .vacancy-top {
        gap: 11px !important;
    }

    body.home-preview-page .vacancy-top img,
    body.home-preview-page .vacancy-top .dynamic-logo-fallback {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        border-radius: 12px !important;
    }

    body.home-preview-page .vacancy-description h3 {
        font-size: 19px !important;
        line-height: 1.24 !important;
    }

    body.home-preview-page .vacancy-description p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    body.home-preview-page .salary strong {
        font-size: 22px !important;
    }

    body.home-preview-page .feature-chips,
    body.home-preview-page .tag-chips {
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none;
    }

    body.home-preview-page .feature-chips::-webkit-scrollbar,
    body.home-preview-page .tag-chips::-webkit-scrollbar {
        display: none;
    }

    body.home-preview-page .feature-chips > *,
    body.home-preview-page .tag-chips > * {
        flex: 0 0 auto !important;
    }

    body.home-preview-page .vacancy-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body.home-preview-page .vacancy-buttons .button {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 13px !important;
    }

    /* Category pages keep a vertical result list for easy scanning. */
    body.category-as-home-preview-page .vacancy-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.category-as-home-preview-page .vacancy-card {
        width: 100% !important;
        max-width: none !important;
    }

    /* Employer/category/blog/reviews sections */
    body.home-preview-page .employers-panel,
    body.home-preview-page .faq-panel,
    body.home-preview-page .calculator-panel,
    body.home-preview-page .cta-panel,
    body.home-preview-page .review-form {
        padding: 20px !important;
        border-radius: 22px !important;
    }

    body.home-preview-page .slider-controls {
        display: none !important;
    }

    body.home-preview-page .category-card header {
        gap: 10px !important;
    }

    body.home-preview-page .category-card h3 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    body.home-preview-page .category-card li a {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    body.home-preview-page .blog-grid,
    body.home-preview-page .blog-side {
        min-width: 0 !important;
    }

    body.home-preview-page .blog-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.home-preview-page .blog-main-card {
        width: 100% !important;
        max-width: none !important;
    }

    body.home-preview-page:not(.category-as-home-preview-page) .employer-track {
        transform: none !important;
    }

    body.home-preview-page .blog-card-media,
    body.home-preview-page .blog-main-card img,
    body.home-preview-page .blog-side img {
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
    }

    body.home-preview-page .reviews-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    body.home-preview-page .review-form {
        order: 2;
    }

    body.home-preview-page .review-list {
        order: 1;
    }

    body.home-preview-page .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.home-preview-page .review-submit,
    body.home-preview-page .cta-button {
        width: 100% !important;
        min-height: 52px !important;
        border-radius: 14px !important;
    }

    /* Calculator and CTA */
    body.home-preview-page .calculator-panel,
    body.home-preview-page .calculator-content,
    body.home-preview-page .calculator-aside,
    body.home-preview-page .cta-panel {
        min-width: 0 !important;
    }

    body.home-preview-page .calculator-panel,
    body.home-preview-page .cta-panel {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    body.home-preview-page .range-grid,
    body.home-preview-page .bonus-grid,
    body.home-preview-page .result-breakdown {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.home-preview-page .calculator-result,
    body.home-preview-page .result-main,
    body.home-preview-page .peak-card,
    body.home-preview-page .average-card {
        border-radius: 18px !important;
    }

    body.home-preview-page .cta-art {
        min-height: 180px !important;
        order: 2;
    }

    body.home-preview-page .faq-list details,
    body.home-preview-page .faq-list > div {
        border-radius: 15px !important;
    }

    /* UX hint added by JS for swipeable groups. */
    body.home-preview-page .dp-mobile-swipe-hint {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: -10px 0 14px;
        color: #6f63ff;
        font-size: 12px;
        font-weight: 750;
    }

    body.home-preview-page .dp-mobile-swipe-hint::after {
        content: '→';
        font-size: 16px;
        animation: dp-mobile-swipe 1.5s ease-in-out infinite;
    }

    @keyframes dp-mobile-swipe {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(5px); }
    }

    /* Safe tap targets */
    body.home-preview-page button,
    body.home-preview-page select,
    body.home-preview-page input,
    body.home-preview-page textarea,
    body.home-preview-page a.button {
        touch-action: manipulation;
    }

    body.home-preview-page input,
    body.home-preview-page select,
    body.home-preview-page textarea {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    body.home-preview-page .container {
        width: calc(100% - 24px) !important;
    }

    body.home-preview-page .section {
        padding: 44px 0 !important;
    }

    body.home-preview-page .hero {
        padding-top: 18px !important;
    }

    body.home-preview-page .preview-hero-title,
    body.home-preview-page .preview-hero-title--category {
        font-size: clamp(34px, 11.2vw, 46px) !important;
    }

    body.home-preview-page .hero-copy > p {
        font-size: 15px !important;
    }

    body.home-preview-page .hero-visual {
        border-radius: 20px !important;
    }

    body.home-preview-page .vacancy-filter,
    body.home-preview-page .preview-filter {
        width: calc(100% - 24px) !important;
        padding: 12px !important;
        border-radius: 19px !important;
    }

    body.home-preview-page .filter-main-row {
        grid-template-columns: 1fr !important;
    }

    body.home-preview-page .filter-search,
    body.home-preview-page .filter-submit {
        grid-column: auto !important;
    }

    body.home-preview-page .preview-filter-tools {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body.home-preview-page .all-filters {
        width: 100% !important;
    }

    body.home-preview-page:not(.category-as-home-preview-page) .vacancy-card,
    body.home-preview-page:not(.category-as-home-preview-page) .category-card,
    body.home-preview-page:not(.category-as-home-preview-page) .review-card,
    body.home-preview-page:not(.category-as-home-preview-page) .employer-card,
    body.home-preview-page:not(.category-as-home-preview-page) .blog-side > article,
    body.home-preview-page:not(.category-as-home-preview-page) .blog-card {
        width: 88vw !important;
        min-width: 88vw !important;
        max-width: 88vw !important;
        flex-basis: 88vw !important;
    }

    body.home-preview-page .employers-panel,
    body.home-preview-page .faq-panel,
    body.home-preview-page .calculator-panel,
    body.home-preview-page .cta-panel,
    body.home-preview-page .review-form {
        padding: 16px !important;
        border-radius: 19px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home-preview-page .dp-mobile-swipe-hint::after {
        animation: none;
    }
}