/*
 * Techpedya mobile UI layer.
 * This file is intentionally excluded from feed.html and has no desktop rules.
 */

@media (max-width: 767px) {
    :root {
        --tp-mobile-gutter: 20px;
        --tp-mobile-section-space: 48px;
        --tp-mobile-card-gap: 16px;
    }

    body.tp-mobile-menu-open {
        overflow: hidden;
    }

    .tp-mobile-header-inner,
    .tp-page-container,
    .tp-mobile-container {
        padding-left: var(--tp-mobile-gutter);
        padding-right: var(--tp-mobile-gutter);
    }

    .tp-mobile-status {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tp-mobile-menu-backdrop {
        position: fixed;
        inset: 58px 0 0;
        z-index: 98;
        width: 100%;
        border: 0;
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .tp-mobile-menu {
        max-height: calc(100dvh - 58px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .tp-mobile-menu__inner {
        padding: 8px var(--tp-mobile-gutter);
    }

    .tp-mobile-menu__list {
        gap: 0;
    }

    .tp-mobile-menu__item {
        min-height: 44px;
        border-bottom: 1px solid #111111;
    }

    .tp-mobile-menu__item:last-child {
        border-bottom: 0;
    }

    .tp-mobile-menu__feed {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        color: #00FFC8;
        font-weight: 700;
    }

    #mobileMenuBtn .tp-menu-line {
        transform-origin: center;
        transition: transform 180ms ease, opacity 180ms ease, width 180ms ease;
    }

    #mobileMenuBtn.is-open .tp-menu-line:first-child {
        width: 20px;
        transform: translateY(4px) rotate(45deg);
    }

    #mobileMenuBtn.is-open .tp-menu-line:nth-child(2) {
        opacity: 0;
    }

    #mobileMenuBtn.is-open .tp-menu-line:last-child {
        width: 20px;
        transform: translateY(-4px) rotate(-45deg);
    }

    .tp-page-hero {
        display: flex;
        min-height: clamp(420px, 58svh, 460px);
        align-items: center;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .tp-image-hero {
        background-position: var(--tp-hero-position-mobile, var(--tp-hero-position, center center));
    }

    .tp-page-kicker {
        gap: 8px;
        margin-bottom: 12px;
        font-size: 10px;
        line-height: 1.5;
    }

    .tp-page-title {
        margin-bottom: 12px;
        font-size: clamp(28px, 8vw, 32px);
        line-height: 1.12;
    }

    .tp-page-lead {
        max-width: 34rem;
        font-size: 16px;
        line-height: 1.65;
    }

    .tp-mobile-section,
    main#main-content > section.py-12,
    main#main-content > section.py-16 {
        padding-top: var(--tp-mobile-section-space);
        padding-bottom: var(--tp-mobile-section-space);
    }

    .tp-card-interactive:hover,
    .tp-card-interactive:focus-within {
        transform: none;
    }

    .tp-card-interactive:active {
        border-color: rgba(0, 255, 200, 0.30);
        background: rgba(0, 255, 200, 0.025);
    }

    /* Homepage: keep the classic mobile site available alongside Feed Mode. */
    #newsTicker {
        display: none;
    }

    .tp-home-main {
        padding-top: 58px !important;
    }

    .tp-home-featured {
        min-height: 420px;
    }

    #featured .tp-home-featured__content {
        min-height: 420px;
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .tp-home-section-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin-bottom: 20px;
    }

    .tp-home-section-header > :last-child {
        max-width: 100%;
    }

    #featured .tp-home-featured__link {
        gap: 16px;
    }

    #primeTitle {
        font-size: clamp(30px, 9vw, 34px);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    #primeSummary:not(:empty) {
        display: -webkit-box;
        overflow: hidden;
        font-size: 16px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    #top10Container {
        row-gap: 0;
    }

    #top10Container .log-item {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        gap: 12px;
        padding: 18px 0;
    }

    #top10Container .top10-rank {
        position: static;
        width: 26px;
        flex: 0 0 26px;
        font-size: 38px;
        text-align: center;
    }

    #top10Container .log-item > div:nth-of-type(1) {
        width: 88px;
        height: 64px;
        margin-left: 0;
    }

    #top10Container .log-item > div:last-child > div:first-child {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    #top10Container .log-item > div:last-child {
        min-width: 0;
    }

    #top10Container .log-item h3 {
        overflow-wrap: anywhere;
    }

    #fieldReportsContainer,
    #fieldManualContainer,
    #classifiedContainer,
    #essaysList,
    #ebooksGrid,
    #eventsGrid,
    #archiveGrid {
        gap: var(--tp-mobile-card-gap);
    }

    /* Filters and compact data controls. */
    .category-btn,
    .tp-book-action,
    .tp-mobile-inline-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #categoryFilters {
        scrollbar-width: none;
    }

    #categoryFilters::-webkit-scrollbar,
    .archive-filters::-webkit-scrollbar {
        display: none;
    }

    .archive-filters {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .archive-filter-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .archive-search-clear {
        min-width: 44px;
        min-height: 44px;
        right: 2px;
    }

    #libraryStats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }

    #ebooksGrid .tp-card-interactive > div {
        padding: 20px;
    }

    #ebooksGrid .tp-book-meta-action {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    #ebooksGrid .tp-book-action {
        width: 100%;
        flex: 0 0 auto;
    }

    /* Astronomy keeps one DOM source; stats visually continue below the hero. */
    .sky-events-hero {
        overflow: visible !important;
        margin-bottom: 148px;
    }

    .sky-events-hero [data-astronomy-stats] {
        position: absolute;
        top: calc(100% + 16px);
        left: var(--tp-mobile-gutter);
        right: var(--tp-mobile-gutter);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sky-events-hero [data-stat-card] {
        min-width: 0;
        padding: 10px;
        background: #050505;
    }

    .tp-astronomy-content {
        padding-top: 24px !important;
    }

    [data-filter-toolbar] {
        padding: 12px;
    }

    #btnFocusToday {
        align-self: stretch;
        justify-content: center;
    }

    #categoryFilters {
        gap: 8px;
    }

    #categoryFilters > .relative {
        min-width: min(240px, calc(100vw - 64px));
    }

    /* Generated policy/editor pages and footer links. */
    main#main-content > .max-w-\[800px\] {
        padding: 40px var(--tp-mobile-gutter);
    }

    main#main-content article.space-y-10 {
        row-gap: 32px;
    }

    #site-footer footer {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    #site-footer footer .gap-8 {
        gap: 20px;
    }
}

/* Keep the compact header navigation through tablet and small-laptop widths. */
@media (min-width: 768px) and (max-width: 1279px) {
    body.tp-mobile-menu-open {
        overflow: hidden;
    }

    .tp-mobile-menu-backdrop {
        position: fixed;
        inset: 58px 0 0;
        z-index: 98;
        width: 100%;
        border: 0;
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .tp-mobile-menu {
        max-height: calc(100dvh - 58px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .tp-mobile-menu__inner {
        padding: 8px 24px;
    }

    .tp-mobile-menu__list {
        gap: 0;
    }

    .tp-mobile-menu__item {
        min-height: 44px;
        border-bottom: 1px solid #111111;
    }

    .tp-mobile-menu__item:last-child {
        border-bottom: 0;
    }

    .tp-mobile-menu__feed {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        color: #00FFC8;
        font-weight: 700;
    }
}

@media (max-width: 359px) {
    :root {
        --tp-mobile-gutter: 16px;
    }

    .tp-mobile-status-label {
        display: none;
    }

    .tp-page-hero {
        min-height: 440px;
    }
}

@media (max-width: 767px) and (hover: none) {
    .tp-card-interactive:hover,
    .tp-card-interactive:focus-within {
        border-color: #1A1A1A;
        box-shadow: none;
        transform: none;
    }
}